- CodePen’s CSS by Chris Coyier on CodePen
- The Mobile Web should just work for everyone
- How we make RWD sites load fast as heck
- Summer 2014 State of the Union: Ecommerce Page Speed & Web Performance [INFOGRAPHIC]
- On Internet Explorer supporting -webkit- vendor prefixes
More info on the IE webkit changes. - Windows Phone will soon render websites a lot more like an iPhone | The Verge
- Responsive, Fluid-Width, Variable-Item Navigation with CSS
- A Look At The Current Responsive Design Landscape (And How To Speed It Up)
- When WordPress Meets Vagrant: VVV
- Debugging in Git with Blame and Bisect
- No JS Mini Demos | scottohara.me
- The Principles of Adaptive Design | Brad Frost Web
- Add a Special Bookmark in iOS to Zoom on Sites that Don’t Allow It
Don’t restrict zooming, otherwise your users will resort to this. - RWD%20Bloat%20Part%20II
- BrightExplorer Adds Clutter-Reducing Tabs to Windows Explorer
- Learn the Basics of Color Theory to Know What Looks Good
- You May Be Losing Users If Responsive Web Design Is Your Only Mobile Strategy
Responsive isn’t just a checkbox. - Responsive Images: Use Cases and Documented Code Snippets to Get You Started
- “Making It Right”: A New Smashing Book on Product Management For A Startup World
- Sponsored: Tower 2.0 is Here – To Make Git Easy!
Tower is a great app if you don’t dig the command line for Git. It’s a good fallback for complex git commands at the very least. - Vagrantfile Explained: Setting Up and Provisioning with Shell
Learning html/css
My wife had sent me a text asking me for a list of html/css (aka Front-End Development) resources for someone she knew. It didn’t take too long to get a list together of things I use, but I thought I really should put this out for anyone else.
Free Courses:
Remember, Google is your friend. If you have a problem, chances are someone else has had the same issue, so Google the question you are asking. I tend to gravitate to these sites:
- CSS Tricks
- Web Platform
- MDN
- Stack Overflow
- Stay away from http://www.w3schools.com. Explanation found at W3Fools
Paid Learning:
Podcasts:
Tools:
- Sublime Text (code editor)
- Tuts+ has a great tutorial on using Sublime Text
- If you are on a Mac, Coda is a good starting point.
If you are looking for people to follow, check out my followers on Twitter (they are mostly Web people).
Feel free to comment if there are some great tools or resources that you think I missed.
Article Roundup for 04.11.2014
- Exclusive: Apple vs. Samsung docs reveal Galaxy Tab was a flop and Samsung knew it
“Reminder: device shipments are not device sales.” -lukew - Introduction to WordPress App Themes – Tuts Code Article
Wordpress seems to think you can reliably write web apps in WordPress. I’m on the fence whether this is a good idea, but there is some credence to it, as this article exists on nettuts. - Could switching fonts really save the US government $400 million?
- Best of Sublime Text 3: Features, Plugins, and Settings ♥ Scotch
All great things on ST. - The decline of the mobile web
“Perhaps it’s not HTTP and back end web that is in danger, but it’s the front end that’s in danger.” -Chris - Facebook will punish publishers who ask for Likes and Shares
- Comic Sans gets a facelift
IMO, the only reason Comic Sans “sucked” was because it was way overused and came on every Windows machine. - How Does Web Page Speed Affect Conversions [INFOGRAPHIC]
See kids, performance IS important… but I’m sure you already knew that. - How to Create a Circular Progress Button
Cool! - 6 Free Tools for Testing Website Speed
- Heartbleed exploit tl;dr
A summary of what to fix if you have a server running openssl. - Creating Style Guides
- New Rule: Every Desktop Design Has To Go Finger-Friendly (Global Moxie)
- WordPress Ultimate Timeline – Create Timelines for your WP Site
- Is Today the Beginning of the End for IE8?
Let’s hope so! - Microsoft is finally catching up to the future
Don’t count Microsoft out on mobile. - 10 fresh JavaScript/jQuery plugins you should definitely check out
- Suppressing the 300ms click delay
The 300ms delay doesn’t do much for the mobile web. - Involving Clients In Your Mobile Workflow
- Choosing the Right Plugin for Your Next WordPress Project
Plugin-itus can creep into your site. These are some good tips for developers. - What is OOCSS?
Not all developers are dig the Object-Oriented CSS for legitimate reasons, but I like his take on it: “I’ve questioned myself whether or not I’d rather have DRY CSS or DRY HTML, but have come to the conclusion that DRY CSS using the object oriented methodology is preferable due to its maintainability. Granted, it can be slightly annoying to modify an element’s classes, but as long as you’re not completely “describing in the browser“, it’s not too bad.” - WebGL Filter
An online editor using WebGL. - Quick Tip: Using Dashicons for Menu Items – Tuts Code Article
It’s seemingly effortless to add an icon to your Custom Post Type in WordPress, with a plethora of icons to choose from with Dashicons. - Eric, I am so very sorry
A friend of Eric’s thoughts… - The Truth
For those that don’t know, Eric Meyer has been essential in the whole Web Standards Movement. His daughter has been suffering with a brain tumor for some time now, and it looks like he had to give some bad news to her yesterday. My thoughts go out to Eric and his family. Can’t even imagine… - Crazy Rumors: Internet Explorer Might Come To Android
That’s as rediculous as Safari coming to Windows. Oh wait, that happened and failed. - Naming UI components in OOCSS – CSS Wizardry – CSS, OOCSS, front-end architecture, performance and more, by Harry Roberts
- CSS performance test: Flexbox v CSS Table – Fight!
- Minimal Form Interface
Interesting take on multi-input forms. I’m not sure how I feel about the UX because it could feel like a never-ending form to the user. But then again, they do show 2/6 at the bottom. - Store | Macaw
The supposed gui for web designers is out. $179, but TutsPlus has a coupon code for $30 off: TUTS (Expires April 5) - 7 Steps to an Effective Landing Page
- Stubbornella » Blog Archive » The magical command line
Interesting take on reducing the learning curve of the command line. - A Creative Grid System With Sass and calc()
- 12 websites that prove RWD and performance CAN play well together
- Migrating from PHP to Node.js — GRAND Things — Medium
- Why RWD looks like RWD – TimKadlec.com
- Some stuff that doesn’t work between the DOM and Shadow DOM
- Is Building a Non-Blog Website with WordPress a Hack? |
- Responsive Table – CodePen
Tables are notoriously hard to get looking decent on small screens. This is a cool css-only technique. - webdesignrepo – a compact list of helpful webdesign links
- How To Plan Your Next Mobile E-Commerce Website | Smashing Mobile
- CSS Diner – Where we feast on CSS Selectors!
This one is fun; gets progressively harder. - Batch Upgrading WordPress installs on server | Tvenge Design
- Mozilla Kills Firefox UI For Metro
They say because it’s a “lack of interest.” Does this say something about Metro? - Responsive Full Width Tabs
These are just designed well. The icons you choose need to be very strong in this treatment because the text goes away on smaller screens. - Are Most Winning A/B Test Results Misleading?
- Knock knock! Who’s there? … 1Password.
1Password is the bomb-diggity. Having all of these WordPress, Server, and other site logins, its nice to have a tool that stores them all, so you can make them random strings for sooper-security. - The Magnifying-Glass Icon in Search Design: Pros and Cons
Some great recommendations on designing search boxes. - My Advice to Young Designers and Developers
Andy Budd: “Should they continue their studies or jump straight into the labour market? I usually tell them that ability trumps education and I don’t put much faith on the current raft of tech degrees. So I’d prefer to see three years of experience than three years of study.”That being said, I’ll also point out that University is about much more than just acquiring a skill. It’s a formative experience that will shape your attitudes for the rest of your life. It’s also a huge amount of fun…” - You jacked my scroll bro
- 36 Adobe Illustrator Tutorials on Vector Design
- Designing forms that convert, 7 proven techniques
- Waterfalls 101: How to use a waterfall chart to diagnose your website’s performance pains
- Writing Elegant and Readable Code
Remember, your code should be readable for the next developer, or even yourself when you go to look at it again in 6 months. - Firefox 28 released w/ Mac OS X Notification Center support for web notifications
This is another step getting this closer to mass usage. Right now it just works with OSX, but maybe if iOS, Android or Windows browsers ever adopt it, it could maybe be a thing. - Inspiration for Item Transitions
- Revisiting JavaScript Minification
tl;dr Still do it. I thought maybe gzipping would make minification less relavent, but it still saves a lot of bytes, even after gzipping. - Fluidity
Proving the point that HTML is almost responsive out of the box. - An Introduction To Deploying WordPress with Mina
See ya, post-receive hooks. Mina is a deployment tool for websitessites, and seems to be a little more robust. You could apply this technique to a non-wordpress site too. - A Q&A on the Picture Element
- JSONSelect
Selecting json like css. Great idea! - Setting Up an SSH Key
Where was this screencast when I had to figure this whole thing out on my own. - Nailing the Detail: Bauhaus Design
PSA: You shouldn’t just willy nilly upgrade your WordPress installs. It’s best to test your upgrade in a staging environment.
Every time a WordPress update comes out, I cringe having to update all the sites on my VPS server. I finally hunkered down today and got a shell script written to upgrade all WordPress installs on a server.
This solution will upgrade on one server, so If you have WordPress installs sprawled across multiple servers, you might want to look into a service like ManageWP.
The key is wp-cli
wp-cli is a command line tool that helps streamline WordPress tasks like upgrading, installing and configuring.
Installing wp-cli
Note: Right now, I haven’t successfully installed wp-cli globally, so for now, you will have to install wp-cli for each user on your server. Add a comment to this post if you have successfully done a global install.
Update: wp-cli changed their installation and you can now do a global installation.
Follow the wp-cli installation guide to install globally.
Creating the shell script
We’ll create a script that will upgrade wordpress, the database, all plugins, and all themes. You can edit this accordingly in the script below.
Create the file
$ vim push_all_wordpress_sites.sh
Paste the following into your new file:
#!/bin/bash
paths=(
/home/USERNAME/path/to/wordpress
/home/USERNAME/path/to/anothor/wordpress
)
for PATH_STRING in "${paths[@]}"
do
:
# regex to extract username from path
re="\/home\/([^/]+)\/"
if [[ $PATH_STRING =~ $re ]]; then
# change to correct directory
cd ${PATH_STRING}
echo "Backing up" ${PATH_STRING} "Database..."
/usr/bin/sudo -H -u ${BASH_REMATCH[1]} zsh -c '~/.wp-cli/bin/wp db export'
# prompt user of upgrade
echo "Upgrading: " ${PATH_STRING}
# do wp-cli magic
/usr/bin/sudo -H -u ${BASH_REMATCH[1]} bash -c '/usr/local/bin/wp core update'
/usr/bin/sudo -H -u ${BASH_REMATCH[1]} bash -c '/usr/local/bin/wp core update-db'
/usr/bin/sudo -H -u ${BASH_REMATCH[1]} bash -c '/usr/local/bin/wp plugin update --all'
/usr/bin/sudo -H -u ${BASH_REMATCH[1]} bash -c '/usr/local/bin/wp theme update --all'
fi
done
Note: This script assumes that your paths are full paths including the username folder.
As you’ll see in the “paths” variable in the top, you’ll want to change those placeholders to real paths on your server where your WordPress installs are located.
Executing the script
From here you just need to change the permissions of your new file:
$ chmod 755 push_all_wordpress_sites.sh
Then, you can run it anytime you want to upgrade all of your WordPress installs:
$ ./push_all_wordpress_sites.sh
Article Roundup for 03.17.2014
- Are We Thinking About Digital All Wrong? | Smashing Magazine
- Collective #107 | Codrops
- Object-Oriented Programming in WordPress: Classes
- Advanced Grunt Techniques
- Accessing localhost From Anywhere
- My Current CSS and Sass Styleguide
- #132: A Quick Useful Case for Sass Math and Mixins | CSS-Tricks
Chris has always been a proponent of simple grid systems. Here he shows you how to do a simplish grid with sass and math. - Tilted Content Slideshow
- Does the web need a bill of rights?
- SEO Disasters: What Happens When Google De-Indexes Your Site
- Debunking the myths of web typography
- Feedbin’s First Year
“The next time you read somebody declaring the death of RSS, you can just smile to yourself as you mark it as read in your favorite reader and move on to the next article.” - Taking A Second Look At Free Fonts
- C.ROWE – Wireframe Kit
CSS-based wireframes. - The Art of HTML Semantics: Part 1 – KevinSuttle.com
I feel like I’m still using and wrong, - Home · kemayo/sublime-text-git Wiki
This package lets you use basic Git commands inside Sublime Text. No need to have a terminal open. - Device-Agnostic
- Using Dropbox to Connect a Team
Dropbox is the best thing since sliced bread… IMO. - Where to learn WordPress development
As an avid Shop Talk Show listener, I’m familiar with their phrase, “Just build websites,” as it’s their go-to answer to the question, “How do I earn ______?” - WordPress › WordPress 3.9 Beta 1
Check out what will be the next release of WordPress. - Grunt and gulp tasks for performance optimization
- The Latest in Web Font Trends
If there are too many fonts out there to pick from, here are some of the most popular. Or depending how you look at it, the ones to avoid. 🙂 - HTML5: Vibration API
- Lessons Learned From Organizing a Meetup
- Sass 3.3 (Maptastic Maple)
Source maps one of the big features. - How to manage a distributed team | Web design | Creative Bloq
- Auto-preloading: One weird trick to make your pages up to 70% faster
- Flexbox Bar Navigation Demo
- 5 powerful techniques for responsive web design
You could argue that some of these are less-than-ideal, but we’ve all used them. - A Detailed Introduction To Custom Elements
- The best free WordPress plugins for March 2014
- Recommendations for improving WordPress comments
All great recommendations. - HTML5 galleries to land in WordPress 3.9
Cool new feature - giakki/uncss
Great tool to find unneeded css selectors - How to Use the HTML5 Full-Screen API (Again)
- The Great Web Slowdown [INFOGRAPHIC]
- HTML5: Battery Status API
- Border Animation Effect with SVG
Another great animation from Codrops - The Beginner’s Guide to Setting Static Front Pages in WordPress
This is a pretty basic WordPress thing, but it’s the first thing you want to do when creating a non-blog site. - Responsive Strategy
- Screencast: CSS Animation Events Explained! | Val Head – Designer, Consultant and Speaker
- Basics of CSS Blend Modes
- Custom Controls in the Theme Customizer
Make your Theme Customizer more custom. - Volvo shows off Apple’s CarPlay coming to XC90 SUV, says Wi-Fi connections coming soon (Video)
I don’t see a web browser in here, but there could be one down the “road”. (Zzzzzinnnngg) Kids, you are all using responsive design, right? - Too easy – didn’t learn – Christian Heilmann’s keynote at jQuery Europe 2014
- Media Temple’s new Managed WordPress Hosting Service
Managed WordPress hosting is invaluable, but it’s expensive. (mt) has an affordable package. - Data Monday: What Percent of Page Views Share on Social Media?
I knew people didn’t use social buttons on websites that much, but didn’t realize the numbers were this low. - CSS Gradients
Brush up on your CSS gradients folks. - How To Use Analytics To Build A Smarter Mobile Website
- CSS performance revisited: selectors, bloat and expensive styles – Author and responsive web developer Ben Frain
Bangup article! tl;dr: CSS selector optimization is a fools errand. Lots of unused styles is taxing.”With CSS, architecture is outside the braces; performance is inside.” - The Beginner’s Guide to WordPress SEO by Yoast: On Page SEO
Yoast is a very powerful tool for WordPress. - CodeKit: THE Mac App For Web Developers
CodeKit 2 is out! Now that I’m on Grunt.js, not sure I’ll switch back, but looks like it has some pretty cool features. - Clean out your Sass junk-drawer | Roughdraft.io