[no title]
This could be....
Level 1 = Year
Level 2 = Edition
Level 3 = Category
Level 4 = Link
rwd300  data-visualisation 
3 days ago
Streamgraph - bl.ocks.org
This could be a visualisation of a timeline, with the editions running across the bottom. Then each of the Headline/Article/Tutorial numbers for each edition could be coloured and it would rise or fall.
rwd300  data-visualisation 
3 days ago
How Big Is That Box? Understanding Sizing In CSS Layout — Smashing Magazine
Rachel takes you through how to understand how big each of our boxes (divs) are around out content, and why they might take on particular characteristics. Once you finish the article you'll have a lot firmer grasp on how layouts work and why.
tutorial  292  newslettered 
3 days ago
D3 zoom — the missing manual – freeCodeCamp
After watching Nadieh's talk at Beyond Tellerrand all about data visualisation I was excited to come across this article detailing how zoom and scaling works with SVG and Canvas.
tutorial  292  newslettered 
3 days ago
Bootstrap 4 · Bootstrap
Bootstrap 4 has finally come out and is now a stable release. According to the documentation, there are no breaking changes since the last beta release, but now you can push it with confidence.
newslettered  news  292  framework  tools  headline 
3 days ago
Better Typography with Font Variants
Learn how to use font variants, including ligatures, caps, numerals and alternate glyphs, to create more precise, beautiful typography on the web.
font  typography  tutorial  variable  292  newslettered 
4 days ago
Mental Illness in the Web Industry
I lost my best friend to mental illness a few years ago. It was, and still is, a tragedy and one which I'm not sure I'll ever fully get over. Mental Health/Illness is a very serious issue, both in and outside of the web industry. If you ever struggle with mental health please know that I, and I'd warrant the rest of the web community, are there for you if you ever need it. Check out the article.
article  newslettered  newsed  292 
4 days ago
Learn CSS Grid - Video Course
Learn CSS Grid with Wes Bos in 25 pretty good videos from fundamentals to Real World in about 4 hours. This is brought to you buy Wes, but also partially supported by Mozilla (who also have a new YouTube channel with Jenn Simmons)
tutorial  grid  course  292  newslettered 
4 days ago
(15) Layout Land - YouTube - YouTube
Jen Simmons from Mozilla will be bringing us a new video every Thursday on the Layout Land channel. You can get started now with Incredibly Easy Layouts and Designing for 4-sided viewports with CSS Grid
tutorial  video  292  newslettered 
4 days ago
How we adapted the Booking.com mobile site for the iPhone X notch.
There was a lot of discussion around the iPhone X notch but very little has come of it in practice. For those of you that are looking for a 'big name' implementation check out how booking.com handled it.
tutorial  292  newslettered 
6 days ago
Case Study: lynnandtonic.com 2017 refresh
A couple of weeks ago we featured lynnandtonic.com with its 21 different layouts and brilliant use of CSS Grid Layout. While I was preparing a review of the site and trying to reverse engineer how it was put together, Lynn has written an overview of the process herself. Thanks Lynn!
newslettered  news  292  article 
6 days ago
Meet the New Dialog Element
We've been using popup modal windows for a while on our websites, and now there is a specific semantic element that we can use — the 'dialog' element. This tutorial looks at what it can do, and how you can use it now with a polyfill for older, unsupporting, browsers
tutorial  news  292  newslettered 
6 days ago
The design fidelity conundrum – Design at IBM – Medium
I've been having a similar issue around design fidelity. At what point do we start to create higher fidelity sketches or wireframes — and at what point do we get into the design?
Often designs can dictate the complexity of the website project, which in turn has a direct impact on the time it takes to build and in turn affects the cost/hours included in the quote. Unfortunately we can't start the design until after the signoff of the quote… so where does that leave us?
newslettered  news  292  article 
6 days ago
Interactive email using SVG and SMIL
After seeing Mark Robbins at Beyond Tellerrand in Munich this week I'm keen to do a little bit more, a little bit of interactivity, with this email. With episode 300 coming up in 2 months I think it's time to take on some of this articles examples.
email  tutorial  rwd300  special  292  newslettered 
6 days ago
Tiny Wins
A great example of how the simplest of changes can have some monumental impacts upon your customers.
newslettered  news  291  article 
10 days ago
Little UI details from @steveschoger, in HTML and CSS
Twenty-one different tips on UI details that you can use to set your designs apart from the competition. The best bit is it is written in CodePen so all the examples can be forked (or stolen, as the rest of the world would call it ;)
newslettered  news  291  tutorial 
10 days ago
Improving URLs for AMP pages
Google are looking to implement the ability for AMP results to be served from their original URLs rather than the google.com/amp prefix. This is the number one complaint that they hear about AMP, so it's great that they're working towards a solution. At the moment, however, that solution is based on the Web Packaging standard which isn't supported by any browsers (yet).
article  amp  newslettered  newsed  291 
10 days ago
Release Notes for Safari Technology Preview 46
In the excitement and anticipation of Santa coming to visit I missed the Safari Technology Preview #46 release, and along with it, one of the more exciting bits of news I've heard for a while. Service Workers are now supported in the Safari Technology Preview, which in turn means that it will be shipping to regular Safari, which should then ensure it ships to iOS mobile Safari. Offline Web Apps on the iPhone here we come!
article  newslettered  newsed  291 
10 days ago
HTTPS explained with carrier pigeons
I often recommend moving to HTTPS because of all the benefits you get on top of being secure, like HTTP/2 and Service Workers for instance. But what _is_ HTTPS really? Could you explain it to someone if they asked you the question? Like really explain it? Take 5 minutes and you'll be an expert!
article  newslettered  newsed  291 
10 days ago
Demystifying CSS alignment – Patrick Brosset – Medium
If you've been working on Flexbox or Grid and keep having to go back to check how you align the content then this is a great article that covers everything you need to know... it even has a cheatsheet to boot!
newslettered  news  291  tutorial  headline 
10 days ago
The Spectre Attack and Critical CSS
Critical CSS is something that I've recommended since it was floated and polyfills were built by the Filament Group. It's no wonder then that they have covered off the need for anyone using their implementation of CriticalCSS to set SameSite and HttpOnly flags on the document.cookie. The reason is that after visiting a site for the first time you will download and cache the CSS for the site. A cookie is set and any subsequent pages you visit will not pass down the Critical CSS portion of the page because you have the CSS in cache already. Unfortunately, due to Spectre, this can cause your session data to be exposed.
rwd281  tutorial  article 
10 days ago
8 Web Performance Expert Insights for 2018
The experts have spoken and the results are in. You should read the article, but a lot of it is around HTTP/2 (which requires HTTPS, also mentioned a lot) and improving image compression (or using new and exciting image types).
newslettered  news  291  article 
10 days ago
AMP letter
I signed this open letter about Google AMP. It's not a letter calling for the end of AMP, but instead, it is asking that Google treats AMP in a way that allows the Web to remain true to itself.
newslettered  news  291  headline  amp 
11 days ago
Want to learn CSS Grid? Here’s my free full-length course.
14 interactive screencasts on CSS Grid to take you from beginner to advanced.
newslettered  290  tutorial 
17 days ago
Bootstrap 4 Beta 3 · Bootstrap
Just before the new years we had an update from Bootstrap who released the third beta in version 4. Beta 3 primarily focuses around our forms, but it also includes key fixes to tables, some global styles, our documentation, and some JavaScript bugs.
article  290  newslettered 
17 days ago
Front-End Performance Checklist 2018 [PDF, Apple Pages]
A great checklist to print out and run through for all of your website builds this year.
newslettered  290  resource  performance  checklist  news 
17 days ago
Beyond HTTPS
There's more to HTTPS than just security, so the next time someone scoffs that their simple site doesn't need HTTPS then you can give them a couple more reasons why it makes a difference.
article  290  newslettered 
17 days ago
New flexbox guides on MDN – Mozilla Hacks – the Web developer blog
If you're having trouble with CSS the chances are you've solved your problems on CSS Tricks, Stack Overflow, or the ever growing and amazing MDN documents. Now the flexbox guides have been updated thanks to Rachel Andrew
article  flexbox  290  newslettered 
17 days ago
The Front-End Performance Challenge: Winner And Results
Some really impressive real life improvements on sites when it comes to performance. Each of these examples take a slightly different approach to their performance improvements so there's certainly going to be something you can do on your own site.
article  290  newslettered 
17 days ago
A Tinder Progressive Web App Performance Case Study
Tinder are swiping right on the web now and have seen much more engagement as a result. Addy Osmani takes a look at all aspects of how this was achieved with a focus on performance.
performance  article  290  newslettered 
17 days ago
Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks
Sara Soueiden clears up the difference between CSS Grid auto-fill and auto-fit with some visual examples. They can look very similar, but once you start changing the viewport you will see which is more applicable for your particular need.
newslettered  290  tutorial 
20 days ago
<picture>: The Picture element - HTML | MDN
These examples demonstrate the effect different attributes of the <source> attribute have on the selection of the image to display when used inside a <picture>.
article  tutorial  289  newslettered 
4 weeks ago
Responsive images - Learn web development | MDN
In this article we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.
tutorial  289  newslettered 
4 weeks ago
svg/svgo
Nodejs-based tool for optimizing SVG vector graphics files
tools  289  newslettered 
4 weeks ago
imazen/imageflow: High-performance image manipulation for web servers. Includes imageflow_server, imageflow_tool, and libimageflow
High-performance image manipulation for web servers. Includes imageflow_server, imageflow_tool, and libimageflow
tools  289  newslettered 
4 weeks ago
Image Optimization Sandbox
Fastly Image Optimizer. See our real-time image manipulation service in action
tools  289  newslettered 
4 weeks ago
imgix • Real-time image processing and image CDN
Powerful image processing, simple API Optimize, deliver, and cache your entire image library for fast-loading, stress-free websites and apps
289  newslettered 
4 weeks ago
Cloudinary - Cloud image and video service, upload, storage & CDN
Cloudinary is the media management platform for web and mobile developers. An end-to-end solution for all your image and video needs.
tools  289  newslettered 
4 weeks ago
libvips
build tools

A fast image processing library with low memory needs.
tools  289  newslettered 
4 weeks ago
ImageOptim/Sketch-plugin
ImageOptim plugin for the Sketch app
tools  289  newslettered 
4 weeks ago
Adding webp images progressively | Responsive Web Design
Using the <picture> tag to progressively include webp image types only when supported.
tutorial  289  newslettered 
4 weeks ago
Reducing image sizes
A series of techniques you can use to art direct your images to smaller sizes before you even start compression.
tutorial  289  newslettered 
4 weeks ago
Watching your (image) weight
Improving your page load times (and overall page weight) on posts that are image heavy.
tutorial  289  newslettered 
4 weeks ago
Grid by Example
This site is a collection of examples, video and other information to help you learn CSS Grid Layout. Developed and maintained by Rachel Andrew. It's so choc-a-block full of information it's probably the only link you really need to go to this week ;)
newslettered  288  resource  grid 
5 weeks ago
A Grid Solution for the Responsive Tables Problem
In this tutorial from Rachel which takes the Responsive Calendar and rebuilding it using the CSS Grid. It's a different approach from Snook below, but as with everything when it comes to building on the web there are many ways to accomplish the same result
rwd288  calendar  grid  CSSGrid 
5 weeks ago
Calendar with CSS Grid
Laying out a calendar can be tricky when it comes to multiple viewports. We've previously covered responsive calendars, but in this tutorial Snook takes you through an approach using CSS Grid.
tutorial  CSSGrid  288  newslettered 
5 weeks ago
Instagram Concept: Hashtag Filters – Noteworthy — The Journal Blog
A great example of how you don't need to code anything to get a prototype up and running to find best use cases for a new idea.
article  290  newslettered 
6 weeks ago
Zigzag Image–Text Layouts Make Scanning Less Efficient
When you're laying out your new grid based pages it's good to know just how users consume content on the page, and what makes it easier/less effort.
article  288  newslettered 
6 weeks ago
📦 Parcel
Blazing fast, zero configuration web application bundler
newslettered  290  tool 
6 weeks ago
How Stripe Designs Beautiful Websites - Lee Robinson
There's a lot to love about the Stripe website and this article takes you through some of a reasons why it looks and feels so good.
newslettered  287  headline  news 
6 weeks ago
Weebly Careers - Careers
Weebly Engineers enjoy a unique opportunity to work with a wide array of technologies. Engineers are actively encouraged to explore different sectors of the tech stack and delve into specific areas of interest. As a Weebly Engineer you will have the freedom, and be supported by the entire team, to grow professionally.
rwd287  jobs 
6 weeks ago
« earlier      

Copy this bookmark:



description:


tags: