justinavery + newslettered   4263

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 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
7 days ago by justinavery
Redesigning Laravel.io – Refactoring UI – Medium
A detailed look at over 20 tweaks to a redesign for the laravel.io site
article  newslettered  280 
7 days ago by justinavery
Building a CSS-only image gallery (with fallbacks)
I think the title says it all, not much for me to add :)
tutorial  280  newslettered 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
7 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
[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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
14 days ago by justinavery
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 
20 days ago by justinavery
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 
20 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
Styled System
Design system utilities for styled-components, glamorous, and other css-in-js libraries
resource  newslettered  278 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
21 days ago by justinavery
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 
23 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
28 days ago by justinavery
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 
29 days ago by justinavery
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 
4 weeks ago by justinavery
Removing the White Bars in Safari on iPhone X
Dealing with round screens and notches. Bloody notches!
tutorial  adobemax17  277  newslettered 
4 weeks ago by justinavery
CSS Round Display Level 1
I feel like I'm a million years behind... Alright, so that's an exageration, but I'm certainly a couple of months behind. CSS Round Display tells the web pages how to behave on a non rectangular screen - or like it is literally called - on a round display. This is precisely how we're going to get around (pun intended) the notch on the iphoneX without having the white bars.
article  adobemax17  spec  newsed  newslettered  277 
4 weeks ago by justinavery
CSS Grid Layout Module - Responsive Magazine Layout
A great magazine based layout in Codepen using the CSS Grid Layout and some large typography.
codepen  adobemax17  grid  layout  newslettered  278 
4 weeks ago by justinavery
Betting on the Web
A blog post based on a talk from Henrik Joreteg about why he's such a big proponent of the Web.
newslettered  news  277  article  adobemax17 
4 weeks ago by justinavery
Briefbox
Practice briefs, resources & skill development for designers. Create a learning path or complete series...
resource  276  newslettered 
5 weeks ago by justinavery
Google AMP Case Study - Leads Dropped by 59% (How to Disable It)
Here's a case study from the Wordpress Hosting team over at Kinsta around their results with AMP and why they chose to abandon it (and also, how to do it without harming your site rankings with Google).
newslettered  news  276  tutorial 
5 weeks ago by justinavery
ARKit - Apple Developer
iOS 11 introduces ARKit, a new framework that allows you to easily create unparalleled augmented reality experiences for iPhone and iPad. Kits like this are great to get started, but I'd urge you to put those learnings back into WebVR so that we extend for the web, and not just a couple of devices.
resource  276  newslettered 
5 weeks ago by justinavery
CSS Grid: Bringing true two-dimensional layout to the web | Microsoft Edge Web Summit 2017 | Channel 9
CSS Grid Layout promises to revolutionize layout on the web, bringing true two-dimensional layout to the web for the first time. Melanie Richards shows how Grid Layout got started at Microsoft in XAML, and through partnership with standards bodies and the community, is now shipping simultaneously across all major browsers in 2017.
video  newslettered  newsed  276 
5 weeks ago by justinavery
WebVR - Building and Browsing Cyberspace
Just short of 50 minutes, and drawing on Mark’s long (no, longer than that) experience with VR, this talk may well change the way you think about the technology and what it means to your work on the web.
newslettered  news  276  video 
5 weeks ago by justinavery
Embrace AMP or AMP Wins
I think everything on the web should be debated, discussed, and decided upon by the people that will be building the solutions and consuming them as well. Personally, as you will have noted in the past, I'm not a fan of AMP itself but I love the push towards faster websites. This article is all about embracing AMP rather than my usual Anti-AMP sharing. You should read it and make up your own mind about it.
newslettered  news  276  article 
5 weeks ago by justinavery
Discover the Power of CSS Transforms
With a single line of CSS we can completely reorient any element on our page – we can move it, rotate it, resize it, or send it into another dimension (to an extent). This all comes to us via the transform property.
newslettered  276  tutorial 
5 weeks ago by justinavery
The State of the Web
This is a wonderful article that talks about everything that we need to know when crafting our sites. A must read.
newslettered  news  276  article  performance  adobemax17 
5 weeks ago by justinavery
Understanding Flexbox
This article will cover all the fundamental concepts you need to get good with the CSS Flexbox model. It’s a long one, so I hope you’re ready for it.
tutorial  277  newslettered 
5 weeks ago by justinavery
The Ultimate Guide to Flexbox — Learning Through Examples
This is perhaps one of the most comprehensive reviews of flexbox and how it can power just about any layout you're trying to achieve.
tutorial  flexbox  layout  newslettered  news  276  adobemax17 
5 weeks ago by justinavery
Learn How To Debug JavaScript with Chrome DevTools
Ditch console.log debugging once and for all! Learn how to use breakpoints to debug code within the Chrome Developer Tools
tutorial  newslettered  news  276 
5 weeks ago by justinavery
Design Resources - Apple Developer
Design apps quickly by using Photoshop and Sketch templates, plug-ins, and other preconfigured UI elements. Oh, it's also got AdobeXD templates too.
resource  276  newslettered 
5 weeks ago by justinavery
Design for iPhone X – prototypr
An initial look at some considerations around designing for the upcoming iphoneX, although we all design for any viewport right?
newslettered  276  article 
5 weeks ago by justinavery
Bike to School - The Process
I love the animations that we're seeing more and more of the web now but I'm always at a loss about the entire process from concept to completion. This article takes you from sketch to finished code pen.
newslettered  news  276  article 
5 weeks ago by justinavery
A React And Preact Progressive Web App Performance Case Study: Treebo
Treebo is India’s top rated budget hotel chain, operating in a segment of the travel industry worth $20 billion. They recently shipped a new Progressive Web App as their default mobile experience, initially using React and eventually switching to Preact in production.
What they saw compared to their old mobile site was a 70%+ improvement in time to first paint , 31% improvement in time-to-interactive. and loaded in under 4 seconds over 3G for many typical visitors and on their target hardware. It was interactive in under 5s using WebPageTest’s slower 3G emulation in India.
newslettered  news  276  article  pwa  performance 
5 weeks ago by justinavery
HTML Reference - A free guide to all HTML elements and attributes.
htmlreference.io is a free guide to HTML. It features all elements and attributes.
resource  276  newslettered 
5 weeks ago by justinavery
Microsoft Teams and Progressive Web Apps coming soon to the Windows Store | Windows Central
Windows are working on brining Progressive Web Apps to be available in the Windows Store - the web is a first class citizen on the phone!
newslettered  276  article 
5 weeks ago by justinavery
Lozad.js | lozad.js
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
add-site  newslettered  276  plugin 
5 weeks ago by justinavery
Is there any value in people who cannot write JavaScript?
I've recently looked at a couple of Front End related jobs and was disappointed to see all of the requirements being focussed around React, Vue.js, Ember etc and _not a single mention_ of HTML or CSS. It's time to make HTML and CSS first class citizens again, while still maintaining the importance that Javascript has.
newslettered  news  276  article 
5 weeks ago by justinavery
« earlier      
per page:    204080120160

related tags

09  24ways  @supports  aa  accessability  add  add-article  add-site  add-this-as-news-and-link-to-it  added  addon  adob  adobe17  adobemax  adobemax17  advertising  amp  analytics  android  animation  animations  AR  article  articles  artilces  audio  australiad  bad  book  books  bootstrap  bot  bots  browser  browser-support  carousel  casestudy  chart  chatbot  check  check-video  checklist  code  codepen  codereview  comic  conference  container-queries  content  contrast  conversational  course  critical  css  css-architecture  css-tricks  css3  CSSGrid  data  data-visualisation  demo  design  design.is  detection  device  dothis  editor  element-query  email  event  events  example  examples  experiment  fallback  farewell  feature  feature-image  feature-site  felx  finally  firefox  flex  flexbox  flint  font  fonts  framework  frameworks  Fun  generator  gif  github  grid  grids  h2  h5bp  headine  heading  headline  headlne  hexgon  html5  http2  https  humour  icons  idea  iframe  image  images  imags  implementation  inspiration  interview  into  intro  introduciton  introduction  ios  jacascript  javascript  jobs  joomla  jquery  js  labs  lastly  layout  lazyload  lego  less  Lessons  lol  loveyls  lukew  maps  masonary  max17  mediaqueries  meetup  meetups  meeup  mixin  mobile  monitoring  mqs  mtv  navigation  net-article  netmag  new  news  newsed  newsletter  newsletterd  newslettered  newsletters  not-included  offcanvas  offline  opinion  optimisation  other  paternity  patterns  peformance  performance  performance-budget  phantomjs  photoshop  picture  playground  plugin  plugins  podcast  podcast-focus  polygon  post  postjd  postrwd  Preprocessor  presentation  presentations  print  progressive-enhancement  prototyping  pwa  pwas  read  reading  readme  redesign  reference  resource  resources  respond  responsive  responsive-design  responsive-images  responsiveconf  responsivedesign.is  RESS  retina  review  robots  rwd  rwd-site  rwd111  rwd132  rwd141  rwd147  rwd151  rwd178  rwd194  rwd208  rwd242  rwd254  rwd260  rwdsummit  rwdweekly  sass  screencast  scroll  scss  search  secure  seo  service-workers  showcase  sites  sketchnotes  slider  slideshare  smashing-conference  snippet  souders  speaking  spec  sponsorship  ssl  strategy  style-guide  styleguide  summit  svg  sxsw  table  talk  talk-idea  tap  template  templates  testing  theme  themes  times  tips  tmp  tool  tools  topic  touch  training  turtorial  tutorial  tutorials  tutuorial  tweet  type  typography  UI  updated  UX  video  viewport  visualisation  vue  w3c-images  webinar  webvr  wireframe  wireframing  wordpress  workflow  workshop  workshops  write-article  writing 

Copy this bookmark:



description:


tags: