Tvenge Design

I just subscribed to a handful of performance blogs today, so there will be a bit of an influx on performance this week. Cheers!

1. Google PageSpeed Double Loading: A Third Party Blind Spot
2. How to Prevent Third Parties from Dragging Down Your Web Performance
   Third Party scripts are a pain in the butt to get working quickly.
3. Is There a DNS Doctor in the House?
4. Case Study: WordPress Theme Optimization
5. Matt Griffin on How We Work: Readable Wearables
6. Probably Use initial-scale=1
   Good call, Chris.
7. Why Make Websites Accessible?
8. Some More Inspiration for Text Input Effects
9. How to Write Great Web Development Articles and Tutorials
10. 6 Node.js Static Site Generators
11. Rendering engine updates in March for the Windows 10 Technical Preview
    More improvements to Project Sparten
12. Microsoft delivers new Windows 10 preview without Spartan browser
    Boo
13. The Path to Performance // Speaker Deck
14. Skala Color 2: A More Functional and Beautiful Color Picker for OS X
    If you’ve used the OS X color picker, you’ll know that getting hex and rgba values is not easy.
15. Microsoft is killing off the Internet Explorer brand
16. Microsoft reveals how it will make money giving away software
17. Strategies for Staying on Top of Web Performance
18. Introduction to fetch()
    XHR with promises!
19. CSS Contact Form
20. Break Up With IE8
    Sooper funny
21. Enhancing Responsiveness with Flexbox presentation at RWD Summit
22. 6 Strategies for Freelancers to Take on Creative Agencies

1. What is Apple’s software problem?
2. grunt-respimg
   A responsive image workflow for optimizing and resizing your images.
3. js;dr = JavaScript required; Didn’t Read. Pages that are empty without JS: dead to history (archive-org), unreliable for search results (despite any search engine claims of JS support, check it yourself), and thus ignorable. No need to waste time readin
4. When IE gave us beautiful, fast touch interactions, and nobody cared.
5. Update to “How to Print a LinkedIn Profile as a Resume” Bookmarklet. Finally…
6. Chris Coyier AMA on Designer News
7. Push Notifications on the Open Web
8. How to Improve Your Workflow With BrowserSync 2.0
9. Understanding CSS Grid Systems from the Ground Up
10. Better modern input type detection
11. Getting started with Grunt
12. Inlining critical CSS for first-time visits
    Critical.css is awesome!
13. Improving Responsive Images with the Picture Element
14. How to get started with CSS Shapes
    CSS Shapes are really cool! Browser support is still thin, but that will hopefully change.
15. Apple Watch mockups
16. Flipside
    Animated button
17. SVG devices
    Some lightweight SVG’s to wrap around your screenshots.
18. Side Effects in CSS
19. A Simple Guide to the WordPress Quicktags API
20. WordPress 4.2 Beta 1
    We get a glimpse of what 4.2 looks like.
21. 2015 Minnesota State High School All Hockey Hair Team
    Off topic but pretty funny if you ever knew a hockey player in high school.
22. Moving to HTTPS on WordPress
    Someday I’ll do this on all my sites.
23. Hands-on with Vivaldi, the new Web browser for power users
24. 5 rules for choosing the perfect web typeface

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.