Service Workers (PWA) with Angular
Adding Service workers to a real world Angular app.
rwd218  tutorial 
6 hours ago
Mirror
While maintaining a bit of a minimal theme this week, check out this blogging tool powered by GitHub issues
tool  317  newslettered 
4 days ago
Shards Dashboard Lite
A high-quality & free Bootstrap admin dashboard template pack that comes with lots of templates and components.
resource  317  newslettered 
4 days ago
SCSScale:
Typographic modular scale starter based on body's font-size built on SCSS.
resource  317  newslettered 
4 days ago
cheat.sh
The only cheat sheet you need
resource  317  newslettered 
4 days ago
Delivering WordPress in 7KB
Jack Lenox takes to a wordpress theme with an axe and comes back with a site that loads almost instantaneously. This, along with the resource below Itty.bitty are great examples of how we can still build websites thin and lean.
article  317  newslettered 
4 days ago
UnusedCSS
Unused CSS has a tonne of features including: Automatically find and remove unused CSS rules, Provide clean CSS files to download, Scan Javascript files for CSS rules, Explore responsive design rules and media queries, Regularly check your website for changes, Show a visual diff of the clean CSS file, Set a custom user agent for crawling your website, Compatible with all websites (WordPress, Bootstrap...)
newslettered  317  tools 
4 days ago
CSS Grid in IE: Faking an Auto-Placement Grid with Gaps | CSS-Tricks
This is the third and final part in a three-part series about using CSS grid safely in Internet Explorer 11 (IE11) without going insane. This week Daniel is going to introduce a flexbox technique that will replicate the grid autoplacement technique.
newslettered  317  tutorial 
4 days ago
Brutalist Web Design
A brutal approach to designing sites by focussing on content and making thing accessible. Surely not!
article  317  newslettered 
4 days ago
BBC News on HTTPS
BBC have gone all green padlock on us now and you might be asking... what took so long? Well, it's not as simple to do with a MASSIVE site serving millions of page views a day. I wonder how far away the PWA version is now...
article  317  newslettered 
4 days ago
UX Evolutions: How Firefox Has Changed over the Last 14 Years | Adobe Blog
The history of Firefox over the past 14 years. I remember picking up firefox shortly after it was renamed from Pheonix as an alternative to IE. It wasn't until the second iteration of Chrome that I switched but since the release of Quantum, I've found myself in Firefox all the time now.
article  317  newslettered 
4 days ago
Bootstrap 4.1.2 · Bootstrap
Bootstrap 4.1.2 has hit the stores with a few bug fixes, nothing too major. There was an XSS vulnerability fix for some of the plugins, issues around carousels, and general fixes and documentation improvements
article  317  newslettered 
4 days ago
Working With Atomic Design and Pattern Lab Online Course | Brad Frost
If you love using Atomic design and pattern lab then you can now get taught by Brad Frost FOR FREE! Go sign up with Gymnasium and get started!
resources  317  newslettered 
4 days ago
Itty bitty
Create your own small website from a URL.... just like this one
tools  317  newslettered 
4 days ago
web-riimote
Turn your smartphone into a 3D controller with just a web app. No native app needed.
newslettered  317  tutorial 
4 days ago
color-adjust
This is a new property that will allow you to specify either economy or exact as values. The 'economy' value will continue to allow the browser/device to change the background or the colour of the text to make it more accessible for the user, whereas 'exact' will keep the value really difficult to read if that's the case.
article  317  newslettered 
4 days ago
ASCIIFlow Infinity
Need to create a workflow that is text based..... come in ASCII Flow!
tools  317  newslettered 
6 days ago
What is Data Science? | Thinkful
This is a fantastically designed blog article about the history and challenges of data science. The animations and subtle movements are wonderful
article  316  newslettered 
11 days ago
Spatial Navigation
This specification is seeking to implement a way to move the focus of a webpage with the arrow keys. Currently we have the tab key which will take us from one selection to another but that's not always the simplest way. Imagine a grid of images that are 3 columns wide, no imagine you wanted to go from the first image to the 7th image. Currently you would need to go through 1, 2, 3, 4.... but with spatial navitaion you could go 1, 4, 7 by pressing the down arrow.
In contrast, spatial navigation moves the focus among focusable elements depending on their position allowing it to address problems encountered with sequential navigation.
tutorial  316  newslettered 
11 days ago
The simpleton's guide to CSS Grid – LogRocket
Looking for a basic introduction into CSS Grid, Dennis has got you covered.
tutorial  316  newslettered 
11 days ago
Timeline 2.0 — Interaction Design for Sketch
The biggest problem for web design, in my opinion, is conveying the interactions and movement that the designer has in their mind to either the client for sign off or the developer for the build. Even if both the client and developer can imagine what the designer is describing there is a strong chance that they are imagining different things. Timeline 2.0 is trying to fix that problem
article  316  newslettered 
11 days ago
Designing a New Reality: Chatbots, VR & Beyond
Val Head is a Web Animation Expert, Author, and Design Evangelist at Adobe. Here she asks what becomes of the role of designers as we see the world moving away from screens towards technologies like chatbots, virtual reality and artificial intelligence.
rwd316  presentation  vdeo 
11 days ago
Content needs a publication date!
As you start reading an article I think it's super important to know some context. The date the article was published/updated is the _best_ context you can have, especially in our industry where things move on so quickly and technical articles can go out of date.
article  316  newslettered 
11 days ago
Presenter terms template
A no-nonsense explainer for conference organisers about my presenting terms and topics from Christian Heilmann.
rwd316  resource 
11 days ago
Introducing the GOV.UK Design System
The Design System contains styles, components and patterns to help teams in government create user-centred digital services. It brings together the patterns and code found in the Service Manual, GOV.UK Elements and elsewhere.
article  316  newslettered 
11 days ago
Accessibility inspector - Firefox Developer Tools
The accessibility inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. This article takes you through the main features of the accessibility inspector and how to use it.
article  firefox  316  newslettered 
11 days ago
Fitting Text to a Container | CSS-Tricks
Having an incredibly large heading text that completely fills the container has been a bit of a trend in recent times. I quite enjoy the look and have tended to use FitText to get it to work with different length headings, here are a few more options from Chris
tutorial  316  newslettered 
11 days ago
CSS Grid Level 2: Here Comes Subgrid
CSS Grid Level 2 is already in the process of being specified, and the main feature of this level of the spec is to bring us subgrid. In this article, Rachel Andrew explains the new features.
newslettered  316  headline  grid  article 
11 days ago
Responsive Blue Note Album sleeves recreated in the browser using HTML and CSS
I love this article because it's one of my favourite things to do. Go and find something that is a great example of design that _isn't_ on the web and recreate it so that it is.
article  grid  316  newslettered 
11 days ago
Ampersand 2018 |
If you missed the Ampersand conference in Brighton this year then Rob Weychert has you covered with this overview of each of the talks (along with some great related links). The conference was mostly focussed on Variable fonts which is something that excites me when it comes to the possibilities of design.
article  typography  316  newslettered 
11 days ago
How CSS works: Creating layers with z-index – LogRocket
I was working on a demo this week and had to bring some text in front of an image. I had placed a z-index on the image (along with some other rules) but couldn't get it to layer properly until I added some positioning to it. This tutorial goes into further details about what to remember when it comes to layering things on the z index.
tutorial  316  newslettered 
12 days ago
CSS Grid in IE: Debunking Common IE Grid Misconceptions
If you're concerned that moving towards using CSS Grid will mean that any users on older versions of IE will be left behind then this article (first in a series of three) is for you
tutorial  grid  316  newslettered 
12 days ago
Your Emails (and Recipients) Deserve Better Context
I'm pretty sure that we get most of these tips right in our weekly newsletter... after all you are who makes this newsletter so I'm hoping you're getting the best experience. On a slight tangent, any time that you send an email to someone internally at your place of business they should be able to understand what is in your email by reading the subject line along! If you do this, I promise that people will love getting emails from you over the years.
article  315  newslettered 
18 days ago
Pixels vs. Ems: Users DO Change Font Size – Evan Minto – Medium
In this study, it appears that at least 3% of users are browsing sites using a browser text size other than 16px (the default). This means that you should ensure that the sites you're building not only respond to viewport size, but also the size the user decides to set of the text itself.
article  typography  315  newslettered 
18 days ago
Offline-Friendly Forms | Max Böck - Frontend Web Developer
One of the most requested features that I get for offline web apps are forms that work regardless of the connection. This is a great overview along with an expample codepen.
newslettered  315  tutorial  javascript 
18 days ago
VS Code Can Do That?
All the best things about Visual Studio Code that nobody ever bothered to tell you
newslettered  315  resource 
18 days ago
T-25 days until Chrome starts flagging HTTP sites as "Not Secure"
This week Troy Hunt is covering how "easy" it is to move to https (nothing is ever as easy as you think, especially when tech is involved). He is right though, it's only another 25 (probably less now) days before Chrome starts marking non https sites as not secure. You should make sure you are ready to go, and that you've got http->https redirects firing.
article  315  newslettered 
18 days ago
Building a responsive image
How to create a logo that responds to its own aspect ratio
newslettered  315  tutorial 
18 days ago
What Newsletters Should Designers And Developers Be Subscribing To?
I'm really happy to see RWD Weekly make this list, but I'm even happier to see a bunch of great newsletter content that I'm not already subscribed to. If you're looking to stay on top of your industry there are a lot of must subscribes in this list.
article  315  newslettered 
18 days ago
What is the CSS ‘ch’ Unit?
If you were hoping it was a magical unit that we could used to set our content widths at to ensure that we had the perfect line length.... well I'm sorry it's not. Eric does a great job of explaining what they _are_
article  315  newslettered 
18 days ago
HTTPS Is Easy!
With Google updating the way in which they show non https sites in 25 days I thought it were a good idea to provide you with some details on how to move towards https (if you're not there already).
newslettered  315  tutorial 
18 days ago
New tools for art direction on the web
After soaking up some An Event Apart talks Jeremy was keen to try some new front end techniques on 'The Gęsiówka Story'. Using variable fonts and CSS Grid I think he did a really great job showcasing an important story. One thing that I found really interesting was the little touch done for the footnotes, when becoming active they set the min-height to 100vh giving the footnote the focus that it needed.
article  read  315  newslettered 
20 days ago
Figma 3.0 (!) – Figma Design
Figma is turning 3.0 and is dropping some new features and functionality around adding styles and prototyping to its growing list of features. There's a bold statement in the article - "Throw away your InVisiion license"... do you think it can replace
tools  article  315  newslettered 
21 days ago
Improve your visitors' perceived loading speed with primitive art
By including SVG sketch versions of your images you can improve the perceived performance of your page. This can be particularly important for mobile and slow connections and will give the user that little bit of a rough preview as to what they'll see next.
newslettered  315  tutorial  performance  image 
22 days ago
Container Query flow chart
Do you really need container queries?
rwd314  codepen 
25 days ago
The Four Big Ways Jetpack Helps with Image Performance
Jetpack can help you improve the performance of your images if you're running wordpress. This is the same thing that a lot of the other image performance tools can do, but being built by automatic it fits in with wordpress quite nicely.
rwd314  tools 
25 days ago
BEM For Beginners: Why You Need BEM
CSS styles isolation is the most frequent start point of the BEM usage. But this is the least that BEM can give you. BEM brings a system approach in your project and keeps it from the mess.
newslettered  314  tutorial 
26 days ago
First Input Delay shows how quickly your site responds to user interaction
First Input Delay (FID) was developed by Google to capture how quickly websites respond to user interaction. It's fairly simple to implement: We add event handlers for click, mousedown, keydown, pointerdown, and touchstart. When the user first interacts with the page in one of those ways, we measure the time between when the event happened and when the event handler was actually called. That delta is FID.
newslettered  314  article 
26 days ago
The three lessons that changed how I think about design systems
There's some great tips in here if you're looking to implement a design system. Start with an idea of where you're at by running an interface inventory and getting the right team in place. Make sure everyone is calling an atom an atom and an element an element, consistent understanding is key. There's also tips on the right tools and a reminder that design systems are never done.
article  314  newslettered 
26 days ago
UX Design Tools for 2018 (For Mac AND PC) – Prototypr
With so many different tools available it was great to see this article list out the best of breed for UX. It covers conception, wireframes, collaboration, prototyping, high fidelity designs, presentation and handoff.s
article  tools  314  newslettered 
26 days ago
Web Animations in WebKit | WebKit
With the release of Safari Technology Preview 59, WebKit have turned Web Animations on by default for us.
newslettered  314  article 
26 days ago
Generative Artistry
This site shows a series of generative art (three at the moment) and teaches you how to go through and reproduce this on the web
newslettered  314  inspiration  javascript  tutorial 
26 days ago
Foundation Release v6.5.0-rc.1
Here we go! Foundation 6.5 is out now and comes with a lot of bug fixes and various improvements! This release is mainly focused on stabilizing the previous release, improving accessibility and browser support and making the integration with your project easier. New features were delayed to the next release to ensure the best compatibility with v6.4.4-rc1. Check out the details below.
newslettered  314  article 
26 days ago
Twemoji
Twitter’s open source emoji has you covered for all your project's emoji needs. With support for the latest Unicode emoji specification, featuring 2,841 emojis, and all for free.
RWD314  resources 
26 days ago
The power of doing nothing at all
Sometimes by doing nothing at all will help you land a 500lb wildebeest. This article is from the creator of Jot Form who for a long time thought that to be successful you always had to be doing something. It's not always about moving and changing, sometimes a bit of time and patience can go a long way.
newslettered  314  headline 
26 days ago
Prioritizing the Long-Tail of Performance
By prioritising the long tail you move the mean result further to the left, and more importantly, further towards the fastest loading scenario. Great article from Tim about what to focus on when working on performance.
article  newsed  newslettered  313 
4 weeks ago
More Common Voices
Common Voice, Mozilla’s initiative to crowdsource a large dataset of human voices for use in speech technology, is going multilingual! Common voice is a tool that you can use to incorporate speech technology into what you're building.
newslettered  313  resource 
4 weeks ago
« earlier      

Copy this bookmark:



description:


tags: