Responsive images with srcset and sizes

Standard

Eric Portis has written the best tutorial/explanation I’ve seen yet on implementing responsive images. I gave up on making responsive images when working on my portfolio because I couldn’t find consistent and understandable best practices. Now I may go back and try it again.

The key takeaway is that you declare the format of the image with srcset and then use the sizes attribute as the media query.

The tutorial: Srcset and sizes

A quick reference example:

Quick tip: Use Markdown with Drupal

Standard

To use markdown on Drupal, you apply it as a text filter. Your content stays as-is then gets processed (through a filter) using Markdown before being displayed on your site as html.

Install a markdown filter module

  • Find a filter module like Markdown Filter
  • Copy link to download tar.gz link
    copy-link
  • In the modules area, Install a new module, Paste in the url
    install paste-url

Enable the markdown module (in module section)

enable

Apply markdown filter (in configuration section)

  • In the configuration section, go to the Content Authoring, Text format section
    config
  • Add a new text format
    add_text_format
  • Make sure you check markdown
    text-format-options

Select markdown as a text format in your content type

manage-fields

Drones, GPS, and Image processing, oh my!

Standard

I watched the announcement for the DJI Inspire I drone and I was amazed. The drone itself is pretty awesome, but I think it’s the interplay between hardware and software that I’m truly amazed at. Managing positioning w/o GPS + on/off manual control is very tricky much less doing it in the air!

In addition, the software demoed from Pix4D is mind-boggling. To be able to capture images from a drone and generate a 3d model is crazy awesome. I love the present where these concepts are actually being brought to market!

Feminism

Standard

Just attended a meeting promoting Women in the workplace and I’m annoyed at some poor messaging – leading to some feeling that men are excluded or contributing to the problem. It’s super important to keep the messaging focused on inclusiveness of women/men. Let’s not marginalize men who’d otherwise agree to the ideals.

How can we affect change the world, when only half of it is invited or feels welcome to participate in the conversation? -Emma Watson

Good

  • Hold sessions for skills needed by women but not “gender targeted”, all encouraged equally to participate
  • Highlight how gender inequality affects both men and women
  • Explain situations of gender stereotypes perpetuated by both men and women

Bad

  • “Women only” skill sessions
  • Highlight only gender problems that women face
  • Explain gender stereotypes perpetuated only by men

Thoughts: comparing skills, contributions

Standard

2 thoughts.
On comparing skills
Someone can always do things better than me and I must learn to have the confidence to accept that. Acceptance means not being reckless and stubborn about my position but also not being frozen and submissive to the status quo.

On contributions
For years I’ve struggled with my thoughts on community service but I think I finally have a question that I need to answer, “How do I want to contribute?”. I need to hold off the loudspeaker of news telling only problems and let myself decide on how to help on my own terms.

Git repo on remote server

Standard

I’m beginning to really love git. However, I’m still a newbie especially when it comes to scalable architecture. How do I deploy my files onto my shared server using git?

Steps

  1. Be able to SSH into your server without asking for a password
    • Verify or create a public RSA key (on your machine)
      • This is found (on your machine): ~/.ssh/id_rsa.pub
    • SSH onto your server (via terminal)
      • ssh -p 2222 username@domainname.com
    • Put the key into a authorized_keys file (on your server)
      • This would be found (server): ~/.ssh/authorized_keys

Resources I cobbled together

http://blog.realtweeter.com/use-git-on-hostgator-shared-hosting-account/
http://www.arlocarreon.com/blog/git/push-git-repo-into-shared-hosting-account-like-hostgator/
http://git-scm.com/book/en/Git-on-the-Server-Setting-Up-the-Server

Icon font character encoding

Standard

Using icon fonts, had some trouble figuring out how to display as a character vs in css content. Basically you can swap out &#x with \. CSS is more proper due to accessibility.

In HTML, using hex:

In CSS, using content property (you need to use utf-8 that looks like \)

Clickable shortcut to change hosts file

Standard

I need to regularly edit my mac’s hostsfile (multiple times a day). I want to make it easy to get to the file, so I created a clickable alias and put it in my dock. Here’s a guide to creating it.

Process:

  1. Create command file

    The command file runs a terminal script. In this case it opens the host file in nano with admin rights

    • In text edit, create a file with the following text:
    • Save the file as:
  2. Make command file executable

    • Open up Terminal.app (Applications/Terminal)
    • change directory to find your hostfilescript.command
    • type in
  3. Using the command file

    • Double click the icon for hostfilescript.command to execute the command. This will ask for your computer’s password.
    • edit the hosts file. hit ‘control + o’ (o as in oscar) to save. hit ‘enter’ to confirm. hit ‘control + x’ to exit.
    • You can drag .command file to your dock for easy access
    • You can change the icon for the file to something pretty by right-click > get info. Copy/paste a pretty image for the icon

Side effects:

  • I can only edit the hosts file in nano. I’d like to use sublime or even text edit, but I haven’t debugged permissions yet.

Download json button

Standard
Create a link that downloads a .json file

Create a link that downloads a .json file

On several of my personal projects I work with javascript objects so it makes sense to use json as a backup/output format. However, I found that I couldn’t easily figure out a way to actually download a file containing said data. I’ve seen it done, but didn’t know the right google query and was sifting through lots of stack exchange posts. I figure it’d be nice to post some easy code here and their references.

JSFiddle code

In Html:

In JS:

The download= attribute in the link sets the file name of the .json file.

On click,

  • I turn jsContent into Json using the stringify command
  • I create a blob of the json object (which makes it a file)
  • I generate a url for that file blob
  • Finally, I navigate the document to the download url which initiates the download.

References:

Save json string to client pc (using HTML5 API)

The Basics of Web Workers