justinavery + newslettered   4387

How Stripe Designs Beautiful Websites - Lee Robinson
There's a lot to love about the Stripe website and this article takes you through some of a reasons why it looks and feels so good.
newslettered  287  headline  news 
4 days ago by justinavery
Vertical typesetting with writing-mode revisited
When I was preparing for my talk at Adobe this year I started converting the Briefer History of Time site to different languages and began experimenting with RTL and bottom to top layouts. It was hard. This article Chen takes you through everything you need to know.
tutorial  287  newslettered 
4 days ago by justinavery
Accessible Links Re:visited | Filament Group, Inc., Boston, MA
Some great tips on making sure that the links you have on your site ( remembering that the web part of the web is the linky bits). In other news today, after building sites for 21 years I have only just realised that you can apply a different text-decoration-color: to your links. The more you know...
tutorial  headline  news  287  newslettered 
4 days ago by justinavery
Making your web app work offline, Part 2: The Implementation | CSS-Tricks
This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let's extend it to support offline.
tutorial  287  newslettered 
4 days ago by justinavery
The State of UX in 2018
A wonderful (and beautifully designed) look at UX in 2018 and the 9 trends that we'll see.
article  287  newslettered 
4 days ago by justinavery
The Art of Slide Design: Make Important Information Stand Out - Miss Geeky
If you're putting together some slides for a big presentation there's a fantastic 4 part series from Melinda Seckington that will help you ensure they're a great hit with your audience. Slides are an AID to your presentation, not the presentation itself, but it sure helps your talk if they follow some key rules.
tutorial  287  newslettered 
4 days ago by justinavery
Everything You Ever Wanted To Know About Prototyping (But Were Afraid To Ask)
For me the creation of prototypes have been a crucial part of the building a website workflow ever since responsive design landed.

Showing someone your ideas in a static design leaves loads of room for clients to guess what the other viewports might look like, but a URL that can be viewed on what ever device they will be testing your final version is the perfect approach.
article  news  287  newslettered 
4 days ago by justinavery
Accessible Language Navigation
How to provide an accessible switcher between languages. The hardest part for this is the rest of the layout once the language has changed, but this is a great start. Last year I did something to show the longer form of an <abbr> tag content: attr(title);
article  287  newslettered 
5 days ago by justinavery
The State of UX for 2018 – UX Planet
Homepage Videos? Oh please don't encourage people to add more MB to their already bloated home pages...
article  write-article  287  newslettered 
5 days ago by justinavery
How the Roman Empire Made Pure CSS Connect 4 Possible | CSS-Tricks
I love it when someone gets an idea in their head about creating something with just HTML and CSS and won't stop until they get it done.
article  287  newslettered 
7 days ago by justinavery
A Pinterest Progressive Web App Performance Case Study
Pinterest’s new mobile web experience is a Progressive Web App. In this post we’ll cover some of their work to load fast on mobile hardware by keeping JavaScript bundles lean and adopting Service Workers for network resilience.
article  news  287  newslettered 
7 days ago by justinavery
Job Application for Product Designer at Mixpanel
We are a small, collaborative team of multidisciplinary designers, and are looking for experienced product designers to help us dive deeper into our product vision, and to strengthen our brand across all the places we interact with our customers.
newslettered  286  jobs 
11 days ago by justinavery
Nested calc() functions and IE11 by Zach Handing on CodePen
I've always nested calc() within calc() for additional math functions. It turns out it's not great for IE10 and 11, but by just including a single function and multiple parenthesis it works. The more you know.
tutorial  286  newslettered 
11 days ago by justinavery
The Best Request Is No Request, Revisited
Stefan revisits the web adage that the best request is no request at all... which is essentially why we ended up concatenating our CSS and JS and creating sprites for our UI images.... if you don't have to make two http requests then don't. Now, with http/2, is this approach still valid? Are our former best practices still best practices?
newslettered  286  headline  news 
11 days ago by justinavery
Generating Wireframe Boxes with CSS and HTML5
I began doing wireframes in the browser using Zurbs Foundation because it was the easiest way for me to allow clients to see how a web page would flow across viewports. This is a neat trick from Eric Meyer to get the them looking more wireframy and sit above existing content. Very cool
tutorial  news  286  newslettered 
11 days ago by justinavery
A Content Slider
I really dislike content sliders... or more to the point I really don't like carousels. On one of the last clients I worked with they're previous agency had built them a home page carousel where each of the carousel items contained another carousel. FFS. It's not all bad though, and sometimes a carousel _is_ the right tool for the job (like an image gallery for example). In this article Heydon Pickering adds to his growing list of inclusive components
newslettered  286  headline  tutorial 
11 days ago by justinavery
V6: Typography and Proportions
A detailed review from Rob on his approach to responsive typography in his latest redsign of the site (hence the V6 bit... it's the sixth iteration).
tutorial  news  typography  286  newslettered 
11 days ago by justinavery
Learn CSS Grid in 5 Minutes – freeCodeCamp
A great introduction from Per on the Grid Layout using a nifty new tool designed for training courses in Front End.
tutorial  286  newslettered 
11 days ago by justinavery
Flexible Overflow
Using flexbox and text-overflow: ellipsis to help deal with text components.
tutorial  286  newslettered 
11 days ago by justinavery
An Idea for a Simple Responsive Spreadsheet
This is a great little trick — using position:sticky to ensure that the table header rows are always visible even on smaller viewports. Had I not just switched over to Firefox I would have been very impressed, but at the moment this is only working in later versions of Chrome. There is some work on the bug tracker for Mozilla to address the two issues that are causing Firefox not to work for this example, so it could be something for the future.
tutorial  286  newslettered 
11 days ago by justinavery
Introducing minmax()
For me, minmax() is the key responsive feature of the CSS Grid Layout specification and provides the most responsive capabilities for the least amount of effort. If you're not sure what minmax() does with Grid then I strongly urge you to find 2.5minutes in your day and watch this video from Rachel Andrew.
newslettered  286  video  grid 
11 days ago by justinavery
Modern Asynchronous CSS Loading | Filament Group, Inc., Boston, MA
Scott Jehl has updated the filament groups approach to loading fonts and written a great tutorial for you to follow along with.
tutorial  286  newslettered 
11 days ago by justinavery
Michael Riethmuller on Beyond Media Queries
Learn how to use fluid typography, responsive SVG, adaptive flexbox components, CSS grid and custom properties to create unique responsive solutions that go beyond media queries.
newslettered  add-site  286  video 
11 days ago by justinavery
Customer Journey Maps - How to Build One
So often a user goes through a tonne of different touch points on the way to becoming a customer. By creating a journey map you'll have a better idea about what to provide at each stage, and on which channel
newslettered  news  286  article 
11 days ago by justinavery
Welcome | Voice and Tone
Style guides don't just have to be for visually designed elements, content can have it's own style guides. With content being the cornerstone of the web, it's arguable that this is the most important.
resource  newslettered  286 
11 days ago by justinavery
Celebrate the web by using another browser than Google’s Chrome
As I've mentioned the past couple weeks I'm expanding my browser usage again. Chrome did so well all those years ago by providing us with a solution that wasn't IE, but now we should be trying to avoid falling back into the same single browser trap.
newslettered  news  286  read  article 
12 days ago by justinavery
What Happens When You Visit ft.com?
Have you ever wondered what happens when you type in a URL or click a link? Well, when you do this on FT.com a hell-of-a-lot goes on to make sure you get your content quickly.
news  newslettered  article  286 
13 days ago by justinavery
Design Systems Handbook - DesignBetter.Co
A design system unites product teams around a common visual language. It reduces design debt, accelerates the design process, and builds bridges between teams working in concert to bring products to life. Learn how you can create your design system and help your team improve product quality while reducing design debt. Divided into 7 Chapters this is a cracking effort well worth a few hours put aside to read
article  newslettered  news  287 
13 days ago by justinavery
Should I use system fonts or web fonts? | Responsive Web Design
Web fonts were an amazing step forward towards creating a more beautifully designed web. No longer were we restrained by the handful of choices that “Web Safe” fonts provided us, we now had the ability to bring just about any typeface to the web in the knowledge that everyone would see the same thing*.
newslettered  news  285  article 
18 days ago by justinavery
Augmented reality with Python and OpenCV (part 1)
I'm really interested in how we can expand our traditional content and our concepts of the browser with VR and AR. My commute this week has been filled mostly with getting a really simple AR going to show the Earth rotating when using the Hiro marker, so this tutorial really interested me with the ability to be more adventurous with your markers.
tutorial  pyton  AR  project  newslettered  285 
18 days ago by justinavery
Want to try Warp? We just enabled the beta for you
Let's say you have something running locally and you want the world to see it (or at least you want your client/friends to see it from where ever they might be). Well Cloudflare now gives you that capability with their new product called Warp.
tool  newslettered  285 
18 days ago by justinavery
The Multi-Grid One-Page Layout
A nice look at the overview of how a single page layout comes together using CSS Grid and Flexbox
tutorial  newslettered  285 
18 days ago by justinavery
New in Firefox 58: Developer Edition – Mozilla Hacks – the Web developer blog
Last week I wrote about although I've moved across to Firefox as my default browser I was still going back to Chrome for the dev tools. Well this week Firefox Developer edition #58 has been released with some great new Dev tools features. Winning!
headline  newslettered  newsed  285 
18 days ago by justinavery
What is a Progressive Web App?
Lately I've been including a lot of a links about Progressive Web Apps so I thought it would be a great idea to cover this article from Jeremy about what that actually defines. Jeremy is always very eloquent with his words and he gets the essence just right
newslettered  news  285  article 
18 days ago by justinavery
Faux Grid Tracks
When creating layouts with CSS Grid a question that I get quite a bit is how to style the gaps between the grid items. Unfortunately, for now, this isn't possible within the specification and none of the browsers have provided support for the styling of grid-gap yet either. The fix that I always refer to is to apply a background colour to the containing div which will show through the cracks. In this article Eric Meyer explores a few options and how they might come unstuck.
tutorial  newslettered  285 
18 days ago by justinavery
New on Typekit: Load web fonts with CSS
A month or so ago we covered the fact that TypeKit were now providing their fonts via a CSS option as well as the Javascript implementation they've always had. This comes into line with the way in which you can request fonts from Google Fonts too. I didn't reaslise at the time that TypeKit had not rolled this change out to all of their customers, but now they have. I prefer this method of calling fonts, but these days I'm trying to avoid calling fonts altogether (link to new article)
newslettered  news  285  typorgraphy  article 
18 days ago by justinavery
Dev Tips - Developer Tips by Umar Hansa
162 ways (as of yesterday) that you can use Chrome Dev Tools to help you debug your site presented in Gif format.
tools  tutorial  newslettered  285 
18 days ago by justinavery
HTTP Archive (beta)
A great set of reports that are pulled using the huge amounts of data in the HTTP Archive. These allow you to paint a picture of the changing landscape of the web from JavaScript, Images, Page Weight, Loading Speed and the adoption of HTTPS for example
tools  newslettered  285 
18 days ago by justinavery
2017 Affordability Report | Alliance for Affordable Internet
An overview of the affordability of accessing the internet across the Globe in 2017. It's not cheap, but one positive we can spin from this is that we have a plan and know what we need to do to turn things around and make it more affordable. You can do your bit too, try not to post a 4MB picture of someone eating some salad on the next site you build. Optimise the delivery of your content and always, ALWAYS, prioritise content over non-essential stuff that pops.
newslettered  news  285  article  headline 
18 days ago by justinavery
Common Responsive Layouts with CSS Grid (and some without!)
If you want to get started with CSS Grid then try and replicate some of these web layouts. Jo has already built them so there's code for you to test out, but half the fun is working on your own solution.
newslettered  news  285  tutorial  article 
18 days ago by justinavery
Offline Strategies for PWA - Carlos Rojas Blog
A step by step approach around the different options you have for using a Service Worker to provide an offline version of your site to visitors.
tutorial  newslettered  285 
18 days ago by justinavery
[no title]
Stylable enables you to build reusable, highly-performant components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.
tools  newslettered  285 
18 days ago by justinavery
RSS: there's nothing better
Nothing better.... except for email newsletters AM I RIGHT?!?! Actually, David addresses email newsletters in this post as well. To be honest, I get a lot of my content from RSS feeds, but I work through a LOT of articles to handpick the best of the bunch for you to enjoy. If you're were keen to get these on RSS you can too through our RSS news feed, or they're posted on Twitter, and our Facebook page. Anyway, I try and cover all the bases and RSS is a integral part of that.... you should totally read the email.
newslettered  news  285  article 
18 days ago by justinavery
Lona
A tool for defining design systems and using them to generate cross-platform UI code, Sketch files, images, and other artifacts from AirBnB
tools  newslettered  285 
19 days ago by justinavery
Using SVG as placeholders — More Image Loading Techniques
A review of the couple of options when using SVG placeholders to improve the perceived performance of your site.
article  performance  svg  newslettered  284 
25 days ago by justinavery
Engaging users through high quality AMP pages
Google will be enforcing a rule that requires AMP pages to be on content parity with the original pages, or they'll be removed from the top spot in Google mobile searches (the search carousel).
article  newslettered  284 
25 days ago by justinavery
Introducing the New Firefox: Firefox Quantum - The Mozilla Blog
One of the biggest releases occurred this week with Firefox releasing v57 better known as Firefox Quantum. It is twice as fast as it was 6 months ago and Mozilla believes it will be on target to be twice as fast again in 2018.

So why such a big deal? Well for the first time since making a move across to Chrome back in the late naughties, I've reset my default browser to Firefox. This comes down to the leaps and bounds of developer tools and having the best CSS Grid inspector, but mainly down to the fact that it feels faster (and keeps the laptop fan quiet).
article  newslettered  284  newsed 
25 days ago by justinavery
November Update of Adobe XD
At the Adobe Max conference the unveiling of Adobe XD wasn't packed with as many features as you would have hoped for with a 1.0 release, but a month later they've dropped some great updates, not least of all the Design Specs feature. This allows developers to find flows, measurements and copy styles while developing the front end
article  newslettered  284  news 
25 days ago by justinavery
Grid areas and the element that occupies them aren't necessarily the same size.
Chris is experimenting a lot with Grid this week... or at least he is publishing a few of his thoughts on the Grid this week. This tutorial details how elements might not fill up the entire grid area, and that they can be positioned to the left/right, top or bottom of the area.
newslettered  news  284  tutorial 
25 days ago by justinavery
Aspect Ratios for Grid Items
Chris Coyier looks at examples with CSS Gridlayout that will allow us to deal with multiple aspect ratio requirements within a single page layout.
newslettered  284  tutorial 
25 days ago by justinavery
fernandojsg/aframe-4dof-controls-component: A-Frame 4DOF Component
If you're looking at exploring how to take the DayDream of Samsung GearVR controllers and add more interactive features for your AFrame worlds then this component looks at the tilt/gyroscope options in the controllers
newslettered  284  tools 
25 days ago by justinavery
How to Optimize the Critical Rendering Path in WordPress
Some really useful tips on getting your websites loading faster if you're using WordPress and plenty of links to plugins that can help you with the heavy lifting.
article  newslettered  284 
25 days ago by justinavery
Using CSS Grid: Supporting Browsers Without Grid – Smashing Magazine
Rachel looks at the most asked question about CSS Grid Layout — how to you provide fallbacks. This article looks at how to determine your browser support list, looking how far back CSS Grid goes back and shows you how you can structure your CSS to be backwards compatible (and covers off some key gotcha's that may trip you up)
news  newslettered  284  headline 
25 days ago by justinavery
The 5 Most Common Image Mistakes for E-commerce Companies
Performance is incredibly important when it comes to selling products online. Make sure you're not making any of these mistakes and throwing sales away.
newslettered  news  284  tutorial  add-site  write-article 
25 days ago by justinavery
Self-Publishing a Book for Fun and Profit | Brad Frost
Brad covers off the entire process of writing and publishing his Atomic Design book. He even goes into the nitty gritty of which label printer to buy to make packaging and sending them easier.
article  newslettered  284 
25 days ago by justinavery
Relative Requirements – CSS Wizardry – CSS Architecture, Web Performance Optimisation, and more, by Harry Roberts
This is a great approach when working with clients on new projects and identifying the most important elements of the project and plotting that out. This approach is a great way to get the people involved in the project to agree upon what may trump an decision, is it usability, accessibility, performance, delight?
news  newslettered  284  article  headline 
26 days ago by justinavery
Eric's Archived Thoughts: Declining Complexity in CSS
Eric Meyer recently published the fourth edition of "CSS - The Definitive Guide" and posted a picture of the new book along side the 2nd & 3rd editions. The latest iteration is as big as those two put together, yet in this article Eric explains why CSS is simpler, although there's more of it that we can use now.
article  newslettered  284 
26 days ago by justinavery
Intersection Observers: the beginning - QuirksBlog
Now that you know all about intersectionObserver lets see what PPK has to say about their support and quirks across a range of browsers. PPK thinks they're a little too raw for large scale, especially on mobile, but draw your own conclusions
newslettered  283  article 
4 weeks ago by justinavery
Shortcuts.design
Every shortcut for designers in one place 🚀. This has been great for me getting some inDesign shortcuts for the notebook creations, and there was a bunch I didn't know for Photoshop.
newslettered  283  tools 
4 weeks ago by justinavery
A Responsive Accessible Table | Adrian Roselli
This is such an amazing deep dive into how to create a responsive accessible table from Adrian Roselli. I've been using Filament Groups Table Saw for as long as I can remember but this is perfect for building one out yourself and understanding the things you've got to think about.
tutorial  283  newslettered  newsed 
4 weeks ago by justinavery
Crossing Guards
A really great overview from Chris Burnell about the IntersectionObserver. Chris looks at how we (used) handle lazy-loading or infinite scrolling these days, covers off the potential pitfalls when it comes to 60FPS and performance and finishes with a rather tasty codepen demo
tutorial  283  newslettered  news 
4 weeks ago by justinavery
Fontplop
fontplop is an OSX/macOS application which takes ttf and otf files and outputs a webfont bundle: woff2, woff, tff, svg, and eot.
newslettered  283  tools  fonts 
4 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  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  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  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  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  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  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  video  viewport  visualisation  vr  vue  w3c-images  webinar  webvr  wireframe  wireframing  wordpress  workflow  workshop  workshops  write-article  writing 

Copy this bookmark:



description:


tags: