Hi,
a week passed by and quite a few things happened since then. Mozilla kicked some hot things, some cool new (and some older but yet unknown) tool arrived. Web performance is a big thing this week and there’s a lot to catch up on this topic in this reading list. Web Components definitely will be a big topic in 2014 so the two articles will prepare you for that, some JavaScript insights, and a few CSS and Sass tricks conclude this wrap up list. But as always, I've got some inspirational articles on the very bottom of each issue. Happy reading! :)
News
- Firefox is implementing the latest spec of Custom Elements, part of Web Components.
- We will soon get an editable box model in Mozilla DevTools making it much easier to see the effect of a value change.
- Wonder where Mozilla invests his money in? For example they developed a new JPEG encoder called
mozjpeg
that saves 10% of filesize in average and is fully backwards-compatible. - With Vagrant 1.5 you will be able to share your running environment with everyone. That is awesome!
- Sass Mixins 0.8.0 is out with baseline mixin.
- Cerberus is a responsive template for your E-Mail Newsletters that even works in Outlook.
Tools
- You know that—comitting several times to get sth. fixed. Here’s a tutorial how to rebase interactively to “fix” a bunch of commits.
- A SublimeText plugin that toggles quotes from
"text"
to'text'
and vice versa. - Grunt-spritesmith converts images into sprite sheets including Sass variables for you to use.
- How to back up all your git repositories from GitHub in one go.
- Grunt-pagespeed runs Google PageSpeed Insights against provides paths in your environment. Pretty cool!
- CodeReview will be an App for your iPad to review pull requests on your tablet. Will work with Github (I’ve got no information on other integrations).
Web Performance
- Paul Lewis shows his performance audit workflow.
- CSS Selector Performance revisited: It’s much more important to clean your CSS from unused selectors than caring about which selectors you use.
- “Don’t believe ‘Performance tricks’ posts” says this post being one of them. They’re useful but it fully depends on your environment and you can only be sure about it if you test on your own.
- Mozilla provides you quite a few insights into its memory management through the console. This is an article showing you what you could use to find issues with your web application.
- If you use Gulp or Grunt, this Yeoman article shows you some packages to optimize performance.
- A great research on icon fonts vs. SVGs has been done by Ben Frain.
HTML
- Why you should care about web components.
- Seriously, What’s the point of Custom Elements? This SmashingMag article explains.
JavaScript
- A little component that tells you if images have been loaded on the page.
- Doug Neiner’s jQuery Europe slidedeck on component based JavaScript and how components communicate with each other.
- A small function for easier multi-line strings in JavaScript.
CSS / Scss
- An alphabetical list of all CSS properties. How many of them do you know and use?
- Grid Style Sheets is a grid system that provides you with the most common approaches like element centering so you don’t have to care about it anymore.
- Organizing and structuring your scss files is super important. That’s why you should follow some conventions and here is an example how to order your properties and sub-selectors. I follow the same rules since quite some time and it works great! Similar to that, here are some Sass rules by Mike Street.
- Making embedded content like iframes work in responsive design.
- Ben Schwarz tells you how to build a carousel out of plain CSS and nothing else.
Go beyond…
- Remote working can be hard. A thought how to evolve the collaboration tools we have so we can communicate better in a team.
- Your Website needs to tell a story—here’s why…
To support this project, vote for me at netawards 2014, gratipay me or share this resource with other people.
Thanks and all the best,
Anselm