justinavery + newslettered   4917

Shopify AR powered by 3D Warehouse
Shopify are getting in early with introducing the ability for you to create AR versions of your products for people to see through their mobile.
article  327  newslettered 
5 days ago by justinavery
Vapid: an intentionally simple CMS
Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.
tools  327  newslettered 
5 days ago by justinavery
Breaking the Deadlock Between User Experience and Developer Experience
What to do when better UX actually makes it worse for your users?
article  327  newslettered 
5 days ago by justinavery
A framework for web performance
We're looking at new areas we should be focusing on for 2019 and web performance is something that is high on that list. Jeremy has been doing workshops with Clearleft clients recently and come up with this framework for you to use. Thanks Jeremy!
article  327  newslettered 
5 days ago by justinavery
Introducing Bing AMP viewer and Bing AMP cache
Bing is now providing it's own AMP Cache on bing-amp.com and is rolling out the news carousel and amp stories atop their mobile search results as well. This makes me nervous, and I'm not sure if it's because I'm an old man on the web front lawn, or it's a bad idea.
article  327  newslettered 
5 days ago by justinavery
What's best for users
Winston Hearn has a great piece that came from a discussion around some of the latest AMP (bashing) articles. As a member of the Vox Media team he is well aware of the need for a great performing site as well as gaining revenue on that site. It offers a great balanced overview of the situation.
article  327  newslettered 
5 days ago by justinavery
Revamp.
Ethan, once again, eloquently covers off the latest situation with the AMP project moving to an open governance model. I agree that it is great to see that more people from outside of Google will have a seat at the table to help shape the future of the specification.
article  327  newslettered 
5 days ago by justinavery
On using tracking scripts | justmarkup
Should you use tracking scripts? Have you gone a benefits/costs analysis? Michael has and it tells us what most of us already know but probably don't want to admit.
article  327  newslettered 
5 days ago by justinavery
Hinting at a better web at State of the Browser 2018 | Christian Heilmann
A great overview of the State of the Browser from Christian. We were proud to be one of their supporters this year, the work the London Web Standards team does is amazing
article  327  newslettered 
5 days ago by justinavery
Trusting the Process
Web projects are hard! One of the best ways to ensure that everyone is on the same page is through a SoW or Statement of Work. Karah unveils their approach to this project saving approach.
article  327  newslettered 
5 days ago by justinavery
Trashy.css - The throwaway CSS library with no class
a CSS "library" that styles tags directly — as opposed to using class names as style hooks — to help people become more familiar with how to use semantic HTML.
tools  327  newslettered 
5 days ago by justinavery
Refresh CSS Bookmarklet v2 | Lea Verou
Sometimes when you're on a page on your local site and you've pushed some changes to your CSS you want to see it without having to reload the whole page again. This little bookmarklet will refresh all the Stylesheets on the current page.
tools  327  newslettered 
5 days ago by justinavery
The "Developer Experience" Bait-and-Switch | Infrequently Noted
"JavaScript is the web’s CO2. We need some of it, but too much puts the entire ecosystem at risk." - Fine words from Alex Russel
performance  news  article  headline  newslettered  326 
12 days ago by justinavery
Removing jQuery from GitHub.com frontend
Github has been working over the past couple of years phasing out jQuery bit by bit. If you're looking to do the same with your own projects they had a great approach.
article  jquery  326  newslettered 
12 days ago by justinavery
Project Explorer
A CLI tool to create an annotated tree visualization of any project
newslettered  326  tools 
12 days ago by justinavery
Improving Client-Side Performance
A cracking list of suggestions from TJ Fogarty about how to get the most out of your site when it comes to performance when launching or reviewing a website
tutorial  newsed  newslettered  326 
12 days ago by justinavery
Color Cycling with Workers
Dave goes ol' school game graphics with the new Paravel homepage and, as usual, he does a great job at teaching us how to do something similar.
newslettered  326  tutorial 
12 days ago by justinavery
‎WebXR Viewer on the App Store
A browser developed by Mozilla for the iPhone designed purely to test out the new WebXR experiences. What can you build?
newslettered  326  tools 
12 days ago by justinavery
New API to Bring Augmented Reality to the Web
The next big design change following Responsive Design will be the arrival of WebXR and how we move our sites into Augmented and Virtual environments. The team at Mozilla are doing a wonderful job, and in the coming months FF nightly will let you test these out based on the spec's being developed today
article  326  newslettered 
12 days ago by justinavery
The Cascade and Other Essential Unessentials
Earlier this week there was a question posted on twitter which a lot of people got wrong. It was
Given these classes:

.red {
color: red;
}

.blue {
color: blue;
}

Which color would these divs be?

<div class="red blue">
<div class="blue red">

A whole comment thread started up about whether people should know about the cascade or not, and part of that discussion was if you're using CSS in JS then the cascade won't matter. Tim's article goes into why it's important that we learn about the tools we have at our disposal, and how it is never a bad idea to do so.
article  326  newslettered 
12 days ago by justinavery
Chrome's NOSCRIPT Intervention
Last week we spoke about the latest release of Chrome and the new approach to avoid loading javascript on pages that are being requested over a 2G or slower network. This week, Tim Kadlec has done a whole bunch of research around this. The article explains how you're able to set your browser to emulate this experience, and how two sites are actually LARGER without Javscript. The key message here is you can not always rely on JS, so build your sites with that as a rule.
headline  javascript  performance  newsed  newslettered  326 
13 days ago by justinavery
Morphing Images with Lenticular Printing: Illusions on the Web Part 4
Last weekend I made it to the UK Space Centre in Leiscester and spent some time in the gift shop (kids!). They had a couple of bookmarks there which had two images, and as you moved the bookmark you could see one or the other image.... apparently we can do that on the web too!.
newslettered  326  tutorial 
15 days ago by justinavery
Using CSS Clip Path to Create Interactive Effects, Part II | CSS-Tricks
There are a lot of really cool techniques you can apply these days for some interesting art direction on the web, this is one of my favourites at the moment because it really allows us to break out of traditional boxes
tutorial  newslettered  325  newsed 
19 days ago by justinavery
Make your web layouts bust out of the rectangle with the Firefox Shape Path Editor
Shape outside and clipping paths are going to make the rest of the webdesigns for this year and into 2019 look a whole lot better. We haven't gone there yet, but I can see a magazine style layout that has more art direction start to become a trend shortly.
tutorial  newslettered  newsed  325 
19 days ago by justinavery
Helping a Beginner Understand Getting a Website Live
Getting started with HTML, CSS, and JS is one thing, but putting those files onto a server with a domain name is something else. This post covers off those kinds of questions.
tutorial  newslettered  newsed  325 
19 days ago by justinavery
The mysterious case of missing URLs and Google's AMP | sonniesedge.co.uk
The final article in this tale comes from Charlie and she's drawing a connection between the changing of the URL and the 'smelly doozy' article — is Google's move to obscure (my words) the URL a deliberate ploy to make AMP versions of the pages harder to notice? If that is the case then it is quite troubling.
article  newslettered  325 
19 days ago by justinavery
Offline Content with Service Worker
Provide users the option to save your pages offline while their on the page instead of blindly updating their cache with pages they don't need.
article  newslettered  325 
19 days ago by justinavery
Google Wants to Kill the URL
This is the first story that kicked things off. It seems that the Chrome team are working on making drastic changes to how the URL is going to be displayed moving forwards. Safari already only shows the domain part of the URL, hiding the folder structure of the URL until you click into the input. It will be interesting to see Google's ideas, but strange that they won't mention what they're thinking. For me, I think it's better to educate the world about the URL they're looking at rather than obscure it.
article  newslettered  325 
19 days ago by justinavery
Google AMP Can Go To Hell
This is a fairly heavy handed article around AMP, and if you couldn't already tell from the title of the article it's pretty anti AMP. For those of you that are long time subscribers you know I'm not a huge fan of AMP, I wouldn't mind if it were a short term project looking to improve performance for regularly coded webpages and helping with a stop-gap solution (like jQuery was for JavaScript) — but it does seem like Google will continue to push it.
article  newslettered  325 
19 days ago by justinavery
New in Chrome 69  |  Web  |  Google Developers
Chrome 69 is released as Google Chrome turns 10. I remember seeing the ads in the London Underground for this new browser from Google and I made the switch from Firefox immediately. It's funny that 10 years later I've left Chrome for Firefox, who knows what the next 10 years will bring.
article  headline  newslettered  newsed  325 
20 days ago by justinavery
Tips and Tricks for Debugging in Chrome Developer Tools
There's some great tips in here from changing colour schemes to scrolling an element into view, and even taking a screenshot of a highlighted element within the dom
tutorial  newslettered  324  newsed 
26 days ago by justinavery
Hey GOV.UK, what are you doing about voice? - Government Digital Service
Going along with Aaron's article on semantic markup for a better voice experience this week the GDS tea have published their work on the same thing. So far they've implemented the Schema.org structured data schemas standard across their Article, NewsArticle, and HowTo .
newslettered  324  article 
26 days ago by justinavery
WordPress: State of the Web
With the new feature that the HTTP Archive has provided in allowing you to group the site statistics by CMS, we can see that the typical Wordpress site is heavier on mobile than it is on desktop. I suggest that this is a result of 100% width images loading on hight DPI screens, where on a desktop site the image is probably only 1/4 of the viewport width and not at retina.
newslettered  324  article 
26 days ago by justinavery
Conversational Semantics
Aaron Gustafson goes through a range of different semantic markup practices that will put you in good stead for a better interaction with services like Cortana, Siri, and Alexa.
newslettered  324  article  headline  semantics  interactive 
26 days ago by justinavery
Disable scripts for Data Saver users on slow connections
This is a very cool idea and at first I was wondering how they were going to get around the issue on sites that require JavaScript to work — sites like Nasa for instance. Fortunately, there will be a an option for users to load the original site (and chew up their battery/bandwidth).
newslettered  324  headline 
26 days ago by justinavery
Zero to 15
Building a Nothing PWA in 15 minutes
tutorial  323  newslettered 
4 weeks ago by justinavery
Getting Started with Service Workers ← Alligator.io
An introduction into Service Workers from the Flavio Copes and the team from Alligator.
tutorial  323  newslettered 
4 weeks ago by justinavery
💾 HTTP Archive NEW FEATURE: LENSES
Use a lens to drill down into a particular subset of websites. The HTTP archive now support @WordPress, @Drupal, and @Magento lenses.
tool  resource  323  newslettered 
4 weeks ago by justinavery
"Shop the look" with web-based augmented reality
Some great work as part of a hackathon bringing some Augmented Reality to the browser in a shopping scenario.
tweet  finally  323  newslettered 
4 weeks ago by justinavery
Make Something Great: Become an Open Source Contributor
This is a great introduction on how anyone can contribute to open source. If you've always thought about it then read this article and go and find something to contribute to today.
article  newslettered  323 
4 weeks ago by justinavery
A Tale of Two Buttons
In this article James runs through the typical approach of having a button style for default and active, but then having to change that up depending on if it's on a light on dark background.
tutorial  323  newslettered 
4 weeks ago by justinavery
A brief guide to using WebpageTest - Frontend News #5
I'm really enjoying David East's Front End News and his detailed overview of something particular each week, this week it's using Web Page Test.
tutorial  performance  tools  323  newslettered 
4 weeks ago by justinavery
Changes on CSS Grid Layout in percentages and indefinite height
long story on how percentage work on CSS in general and in CSS Grid Layout row tracks and gutters particularly.
article  tutorial  grid  newslettered  323 
4 weeks ago by justinavery
A native lazy load for the Web platform
This is very exciting. I'm just finishing a quick web cast on how to enable lazy loading in Wordpress by using the RWD site as an example, but it's great to see that a simple update to the <img> tag will let us do this natively.
article  tutorial  lazyload  optimisation  images  newslettered  323 
4 weeks ago by justinavery
lazyestload.js
load images only when they are in (and remain in) the viewport
resource  tools  lazyload  323  newslettered 
4 weeks ago by justinavery
CSS Logical Properties and Values in Chromium and WebKit
With the arrival or CSS Writing Modes and the ability to quickly change from left to right to right to left, or top to bottom/bottom to top. With those updates it's hard to work out something like margin-top/bottom/right/left. This aims to fix that problem.
article  newslettered  323 
4 weeks ago by justinavery
The Web I Want
"This is the way he wants it, well, he gets it".

For those of you that are closely aligned with my musical tastes you'll recognise that from Guns and Roses Civil War, but the actual quote comes from Cool Hand Luke. Both have nothing to do with the link :)

Chris covers off something that is near and dear to my heart, creating web pages using HTML to serve content as a first port of call... and ideally the last. The days of rolling everything into Vue, React, Angular, just to serve content to the masses (I'm looking at your NASA) are certainly upon us, but I just cannot fathom how these decisions are made.
headline  323  newslettered 
4 weeks ago by justinavery
Mozilla Protocol - Protocol Design System
A design system used for any mozilla branded websites. You will probably already be familiar with this look from the Mozilla Developer Network documents. I wouldn't use this directly, unless you want to look like Mozilla, but it is a good frame of reference if you're building your own design system.
resource  style-guide  design  323  newslettered 
4 weeks ago by justinavery
Privacy and user choice in AMP’s software architecture – Accelerated Mobile Pages Project
There's a big focus on this article around the privacy of the user, but I'd be more interested in delving deeper into what AMP considers the actions of a user that wants a page to be prerendered. I worry less about the privacy implications of someone not viewing a page that is loaded and focus more on the wasted requests and bandwidth.
amp  article  newslettered  323 
4 weeks ago by justinavery
CSS WG Blog – Introducing CSS Values and Units Level 4
There's a new spec in town and it's all about units! Exciting! There are new unites including vi (1% of the viewports size in the root elements inline axis), vb (not the rubbish australian beer, but 1% of the viewports size in the root elements block axis), ic (average character fullwidth glyph), cap (nominal height of capital letters in the elements font), lh (line height of the element), lhr (same, but for the root element). There's a bunch more too, go check it OUT.
article  newsed  newslettered  322 
5 weeks ago by justinavery
Experimental layouts with CSS Shapes and clip-path
Michelle Barker goes through a bunch of different creative approaches for using CSS Shapes to make the presentation of text a little more interesting. It's not supported in some browsers, and unfortunately the fallback isn't the best to look at. Remember, if you're using techniques like this to try and also incorporate @supports and build solid fallbacks (or better yet, start well and enhance)
newslettered  322  tutorial 
5 weeks ago by justinavery
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
newslettered  322  resource 
5 weeks ago by justinavery
Front-End-Performance-Checklist/README.md at master · thedaviddias/Front-End-Performance-Checklist · GitHub
About to go live with a site? Are you sure you've covered off EVERYTHING you need to? Try going through this check list and see.
newslettered  322  resource  github 
5 weeks ago by justinavery
CSS Scan
Inspect Element on steroids: study how things are made on the web in real-time and copy computed styles with no hassle
newslettered  322  tool 
5 weeks ago by justinavery
Practical CSS Scroll Snapping | CSS-Tricks
CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling.
newslettered  322  tutorial 
5 weeks ago by justinavery
Dot Menu Animations
Four different menu animations for menu button toggle between dots, cross and back icon.
newslettered  322  tutorial 
5 weeks ago by justinavery
PWA: Progressive Web All-the-things
Progressive web apps have come a long way over the past three years. I remember listening to Jake bang on about the service worker in a Shop Talk podcast and feeling overly excited about the possibilities. Now it's in more than one browser, and so much more can be done. In this article Paul Kinlan looks at where it should continue to grow
article  pwa  newsed  newslettered  322 
5 weeks ago by justinavery
Creating the “Perfect” CSS System
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems
newslettered  322  article 
5 weeks ago by justinavery
Google AMP - A 70% drop in our conversion rate.
After switching to AMP pages there were some issues with the conversions. A coincidence? Potentially, but there are a few issues that are pointed out around implementing AMP that I wasn't aware of in the past.
article  amp  newsed  newslettered  322 
5 weeks ago by justinavery
side-by-side-pageload.js
Load 2 or more pages side-by-side to visually see the difference in page load. Optional desktop viewport and throttling settings.
newslettered  322  tools 
5 weeks ago by justinavery
Just write. — Sara Soueidan – Freelance-Front-End UI/UX Developer
This is a mantra that I've heard Jeremy Keith say, and it's something that I encourage every single person I speak to who asks me how they can learn/improve the work they do. Most often people say "But someone else has already written about it" to which I reply "Yes, but no one has ever had your experience and take on the subject before". Sara is write (pun intended), you should write as often as you can.
article  newsed  newslettered  322 
5 weeks ago by justinavery
What browser am I using?
Similar to the tool above, but it also includes the IP address, Java Version and if websockets are supported. It also gives the User Agent String.
newslettered  322  tools  browser 
5 weeks ago by justinavery
My Browser - Easy to digest browser details to help you with QA and tech support
When you land on the site, some tests are run on your browser. The tests are against data that any website can gather, but it displays the data in a format that’s easy to read. The hope is that the data will give developers some useful information about a user’s browser if they are struggling to track a bug down.
newslettered  322  tools  browser 
5 weeks ago by justinavery
The power of progressive enhancement
This is featured in the tools section this week because I think it's a pretty damn fine and helpful tool (which I now use instead of the other tool I mentioned). In this article, however, Andy goes through the process of how he put it together progressively and explains why he thinks it has made this such a great success early on.
newslettered  322  article 
5 weeks ago by justinavery
Let's serve everyone good-looking content
"But aren’t we already used to stretching such guidelines, building responsive interfaces that work across viewports? Shouldn’t we let go, because we cannot control a user’s browser?"
This comes back to the questions "Does the site need to look the same in every browser". We already change the site look and feel between breakpoints using responsive design, what's the difference in allowing the same thing to happen when Grid isn't supported? As long as we PLAN for and DESIGN around the issue, what are we worrying about? It's about getting your boss/client to understand this.
newsed  article  layout  grid  newslettered  322 
5 weeks ago by justinavery
On HTTPS and Hard Questions
Tim replies to the post last week from Eric around HTTPS and the negative impact it can have on users who are accessing content through a proxy thanks to their situation (expensive data, high packet loss, low caps). This is a problem that we need to discuss more and find a solution to, and as Troy Hunt pointed out in another response the first step is for everyone to reduce the size of your webpages. That act in itself helps reduce the requirement for the proxy for data saving in the first place.
article  performance  newsed  newslettered  322 
5 weeks ago by justinavery
Designer + Developer Workflow | Brad Frost
It's great to watch two top talent people in their own fields riffing back and forth to create something amazing. Brad Frost and Dan Mall show how they work collaboratively together to produce amazing results for clients.
newslettered  322  article 
6 weeks ago by justinavery
Bits.
The way we talk about slow websites needs to be much, much broader. If we can do that, then we’ll have a sharper understanding of where—and how—the web can be faster.
newslettered  321  headline  news  performance  advertising 
6 weeks ago by justinavery
What is Typesetting?
The first chapter in the latest book from A Book Apart, Flexible Typesetting.
newslettered  321  headline 
6 weeks ago by justinavery
Seriously, though. What is a progressive web app? – Amberley Romo – Medium
We know PWA's are a good thing, and we know that they're a progressive web app... what what does that really mean. What really constitutes as a PWA? Amberley tells us while flying at 30,000ft with no internet connection
article  321  newslettered 
6 weeks ago by justinavery
Securing Web Sites Made Them Less Accessible
Due to a slower internet connection and a helpful 'man in the middle' to improve caching for users of the slow internet connection, websites just won't load in a reasonable amount of time over https. This doesn't mean we should go insecure, but instead implement things like services workers to ensure it's not an ongoing issue.
article  321  newslettered 
6 weeks ago by justinavery
Sticky, Smooth, Active Nav
This is a great approach when you've got navigation that you want persistent for the current page content, kinda of like you've expect to find in documentation.
newslettered  321  tutorial 
6 weeks ago by justinavery
Priority Nav Scroller - Priority+ navigation in a horizontal scrollable container with controls
In another site we're working on at the moment we've also included this feature. The ability to show as much navigation as possible given the viewport, and collapse as you lose space.
newslettered  321  tutorial 
6 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  AI  amp  analytics  android  animation  animations  app  ar  article  articles  artilces  audio  Australia  australiad  bad  book  books  bootstrap  bot  bots  browser  browser-support  carousel  casestudy  chart  charts  chatbot  check  check-video  checklist  chrome  CLI  code  codepen  codereview  colour  comic  conference  container-queries  content  contrast  conversational  cookie  course  critical  css  css-architecture  css-tricks  css3  CSSGrid  data  data-visualisation  demo  design  design.is  detection  device  dothis  ecommerce  editor  element-query  email  event  events  example  examples  experiment  extension  fallback  farewell  feature  feature-image  feature-site  felx  finally  firefox  flex  flexbox  flint  font  fonts  framework  frameworks  Fun  generator  gif  github  google  grid  grids  h2  h5bp  headine  heading  headline  headlne  hexgon  hololens  html5  http2  https  humour  ia  icons  idea  iframe  image  images  imags  implementation  indieweb  inspiration  interactive  interview  into  intro  introduciton  introduction  ios  jacascript  javascript  jobs  joomla  jquery  js  labs  lastly  layout  lazyload  lego  less  Lessons  library  links  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  newstogether  not-included  offcanvas  offline  opensource  opinion  optimisation  other  parallax  paternity  patterns  peformance  performance  performance-budget  phantomjs  photoshop  picture  playground  plugin  plugins  podcast  podcast-focus  polygon  post  postjd  postrwd  Preprocessor  presentation  presentations  print  privacy  progressive-enhancement  project  prototyping  pwa  pwas  pyton  react  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  rwd178  rwd194  rwd208  rwd242  rwd247  rwd254  rwd260  rwd288  rwd300  rwdsummit  rwdweekly  sass  scoping  screencast  scroll  scss  search  secure  semantics  seo  server  service-workers  showcase  sites  sketchnotes  slider  slideshare  smashing-conference  snippet  souders  speaking  spec  special  sponsorship  ssl  strategy  style-guide  styleguide  summit  susy  svg  sxsw  table  tables  talk  talk-idea  tap  template  templates  testing  theme  themes  times  tips  tmp  tool  tools  topic  touch  tracking  training  turtorial  tutorial  tutorials  tutuorial  tweet  twitter  type  typography  typorgraphy  UI  units  updated  UX  variable  video  viewport  visualisation  voice  vr  vue  w3c-images  webar  webinar  webvr  wireframe  wireframing  wordpress  workflow  workshop  workshops  write-article  writing 

Copy this bookmark:



description:


tags: