#web (3832 links)
- Style Guide Resources styleguides.maban.co.uk
<blockquote>tl;dr: unless all dependencies use the same module format, dependency tree of depth > 1 is so painful nobody does it. Nobody agrees on a solution to this problem. We are all fucked.</blockquote>
- csstyle Clean, Simple Styling for the Web csstyle.io
<blockquote>A modern approach for crafting beautifully maintainable stylesheets. The csstyle method is implemented using a set of SASS mixins that make your CSS readable and semantic, generate your selectors for you, and automatically handle things like specificity and nesting. </blockquote>
- Front-end Tooling Workflows speakerdeck.com
- Stop Breaking the Web ponyfoo.com
<blockquote>TL;DR We are crushing the web. Dedicated client-side rendering sucks. Polyfills are used for all the wrong reasons. Those hideous-looking hash routers are bad and we should feel bad. We have been telling each other for years that progressive enhancement is great, and yet we're doing very little about it!</blockquote>
- Visual Regression Testing sonniesedge.co.uk
Good stuff on testing and also excellent section on Style Guides vs Component Libraries.
- Responsive Images in Practice alistapart.com
<blockquote>There is clearly a negative correlation between file-size and the amount of filesize you save by minifying and gzipping compared to just gzipping. As an HTML document gets bigger minifying makes less of an impact. This is consistent with the way gzip works, the further the tokens from each other the less efficient the compression is.
Ultimately it looks like gzip eats html documents for breakfast whether you minify or not. I would say this is a self-confirmation of my original gut feeling: I would not trade minified html for even one minute of lost productivity due to some subtle bug introduced in the build process.</blockquote>
- Dev.Opera — Native Responsive Images dev.opera.com
Nng.
- CSS animations and transitions performance: looking inside the browser | Web Platform Team Blog blogs.adobe.com
<blockquote>We’ll explore how browsers handle CSS Animations and CSS Transitions, so you can develop intuition around whether an animation is likely to perform well.</blockquote>
- ekalinin/typogr.js github.com
<blockquote>Typography utils for javascript</blockquote>
- Axiomatic CSS and Lobotomized Owls alistapart.com
<blockquote>Despite its irreverent name and precarious form, the lobotomized owl selector is no mere thought experiment for me. It is the result of ongoing experimentation into automating the layout of flow content. The owl selector is an “axiomatic” selector with a voracious purview.</blockquote>
- Replacing Radio Buttons Without Replacing Radio Buttons sitepoint.com
<blockquote>More than 60 percent of the world’s population remains offline. Without removing crucial deterrents to Internet adoption, little will change—and more than 4 billion people may be left behind.</blockquote>
- Understanding Sketch’s Export Options - Tuts+ Web Design Tutorial webdesign.tutsplus.com
English Exporting assets from your designs is a common task. You start by creating and preparing your graphics, then you choose the export format, set its…
- CSS display:table-cell child width bug in Firefox and IE carsonshold.com
Nnng.
- Fluid Width Equal Height Columns | CSS-Tricks css-tricks.com
- Testing Mobile: Emulators, Simulators And Remote Debugging - Smashing Magazine smashingmagazine.com
- Solved By Flexbox — Cleaner, hack-free CSS philipwalton.github.io
- zeman/perfmap github.com
<blockquote>A bookmarklet to create a front-end performance heatmap of resources loaded in the browser using the Resource Timing API.</blockquote>
- DevTools Tips devtoolstips.com
- javascript - How can I pass variables to a partial in Handlebars (v1.3 with Assemble)? - Stack Overflow stackoverflow.com
Not that flexible, but better than fixed partials.
Also sneaky.
- aFarkas/respimage github.com
- SweetAlert tristanedwards.me
If you're a front end web developer, alert boxes and confirmation dialogs are an important tool. This is a fast, good-looking way to ditch `alert()` without much effort.
- Image Resizing Services blog.cloudfour.com
List of response image services from @grigs
- The Ultimate Guide To iPhone Resolutions paintcodeapp.com
- The Ultimate Guide To iPhone Resolutions paintcodeapp.com
- Transactional HTML Email Templates blog.mailgun.com
- lafikl/RWDPerf github.com
Performance testing tool for Responsive web designs.
- Don't use <picture> (most of the time) blog.cloudfour.com
<blockquote>You don’t need to know all of the use cases, but you do need to know the difference between the two most common use cases in order to know which part of the picture specification will solve your problems. The two common use cases are [...] Resolution switching [and] Art direction.</blockquote>
- A Gentle Browserify Walkthrough blog.ponyfoo.com
- Dynamic Static Site Strategies - Phil Hawksworth speakerdeck.com
- Essential Sketch Plugins for Web Design - New Media Campaigns newmediacampaigns.com
- Snap.svg - Home snapsvg.io
<blockquote>Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.</blockquote>
Raphaël successor.
- My strategy for client-side package managers (choosing between npm, bower, and component) superbigtree.tumblr.com
<blockquote>We still have to cobble together the solutions that work best in the context of each project, but at least we’re not downloading js/css manually through the browser, or using wget, or writing bash scripts to download/update our client-side dependencies.</blockquote>
- Dimensions Browser Extension felixniklas.com
<blockquote>Measure between the following elements: images, input-fields, buttons, videos, gifs, text, icons. You can measure everything you see in the browser.</blockquote>