- What if you drop IE8? :not(.foo)
- Chromium Blog: Chrome 34: Responsive Images and Unprefixed Web Audio
Fine… A… Lee! - Check Out Atom, Github’s New Development Editor – Tuts Code Tutorial
- Atom
Just when we thought we got comfortable with a text editor, GitHub creates Atom. - Only 90s Web Developers Remember This
This is sooper funny! A little vulgar in places, but lots of poking fun at web design techniques of yesteryear. - “Running WordPress Locally” Talk | Tvenge Design
I did a talk at our local OKC WordPress Meetup. These are the slides. - 5 Great Google Analytics Alternatives
- Source | PNG Hat
A better image exporter for Photoshop - links/sublime.md at master · velvia/links
Some good Sublime Text tips and tools - Useful Learning Resources For Web Designers | Smashing Magazine
- Varying-Vagrant-Vagrants/VVV
A starter kit for Vagrant - Grid
If you are new to responsive web design, this explains it well. - UI Animation and UX: A Not-So-Secret Friendship · An A List Apart Article
Val knows her stuff stuff with css animations. - Understanding placeholder selectors
- dev.w3.org
Whoa! This is the biggest issue responsive design usability; you can’t make assumptions on touch/hover. Can’t wait to see this get into spec. - What Nobody Told You About Sass’s @extend
- Sass: Mixin or Placeholder?
- Making SSH logins super-quick | Tvenge Design
“Running WordPress Locally” Talk
Thanks to all that came out to see myself and Morgan Estes at the OKC WordPress Meetup tonight. It was a lot of fun seeing everyone.
Other Links
There were some links that came up that were not in the slides:
- XAMPP: Free lamp stack for all OS’s.
- Git: Popular version control system.
- Tower: OSX GUI for Git
- SourceTree: Free GUI for Git for all platforms
Article Roundup for 02.04.2014
- Stock photos that don’t suck — Medium
- SVGMagic – Great jQuery SVG fallback plugin
I had found a Grunt extension that did this, but didn’t know it could be done on the clien side. - Feature-zilla! Will Featureful Kill Usable on the Web?
- Google releases tool to let devs bring Chrome apps to iOS & Android
Another tool to make cross platform “native” apps. - As CNN mobile traffic hits 40%, editor calls web vs. apps debate ‘red herring’ | Poynter.
- Dot Navigation Styles
- Google Map Builder by MyNameIsDonald – Build a Google Map for your website in just a few clicks.
- Beyond Bootstrap and Foundation: Frameworks You’ve Never Heard Of
- OptionTree WordPress Plugin
I had an old site that I needed to add a Theme Option to quickly. Ideally you want to use the Theme Customizer, but this isn’t bad for a quick and dirty solution.. - 10 HTML Tags You May Not Be Using
- What is an MVP (Minimum Viable Product)?
- 2014: The year we all go 4K
Mo pixels, mo problems. - Fast Enough – TimKadlec.com
100ms is how long you have for the user to feel like the task was instantaneous. 1.0 second is how long you have for the user’s state of flow to remain uninterrupted (though the delay will still be noticeable). 10 seconds is how long you have before the user loses interest entirely and will want to multitask while the task is completing. - BeyondCompare for OSX
The new beta is now supporting Mac! - Rethink the Airline Boarding Pass | PeterSmart
Very smart. - How QuarkXPress became a mere afterthought in publishing | Ars Technica
Not exactly web related, but most of us coming from the print world can appreciate this. - Intel Interview – “Mobile First” – Luke Wroblewski wrote the Book | Showyou
- Off Topic: Target point-of-sale terminals were infected with malware | PCWorld
It sounds like the admin logins to the Target POS may not have been using two-factor authentication, which would have made a brute-force attack easier (even if only accessible over VPN). My first question was, “Why is Target holding credit card numbers?” But it sounds like the malware was scraping RAM on the machines, so the info wouldn’t need to be saved in order to be compromised. Many lessons will be learned from this, and Target is the one that will take almost all of the financial hit (Est. $50 million by Gartner financial fraud analyst Avivah Litan) for this. Consumers will more-than-likely not be affected financially at all. - Ugh. Checking out files with Perforce | Tvenge Design
After using Git, I’ve found that I really don’t enjoy Perforce. This is one of my worst annoyances with it (and a pseudo-fix). - Chrome number of hosts limit
paul_irish: Chrome re-confirmed that the 6 connections-per-host limit is the right magic number. - Facebook buys Branch
Nother Acqui-hire. - Ten reasons we switched from an icon font to SVG – Ian Feather
Let’s face it, the easiest way for vector icons is Font Awesome. Maybe we should start using SVG’s. - Discover the world’s best mobile UX
- CSS Blend Modes could be the next big thing in Web Design — Web Design Technique — Medium
- HTTP Archive – Interesting Stats
Average image weight per webpage is now over 1MB. - UX is not UI | Experience Design at Hello Erik
Don’t get the two mixed up. They are very different. - Spacegray — A Hyperminimal UI Theme for Sublime Text
My new favorite ST theme. And it’s “flat” design! Everyone loves “flat” cuz it’s not skeuomorphic! Flat! FLAT!!!!! - Front End Ops – Ian Feather
No more throwing code over the wall. - Typecsset
I love what Harry Roberts is doing with vertical rhythm. It’s pretty painless once you put the time in on your initial css reset. - Colors
Those generic CSS colors are pretty ugly. These are ones that look a little nicer. - Bulls**t Overlays | Brad Frost Web
Are overlays the new carousels? - The 20 biggest logo redesigns of 2013 | Logo design | Creative Bloq
Minneapolis design shop Duffy did the MOA rebrand. - Setting Up a New Mac on OSX for Web Development
- Endangered species of the Web: the Link
LInks are what made the web great. Let’s not forget about them and use them properly. - 50 Problems In 50 Days: The Power Of Not Knowing
- SVG Drawing Animation | Demo 1
- SVG Files: From Illustrator to the Web – Design & Illustration – Tuts Tutorials
- 4 UX mistakes that are killing your conversions
- Web Performance Waterfalls from 10,000 Feet
- Best WordPress snippets, hacks and tips from 2013
- Data Monday: Mobile Holiday Shopping 2013
- What is the DOM?
- Happy 17th Birthday CSS | Web Directions
SSH access is pretty essential these days in web development. Especially if you have root access to a server, or using tools like Grunt, Git or Sass. But signing into them can be very time consuming.
I just recently put together a straightforward workflow (OSX and Linux) for logging into a server via SSH.
Using an SSH Config file
The SSH Config file saves your usernames, hosts and ports into a single config file.
- If the config file isn’t there, create it by running these commands:
$ mkdir ~/.ssh # this directory may already exist $ vim ~/.ssh/config
- Now you can edit this file and add the following code for each server you want to connect to:
Host ryan HostName ryantvenge.com Port 22 #The default port for SSH. User user_name
- Now, you can simply type
ssh ryan
to connect to the server.
Creating SSH Keys
But it is still asking for your password. So let’s get rid of that step too by creating an SSH key. SSH keys are a great tool to secure access to servers. It gives you the ability to use super-secure passwords because you don’t have to remember them. But they are kind of a pain to setup.
Run the following comands:
$ ssh-keygen -f ~/.ssh/ryan -C "ryan"
$ ssh ryan 'mkdir ~/.ssh && touch ~/.ssh/authorized_keys #these files may already exist, so you may get an error. Don't worry
$ cat ~/.ssh/ryan.pub | ssh ryan 'cat >> .ssh/authorized_keys'
- The first command creates the key. For simplicity’s sake, I named the key the same name as our SSH config shortcut name, “ryan”. When asked for a passphrase, simply hit return twice.
- The second command is creating a spot on the server to hold your ssh key.
- The last command copies your public key up to the server.
And Bob’s your uncle, you are all done! No more typing passwords in when pushing and pulling Git repos. No more forgetting IP addresses of servers. And best of all, you can now make your passwords sooper secure 50 character random strings, because you won’t need to type time in manually on a regular basis.
Update: If you are using git, you’ll need to update your remote path with the shortcut name, otherwise it won’t use your ssh key:
url = ssh://SHORTCUT_NAME/path/to/git/repo
SVG Wonkiness in Safari 5.1
I had a client who was still rocking an old school iMac that was running OSX Snow Leopard. That’s the latest version you can install, and as a result, can only upgrade to Safari 5.1. As I was using SVG in <img>
tags on this site, they were rendering really oddly.
<img src="http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.svg" onerror="this.onerror=null; this.src='http://superiorcampers.com/wp-content/themes/supcamp_40/img/logo.png'" alt="Superior Campers">
It was as if the browser was adding padding: 50px 0;
to the <img>
but I couldn’t override it. I found a quick and dirty jquery fix for this. This works assuming you have an PNG fallback for your SVG’s, which you should for IE8 (at least as of the time of this writing).
//safari 5.1 polyfill hack
$(window).load(function() {
//all images with .svg
$('img[src*=".svg"]').each(function () {
var
$self = $(this);
//If rendering really tall
if ( $self.height() > 900 ) {
//go to IE png fallback
$self.attr('src', $self.attr('src').replace(/.svg/, '.png'));
}
});
});
Because Modernizr showed this browser as supporting SVG, the hack is to look at the .height() of the <img> after all resources are loaded, and if it’s over 900px, fallback to the PNG. Not pretty, but it fixed the issue. Let me know if you found a better fix.