recentpopularlog in

justinavery : tutorial   1297

« earlier  
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 
4 days ago by justinavery
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 
4 days ago by justinavery
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 
10 days ago by justinavery
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 
17 days ago by justinavery
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 
17 days ago by justinavery
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 
18 days ago by justinavery
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 
18 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
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 
24 days ago by justinavery
(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 by justinavery
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 by justinavery
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 by justinavery
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 by justinavery
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 by justinavery
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 by justinavery
Building Robust Layouts With Container Units — Smashing Magazine
hen inspecting most other grids in DevTools, you’ll notice that column widths are dependent on their parent element. This article will help you understand how to overcome these limitations using CSS variables and how you can start building with container units.
newslettered  350  tutorial 
6 weeks ago by justinavery
How To Build An Endless Runner Game In Virtual Reality (Part 1) — Smashing Magazine
Virtual reality (VR) is an experience based in a computer-generated environment, and following Alvin’s introduction to programming in VR, this article series aims to introduce more VR concepts in the context of building a game.
newslettered  350  tutorial 
6 weeks ago by justinavery
Make your Google Fonts render faster
This tutorial pretty much does what the title says.
newslettered  349  performance  tutorial 
7 weeks ago by justinavery
HOW - Pure CSS - cyanHarlow
There's some amazing art being done by creative folks through using only CSS. Here are the top 5 CSS properties that Diana Smith uses to product her pure CSS art.
newslettered  349  tutorial  CSS 
7 weeks ago by justinavery
Content-based grid tracks and embracing flexibility
With the min-content, max-content and auto keywords, we can size grid tracks based on their content. Hidde uses this tutorial to uncover a great way to use Grid with your designs.
tutorial  article  349  newslettered 
7 weeks ago by justinavery
8 little videos about the Firefox shape path editor
Firefox Dev tools has a number of great options for working on your design in the browser, and one of those is the shape path editor. These are 8 little gifs that will help you go from zero to hero.
newslettered  349  tutorial 
7 weeks ago by justinavery
A Bit of Performance
Some really great tips on bringing down the load time and improving the perceived performance of this site through a range of different implementation techniques.
newslettered  349  tutorial 
7 weeks ago by justinavery
JavaScript Loading Priorities in Chrome
How browsers schedule and execute scripts can impact the performance of web pages. While techniques like <script defer>, <link rel=preload> (and others) influence script loading, knowing how browsers interpret them can also be helpful. Thanks to Kouhei Ueno, we now have an up to date summary of script scheduling in Chrome.
newslettered  348  tutorial 
8 weeks ago by justinavery
Adapting to user preferences
With users demanding more control over their web browsing and the ability to provide these options becoming easier it's time that we started looking at how to integrate these options into your web builds. This article looks at how you might adhere to Reduce Motion, Prefers Color Scheme, Save Data, and Do Not Track.
newslettered  348  tutorial 
8 weeks ago by justinavery
Fancy new selectors within groups can break your CSS rule
Just when you think CSS is completely forgiving in its syntax here is an example where it will ignore your CSS rules. I would have thought it would skip over selectors it didn't recognise, but it seems that if one is invalid (not recognised) it skips the whole group and rules altogether.
tutorial  CSS  article  newslettered  newsed  348 
8 weeks ago by justinavery
How A Screen Reader User Accesses The Web: A Smashing Video
In this Smashing TV webinar recording, join Léonie Watson (a blind screen reader user) as she explores the web, and find out about some unexpected properties of HTML elements that not only have a huge impact on accessibility, but also turn out to be pretty good for performance, too.
newslettered  348  tutorial  video  accessability 
8 weeks ago by justinavery
CSS Scroll Snap — How It Really Works
A nice explanation of one of those things that became a huge hit with interactions and only used to be possible with JS.
tutorial  347  newslettered 
9 weeks ago by justinavery
CSS { In Real Life } | To Grid or to Flex?
Michelle took note of Chris Coyier's tweet (likely tweeting to get some feedback to write the article above) and has provided her own take on which to reach for and why.
tutorial  347  newslettered 
9 weeks ago by justinavery
Designing for Dark Mode | KIRUPA
A nice look at the design side of things when dealing with Dark Mode. We are getting some queries to allow users to set preferences for dark mode, so now's the time to learn about how to tackle areas that you may not have considered
tutorial  347  newslettered 
9 weeks ago by justinavery
Quick! What's the Difference Between Flexbox and Grid?
I generally just go with
Flex = one directional layout (vertical OR horizontal)
Grid = two directional layout (vertical AND horizontal)
There's more to it than that though, as Chris points out so eloquently.
tutorial  flexbox  grid  347  newslettered 
9 weeks ago by justinavery
Colorful Pattern Masking in Illustrator
This is a great step by step tutorial on creating a lovely text mask in illustrator, but what if you wanted the result to come out of illustrator and be used on the web? You could export as a png, or as an svg and include it as an image, but then what if you wanted that style across your site for all headings, or provide the ability to update the text? Well, you could do this.... so I'm going to work on a tutorial for just that this week.
newslettered  346  tutorial  write-article 
10 weeks ago by justinavery
How we wrote our own Service Worker
Tumblr have added Service Workers to their sites now and have provided this tutorial on how they went about implementing it.
346  tutorial  newslettered 
10 weeks ago by justinavery
CSS Position Sticky - How It Really Works!
position sticky is a great way to feature sidebar content for as long as it can until something is there to replace it. This is a great tutorial from Elad about how and why it works.
tutorial  345  newslettered 
11 weeks ago by justinavery
Firefox DevTools for CSS authors – LogRocket
This week I've noted a few of the great updates to Firefox and the dev tools so this tutorial on how to take advantage of the tooling as a CSS author is perfect timing.
tutorial  345  newslettered 
11 weeks ago by justinavery
Taotajima.jp WebGL deconstruction – akella – Medium
This tutorial breaks down a wonderful looking website with a really interesting homepage transition effect between videos when you scroll. I really love when people take apart the build of a site, it makes me wish that I did more in the examples section.
tutorial  345  newslettered 
11 weeks ago by justinavery
Dropbox Paper as a headless CMS
I've been on the lookout for something very similar to this, and while I think I'll end up going with [https://getkirby.com/]Kirby I think it's very interesting approach and certainly thinking a bit outside the box.
tutorial  cms  345  newslettered 
11 weeks ago by justinavery
Creating SVGs with Processing
Everywhere we look there is data. There's a lot of it and it can be incredibly interesting if it it used in the right way to tell a story. Using data as the origin to form design elements across your site and wider campaign can be both beautiful and informative. This tutorial helps combine processing with SVG as an output to produce some interesting visuals.
tutorial  svg  345  newslettered 
11 weeks ago by justinavery
Understanding API-Based Platforms: A Guide For Product Managers
I've been working with API's and websites for a number of years now, yet anytime a client would ask "What's an API though and what does it do" I've never had a go-to explanation. Now, I have the restaurant example
tutorial  345  newslettered 
11 weeks ago by justinavery
Putting the Flexbox Albatross to Real Use | CSS-Tricks
Last week we featured a new layout approach developed by Heydon Pickering called the Albatross layout, and now Chris from CSS tricks has used this to position ads on his site. Love it.
tutorial  news  newslettered  344 
12 weeks ago by justinavery
Priority Hints
Priority hints allows you to add `importance='' ` to link and img tags (and fetch events). This provides an indication to the browser what they should be focusing the downloads on first and is a good replacement for using too many rel='preload'.

Here's an example you might have for a carousel below.

<ul class="carousel"> <!-- The first image is visible --> <img src="img/carousel-1.jpg" importance="high"> <!-- The other carousel images are not --> <img src="img/carousel-2.jpg" importance="low"> <img src="img/carousel-3.jpg" importance="low"> <img src="img/carousel-4.jpg" importance="low"> </ul>
tutorial  news  newslettered  344 
12 weeks ago by justinavery
How to Stop Using Browser Dev Tools and Start Using Your Editor’s Debugger
I'm such a console.log() javascript developer. Actually I lie, I'm not anywhere near the point that I could refer to myself with "javascript" and "developer" in the same sentence, unless it's prefixed with "I'm a really terrible ". For those of you that have honed your craft a little better, you might be interested in setting up VS Code with a debugger directly within the code editor. I'm even going to do this myself so I can see the things I'm doing wrong without having to switch windows.
tutorial  javascript  news  newslettered  344 
12 weeks ago by justinavery
Table Design Patterns On The Web
A good refresher for the different ways that you can layout a data table on the web (hot tip, don't use CSS Grid for this one). I still think that the Filament Group options are the best (https://responsivedesign.is/resources/data-tables/rwd-table-patterns/)
tutorial  news  newslettered  344 
12 weeks ago by justinavery
Solving a Tricky Layout Problem with CSS Grid
Michelle takes us through a layout she was trying to achieve and the different approaches used to reach the right outcome. I love real life 'how I approached a problem' articles.
tutorial  newslettered  343  newsed 
january 2019 by justinavery
Augmented Reality and the Browser
Moving into the realm of XR is where I think it's going to be getting really exciting over the next 18 months. Here's a great experiment about getting some persistent markers going without using an app.
newslettered  343  tutorial  AR  VR 
january 2019 by justinavery
Understanding the Albatross - Snook.ca
As pointed out above, Snook reviews example why Heydon's new approach to layouts using flexbox actually works which means if it doesn't for what ever reason at least you know where to start fixing it.
newslettered  343  tutorial  flexbox  layout 
january 2019 by justinavery
Use the :lang pseudo-class over the lang attribute selector for language-specific styles
If you've got a site that has multiple languages on the page and you want to target those languages with a specific layout or look then you need to know whether to use the lang attribute or the pseudo class. Fortunately, Ire is here to help. I think styling based on language is incredibly helpful, especially when it comes to line lengths across different languages.
newslettered  343  html  css  language  tutorial 
january 2019 by justinavery
DRY Switching with CSS Variables: The Difference of One Declaration | CSS-Tricks
Ana Tudor is an epic amazing designer and developer, and her ability to stretch CSS for some visual sugar is unsurpassed.
newslettered  343  tutorial 
january 2019 by justinavery
Sass Techniques from the Trenches
We've got an article this week about doing away with Sass, but that's not to say it still isn't an incredibly powerful tool when required. Here are a few tips that might make your Sass usage a little better/easier.
tutorial  342  newslettered 
january 2019 by justinavery
Case Study: lynnandtonic.com 2018 refresh - Lynn Fisher
I first came across Lynn's site last year with her multiple media query based website and am really happy to see that she's once again redesigned the site. Check out her overview of the process.
tutorial  342  newslettered 
january 2019 by justinavery
(77) Making Future Interfaces: Algorithmic Layouts - YouTube
Well this is my favourite video for 2019 (although I haven't watched the new Black Mirror just yet). Learn how to create CSS layouts that are self-governing, using Flexbox and Grid with your narrator Haydon Pickering.
318  tutorial  flex 
january 2019 by justinavery
Dynamic Social Sharing Images
It's been on my list of side projects to enable automatic screenshots for the Am I Responsive tool, I think this is something which I could adapt. Very cool tutorial from Drew.
tutorial  24ways  newslettered  newsed  341 
january 2019 by justinavery
Why Beginning Designers Don't Need to Learn Grids, Type Scales, or Color Theory (and other “Designer Dogma”) – Learn UI Design
It's not that you don't need to learn them and that's it, but Erik talks more about what you should be focusing on to get great design results which aren't based on the traditional approaches.
newslettereed  news  341  reference  design  tutorial 
december 2018 by justinavery
Styling a Select Like It's 2019
Everyone, and by everyone I mean designers, love to make select boxes look better than their default appearance. Often this means hacking the way the select is built with JS, but filament group have an alternative option.
tutorial  forms  news  newsletterd  340 
december 2018 by justinavery
Fast Autocomplete Search for Your Website ◆ 24 ways
Performance is really a long race which needs to be worked on constantly over the journey of your site’s life.
tutorial  news  newsletterd  340 
december 2018 by justinavery
Performance Calendar » Performance is a Marathon: Successful tactics for web page performance
Performance is really a long race which needs to be worked on constantly over the journey of your site’s life.
tutorial  news  newsletterd  340 
december 2018 by justinavery
Handling broken images with the service worker
Ire shows you how to expand on the power of your service worker to plug the gaps of any broken images you might have on your site.
tutorial  javascript  service-workers  images  news  newsletterd  340 
december 2018 by justinavery
glTF: An Image Format for AR/VR
I've been off this week and I've returned to working on some Web AR/VR side projects and have been very careful not to push too many heavy images down the pipe. I didn't know about the glTF 3D image format but I think it's interesting passing off the image references to something like Cloudinary.
tutorial  image  performance  WebXR  AR  VR  model  3d  news  newsletterd  340 
december 2018 by justinavery
Build a PWA in Just 10 Minutes
I'm going to put it out there, if you start at step one and it's adding SSL to your site that will take you longer than 10 minutes. But, it does take you through the minimum requirements to getting a PWA, and it gave me a great idea for an offline page using service workers.
tutorial  news  newsletterd  340 
december 2018 by justinavery
Why and how to use WebP images today
Ire takes you through just about everything you need to know about WebP, including a lovely little node tool for generating WebP through imagemin.
tutorial  performance  image  news  newsletterd  340 
december 2018 by justinavery
WebP image file sizes compared to equivalent Guetzli and Zopfli - Ctrl blog
I had previously assumed that WebP was always going to result in a smaller image size but that's not always true (but most of the time it is). If you're using really small images something like Guetzli compression will do a better job, but that's about the only time.
article  tutorial  performance  images  news  newslettered  340 
december 2018 by justinavery
Everything about CSS environment variables
I was aware of CSS Custom Properties, but CSS Environment Variables are completely new to me. Supported by over 70% of the current browser population they're worth looking into (with sensible fallback in place of course)
tutorial  news  newsletterd  340 
december 2018 by justinavery
Keep Math in the CSS | CSS-Tricks
One of the not-so-exciting part of my job is helping produce cost estimates for work in the form of an excel spreadsheet. One thing that I do enjoy and find incredibly useful when we return to the quotes months later is the use of calculations and formula's in the estimates. It means when I go back and think "how did we come up with 6 days for design, oh it was 4*1.5 for 4 designs and 1.5 days each." The same thing goes for your CSS, by using calc() you instill comments naturally through the development.
tutorial  339  newslettered 
december 2018 by justinavery
Trying something new – building the Life in the Dark interactive splash | Digital Media at the NHM – Blogs from the Natural History Museum
A great overview of a wonderful enhancement that the team from the Natural History Museum built for their creatures in the dark collection
tutorial  339  newslettered 
december 2018 by justinavery
Performance Calendar » Performance Anti-Patterns: Base64 Encoding
Going way back to Steve Souders original orielly book on performance his first rule was simple, make less requests. As a result we did things like Base64 encoding files into our HTML, but is that really a good approach these days?
tutorial  performance  339  newslettered 
december 2018 by justinavery
What is the Shadow DOM?
You probably (should be) aware of the DOM in our line of work, and you likely know that it stands for Document Object Model. But, did you know what the Shadow DOM is, I certainly didn't (although that didn't stop me from creating the Drop Shadow DOM - https://responsivedesign.is/articles/drop-shadow-dom/) but thanks to Ire's lovely article I'm now up to speed! thanks Ire.
tutorial  html  339  newslettered 
december 2018 by justinavery
« earlier      
per page:    204080120160

Copy this bookmark:





to read