Media Queries Based on Element Width with MutationObserver
You have probably faced a situation before where you really wished CSS media queries were based on elements’ width rather than the entire viewport. This article explores a JavaScript approach to add different attributes to an element depending on its width using resize event and MutationObserver.
news  newslettered  280  headline 
10 days ago
HTML5 Boilerplate 6.0 Released
HTML5 boiler plate has hand an upgrade. They've removed IE8 support, included a sample Web App manifest file, upgraded to modernizr 3 and more.
newslettered  280  resource 
10 days ago
Help Your Users `Save-Data` | CSS-Tricks
A range of performance tips from Jeremy Wagner, a lot of which you can get from his book "Web Performance in Action".
tutorial  280  newslettered 
10 days ago
Responsive Text, Daft Punk Style
These are some great ideas for dealing with unknown text heading lengths, and I love the use of --css-variables for the calc it approach.
tutorial  280  newslettered 
10 days ago
Redesigning Laravel.io – Refactoring UI – Medium
A detailed look at over 20 tweaks to a redesign for the laravel.io site
article  newslettered  280 
10 days ago
Building a CSS-only image gallery (with fallbacks)
I think the title says it all, not much for me to add :)
tutorial  280  newslettered 
10 days ago
Implementing A Service Worker For Single-Page App WordPress Sites – Smashing Magazine
. SPAs greatly enhance service workers, such as enabling you to choose from different appshells to load during runtime. Integrating with WordPress is not all that smooth, at least to make the website become offline first, because we need to find all resources from the theme and all of the plugins to add to the precache list.
tutorial  280  newslettered 
10 days ago
CodePen - Lazy loading with inline SVG
This is a great way to give your users an understanding of what is about to load (once the images finally come down the wire ;)
tutorial  codepen  lazyload  adobemax17  280  newslettered 
10 days ago
6 myths of Progressive Web Apps – Samsung Internet Developers – Medium
Do you know what a PWA is? Do you know what it isn't? Peter O'Shaughnessy takes us through 6 misconceptions about progressive web apps
pwas  article  newslettered  280 
10 days ago
The Typekit Blog | Advanced web font loading with Typekit’s CSS embed code
Typekit has done another post on using font face observer to improve font loading with their new CSS solution.
tutorial  performance  280  newslettered 
10 days ago
Essential Image Optimization
This is a wonderfully comprehensive ebook from Addy Osmani. "In 2017, image optimization should be automated. It's easy to forget, best practices change, and content that doesn't go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist."
news  newslettered  add-site  279  headline  adobemax17 
17 days ago
New WebKit Features in Safari 11
A tonne of new features in Safari 11 including variable Fonts, WebRTC support, Timings API, blocking auto-play videos and more.
news  newslettered  279  article 
17 days ago
Fundamentals of Responsive Images
Someone asked me the other day why I still have responsive images as part of my presentation about the future of RWD and the answer is simple. In the current day implementations, not enough people are using a responsive images approach to warrant me taking it out. This is a nice overview of what you should be doing.
news  newslettered  279  tutorial  responsive  images  adobemax17 
17 days ago
A Five Minutes Guide to Better Typography
Some mighty fine rules to guide you when working with typography in your next web project.
news  newslettered  279  article 
17 days ago
Scrolling your website past the iPhone X’s notch
A couple weeks ago we featured one of the nice UI's for dealing with the notch where the elements wrapped around it as you scrolled through the list. PPK has written a proof of concept to show how it could be done in the wild.
news  newslettered  279  tutorial 
17 days ago
UI Testing at Squarespace
With ScreenshotRecorder’s unique “scratch screenshots” and well-defined diffing behavior, we’ve been able to build a test suite that is consistently centered around screenshot comparison.
news  newslettered  279  article 
17 days ago
[css-grid][css-flexbox] Pinterest/Masonry style layout support · Issue #945 · w3c/csswg-drafts
With Grid picking up a lot of steam on implementations in the wild now the recommendation/requests list for it continues. The most popular and frequently asked for update is to allow it to achieve Masonry layouts.... which it currently can not do (but there's certainly a lot of conversation about it)
newslettered  279  article 
17 days ago
How we created a design system for the U.S. government
When building out a large-scale design system, it can be hard to know where to start. By focusing on the basics, from core styles to coding conventions to design principles, you can create a strong foundation that spreads to different parts of your team.
news  newslettered  279  article 
17 days ago
What’s Next for Pattern Lab | Brad Frost
Since Pattern Lab launched four and a half years ago, pattern-driven development, style guides, and design systems have become industry best practices. Pattern Lab’s played a role in that, and we’re thrilled to evolve the tool to continue to help teams create beautiful, robust, versatile, resilient, UI design systems. Expect a lot of activity in the coming months.
newslettered  279  article 
17 days ago
Upperquad  |  Le Tote
example of interesting animation as the site unfolds
rwd279  example  animation  lazyload  adobemax17 
23 days ago
Microsoft Edge Web Summit 2017
This is a great example of a big site in production for a big brand that is using Grid Layout. Let's break it down.
add-site  example  adobemax17  grid 
23 days ago
CodePen - Responsive SVG Sprite Animation that Adjusts Based on Viewport
Animation API has now been released and supported across XX browsers. The main idea for the first phase of this API is that it allows us to do everything that we can do in CSS today, but through Javascript so that we don't have to touch the DOM.

Moving forwards it will open up a number of capabilities that are currently being done through the use of GreenSock... and we can look at GreenSock in the same way that we do jQuery.
news  newslettered  279  adobemax17  animation  responsive 
23 days ago
eBay’s Font Loading Strategy
Their strategy was pretty simple — avoid FOUT and FOIT: Use the custom font if it is already available (meaning downloaded and cached), else use default system fonts. Fortunately, there is a CSS Font-Rendering proposal that adds a new @font-face descriptor named font-display.
news  newslettered  279  article  font  performance 
24 days ago
NCC Image Checker
Sending images that are too big can damage site speed. This Chrome Plugin tool scans a whole page to identify all images and highlights those that are sent at the wrong size.
newslettered  278  tool 
24 days ago
The non-developer’s guide to reducing WordPress load times
A great set of tasks that you can do with your Wordpress site without knowing any code to get your page load times down.
newslettered  278  performance  tutorial 
24 days ago
Styled System
Design system utilities for styled-components, glamorous, and other css-in-js libraries
resource  newslettered  278 
24 days ago
Website Speed Test - Image Analysis Tool by Cloudinary
As I prepare for the Adobe Max conference (in three weeks time - oh crap) I'm chipping away at their site and making improvements. These improvements are on a secondary site as I wasn't able to update the live one, but this image analysis tool from Cloudinary was a great way to see just how much could be optimised in one areas.
newslettered  278  tools 
24 days ago
Swiper - Most Modern Mobile Touch Slider
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.
newslettered  278  tools  plugin 
24 days ago
When the news goes sideways
BBC are experimenting (along with some other news outlets) with how stories can be consumed across the web. Does it always need to be in a simple tube of content?
newslettered  278  article 
24 days ago
How Different CMS's Handle Content Blocks | CSS-Tricks
Rather than putting all of your content into a giant Blog of a WYWIWYG you should always try and segment that content into blocks/chunks of content. Chris takes a look at how a bunch of different CMS handle this, and there's more in the comments.
newslettered  278  article 
24 days ago
Size Limit: Make the Web lighter — Martian Chronicles, Evil Martians’ team blog
Keep your JavaScript dependencies and polyfills in check and find out what exactly makes your code bloat with Size Limit.
newslettered  278  tutorial  resource  add-site 
24 days ago
A retailer's guide to web performance
Seeing as we're talking about PWA for an ecommerce lets talk about why it's important.... performance! There's a lot of things that we can work on when it comes to performance that do not require PWA's, it relies on knowing where the real issues are.
newslettered  news  278  article  tutorial 
24 days ago
CSS Grid Gotchas And Stumbling Blocks
I'm doing a lot of experimenting and reading on Grid Layout at the moment so it's good to see article after article coming through from either of the experts, Jen Simmons or, in this case, Rachel Andrew.
newslettered  news  278  article  headline  tutorial  grid  adobemax17 
24 days ago
CSS Grid PlayGround
Mozilla provide a great overview of the Grid Layout taking you from basics right the way through to named grid lines. The Firefox Dev tools in the FF Developer or Nightly edition is simply amazing and a must if you're going to be getting started in developing Grid.
newslettered  news  278  tutorial  headline  adobemax17 
24 days ago
Designing PWA for eCommerce
A nice little project that will be made available on github once complete that will be building a VUE based PWA that connects to Magento. With BackPocket Notebooks being one of my non-digital side projects I'm really keen for an offline/PWA however at the moment I'm bound by what Shopify offers.
newslettered  news  278  article 
24 days ago
RWD Podcast with Sara Wachter-Boettcher
"If you are embarking on any responsive design project, or frankly any design project, I think that coming back around to the people who are going to be using this product or this experience is incredibly important." Fine words from Sara in her podcast with Ethan Marcotte and Karen McGrane
newslettered  278  podcast 
24 days ago
Eduardo Bouças / Using SVG clip-path to change a logo's colour on scroll
I've been looking at clipping paths and trying to get some cool movie post effects, but this logo colour change from light to dark is just beautiful.
newslettered  278  tutorial  svg  typography 
26 days ago
intel/generic-sensor-demos
applications that demonstrate how to use the Generic Sensor API.
adobemax17  phone  sensor  api 
4 weeks ago
How New Font Technologies Will Improve The Web
Parametric font technology will help us improve the user experience by enabling us to optimize how fonts are displayed on all sorts of devices.
news  277  article  tutorial  adobemax17  newslettered 
4 weeks ago
How to View and Edit CSS in Chrome Developer Tools
Learn how to make real-time changes to this website with Chrome DevTools. This is a real 101 for this but everyone has to start learning somewhere.
tutorial  277  newslettered 
4 weeks ago
Killing Old Service Workers for the Greater Good – Hackages Blog
Service workers can sometimes hold onto thing that you just wish they'd let go (we've had those people in our life at one point). This tutorial talks you through how to unregister and update service workers when you're 301 to a new url.
tutorial  277  newslettered 
4 weeks ago
Chrome to force .dev domains to HTTPS via preloaded HSTS
If you, like me, are using *.dev as your local TLD then you're going to be affected by an Chrome update in the next release. The next release will force the browser to switch to https automatically on the .dev domains. Annoying, yes, but let's face it.... if you're doing local dev and pushing to a live site then it's probably time you set up both sites with SSL anyway (it's certainly forced me to do the same).
article  newslettered  newsed  277 
4 weeks ago
Infusion: An Inclusive Documentation Builder
Infusion is a high performance generator of rich and accessible documentation sites in the form of progressive web applications (PWAs). That means the documentation sites you create can be saved to your devices and read offline.
newslettered  277  tools 
4 weeks ago
Understanding the WebView Viewport in iOS 11
iOS 11 brings some new, perhaps unintuitive, behaviour around the status bar area which will be particularly important for developers using tools like Apache Cordova or Ionic, but also for anyone that builds a website that might want it to render full screen on the mobile.
newslettered  277  article 
4 weeks ago
CSS Support Guide for Email Clients | Campaign Monitor
A complete breakdown of the CSS support for the most 
popular mobile, web and desktop email clients on the planet.
newslettered  277  resource 
4 weeks ago
A Rube Goldberg Machine
Ada takes us through the approach of CSS Grids, CSS Custom Properties and Web Animations in this review of each of the new techniques we can use to make it both easier and more interesting to build and design the web
article  277  newsed  adobe17  newslettered 
4 weeks ago
Using the Chrome devtools new code coverage feature
This enhancement in chrome will allow you to see what JS and CSS is being used on the current page allowing you to look for improvements to what is rendered on the page.
adobemax17  codereview  performance  newslettered  278 
4 weeks ago
Auto Hexagonal CSS Grid Layout & CSS custom properties
The tutorial that goes along with one of this weeks code pens.
newslettered  277  codepen  hexgon  grid  demo  adobemax17 
5 weeks ago
Removing the White Bars in Safari on iPhone X
Dealing with round screens and notches. Bloody notches!
tutorial  adobemax17  277  newslettered 
5 weeks ago
« earlier      

Copy this bookmark:



description:


tags: