Category: Links of Interest

Whoa! Lots of links this week. There was lots of Great content.

Sidenote: I’m heading to Raleigh tonight to watch the Minnesota Wild take on the ‘canes. Go Wild!

1. Automating Style Guide-Driven Development
   The best type of style guide is the one that’s automatically generated for you. 🙂
2. Organising Your Grunt Tasks | Always Twisted. Front-End Development.
   “Don’t run everything all at once.” I can relate to that. Everytime I start u I’m heading p my grunt/gulp tasks, I have to wait for it to optimize my images and other assets for the 5 billionth time.
3. Design Principles
   A refresher on this is never a bad thing.
4. vivus.js – svg animation
   “Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.”
5. More Spartan Screenshots Leak
6. A Comparison of JavaScript Linting Tools
   tl;dr y choice of these four is ESLint. JSLint is strict and not configurable, whereas JSHint is lacking the extension mechanism.
7. 5 Things to Consider before Going Freelance
8. https://http2.golang.org/gophertiles?latency=200
   See how fast http2 is
9. DevTools. For Designers!
10. Which Code Editors Are Best for Python?
11. Easy URL Parsing With Isomorphic JavaScript
12. Create a Simple Popup Window HTML5 Dialog Tag
13. Helps designers pair Google Fonts together. Beautiful Google Font combinations and pairs.
14. 5 First-class Free Fonts For Your Next Project
15. I like how percentage background-position works
16. HTTP2 for front-end web developers | Matt Wilcox, Web Developer & Tinkerer
    tl;dr The long and short of it is; when you build a front-end to a website, and you know it’s going to be served over HTTP2 – you need to ensure you’re not using legacy HTTP1 performance techniques that are going to harm the site under HTTP2.
17. Playful Trampoline Effect
    Cool!
18. localFont
    Implement localStorage web font caching in seconds.
19. Password Masking
    An actual, real-world study.
20. Ditch the [].forEach.call(NodeList) hack
21. Design Like You’re Right. Listen like you’re wrong.
22. Apple’s Web?
23. Flexbox in 5: Fab Flexbox Tutorial
24. What Does Pebble Time Mean For Developers?
25. Designing for Performance:Can We Have it All?
26. Upfront is a game changer for WordPress
27. What’s New in AngularJS 2.0
28. Microsoft’s Internet Explorer successor demonstrated in leaked video
29. Designing for Humans — Accounting for Inclusivity and Accessibility
30. Making it easier for Enterprise customers to upgrade to Internet Explorer 11 — and Windows 10
31. Taking Steps
    “The things we build are almost always meant to make things faster, more efficient, easier. Perhaps, sometimes, they should be harder.”
32. Today’s Readings
    Aaron talks a lot about WordPress image plugins. Something I’ve been very curious about lately, especially with load time.
33. RICG Responsive Images For WordPress
    responsive images in WordPress? yes please!
34. Plyr – A simple HTML5 media player
35. Swiper – Most Modern Mobile Touch Slider
    wow. works really well on touch.
36. Progressive Enhancement is not about JavaScript availability
37. Clocks with css and js
38. Extending the Color Cascade with the CSS currentColor Variable : Adobe Dreamweaver Team Blog
    I’m pretty sure I didn’t know this existed in the CSS spec. Really cool!
39. Setting Up a Mac Dev Machine From Zero to Hero With Dotfiles: Part 2
    I loved the first article written about this.
40. The most popular WordPress plugins
    Its always interesting to know the most popular plugins.
41. HipChat + Atom = How to Remote Pair-Program like a Boss
    A good reason to start using Atom? Code sharing without the screensharing.
42. Microsoft’s next Windows 10 preview will include the Project Spartan browser
43. package.json: an interactive guide – browsenpm.org
    //browsenpm.org/package.json
44. Inquisitive: 27: Behind the App #1: History
    This is a great series from Myke Hurley about how the hell the App Store became so popular. As web people, we are sometimes baffled how well downloaded apps can do when most of the time a website can accomplish the same tasks.
45. The Dirt: Productizing Your Services
    Great talk about how you sell your services.
46. Non Breaking Space Show: 48: Micah Godbolt and Front-end Architecture
    In this episode, Micah talks about front end architecture and how important it is to document and organize.
47. A break from the past: the birth of Microsoft’s new web rendering engine
48. Inspiration for Button Styles and Effects
49. I’m a web developer. Not an engineer.
50. Considerations on Choosing a University CMS
    This is probably the hardest use case for picking a cms.
51. Do You Really Need an App for That?
    more native vs web
52. Spartan To Temove 300ms Delay, Pointer Events Become W3C Recommenadtion
    Awesome!
53. Static Blogging Tool Face-Off: Middleman vs Jekyll
    I’ve been throwing the idea around of making the Hoverboard blog on Jekyll. Middleman could be a good option too.
54. New York Times Magazine redesigns for the Web
55. Another 20 Docs and Guides for Front-End Developers
    some good stuff.
56. Twitter introduces an official plugin for WordPress
57. Mixin to Qualify a Selector
    great idea!

Not a whole lot of links this week as I’m traveling. Enjoy!

1. The Boagworld Web Design Show: Looking at the next generation of CSS with Jen Simmons
   Jen and Paul talk about front end and how you can use new technologies even if it’s not supported across all browsers (::cough:: flex box).
2. Google’s experimental new “slow” label could revolutionize how we tackle web performance
   ohhhhhh snap!
3. Cross-Browser Dependency-Free DOM Ready
   Totally needed this the other day for hoverboardstudios.com.
4. Chainable BEM modifiers
5. Making the case for Progressive Javascript
6. 3 JavaScript Libraries to Watch in 2015: React.js, Meteor, Rendr
7. Plugins and Tools for Better WordPress Typography
   I feel like a lot of this stuff you could just build into your custom theme, but if you are doctoring up an existing theme, this might not be so bad.
8. Testing APIs with RAML
   Testing APIs sucks. This can make it easier.
9. Using Squire, a Lightweight HTML5 Rich Text Editor
   I always like to see something challenging TinyMCE.
10. List of Android WebViews
11. datedropper – jQuery Dates Plugin
12. Design is Valued. Now What?
13. Dropdown Menus with More Forgiving Mouse Movement Paths
    We still beed dropdowns every once in awhile even if they are a bad UX for touch. Sometimes unavoidable.
14. ASCII address bar animations
    Pretty funny, but I’m not sure how practical this would be. Didn’t work in Safari for me (I think they don’t show #anchors 🙁 )

1. Better SVG Fallback and Art Direction With The <picture> Element
   I like!
2. Add support to ActionScript in HTML from Carlos Hoyos on 2015-02-14 ([email protected] from February 2015)
   As outlandish as it may sound, there is some merit to this request.
3. Polylion
   …Awesome!
4. When You’re Hacked in WordPress: Dealing With a Hacked WordPress Site
   I’ve had to do this once or twice. It’s not too fun.
5. Awesomplete: 2KB autocomplete with zero dependencies
6. Preparing for ECMAScript6
7. Server-side rendering of Single Page Apps
   Good ideas to make JS-based web apps suck less.
8. Ridiculously Easy: Use WP-Smush.it to Speed Up Your WordPress Web Performance
   I have been using EWWW, but this seems to do the same thing: losslessly compress images automatically after upload.
9. How Timehop Onboards New Users
   This is a new blog I started following where he disects onboarding flows from different apps. Timehop is one I use.
10. If you like HTTP then you’ll love HTTP 2.0
    The first overview of what http2 is. This won’t be the last we hear of this.
11. 60FPS is the new Image Replacement Technique
    I thought this statement was a little over-the-top at first, but give it a read. He makes some great points.
12. 5 Reasons to Use jQuery
    I agree that we shouldn’t just stop using jQuery, but for sites like hoverboardstudios.com, I didn’t want to load the whole library for one DOM traverse. Like anything else, it’s a pragmatic judgement call on each project.
13. Animated Text Fills – SVG text with animated dashed stroke pattern
    siiiiicccckkkk
14. Font Loading Revisited with Font Events
    I’ve just recently made font loading suck less on ryantvenge.com and hoverboardstudios.com. I did get a little lazy and just added a “fonts-loaded” class to the <body> after page load and added the font-family on that body class.
15. Animating List Items
    Killer animations
16. I am the fold
17. Building a Multi-Line Chart Using D3.js
18. .htaccess Snippets
    I mostly use nginx where I can, but it’s great to have these snippets when you are working on an Apache server.
19. Google and blogs: “Shit.”
20. ‘International Verify Your Backups Day’ ↦
    psa
21. Rewriting History with Git Rebase
    I’ve always been told to never rebase. But there are reasons.

1. Supercharge Continuous Delivery in Jenkins with the Workflow Plugin
2. FLIP Your Animations
   A way of checking your animations.
3. The WordPress REST API
4. 3 UX Errors to Avoid When Designing an Unsubscribe Flow
   You need to be very thoughtful with unsubscribe UX, because your user can just mark as spam and you have a whole nother issue.
5. Subtle Click Feedback Effects
   Brilliant as always from Codrops
6. Accessible toggle-style checkbox
7. israelidanny/ie8linter · GitHub
   A little tool to lint websites for IE8 compatibility, with warnings for possible pitfalls and suggested fixes.
8. Why I Don’t Use Compass Anymore
   I’ve moved away from Compass too. Truth be told, I only used it for vendor prefixes and autoprefixer does that (better) now.
9. Responsible Social Share Links — Jonathan Suh
   You’d be surprised what you can do without JS.
10. Frontend.md
    Documents your css and js.
11. The God Login
    All great things you should be doing in a login, some easier than others.
12. Experiment: Using Flexbox Today
13. Inline SVG with Grunticon Fallback
14. The 15 Commandments of Front-End Performance
15. RSCSS – Reasonable Standard* for CSS Stylesheet Structure.
16. Making a Single Page App Without a Framework
    Funny, as @GarthDB points out: “Making a Single Page App without a framework” “we will be using the jquery *library*”
17. Bouncy Navigation | Codyhouse
    Just one of those cool effects for a navigation overlay.
18. html5-boilerplate/CHANGELOG.md at v5.0.0
    Lotsa things have changed in the boilerplate.
19. Ol’ John Henry
    The idea of machines taking over our jobs has been on my mind for some time. Well put by Dave Rupert.
20. Combining Underscores With Bootstrap to Create a Theme Framework: Introducing Bootstrap
    Combining things I love and things I don’t.
21. What No One Tells You About Working From Home
22. Document Object Model
    Understanding the Document Object Model is integral to JavaScript and even css & html. Looking back, it really wasn’t until browser dev tools came out that it clicked with me.
23. Client-side MVC’s major bug

Some great stuff this week. A huge win for Net Neutrality and IE in the process of being sun-setted.

1. RodriguezCommaJ – Author Template
   This email template gives you a reset of sorts that looks good. It is $10, but worth it’s weight in gold if you’ve ever created an html email.
2. Transitioning to SCSS at Scale
3. Benchmarks: Internet Explorer 11 vs. Spartan vs. Google Chrome 40 vs. Firefox 35
   “Spartan (IE Experimental) offers a significant boost compared to IE11 although it was still not enough to beat Google Chrome 40 or Firefox 35 in some of the benchmarks.”
4. A Linux Developer’s Setup
   Working on a Unix-based system is key for a Web Developer IMO. Most of the points he makes in here apply to OS X as well, but as he points out, Linux has upsides to OS X. If Apple ever does anything to really make me mad, it’s comforting to know Linux will always be there to save me.
5. Grunticon
   Why have I not used this before? One of the keys to a lightweight page is using SVG’s for images (when possible). Grunticon just makes it easier.
6. Microsoft’s touch-friendly Office shows great potential for Windows 10 apps
   Microsoft really needed a touch-friendly overhaul to Office.
7. 11 Reasons to Care About Mobile Performance in 2015 [INFOGRAPHIC]
8. Net neutrality wins: the FCC will propose strong Title II regulation
9. This site shows how speed and efficiency should be done
10. Style Guide Generator Roundup
    I love styleguides, but by it’s nature of being a fairly new idea, it’s constantly changing.
11. 7 simple rules for mobile typography
12. jQuery event trigger namespace
    Clever
13. The Long Web – An Event Apart Video with Jeremy Keith
14. You can copy() from the console
    Cool!
15. Introducing the Codrops CSS Reference
16. Google Now takes a bite out of your privacy
    What’s new?
17. Getting Started with the WordPress Theme Customization API
    IMHO: The only way to add theme options to a WordPress theme.
18. Screencast: Building Smarter UI Interactions using :checked
    He does some pretty cool things to get this to work in pure css. He’s also using VIM mode ins Sublime Text, so that’s kinda cool to watch too.
19. What Makes Ecommerce Design Different?
20. Inside Microsoft’s New Rendering Engine For The “Project Spartan”
21. 10 free WordPress plugins for February 2015
    Lots of gems in here. I’m really digging the Post Type Requirements Checklist plugin.
22. Web publishers can delete stuff from archive.org
23. What’s wrong with your pa$$w0rd? | TED.com
24. Examples of Animation in Web Design
    …and they aren’t just there for animation’s sake.
25. Chrome continues to fall apart at brisk pace
26. Microsoft to support Raspberry Pi 2 with a free version of Windows 10
    Hmm, cheap IE testing machine?
27. Optimizing Your Images for WordPress
    Optimization is something I love to do. There are some great tools in here including EWWW Image Optimizer. Every WordPress site should have that installed.
28. The best of January’s web design podcasts
    Some great picks
29. Optimizing Your Workflow
    I do like finding ways to streamline workflows on my computer. Be sure not to get too carried away. I spent about 2 hours on Monday creating shortcuts for Alfred Remote, which I haven’t really used all week. :/