recentpopularlog in

justinavery : newslettered   5410

« earlier  
Font Smoothing
font-smooth has been removed from the CSS standards and the MDN documents strongly recommend you not to use it on production websites. So why do we still use it?
newslettered  368  article 
6 days ago by justinavery
Firefox 68: BigInts, Contrast Checks, and the QuantumBar - Mozilla Hacks - the Web developer blog
Firefox 68 has been released with one particular new feature that caught my eye this week. If you enable the Accessibility features you can check a text node to see if it passes the colour contrast test.
newslettered  368  article 
6 days ago by justinavery
CSS { In Real Life } | Debugging CSS Grid Part 3: Auto-flow, Order and Item Placement
Getting Grid to work can be tricky, check out part three in this series to see how your elements will react being laid out across your grid, and why sometimes things don't always place in exact order depending on how you declare the grid.
newslettered  368  tutorial  grid  news 
6 days ago by justinavery
Making an interactive hoverboard game using JavaScript and web sockets
This is epic and I know what I'm going to be doing for our playground session next Friday. I love the idea of mixing our phones/other devices with a desktop experience and utilising all the inputs we have in these devices to create a more engaging experience on the web.
newslettered  368  tutorial 
6 days ago by justinavery
Building the most inaccessible site possible with a perfect Lighthouse score - Manuel Matuzović
Just because you're tests are showing that you're doing the right things doesn't mean that you're doing the right things. Tools like Lighthouse are great to help you identify issues, but a perfect score doesn't not mean you've done a great job.
article  news  newslettered  368 
6 days ago by justinavery
Cross-platform Augmented Reality with Unity | Viget
Viget recently shipped a mobile AR app for a geoscience museum. Here are a few lessons they learned along the way about building cross-platform AR apps in Unity.
article  newslettered  368 
6 days ago by justinavery
Extending Atomic Design
Six years on a Brad Frost takes a look at where Atomic Design started and how it's been evolved over that time. There's been a number of articles and extended ideas from the approach that Brad coined, and they're wrapped up in this post.
newslettered  368  article  news 
7 days ago by justinavery
Site Designer 4
Better User Experience. Extremely Powerful Controls. Increased Productivity. Experience the Upgrade Today!
tools  367  newslettered 
13 days ago by justinavery
What I Learned Co-Founding Dribbble
This is such a great article for anyone that likes to dabble in side projects and one-day dreams that something might come of them but thinks it will never happen. Dan explains his approach to Dribbble and what he learned of the past 10 years. An excellent read!
headline  inspiration  367  newslettered 
13 days ago by justinavery
Responsive design ground rules | Polypane: The browser for responsive web development and design
It's always good to get back to basics, and that's exactly what this article does by reminding us of the building blocks for RWD.
tutorial  367  newslettered 
13 days ago by justinavery
Making width and flexible items play nice together
Robin looks at a quirk that you might find when aligning images with Flex layout and having it shrink down too far. A careful placement of flex-shrink:0 against the image works wonders.
tutorial  flexbox  367  newslettered 
13 days ago by justinavery
Eva Design System: Deep learning color generator
Enter your Brand colour and get beautiful colour combination generated by AI. The unique colour system simplifies pallets creation making it fun to choose a stunning colour scheme for your next product.
tools  367  newslettered 
13 days ago by justinavery
Pixel Match
The smallest, simplest and fastest JavaScript pixel-level image comparison library, originally created to compare screenshots in tests.
tools  367  newslettered 
13 days ago by justinavery
Free Charting Library
Charting is the heart of TradingView. Developer-friendly and powerful for users, these charts are used by 10,000’s of websites and millions of traders around the world.
tools  367  newslettered 
13 days ago by justinavery
How to build a calendar with CSS Grid | Zell Liew
A while back I posted an snippet on buidling a responsive calendar which has turned out to be one of the most popular pages on the site. This week Zell explains how you might put one together using CSS Grid. They aren't the same kind of calendar, Zell's looks much more like a date picker but it has the fundamentals. I'm going back to revisit the snippet on our site to add in the CSS Grid alternative.
tutorial  grid  367  newslettered 
13 days ago by justinavery
User Inyerface - A worst-practice UI experiment
This is a brilliant game to see just how crappy you can make a user interface. Although it's a joke, there are a number of poor UI implementations that I've seen more than once.
tools  inspiration  367  newslettered 
13 days ago by justinavery
URL Pages
Here is this whole newsletter on the RWD site, but also in the URL pages.
headline  367  newslettered 
16 days ago by justinavery
What I Learned From Designing AR Apps
I was playing around with image recognition and AR last night so I was glad to find this article in my feed this morning.
newslettered  366  article 
20 days ago by justinavery
CSS Grid Demo: “Kandinsky zum 60. Geburtstag” – Bram.us
Another great use of CSS Grid. If you want to see those gridlines yourself you can use Firefox developer tools.
newslettered  366  article 
20 days ago by justinavery
How to Enable Experimental Web Platform Features in Chrome and Firefox
The title kinda gives away what this article is all about. If you're looking at how to do it on Safari you can go to the Develop menu option and down to the Experimental Features option in there.
tutorial  newslettered  366 
20 days ago by justinavery
Beginner's Guide to Variable Fonts: Part 1
Viget brings a two-part introduction to Variable Fonts.
tutorial  newslettered  366 
20 days ago by justinavery
Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites
Dark patterns are user interface design choices that benefit an online service by coercing, steering, or deceiving users into making unintended and potentially harmful decisions. These are the results from a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark patterns
newslettered  366  article 
20 days ago by justinavery
An Introduction to D3.js
So, you want to create amazing data visualizations on the web and you keep hearing about D3.js. But what is D3.js, and how can you learn it? Let’s start
tutorial  newslettered  366 
20 days ago by justinavery
Building a Conference Schedule with CSS Grid | CSS-Tricks
When it comes to setting up schedules/diary kind of things for website layouts I'm always focused on ensuring that the solution allows for maximum flexibility for the content editor, and very little additional effort to get it laid out (i.e. it has to be super dynamic). Another great use of CSS Grid!
tutorial  grid  newslettered  366 
20 days ago by justinavery
Render Snarky Comments in Comic Sans—zachleat.com
By running your comments through a sentiment analysis you can get a feel for the tone of the comment, and then programmatically change its appearance by applying random cApS and Comic Sans. I'd be too nervous that the programmatic approach would render some serious comments in that way and damage your relationship with that person, so test the sentiment stuff out first.
tutorial  news  newslettered  366 
20 days ago by justinavery
Am I cached or not?
Detecting on the client side whether a page was served from Cache can be an important feature for your website. You don't want folks reading stale news if you're updating it frequently, your article might have had a refresh, you might be serving up live content that is static. I feel this will mainly occur when using service workers, where the page in cache is always returned before going to the network. This tutorial from Jeremy shows how we can timestamp our pages and then run some client side JS to detect if it's a recent version.
tutorial  newsed  newslettered  366 
21 days ago by justinavery
Drop caps & design systems - Vox Product Blog
It's been a while since I've come across one of Ethan's epic design posts and it's certainly been worth the wait. Do you want to know more aobut drop caps (initial letter), well this article from Vox and Ethan has you covered.
article  typography  365  newslettered 
27 days ago by justinavery
Darkmode.js
This library uses the css mix-blend-mode in order to bring Dark-mode to any of your websites. Just copy paste the snippet and you will get a widget to turn on and off the dark-mode. You can also use it without the widget programmatically. The plugin is lightweight, built in VanillaJS. It also uses localstorage by default so your last setting will be remembered !
newslettered  365  tools  javascript  library 
27 days ago by justinavery
Tips for Portable Patterns - Cloud Four
With patterns and modules becoming their own things rather than something that is only part of the page it's important that the patterns you develop can work in a variety of situations, as well as across a variety of different viewports.
newslettered  366  article  news 
27 days ago by justinavery
Optimizing Google Fonts Performance
Last week we featured a <a href="https://responsivedesign.is/articles/improving-performance-with-google-fonts/">new performance technique for google fonts</a>, but this week Smashing Mag have a whole host of different options for you
tutorial  newslettered  366 
27 days ago by justinavery
City Intelligence Data Design Guidelines – London Datastore
The London City Intelligence Unit creates a lot of maps and visualisations. To help with this they've created and now shared this set of guidelines that will help you get you started. This goes so well along with the space visualisations this week
newslettered  365  resource 
27 days ago by justinavery
A simple starter kit for Eleventy
Hylia is a lightweight Eleventy starter kit with Netlify CMS pre-configured, so that you can one-click install a progressive, accessible blog in minutes. It also gives you a well organised starting point to extend yourself.
newslettered  365  resource 
27 days ago by justinavery
The Technical Side of Design Systems
Take a look at Brad Frost's talk from the CSS Day Conference where he talks about the non-design side of design systems. These are often the hardest things to get right and go a long way to ensuring that the design system can stand the test of time, and work throughout your company.
video  conference  365  newslettered 
27 days ago by justinavery
basier mono | atipo foundry
A monospaced font that you can pick up for free with a single weight, or pay what you want for the whole family.
newslettered  365  tools 
27 days ago by justinavery
Sustainable Web Manifesto
This is a lovely idea and a beautiful one-page site. I hope that they add links to find things like Clean renewable hosting, or which popular products are Open and Honest.
finally  365  newslettered 
27 days ago by justinavery
Mozilla will launch a paid version of Firefox this fall (Updated)
Would you pay for a browser? Given there is some addons and storage involved with this, and the fact that I trust Mozilla much more than a lot of the other browser vendor (singular intentional), I probably will.
article  365  newslettered 
27 days ago by justinavery
How to Use the Web Share API
This covers pretty much the baseline for what you need to know about the Web Share API. By implementing it on your website, visitors can share your content more easily across a wider variety of social networks, with contacts and other native apps.
newslettered  365  tutorial  javascript 
27 days ago by justinavery
Improving Performance with Google Fonts
Reduce up to 90% of your Font loading by using this cool little technique if you're only using a small subset of characters from a font family
newslettered  365  tutorial 
27 days ago by justinavery
How to Section Your HTML
Defining your HTML within the markup might seem like a trivial task, but since the arrival of HTML5 markup we have a semantic duty to apply the right tags to the right area. This article covers everything from <main> to <aside>, <header> and <footer>, <section> and <article> and much more. You should read it.
article  news  html5  accessability  365  newslettered 
27 days ago by justinavery
Website Speed Test - Image Analysis Tool by Cloudinary
This tool from Cloudinary will take a URL from you and then run a report across all of the images on that page to let you know how much faster you can make your site. Here's an example when I ran it across my shopify notebook store.
newslettered  365  tools 
27 days ago by justinavery
Refactoring UI | CSS Day 2019
Sometimes when we look at a polished interface we can acknowledge that it looks good but it’s hard to articulate why it looks good. In this practical session, Steve will be explaining the why. He’ll be looking at a poorly designed UI and refactoring it while providing some of the strategies and techniques designers use to give an interface that polished look.
conference  365  newslettered 
27 days ago by justinavery
Gitting Your First Dev Job
Git is a really valuable tool in any developers toolbox. Here are the key commands you should familiarise yourself with when approaching your first year on the job.
newslettered  365  tutorial 
27 days ago by justinavery
Audiobook Profile for Web Publications
We have had a set of standards for ebooks for a long time, the EPUB standard, but nothing has ever standardised the way in which we approach Audio Books. With the rise of the podcast and the continued popularity of ebooks this is a welcome new development
article  365  newslettered 
27 days ago by justinavery
A Topographic Map of Mercury
Just to be clear, this doesn't have anything to do with front end development, but I think you'd be a fool not to check it out. I love anything to do with space, so when I was sent this link to check out these maps and the accompanying detailed code tutorials I lost many many hours to learning and fun. The code tutorial is linked from this article and takes you through how to plot data (specifically, maps) using Python. The data itself is pulled from public places (thanks NASA). It is an excellent tutorial about the process start to finish for data visualisation and design.
newslettered  365  tutorial  space  python  data-visualisation  news 
27 days ago by justinavery
Micro Frontends
As frontend codebases continue to get more complex over the years, we see a growing need for more scalable architectures. This allows different parts of the application to be worked on by domain experts but still pull together simply.
article  365  newslettered 
27 days ago by justinavery
HTML is the Web
Whether you're writing Vue or React you still need to know about HTML. That's exactly what this article is all focussed on, the HTML as the basic building blocks of what we do.
article  accessibility  html  365  newslettered 
28 days ago by justinavery
When should you be using Web Workers?
A really great read from Surma about when you should be including Web Workers on your site. The great thing about this post is that it isn't just about when/how, but it provides you with a great understanding of the current mobile web footprint, and how that is going to change over the next 10-15 years (based on current trends).
newslettered  365  headline 
28 days ago by justinavery
Relearn CSS layout: Every Layout
Brought to you by the great minds of Heydon Pickering and Andy Bell, Every Layout is a site that will help you relearn the way in which you previously used CSS to build out particular layouts by using the new CSS capabilities like CSS Grid and Flexbox plus much more.
newslettered  365  resource 
28 days ago by justinavery
Custom Underlines with SVG
Underline links don't have to be the standard blue straight line that they were when Sir Tim put together the WWW (although most people recognise what they are when left the way they were). This tutorial shows you how you can use SVG as the underline, along with making it random and animating the path.
newslettered  365  tutorial 
29 days ago by justinavery
Scraping Burned Toast
Google has recently proposed a new element into the HTML ecosystem, the <toast> element. This would be used to semantically encapsulate any elements that provide a notification kind of popup (all I need is for people to have more reasons to use notification popups). In this post Adrian covers the timeline and the backlash in the community.
article  newsed  365  newslettered 
29 days ago by justinavery
What if we got aspect-ratio sized images by doing almost nothing?
Trying to get the aspect ration is really important because while on load of the page the browser can know how wide an image will be, there's no way of knowing the height which means we are going to have content shifting down the page as you're reading while the images load.
article  364  newslettered 
4 weeks ago by justinavery
What is a font vs. a typeface?
I love this series of posts from The League of Moveable Type.
article  364  newslettered 
4 weeks ago by justinavery
Making QR codes with cloud functions
I've recently been trying to create some QR codes for an ongoing notebook project I'm working on and it never occurred to me to be able to roll my own QR Code generator. This is also a good introduction on how to get into and utilise serverless applications
newslettered  364  tutorial 
4 weeks ago by justinavery
Drawing Realistic Clouds with SVG and CSS | CSS-Tricks
This is a wickedly clever approach that gives you photorealistic clouds through CSS and SVG. I'm not sure when you're ever going to reach for this in a project, but the ability to do it is wonderful and helps open the mind to other possibilities.
newslettered  364  tutorial 
4 weeks ago by justinavery
Vertical and Horizontal Lines
When we're creating content on a page a lot of the time we want to separate that content with lines, either vertically or horizontally. Sure, you can just separate them with whitespace, but sometimes the design will work better with a physical line. So how do you go about it? Well, here's a few different ways to approach it using CSS Grid and Flex
newslettered  364  tutorial 
4 weeks ago by justinavery
Your first performance budget with Lighthouse
Lighthouse is a great tool that sits within the Chrome browser that allows you to run a set of different tests on your webpage. What I didn't know about it was that it was avaialble as a CLI and allows you to parse through your own budget information to test against. This article from Ire covers just how to get started. Enjoy!
article  tutorial  performance  lighthouse  364  newslettered 
4 weeks ago by justinavery
This page is a truly naked, brutalist html quine.
This is such an interesting idea! The entire page/article is about exposing HTML to the front end, and does it by explaining how you can use CSS to bring the HTML that is usually invisible to the reader (the actual code, not the effects) and display it without applying any additional markup. Very clever.
article  364  newslettered 
4 weeks ago by justinavery
These Weeks in Firefox: Issue 59 – Firefox Nightly News
Layout Tools

Inactive CSS landed! It’s currently only ON by default in nightly (since 68) but will ship to everyone with Firefox 69. Bug 1306054. We will be adding a larger collection of warnings very soon too, to warn users about more tricky CSS cases.

[A tooltip in the CSS property inspector explains that a justify-content property doesn't apply to a non-flex element.]

This tooltip shows a CSS property that has no effect on the current element in the Inspector, and explains why.
article  364  newslettered 
4 weeks ago by justinavery
Extract critical CSS
We don't here too much about critical CSS these days, but it can still help with first paint and make users feel like your site is super fast by putting content in front of them sooner.
tutorial  performance  363  newslettered 
5 weeks ago by justinavery
CSS Grid Level 2 - subgrid is coming to Firefox
We talked a little about sub-grid last week and this week Rachel Andrew delivers _everything_ you need to know about the support in Firefox.
newslettered  363  article 
5 weeks ago by justinavery
Image Optimization In WordPress
Reducing the size of your images is a sure fire way to increase the speed of your website and lower the frustrations of your users. If you're running Wordpress (I'm guessing about 33% of you) then here's a few approaches you can use (non wordpress users will find it helpful too).
tutorial  363  newslettered 
5 weeks ago by justinavery
The Co-opetition of Team Web
I love this post from Zach about how similar tools/products to your own that you're developing aren't necessarily a competitor, but they can work well together or spur you on to improve your own products. The web as a whole, you and I, we strive to collaborate and make great things. I love that.
newslettered  news  363  article 
5 weeks ago by justinavery
Medium to your own blog
This week we have a tool that will help you add a search function to your static Gatsby site, now this tutorial will take all your amazing content from Medium and drop it onto a Gatsby powered site just for you.
tutorial  363  newslettered 
5 weeks ago by justinavery
3 Reasons Against Ad Blockers
A really interesting article about ad blockers from Jens. As a content creator I really understand his second point about damaging creators. I'm lucky to have the newsletter sponsored by other publications, events, and useful products, but small income from the site itself has steadily declined over the past few years. I totally get why you might use them though, other publications and sites have really made them a necessity for browsing these days
article  newslettered  363 
5 weeks ago by justinavery
Increase Customer Centricity With Workshops
Running a workshop with clients to identify the products needs against your customer base can be _hard_. This article from Claire is a 35 minute read but with a tonne of valuable tips and tricks on how to prepare and run sessions, it even has agenda's and sample downloads.
tutorial  363  newslettered 
5 weeks ago by justinavery
Gatsby site search with Lunr.js
One of the downsides for a static site is that a search capability is tough to come by. This tutorial looks at using a tool called Lunr.js (note the similarity to Solr) on how you might use this with your static site.
tutorial  newsed  363  newslettered 
5 weeks ago by justinavery
« earlier      
per page:    204080120160

Copy this bookmark:





to read