A Look at CSS Viewport Units
Let’s explore what we can accomplish design-wise by making use of these units in our CSS.
rwd306  tutorial 
3 hours ago
Native-Like Animations for Page Transitions on the Web | CSS-Tricks
It's just not enough these days to go from one page to another with a fresh page load, people are expecting a more seamless experience where one page 'leads' into another. Sarah has some examples on how we can accomplish these transitions
newslettered  306  tutorial  animation  vue 
4 hours ago
Reusable, Maintainable, and Modular CSS
I'm trying to get better at modular CSS, here are a couple of options with BEM And SMACSS explained.
newslettered  306  article 
4 hours ago
The Illusion of Control in Web Design
We all want to build robust and engaging web experiences. We scrutinize every detail of an interaction. We spend hours getting the animation swing just right. We refactor our JavaScript to shave tiny fractions of a second off load times. We control absolutely everything we can, but the harsh reality is that we control less than we think.
news  newslettered  306  headline 
4 hours ago
Variable Fonts
Test these variable fonts from DSType Foundry in your browser.
newslettered  306  typography  resource 
4 hours ago
Spinning jenny. — Ethan Marcotte
Ethan ponders about how much easier is becoming to do things that were more difficult in earlier days of building websites. As things become easier, we need fewer people involved (just like all things). I'm interested to see how this is going to change and shape our industry moving forward
newslettered  306  article 
4 hours ago
Animating Progress - Snook.ca
The best way to keep someone up-to-date with how far they are through an online process is by showing their progress. Even better is animating that progress from one level to another. Thanks to Snook, it's a lot more straightforward.
newslettered  306  tutorial 
4 hours ago
gridtoflex.com
CSS grid is AMAZING! However, if you need to support users of IE11 and below, or Edge 15 and below, grid won't really work as you expect. This site is a solution for you so you can start to progressively enhance without fear, thanks Una!
newslettered  306  resource  flexbox  grid 
4 hours ago
What You Need To Know To Increase Mobile Checkout Conversions
With most of the online shopping being done on mobile devices these days, it is essential that we create our online shopping experiences to focus on the mobile journey as a priority. These are ten ways that you can improve your own mobile check process.
newslettered  306  ecommerce  mobile  tutorial 
4 hours ago
preload with font-display: optional is an Anti-pattern—zachleat.com
If you're using preload with your fonts then you might want to avoid using font-display: optional. Why? Well let's leave it to Zach to explain the reasons why and the best approach
rwd206  article  typography  performance 
5 hours ago
Updates to CC Libraries bring type to more places
Now you can use Adobe Capture on your mobile to snap a bit of type and find out the exact (or close) match. This is super helpful when coming across great typography on your travels.
newslettered  306  tools 
5 hours ago
How we designed page previews for Wikipedia — and what could be done with them in the future
The design process around the new previews mentioned above for Wikipedia articles.
news  newslettered  305  article 
7 days ago
Learn D3.js for free
Throughout the course you'll learn the most important features of the library while building four different visualizations. You'll be able to play around with the code whenever you want, so that you can be sure that you'll understand how it works.
newslettered  305  tutorial  resource 
7 days ago
The Front-End Design Checklist - 💎 The Tool for Web Designers and Front-End Developers 💎
💎 The Design Checklist for Creative Web Designers and Patient Front-End Developers
rwd305  tool 
7 days ago
Introduction · Front-End Developer Handbook 2018
This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2018.
news  newslettered  305  article 
7 days ago
Museum of Websites - Kapwing
A hand-curated gallery of how famous internet companies have changed over time.
rwd305  resource 
7 days ago
1 HTML Element + 5 CSS Properties = Magic!
Ana Tudor is back at doing amazing things in the browser. Simply amazing.
newslettered  305  tutorial 
7 days ago
Introducing the Accessibility Inspector in the Firefox Developer Tools
The built-in Firefox Developer Tools just received a new family member. The Accessibility Inspector allows you to inspect your website’s exposure to assistive technologies.
news  newslettered  305  article 
7 days ago
Which Podcasts Should Web Designers And Developers Be Listening To?
If you're looking to up your podcast game here are some great ones to tune into. We even managed to get a mention in there too (woot!).
newslettered  305  article 
7 days ago
Art Directing For The Web With CSS Grid Template Areas — Smashing Magazine
Although this is a sponsored article on Smashing Magazine, there isn't really any mention of a product until the final paragraphs and by then you've learned everything you could want to about CSS Grid Template areas. Great work Andy (and great work on CoffeeCup too)
newslettered  305  tutorial 
7 days ago
Best Practices With CSS Grid Layout
As we become more comfortable with the use of CSS Grid we still approach it with tentative steps when it comes to incorporating it into our production environments. In this article, Rachel talks through what she believes are good approaches and things that you don't actually need to be worried about.
news  newslettered  305  article 
7 days ago
Adactio: Journal—Table of Contents for Going Offline
You can also check out the table of contents for the book in this post on Jeremy's own site.
newslettered  305  headline 
7 days ago
Going Offline
I've already read the first chapter (and potentially a few more chapters in a pre-release... it's so good) and for me this is the best ABA book since the release of Edition 4 (RWD by Ethan). This article is the extract of that chapter which explains what Service Workers are and how they relate to the duck-billed platypus. It's also the reason behind the survey this week.
headline  newslettered  305  newsed 
7 days ago
Scroll to the future
Everything you always wanted to know about implementing scrolling but were afraid to ask. Anna and Andy have scrolled to the bottom of modern web specifications to take you on a whirlwind tour of latest CSS and JavaScript features that make navigating around a single page smooth, beautiful and less resource-hungry.
article  newsed  newslettered  305 
10 days ago
Google AMP vs the Web
Special guest Andrew Betts of the W3C Technical Advisory Group joins the show to discuss Google AMP: how it works, whether we should use it, and if it's a threat to the open web and to society overall?
newslettered  304  podcast 
14 days ago
The Power of Serverless
You hear serverless quite a bit these days... spoiler alert there are still servers. Chris, however, does a very good job of explaining what people mean when they say serverless, and a series of examples of how these services make our life a lot easier.
newslettered  304  tutorial  server 
14 days ago
Dear Developer, The Web Isn't About You
This talk as been transcribed and has turned into a very good article. Chek out what Charlie has to say about the web, and how you can build better websites
newslettered  news  304  article  performance 
14 days ago
(20) Designing for A Viewport - YouTube
The web is a medium that has a viewport. What does it mean to truly be designing for the web — a medium that reveals the page slowly, from inside a viewport frame?
newslettered  304  video  viewport 
14 days ago
Cutting the Mustard with CSS Media Queries
In the past we've used a javascript check to define the types of things we might load onto a page. The idea is that certain modern browsers support new things, and if those new things are supported you could reasonably expect the browser was new enough to do all the fancy stuff you wanted... so you would load that in. If the browser didn't support it then you would just supply the standard content. This is a really interesting hack, but I think removing CSS altogether isn't the answer, and building your layouts in the right way from the outset is still the best approach. What do I know though, sites like Nature.org/com are using this.
tutorial  newslettered  newsed  304 
14 days ago
Collection of CSS snippets | justmarkup
A little while ago Michael Scharnagl asked on Twitter for folks favourite CSS (had to be vanilla and fit on a tweet). With 799 replies and over 2000 likes this is a list of some of the most popular responses.
newslettered  304  resource  tips  css3 
14 days ago
Optical adjustments in components
Have you ever noticed that sometimes when you make everything line up on the grid perfectly that things don't appear balanced? This is due to the size or 'roundness'of an object and this article covers off a few things ot watch out for and how to fixe them
newslettered  news  304  article 
14 days ago
Traversing the DOM with JavaScript | Zell Liew
When I first started learning javascript (jquery) it was because I needed to move through the DOM, and retrieve or create something. Zell has produced a cracking tutorial which goes through how you can do this with vanilla JS.
newslettered  304  tutorial 
14 days ago
How Pizza Night Can Cost More in Data Than Dollars
We all use 'free' services these days, and to do that we all accept their privacy policies without reading them. This article looks at a typical pizza night in with a friend and the type of data that is collected during the interactions with these services.
newslettered  news  304  article 
15 days ago
Inside AdWords: Introducing the mobile Speed Scorecard and Impact Calculator
The speed scorecard allows you to plot your own website against your competitors, enter some visitor/coversion/value data, and be shown how much your site speed is affecting your bottom line.
newslettered  304  tools  mobile  performance 
15 days ago
Carbon
Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.
newslettered  303  tools 
21 days ago
The Critical Path: Optimizing Load Times With the Chrome DevTools - Lucidchart
How to use the Chrome Dev tools to analyse your site and identify areas you can speed up to improve the overall load times.
performance  tutorial  newslettered  303 
21 days ago
Going Offline
Jeremy has written a new book, this time all about Service Workers. With the release of the latest iOS update, this is a very very good purchase for you.
newslettered  303  books 
21 days ago
Everything You Know About Web Design Just Changed by Jen Simmons
Jeremy's notes on what was the big climax to the An Event Apart Seattle conference. I like the idea of giving these things a name to provide a frame of reference, however with the frequent changes to the web these days it feels as though it's always going to be web design but with the latest features.
newslettered  303  conference 
21 days ago
Lazy Loading Images and Video  |  Web Fundamentals  |  Google Developers
Images and video are incredibly important in delivering information to your users, but they come at a cost of load times and bandwidth. This article looks at ways to delay the download and improve your user's experience.
tutorial  newslettered  303 
21 days ago
Introduction to HTML
HTML is one of the core building blocks on the web, as it’s what holds the content on all the websites you visit. Thus, HTML is a must-have skill for all web developers.
tutorial  newslettered  303 
21 days ago
A Quick Way to Remember the Difference Between `justify-content` and `align-items`
I'm the same as Robin and use to always forget these. My way of remembering which one is which is going back to left align, right align, or justifying text. When you justify text it stretches it across the horizontal axis. Robin's approach is different, but what ever works for you (and stops the inevitable visit to CSS Tricks to remind yourself
article  newsed  newslettered  303 
21 days ago
Introduction | IBM Plex
A new typeface from IMB. It’s global, it’s versatile and it’s called Plex. You can get it today from Google Web fonts.
newslettered  303  tool  typography  fonts 
21 days ago
The Way of the Web
Seeing as Jeremy has covered everyone else's talks, I thought we should include Luke Wroblewski's take on Jeremy's talk :)
news  newslettered  303  article 
21 days ago
Site Palette – Get the essential colours from a website
A browser extension to generate comprehensive palettes. A must-have tool for designers and frontend developers. Free colour scheme extraction.
newslettered  303  tools 
21 days ago
Thinking Inside the Box
A great use of AR. Over the next 2-3 years you're going to see implementations like this more and more until we will wonder how we ever lived without it.
news  newslettered  303  article 
21 days ago
Contextual styling with custom properties
Just like Brad's article this week, style up your themes with custom CSS properties (or is it CSS Custom properties :)
tutorial  newslettered  303 
21 days ago
Analyzing Your Company’s Social Media Presence With IBM Watson And Node.js
I'm fascinated by the benefits that we can get from machine learning and have been looking to include this in the websites we build to improve the user's experience. This tutorial shows you how to create your very own sentiment analysis system for your social media interaction using IBM Watson.
tutorial  newslettered  303 
21 days ago
Mozilla Announces Firefox Reality, a VR / AR Browser
Mozilla is continuing their push on the WebVR and WebAR and have released a new browser specifically targeted at VR headsets.
news  newslettered  303  article 
21 days ago
Why design systems are a single point of failure
This article isn't about NOT using design systems because they can cause issues, but about understanding where things can possibly go wrong and how to negate those risks.
news  newslettered  303  article 
21 days ago
Braille Neue
Braille Neue is a new typeface that allows the typography and the braille to exist within the same physical space.
tools  newslettered  303  typography  inspiration 
21 days ago
Everything About Web Design Just Changed
This week Jen Simmons talked about web design changing again and the term Intrinsic Web Design is being used. I think that new terms are great to be able to explain concepts to people who need a name to hang it on. These days we are so much more used to a changing web I wonder if names will stick as well as they did in the past.
newslettered  303  presentation 
21 days ago
Calling all web developers: here’s why you should be using Firefox
I've made the switch to Firefox for my regular web browsing (and Duck Duck Go for my searching) but I've still gone back to Chrome for their dev tools. The switch back to chrome is because I spent a LOT of time debugging sites in Chrome and am very comfortable with their dev tools, and I really like the performance audit aspects it offers. This tutorial covers a lot of the common tasks and how they can be done in Firefox, well worth a read.
tutorial  firefox  newslettered  303 
21 days ago
Designing New Ways to Give Context to News Stories – Facebook Design – Medium
How the Facebook design team is trying to provide context around the news items that you get on Facebook Stories
newslettered  303  article 
21 days ago
Progressive Web Apps on iOS are here 🚀
With iOS 11.3, Apple has silently added support for the basic set of new technologies behind the idea of “Progressive Web Apps” (PWAs). It’s time to see how they work, what are their abilities and challenges, and what do you need to know if you already have a published PWA.
news  newslettered  303  article  pwa  ios 
21 days ago
Creating Themeable Design Systems
Brad looks at how we can layer CSS variables on top of each other to allow you to build out design systems that can be easily themed. This is perfect when you're working with someone that needs a consistent approach but has a number of brands that need their individual look and feel.
303  headline  newslettered  news 
22 days ago
How to build a calculator—part 2 | Zell Liew
My favourite way to learn new skills is through applied learning. This tutorial is the second in a three-part series where Zell teaches you how to create a calculator.
news  tutorial  newslettered  303 
22 days ago
Grid
A great example of producing several layouts with the same HTML and updating a few lines of Grid CSS.
tutorial  example  newslettered  303 
23 days ago
Variable Fonts
A simple resource for finding and trying variable fonts
newslettered  302  resource 
28 days ago
On Paid Newsletters: An Interview With Adam Roberts of SitePoint’s Versioning
An interesting take on the growing craze of creating newsletters. What do you think? Would you rather
1) Pay weekly to receive a paid-for only newsletter?
2) Pay weekly to receive a free newsletter, but you're offering support?
3) Receive a free newsletter, but have sponsors within the content?
Don't worry though, RWD Weekly will continue to be free!
newslettered  302  article 
28 days ago
Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
A timely reminder as I'm moving into a new website build where the client wants to display LOTS of similar information about a range of different products
newselttered  news  302  tutorial 
28 days ago
Improving page performance with Chrome DevTools
Umar walks through Soylent.com and looks at how you can investigate any website and identify performance issues (and how to fix them)
newselttered  302  video  perfromance 
28 days ago
The Ultimate Guide to Background Images in Email – Litmus Software, Inc.
If you want to make your emails more visually engaging here is everything you need to know. Is there anything on this list that you think we should be doing?
newselttered  news  302  tutorial 
28 days ago
Interactive crossword | FT Labs
FT Labs go through the process of making a cross-browser/device crossword. It's live on FT now so check it out on your computer, mobile, tablet... all very well done. The only problem now is that I don't know any of the answers ;)
newslettered  302  tutorial  article 
28 days ago
The Fundamentals of Website Redesign
Go back to basics with the process of how you go through a website redesign.
newslettered  302  article 
29 days ago
CSS Variables Are A Sometimes Food by Matt Stow on CodePen
Matt Stow looks at the performance difference between using Sass to handle variables or the CSS variables.
newselttered  news  302  tutorial 
29 days ago
March Madness: Getting To The CrUX of The Matter.
Henri uses BigQuery to review sites load times with a Basketball focus. I wasn't aware that you could do this kind of stuff with BigQuery, I'm hoping to spend a bit of time over Easter testing some stuff out.
newslettered  302  article 
29 days ago
Webpack: A Gentle Introduction to the Module Bundler
In this tutorial, you'll be introduced to Webpack and shown how to configure it for performance optimization in your web application. Check out the repo to get the code.
newselttered  302  tutorial 
29 days ago
whys:packers [Nonsense]
If you're like me and don't "get" Web Pack then this article is for you. It explains the reason you end up wanting a JS packer, and then how it works and where you get the best benefits
newslettered  302  article 
29 days ago
On Paid Newsletters: An Interview With Adam Roberts of SitePoint’s Versioning | CSS-Tricks
A great interview about paid for newsletters. What do you think about the concept? I'm not looking to change this newsletter, but do you pay for any at the moment? Would you?
newslettered  302  article 
29 days ago
WAI-ARIA: the dark art of accessibility?
Getting better insight into how to make something like a carousel ARIA ready.
newselttered  302  tutorial 
29 days ago
Introduction to Mobile Device Detection
This is essentially an e-Book in the form of a website that explains what Device Detection is and its major use-cases. It's very informative for whoever wants to understand what device detection is.
newselttered  302  resource 
29 days ago
Learn Bootstrap 4 for free
You can take the course today. Just head over to the course page and you’ll become a Bootstrap 4 master within an hour.
newselttered  302  tutorial 
29 days ago
12 color-related apps and tools you’ll want to bookmark immediately
Here’s an ultimate list of colour-related apps and tools curated for you by the Futuramo team. Need colour theme inspiration, they've got you covered. Need to create the perfect CSS gradient, they've got your back.
newselttered  302  tools 
29 days ago
Compressive Images Revisited
Tim takes a look at compression on images again. On one hand we want to limit the size of the images that come down the wire, but on the other hand, we don't want to overburden the device to decode the image. What's the solution?
5 weeks ago
« earlier      

Copy this bookmark:



description:


tags: