justinavery + newslettered   4529

Understanding Media Queries in HTML Email 
A nice overview of introducing media queries into your email and the support chart for all the different clients out there.
newslettered  news  296  tutorial 
4 days ago by justinavery
How Mic makes AMP stories
Understand how one company is putting together stories for the new Google Stories feature with AMP.
newslettered  296  articles 
4 days ago by justinavery
The Two Faces of AMP
Tim looks at the two sides of AMP. Is it a tool for the open web, or is it a tool for Google Search? My favourite part is "If AMP makes performance better, that’s fantastic! Let’s incentivize good performance in the rankings. Let’s incentivize the goal, not the tool."
news  newslettered  296  article  amp  podcast 
4 days ago by justinavery
AMP: the missing controversy
Why AMP has such great instant loading performance.
newslettered  296  article  podcast 
4 days ago by justinavery
Create a visual AMP story – AMP
Google has increased the capabilities of their proprietary AMP webpage format and are now competing with Facebook, Instagram, and SnapChat for the creation of stories.
newslettered  296  article  news  podcast  tutorial 
4 days ago by justinavery
Introducing the Gmail Developer Preview of AMP in Email
Google is now extending AMP into emails to provide more interaction with the Gmail client. I think it's awesome that I might have the opportunity to provide a more engaging experience for you inside gmail (if you use it), but it seems to push AMP further towards the areas that I'm most concerned about.
newslettered  296  article  amp  email  podcast 
4 days ago by justinavery
AMPlified. — Ethan Marcotte
Ethan covers the latest updates from Google with relation to AMP and the new direction. While not as scathing as Tims article, I think Ethan is on the money when he says "As of this moment, the power dynamics are skewed pretty severely in favor of Google’s proprietary AMP standard..."
news  newslettered  296  amp  article 
4 days ago by justinavery
Everything Easy is Hard Again
A wonderful essay from Frank Chimero based on a recent talk he gave around the current state of the web. As always, Frank gets to the heart of an issue and covers it in an informative, captive, and witty way.
newslettered  news  296  headline  podcast 
4 days ago by justinavery
Href Tools - Free online web tools
Online web tools to get your work done faster. There are tools for HTML, CSS, JS, and even images (and more). Not just links to download tools either, literally tools you can use in your browser.
newslettered  296  resources  tools 
4 days ago by justinavery
HTTPS or bust: Chrome’s plan to label sites as "Not Secure"
If you're running a website and not using HTTPS the time to do something about it is NOW. Google is, as of July 2018, going to mark non-https sites as "Not Secure". This provides a big doubt in your users minds that you are a trustworthy service and will have a significant impact upon your site traffic and ability to covert. I see this as BIGGER than the RWD deadline that was imposed back in 2015.
article  headline  podcast  newslettered  newsed  296 
4 days ago by justinavery
Cloudflare ♥ Open Source: upgrade to Pro Plan on the house
Cloudflare is great, I've been using it on the RWD Weekly and RWD.is site for many years and it's saved me a boatload of traffic and protected me against countless attacks, and as a result, I don't mind paying for the privilege. I'm lucky because the sponsorship on this newsletter helps offset that cost, but not everyone is in that position. They do offer free pro plans for some open source projects, so if you're interested submit your project and see if it meets the grade.
newslettered  296  tools 
4 days ago by justinavery
Git Tutorial - Try Git
Got 15 minutes and want to learn Git?

Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other's toes. It's a distributed version control system.
newslettered  296  tutorial 
4 days ago by justinavery
Fonts.lol
Typing with full-color illustrated letters is now a reality! OpenType-SVG is an exciting new technology, and is already supported by several browsers and design apps like Adobe Photoshop & Illustrator cc2018.
resources  typography  fonts  296  newslettered 
4 days ago by justinavery
Cheapass Parallax
Dave Rupert uses some CSS Variables and 6 lines of javascript to deliver us some pretty nifty header parallax action. The great thing about this approach is you can easily disable the feature within media queries like @media (prefers-reduced-motion) or on smaller viewports.
newslettered  news  296  tutorial  animation  parallax  javascript 
4 days ago by justinavery
Web Fonts are ▢▢▢ Rocket Science
I was lucky enough to catch this talk at Smashing Conf in London last week and it was fantastic. As well as learning all about better web fonts I even picked up a few new tips of rocket science. Bonus!@
video  font  performance  296  newslettered 
4 days ago by justinavery
CSS Grid - The Big Picture
Jen Simmons describes the overall big picture of CSS Grid. What all these terms mean. How it's different than float-based frameworks. And how we are going to apply Grid to specific containers on the page — while using other layout methods on other containers of content.
video  Grid  296  newslettered 
4 days ago by justinavery
Native And PWA: Choices, Not Challengers!
If you're at a crossroads with whether to proceed with a native app or if you can build a PWA then Aaron Gustafson has a few scenarios for you.
news  newslettered  296  article  pwa  mobile  podcast 
5 days ago by justinavery
People Don’t Scroll (and Other Page Length Myths) – UX Planet
In my day job the first thing that copywriters ask me about a sitemap is how many words they need to write for the page. My answer is most often — enough words so that the reader fully understands what they need to know. Don't add words to make up a number, don't remove them either.
news  newslettered  296  article 
5 days ago by justinavery
GitHub - facebookresearch/Detectron: FAIR's research platform for object detection research, implementing popular algorithms like Mask R-CNN and RetinaNet.
Detectron is Facebook AI Research's software system that implements state-of-the-art object detection algorithms, including Mask R-CNN. It is written in Python and powered by the Caffe2 deep learning framework.
newslettered  296  tools  images  AI 
5 days ago by justinavery
Free customizable SVG Backgrounds
Customizable SVG patterns and background designs for websites and blogs
newslettered  296  resource 
5 days ago by justinavery
Pigment
A simple color palette generator which matches two colours together. It gives you control over the pigment and lighting, and provides a variety of lighter and darker shades of the combinations. You can export to SVG, AI, get Hex colours... you can even search for images on Unsplash and have the colour combinations pulled back to form your pallette.
tool  296  newslettered 
5 days ago by justinavery
Replacing jQuery With Vue.js: No Build Step Necessary
If you've been using jQuery to manipulate content on the page based on the users input you might want to consider switching it out for Vue.js. In this article the master of Vue, Sarah Drasner, takes you through some examples (with codepens) to see the benefits.
newslettered  296  tutorial  vue  javascript 
5 days ago by justinavery
Raw informative link list · WICG/cq-usecases Wiki · GitHub
Dumping a bunch of things in here, for now. Some of these will be pulled out and described in other pages that help newcomers get up to speed on where we're at and where we've been.
newslettered  296  resource  links 
11 days ago by justinavery
grid-generator
A nifty little grid generator that might help you put together the CSS you need. After a few times I think you'll end up going to writing it out yourself to get a bit more control (and it's surprisingly simple after a few times)
tools  layout  grid  295  newslettered 
11 days ago by justinavery
Hexi-Flexi-Grid
Hexi-Flexi Grid is an SCSS component, built on the CSS Grid layout, that creates a hexagonal lattice. The mixin includes a number of customizeable settings to control the size, layout and look of the hex grid.
tool  295  newslettered 
11 days ago by justinavery
The Red Reveal: Illusions on the Web Part 1
In my day to day job I always have clients asking us to come up with 'innovative' ways to engage with users. *sigh*. That's a tough brief. That is why I love it whne people like Daniel write web tutorials like this to introduce interesting ways to add interactivity on their sit... but through the medium of visual illusions. Very cool!
news  newslettered  295  tutorial 
11 days ago by justinavery
Switching to Hugo and Netlify
Tim is another one who has recently updated his site platform. Previously on Jekyll he used a lot of insight from Sarah Soueiden's blog to help him make the switch over.
newslettered  295  article 
11 days ago by justinavery
CSS Grid Layout Module Level 2
Although the CSS Grid has only just (relatively speaking) hit browsers they're already well on the way to working out what the CSS Grid Layout Module Level 2 should contain. If you've started buiding with Grid, and I highly recommend you should, then head along to this link they voice any opinions you might have to make it better. And yes.... if you have started using it already then I can tell you that SubGrid is already in the specification.
article  newsed  newslettered  295 
11 days ago by justinavery
Newish blog
Mark Boulton has redesigned and re-platformed his blog. I've always loved Marks design work and his first book on web design is still my all time favourite - https://responsivedesign.is/resources/books/a-practical-guide-to-designing-for-the-web/. Check out how he undertook his recent redesign.
newslettered  295  article 
11 days ago by justinavery
Learn Flexbox for free
This course is focused on getting you up to speed as quickly as possible. Even if you only watch the first lectures, you'll be able to take advantage of your new skills in your next project.
newslettered  295  tutorial 
11 days ago by justinavery
Modern CSS Explained For Dinosaurs – Actualize – Medium
The overview of modern CSS from the basic layout to preprocessors to post processors and CSS methodologies.
newslettered  295  article 
11 days ago by justinavery
Release Notes for Safari Technology Preview 49 | WebKit
Aside from the Service Workers updates we also have a media query update. You can now include calc() within the media query itself. I've never had a need to do this so I'm interested if you have had a use case in the past for it, hit reply and let me know. Either way, you can now do it in the next round of Safari release.
news  newslettered  295  article 
12 days ago by justinavery
Workers at Your Service | WebKit
With most of our clients ignoring the benefits of Progressive Web Apps because it doesn't really work on iPhones and iPads it's time to get your 'new project' pitching hat on and book in some meetings. Service workers are done and implemented in the technology previews for Safari Desktop and the next release of iOS. Once that lands there's a real argument to move most of the native apps for companies across.. the only real thing missing will be notifications on iOS.
news  newslettered  295  article 
12 days ago by justinavery
How I design with CSS grid
Hui Jing takes us through a great approach to designing with Grid. Taking an image for inspriation, sketching out the grid layout on paper, creating the content (HTML) and then styling up that CSS Grid Layout. A lovely process (which I also subscribe to) and a wonderful example of how CSS Grid can create amazing layouts previously unachievable on the web.
news  newslettered  295  tutorial  article 
12 days ago by justinavery
CSS Grid layout — crossed sections
This tutorial takes you through how to build a page layout that wouldn't be possible without the wonderful CSS Grid.
newslettered  295  tutorial 
12 days ago by justinavery
netinfo-monitor
Displays network quality as reported by Network Information API.
tools  295  newslettered 
12 days ago by justinavery
Fontanello
Fontanello is a browser extension for Google Chrome and Firefox that lets you display the basic typographic styles of a text by right-clicking it.
tool  typography  add-site  295  newslettered 
14 days ago by justinavery
Web AR with smart plugs using A-frame
Using augmented reality to show which appliances/devices were using the most energy.
tutorial  294  newslettered 
18 days ago by justinavery
Style Guide-Driven Design Systems
Brad Frost explains why Day 1 is the best time to launch your style guide website and begin your design system. A lot of great resources and advice in this one.
article  newslettered  294 
18 days ago by justinavery
Video as the new GIF in Safari
Along with the announcement that Safari is going to be supporting Service Workers, the webkit team has also provided the ability to add .mp4 silent videos to <img>. There is a word of warning from Bruce in this article though, very important to know if you're using <picture>
article  newslettered  294 
18 days ago by justinavery
GDPR and Google Analytics
I think this is a really interesting point from Jeremy. The whole point of GDPR is to get a users consent to track any information about them, and with Google Analytics setting tracking cookies for all visitors cross site will we need to gain consent for that as well? If so, who's responsible... is it the Product owner (Google) or the Site owner (you)?
article  newsed  analytics  google  newslettered  294 
19 days ago by justinavery
WCAG 2.1 is a Candidate Recommendation
WCAG 2.0 guidelines have been around for a long time now, y'know the ones which are graded A, AA, and (almost impossible to get) AAA? Well version 2.1 has now become a candidate recommendation and I would encourage you to start working towards this as your new standard. The new spec is backwards compatible to 2.0, so any legal requirements you might have will be covered.
article  newslettered  295 
19 days ago by justinavery
Web-Powered Augmented Reality: a Hands-On Tutorial – Uri Shaked – Medium
A journey into the world of ARCore, A-Frame and more! Let Uri take you on a walk (as well as his generated AR animals) through the process of building out your very own AR experiences on the web.
tutorial  review  294  newslettered 
19 days ago by justinavery
Sketching in the Browser – SEEK blog – Medium
Brads article talked about getting your style guide ready for the design system and this article from SEEK show's how they do it internally and keep the designers and developers working in the same mediums (or at least linking those two together).
article  newslettered  294 
19 days ago by justinavery
Samsung Internet Developer Hub - 360° videos
If you're adding 360 videos to your site using the <video> tag then you should also drop in the 'dimension' attribute as well.
tutorial  294  newslettered 
19 days ago by justinavery
Circularity and Container Queries
This is fundamentally why it is taking so long to get to container queries. Aside from the recursion issue, it's actually really expensive for the browser (from a performance/rendering point of view) to incorporate it at this point.
headline  read  newsed  newslettered  294 
20 days ago by justinavery
How to not break your site with Service Workers · loxodrome.io - James Milner's personal blog
If you're looking at including Service Works onto your site, or one of your client sites, you should certainly make sure you understand the issues you could accidently cause during implementation.
tutorial  294  newslettered 
20 days ago by justinavery
How we built GraffitiGala — collaborative augmented-reality graffiti
pushing the boundaries, I love this! The team built a shared web-based augmented reality experience.
article  AR  newslettered  294 
20 days ago by justinavery
Behind the Scenes of Our Plugin Rebranding and Site Redesign
I've been using Delicious Brains plugins for Wordpress for an age so I was excited to see their new design. An amazing effort and a great write up on the whole process.
article  newslettered  294 
20 days ago by justinavery
Automatically creating an accessible color palette from any color? Sure!
Colour contrast and WCAG guidelines can put the most beautifully designed site into disarray. Thankfully, Ida Aalen has written this post on a tool that allows you get the colours right BEFORE you start the design.
article  newslettered  294 
20 days ago by justinavery
Now You See Me: How To Defer, Lazy-Load And Act With IntersectionObserver
There's not a lot more I can include in addition to the article title.... but IntersectionObserver is definitely going to be a big thing this year as the support picks up.
newsed  tutorial  javascript  performance  lazyload  294  newslettered 
21 days ago by justinavery
AR-Alphabets-words
Marker based Augmented Reality on Web for learning Alphabets words for kids using AR.js and A-frame
tutorial  AR  webar  294  newslettered 
21 days ago by justinavery
CSS Grid: A Free Video Course On The CSS Grid Layout By Wes Bos
If, for what ever reason, you want to fill any places in a densely packed grid (using grid-auto-flow: dense) then this bit of JS does that for you. It inserts randomly-sized elements to the end of the grid until the grid changed size. At that point, you know that you've added one-too-many; so, remove the last-inserted element.
tutorial  295  newslettered 
22 days ago by justinavery
Designing Tables for Reusability
This isn't just about designing the best table, but instead how you should approach design problems and follow a plan to get the best possible results at the end of the project.
article  newslettered  294 
22 days ago by justinavery
Choosing Web Fonts: A Beginner’s Guide - Library - Google Design
If you're just getting started in design and you find the task of picking a Font for the new web design project a difficult task then Google have the answer for you. Follow these basic tips and you'll be choosing and pairing fonts like a pro in no time.
tutorial  294  newslettered 
25 days ago by justinavery
A Guide to Automating & Scraping the Web with JavaScript (Chrome + Puppeteer + Node JS)
I'm building a little Progressive Web App for an event and the event timetable is on a 3rd party with no API. This is a great article for working on how to get data for these kind of situations.
newslettered  news  293  tutorial 
25 days ago by justinavery
Safari Update
Service workers on iOS.... let the dawn of the PWA begin
293  headline  newslettered 
25 days ago by justinavery
Introducing the new Small Multiples website
If you're redesigning your site and thinking about the potential move to a new platform then this article on the review of static site generators is a great read. Big sites, like Smashing Magazine, have moved over to the static approach and it's interesting to see how different sites deal with different teething problems.
article  newslettered  newsed  293 
25 days ago by justinavery
How to Scope Work
This is a great article by Dan around the best approach to scoping a website build (or anything for that matter). Breaking it down logically into chunks allows us to see the components, and down further and further until you can see if you're able to get it done within the time (if not, increase your time or decrease the scope).
In my years of experience the general rule for the time it takes to delivery anything is the time quoted/defined plus 5%. Why? Well because if something is done early I always find a way to use the extra time to do something even better... which takes a smidge longer. Client is always happy though ;)
article  scoping  newslettered  newsed  293 
25 days ago by justinavery
CSS Grid + Flexbox Solving Real-world Problems
Here are a series of common issues across common layout modules that can be easily fixed by using CSS Grid and Flexbox (both of which are fully supported with all current browsers). Don't support only the current browsers? No problems, there's fallbacks here to help too
newslettered  news  293  tutorial  flexbox  grid 
25 days ago by justinavery
Make Your Site Faster with Preconnect Hints | Viget
Having your site appear faster for your users is the best thing you can do for your site in any industry.... period. If you're pulling in resources from outside your own site (fonts, scripts, videos, ads etc) then using preconnect will ensure that they don't slow you down (as much as they can do).
newslettered  news  293  tutorial  performance 
25 days ago by justinavery
jQuery 3.3.0 – A fragrant bouquet of deprecations and…is that a new feature? | Official jQuery Blog
If you're still using jQuery (and a lot of people are) take note that they've released another update along with a new feature.... the ability to add an array of classes.
newslettered  293  article 
25 days ago by justinavery
The King vs. Pawn Game of UI Design · An A List Apart Article
This is brilliant from Erik. Don't be put off if you're not into Chess, however, I do think it's a great analogy. The article takes you through the many design decisions you might be faced with designing a simple download button, and why focussing on individual elements can help build up a great design rather than trying to tackle everything at once.
newslettered  news  293  article  headline 
25 days ago by justinavery
Keeping aspect-ratio with HTML and no padding tricks
With the combination of SVG and CSS Grid you no longer need any funky position/padding tricks to keep elements in ratio.
newslettered  293  tutorial 
25 days ago by justinavery
CSS Grid + CSS Multi-Columns
Bringing Grids and Columns together in one big amazing awesome layout family. Because columns can be set a width and it will fill the space as required, if you add a grid inside the columns it will also spread those elements out for you within the confines of the grid and column rules? Sounds complex, but in practice it's pretty freaking cool.
newslettered  news  293  tutorial  grid  layout 
25 days ago by justinavery
Connect: behind the front-end experience
This week we've added a video of Benjamin De Cock delivering a retrospective talk on CSS Grid at DotCSS. This is more the tutorial on the type of work he was doing on the Stripe site with CSS Grid
newslettered  news  293  tutorial  grid 
25 days ago by justinavery
Creating and Training Traditional Template Square Markers [ARToolkit]
I've been working on training new markers for a web-based AR experience lately. If you're looking to get started this takes you through the requirements of a marker and provides a command line approach to configuring/training ARKit with them.
article  AR  newslettered  295 
26 days ago by justinavery
I finally made sense of front end build tools. You can, too.
Brew, Bower, Node, NPM, Gulp, Yeoman, Webpack.... do you recognise some of these things but don't _really_ know what they are or how they fit in? This article gives you an overview of front-end tooling in a simple and easy to understand way.
article  news  newslettered  295 
26 days ago by justinavery
Optimize your MP4 video for better performance – Boris – Medium
A lot of us are probably very familiar with different image optimsation techniques to help lower our page load times, but video is something that we tend to just take what we have and put it up there. This tutorial walks you through the approach you should take with your own MP4s.
performance  tutorial  294  newslettered 
26 days ago by justinavery
Keep webpack Fast: A Field Guide for Better Build Performance
Slacks Engineering team uses WebPack for bundling front end assets. This is great news for your users, however as you application grows over time the build process can take longer and longer. Here's what they did to help keep it speedy on both sides of the fence.
newslettered  293  article 
26 days 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  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  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  google  grid  grids  h2  h5bp  headine  heading  headline  headlne  hexgon  hololens  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  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  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  progressive-enhancement  project  prototyping  pwa  pwas  pyton  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  seo  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  talk  talk-idea  tap  template  templates  testing  theme  themes  times  tips  tmp  tool  tools  topic  touch  training  turtorial  tutorial  tutorials  tutuorial  tweet  type  typography  typorgraphy  UI  updated  UX  variable  video  viewport  visualisation  vr  vue  w3c-images  webar  webinar  webvr  wireframe  wireframing  wordpress  workflow  workshop  workshops  write-article  writing 

Copy this bookmark:



description:


tags: