recentpopularlog in
« earlier  
Some Unsolicited Newsletter Advice • Robin Rendle
Robin writes the CSS Tricks newsletter and it is one hell of a good read, if you haven't already subscribed you should do. In this article Robin lays out five different tips on how to write better newsletters (or even better emails for that matter)
newslettered  356  article 
5 days ago
Front-end Developer Handbook 2019
This is a guide that everyone can 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 2019.
resource  rwd356 
5 days ago
CSS masonry with flexbox, :nth-child(), and order | Tobias Ahlin
Masonry.js is the best way to get a proper masonry layout because the JS will change and update the layout on the fly based on the users screen and interaction with the viewport, but it's a js that might not run. This is another approach using tools in our CSS toolbelt
newslettered  356  tutorial  flexbox 
5 days ago
Optimizing Performance With Resource Hints
Following on from the article about preconnecting, Drew looks at a number of different resource hints that can be used to improve the users experience (with preconnect being one of those resource hints). I use the prefetch approach with the Briefer History of Time online book for the next chapter, a perfect example for its usage.
newslettered  356  tutorial 
5 days ago
Three Ways of Checking Rel=preconnect Resource Hints Are Working - Andy Davies
Implementing preconnect is a great way to shave off lookup times on the cascading waterfall page load, but how can you be sure it's doing what you want it to?
newslettered  356  article 
5 days ago
Adactio: Journal—Split
A great article from Jeremy, and if you haven't read it yet and there's only one article that you're going to read on Good Friday then mak this that article.

"There’s a second-order effect. By making React—or even JavaScript in general—a requirement for styling something on a web page, the barrier to entry is raised."
newslettered  356  headline 
12 days ago
Google AMP lowered our page speed, and there's no choice but to use it
Last week I provided an article around AMP coming to emails, this week we take a look at a publishers issues with AMP. The article goes against Google's approach quite strongly, and while I share a lot of the writer's sentiments you should read it open minded and come to your own conclusions.
article  355  newslettered 
12 days ago
Color accessibility
Some fantastic tools and resources here thanks for Stephanie Walter and a gorgeous article to go along with them
newslettered  355  resources 
12 days ago
Offline fallback page with service worker
If you're looking for a really simple service worker that just shows an offline page when you're offline then Paul and Jake have just the thing for you.
newslettered  355  tutorial  service-workers 
12 days ago
Art Direction For The Web Using CSS Shapes — Smashing Magazine
Shapes are not something that I've seen a huge amount of usage in the websites that we see today. A few weeks ago I saw a tweet from Mark Boulton about the sameness of a lot sites these days, but I think that partly comes from designers not being aware of techniques like this one that Andy shares.
article  inspiration  355  newslettered 
12 days ago
Privacy UX: Better Cookie Consent Experiences — Smashing Magazine
These days, providing your users with the custom options that they want when it comes to the data that is stored about them is a vital step to making your site more enjoyable and trusted. Here's a whole plethora of great suggestions to make that journey better.
article  355  newslettered 
12 days ago
Accessibility lessons: dealing with a large amount of form inputs
A great story and look into how you can make it easier to select check boxes in a large array of choices, and why sometimes the answer you want to be the right one can end up causing more harm than good.
article  355  newslettered 
12 days ago
The Design Process of “Why Do Cats & Dogs ...?” | Visual Cinnamon
If you like the feature image this week and you want to learn more about how Nadieh approached the data and the design then this is worth the 15 minute read. The project took over 250 hours, and it shows in its brilliance.
article  data-visualisation  design  355  newslettered 
12 days ago
Goodbye Google Analytics, Hello Fathom
Fathom is lovely little self hosted analytics program that tracks only a small subset of the analytics that Google provide... but then at the end of the day how much of their analytics are you using compared to how much of YOUR data are they using?
article  355  newslettered 
12 days ago
Native image lazy-loading for the web!
Addy gives us some amazing news this week with the upcoming release of Native Image Loading inside of Chrome 75 (hopefully). This is a cross over with an article and a tutorial, with Addy showcasing how this can be used in the future as well as practical examples of how you would implement this now and use a fallback of the much loved Lazy Sizes.

I'd encourage you to take a really close look at this article if it's the only one you read this week because you're sure to be using this as a standard approach in the next 12 months.
newslettered  355  images  performance  headline  js  news 
12 days ago
Introducing Warp: Fixing Mobile Internet Performance and Security
I've just downloaded this onto my phone and am currently WAY back on getting access to WARP. I didn't realise the 1.1.1.1 app would improve the speed of the sites I was using, but given the amount of networks I switch between I perfer the idea of having my traffic safe.
newslettered  354  tools 
19 days ago
You probably don't need that hip web framework
If you're building a new idea, you want to get it to market as fast as you can, so the absolute best thing you can do is ignore all of these new fads, frameworks, and fancy patterns—instead just using whatever works to ship a first cut.
I've been applauding this paragraph for the past 3 hours.
newslettered  354  headline 
19 days ago
Animation Performance 101: Browser Under the Hood | Viget
If you're looking to incorporate animations into your web build (and you should, it can really help the user) here are some tips to remember to ensure that those animations are smooth and performant
newslettered  354  tutorial 
19 days ago
What’s new on iOS 12.2 for Progressive Web Apps – Maximiliano Firtman – Medium
Max takes a deep dive into the new release of Safari on iOS 12.2 and what that means for the world of the PWA. Unfortunately it seems as though there are still some issues with background processes but they are moving foward with it which is a good sign.
newslettered  354  article  pwa  ios 
19 days ago
Planning for Responsive Images | CSS-Tricks
Chris Nwamba goes through the planning you should be doing when delivering responsive images on your site. One of the things that I've realised working in an agency with Art Directors is that they want every image to be the same as the photoshop document they scamped it up in. While we know that isn't possible, this kind of planning and understanding around the changing viewport sizes means you can shoot imagery in a way that is better suited to this style.
newslettered  354  tutorial  responsive  performance  images 
19 days ago
Sitespeed.io 8.9
Sitespeed has released a new update and they're starting to crack down more on third party scripts, often something that gets away from you unnoticed as the marketing team add more and more tracking code through GTM. It breaks the 3rd party scripts by utility, surveillance, ad, analytics, library and other
newslettered  354  article 
19 days ago
Detecting when a webpage is hidden
The latest version of Chrome adds support for another case of hiding a web page: On desktop, if the user fully covers Chrome’s window with a different window, Chrome will now correctly update the visibility state of the active web page.
newslettered  354  article 
19 days ago
Everything I know about freelancing
A really great refreshing list of important ideas to follow in the world of freelancing. Do yourself and favour and read all of these, and then enjoy a better freelancing life (or finally take that leap).
newslettered  354  article  freelance 
19 days ago
Vue.js and D3: A Chart Waiting To Happen
We're working on some data display for an internal project at work at the moment and I've been looking at different charting libraries. In my searches and reviews I came across this article which is pretty cool.
newslettered  354  tutorial  D3.js  vue 
19 days ago
Scroll Anchoring in Firefox 66 - Mozilla Hacks - the Web developer blog
Scroll anchoring ensures that when that pesky ad loads in at the top of the page, or when you change device orientation, you remain at the same point that you were previously reading. Hoorah!
newslettered  354  browser  firefox  css 
19 days ago
The Hidden Power of CSS Text Align
With Flexbox around I usually have all of my content positioning taken care of (and CSS Grid also helps), but there's still a lot you can achieve using plain ol' text-align.
newslettered  354  tutorial  css 
19 days ago
A Gutenburg-Powered Newsletter
I've been trying different things to get the flow of writing this newsletter each week a little more streamlined, and if anything to just change up the way in which I approach the same task for more than 6 years. I like this approach and will see how it plays out in the next few weeks.
news  tutorial  353  newslettered 
26 days ago
5 Tools For Automated Accessibility Audits
If you're getting serious about the accessibility of your site, and you certainly should do, here are a range of tools that Ben has put together that will help you do your testing
newslettered  353  accessability  tools 
26 days ago
Reduced Position Sticky
This is the final part of a series of changes that Scott has recently made to his site, starting with using position sticky on the header and then removing the feature when prefers reduced motion is enabled.
tutorial  CSS  353  newslettered 
26 days ago
Enable Offline Google Analytics
If you're building progressive web apps and expect that users will be using the site offline then you should be looking to catpure that usage and update your analytics once the user is back online again. This is a bundled way of handling this for Google Analytics.
tutorial  pwa  analytics  353  newslettered  news 
26 days ago
How to create a darklight mode switch in CSS and Javascript
I like the idea of switching between light and dark themes based on the context of the user, but also providing a switch for users to do as they please.
tutorial  353  newslettered 
26 days ago
Add AR Effects to Products & Places with Tracked Images
I've been doing a lot of research and prototyping around AR through both the browser and via an app. This week I found this tutorial using Torch App as a way to prototype AR interactions. For someone who isn't great with Swift, it's a nice way to get into things.
tutorial  AR  353  newslettered  news 
26 days ago
Parallax Depth Cards
This is some lovely card effects.
newslettered  353  codepen 
26 days ago
All you need to know about hyphenation in CSS
Richard Rutter goes into serious detail around the use of hyphenation in today's CSS spec's. There are a number of settings that can be applied, much more than I thought were available and while they're not all 100% supported across all browsers it's a great tool to progressively enhance upon.
tutorial  typography  353  newslettered  news 
26 days ago
Building the Squarespace Image Filters
Squarespace is still the number one go-to-tool that I recommend to friends when they ask me if I can help them build a website (in fact my friend even set up her own upholstery side business on her own and she often refers to herself as technically challenged). They've recently improved their image filters through the CMS and have written this great article about the process.
article  news  newslettered  353 
26 days ago
Building the future of email with AMP
After watching a colleague wrestle with trying to create a reasonably good looking email I can see the use of AMP in email becoming something that catches on. The added bonus is that it won't receive as much pushback as AMP received when trying to take over the standard HTML pages.
article  amp  email  news  newslettered  353 
26 days ago
How To Find And Make The Most Of The Unplanned User Journey — Smashing Magazine
Avoiding dead ends is key to ensuring your keep your visitors moving through your site and finding what they need. These are some rock solid tips on how to handle a number of different potential exit points for unplanned user journey's.
article  news  newslettered  353 
26 days ago
How To Align Things In CSS
From text-align to advanced alignment with CSS Grid and Flexbox this tutorial overview for placing things on a web page is great.
tutorial  grid  css  layout  353  newslettered 
26 days ago
Improving Perceived Performance With the Link Rel=preconnect HTTP Header
When your browser requests all the different files that make up your page (CSS, JS, Images etc) it first needs to establish a connection with the server, and to achieve that it needs to perform a DNS lookup. This is already done if the files are coming from the same place the page (HTML) came from, but often we house our files on other servers for a variety of reasons (think cloudfront and cloundinary for images, or typekit/google for fonts). This lookup can be done early and in parallel saving valuable time later in the waterfall.
article  images  performance  news  newslettered  353 
26 days ago
Responsible JavaScript: Part I
Jeremy does a good job of outlining what is meant by using Javascript responsibly when building sites. He looks at some common mistakes that can be made when going for JS first approaches, but don't be put off and think this is purely a JS bashing article. Instead, it's a 'incorrect implementation of js' bashing article which is the kind we need more of.
article  javascript  news  newslettered  353 
26 days ago
Everything Old is New Again
I love the layout of this blog. Large type, single column, and a finesse that I've been missing. I especially love the clipped heading text effect.
article  feature-site  news  newslettered  353 
29 days ago
Things nobody ever taught me about CSS. – Charlie Gerard – Medium
There are a few surprises is this list, not least of all about the way in which browser reads the CSS.
rwd352  article 
4 weeks ago
Who has the fastest website in F1?
And the winner is... not Ferrari (again). Jake loves F1 and web performance so has grouped these things together. Not only does it cover off the issues each has, Jake also looks at techniques to help get those numbers down.
rwd352  headline  performance 
4 weeks ago
1% Better
I really love the idea of small iterations to make a better product, but done on a daily basis. We often put off the small changes because we want to do something that has a bigger impact, but this way is a great approach to constant benefits.
newslettered  352  article 
4 weeks ago
How we built the fastest conference website in the world
Putting together the fastest conference site in the world from the person who manages AMP at Google... but without actually using AMP. Malte has some great suggestions here (and some options to go even faster).
newslettered  352  article  performance 
4 weeks ago
(83) The Impossible CSS Layout: Grid? Flexbox? Floats? Columns? JS! - YouTube
Wes Bos goes through this video tutorial to show how to use JS to manipulate some DOM elements to get a weird layout.
tutorial  352  newslettered 
4 weeks ago
CSS Flexbox: 5 Real World Use Cases
An overview of some common layout options and how you can accomplish them through Flexbox.
tutorial  352  newslettered 
4 weeks ago
Responsive spacing with viewport and ch units
using ch, vw, and vh units to provide scale-able padding solutions. It's about letting go of control a little bit, but with great results across every potential viewport.
newslettered  352  article  layout 
4 weeks ago
Sophisticated Partitioning with CSS Grid
I love this approach to laying out regular updated content in this way, however I was initially disappointed to see the final result was built using Tables.... only to realise on closer inspection that those tables there then laid out using Grid Layout.
tutorial  example  grid  352  newslettered 
4 weeks ago
Color.review
This interactive tool provides you with a colour picker divided into four sections that offer failed contrast, a pass on headings, and AA pass on text and headings, and a AAA pass on all. As you change the colour, the text on the page is also updated so you can see how the colour impacts the design.
352  design  tools  newslettered 
4 weeks ago
Grid and Data Table Library for JavaScript
ZingGrid gives you tons of built-in functionality right out of the box so you can visualize your datasets as grids and tables in no time.
newslettered  351  tools  javascript 
5 weeks ago
Readability
A standalone version of the readability library used for Firefox Reader View.
newslettered  351  tools 
5 weeks ago
The WebAIM Million
In February 2019, WebAIM conducted an evaluation of the home pages for the top 1,000,000 web sites using the WAVE stand-alone API (with additional tools to collect site technology parameters). While this research focuses only on automatically detectable issues, the results paint a rather dismal picture of the current state of web accessibility.
article  newsed  newslettered  351 
5 weeks ago
Real virtuality: connecting real things to virtual reality using web technologies – Mozilla Hacks – the Web developer blog
A very cool story and example of how to bring VR and the internet of things together. I've managed to carve out some time at work to look into some new innovations and I've got this lined up for next month, I can't wait.
newslettered  351  tutorial 
5 weeks ago
Mailchimp API
I use Mailchimp on a weekly basis to send these very emails. Recently I've been looking to use their API to pull out stats about the types of content that is shared and how it performs across all 350 editions. This is a super-simple, minimum abstraction MailChimp API v3 wrapper, in PHP built by Drew.
resource  mailchimp  351  newslettered 
5 weeks ago
Performance Budgets That Stick
Tim looks at how to pick performance budgets that matter and will continue to be a driving force for the business and your development. If the budget has no real contribution to your bottom line, eventually people will forget about it.
article  performance  news  newslettered  351 
5 weeks ago
Send Firefox
Firefox has released an alternative to WeTransfer with Send Firefox. I've been using we transfer the past couple of years to share video and photoshop files, but I'll be moving across to Firefox Send now.
resource  351  newslettered 
5 weeks ago
Accessibility Insights
I've heard lots of good things about this new tool produced from the Microsoft team. It is only available on Chrome and Windows at the moment but I hope to see it move to Firefox shortly.
newslettered  351  tools 
5 weeks ago
CSS { In Real Life } | How to convince your team to adopt CSS Grid
I hope you're not faced with this issue, but just in case you are there are a number of approaches you can use to get Grid into your next build. I think with the browser support plus the time savings on the build, it's just a no brainer.
article  news  newslettered  351 
5 weeks ago
Combining position: sticky; with overflow: scroll;
This is a great little technique if you have long data tables but need to keep the headings still within view.
newslettered  351  tutorial  news 
5 weeks ago
Subgrid on Can I use...
Support looks a little bleak at the moment, but things are going to start greening up soon.
resources  351  newslettered 
5 weeks ago
Designing An Aspect Ratio Unit For CSS
The CSS Working Group have designed an aspect ratio unit for CSS. While this isn’t in browsers yet, this article takes a look at the process of designing a new sizing method and explains how it will work.
article  tutorial  news  newslettered  351 
5 weeks ago
« earlier      
per page:    204080120160

Copy this bookmark:





to read