recentpopularlog in
« earlier  
Helping Designers Adhere to a Design System with Sketch
If you’re a designer who needs to create and manage a library to help others adhere to a design system, read on. We’ve found the following helpful as we design digital tools that over 1 million associates use throughout the U.S.
design  design-systems  collaboration  documentation 
november 2019
An Essential Tool for Capturing Your Career Accomplishments – A List Apart
A Career Management Document (CMD) is a comprehensive collection of your résumé and portfolio content. It’s a document you update regularly, over time, with all the work you’ve done.

When you’re ready to apply for your next job, you’ll have all the résumé and portfolio pieces available in your CMD. All you need to do is assemble those pieces into résumé and portfolio documents, then send the documents off with your job application.
career  resume 
november 2019
HTML5 Please - Use the new and shiny responsibly
Similar to "Can I Use…" — list of HTML and CSS properties and their level of browser support.
browsers  css  html5  crossbrowser  browser-support  js  api  polyfills  fallbacks 
november 2019
Sharp Grotesk
Like Frutiger’s Univers, Sharp Grotesk spans the gamut and explores the edges of what is possible in sans-serif typography, organizing the resulting family by width and weight using a numeric system of font naming.

The superfamily consists of 14 roman/italic pairs. The style names correspond with a number: 05 - 25, which represents the 21 widths in which Sharp Grotesk is available. For example: the narrowest and boldest font in the family is ‘Sharp Grotesk Black Italic - 05’. The thinnest and widest font in the family is ‘Sharp Grotesk Thin - 25’.
fonts  typography  condensed  poster  compressed  titling  super-family 
february 2019
Diane Davies / London based freelance proofreader
Attractive, typographically-driven site for a freelance proofreader. Best on desktop.

Handy for design inspiration and as an example of how a proofreader markets themselves!
proofreader  freelance  examples  website:personal  typography  inspiration 
january 2019
Centre for Visibility Design
Bolds or italics? This and other questions answered through SCIENCE!
research  typography  usability 
january 2019
Web Content Accessibility Guidelines 2.1—for People Who Haven’t Read the Update ◆ 24 ways
Alan Dalton gives a plain English guide to the updates.

>"The WCAG working group have added 17 success criteria to the 61 that they released way back in 2008—for context, that was 1½ years before Apple released their first iPad! These new criteria make it easier than ever for us web geeks to produce work that is more accessible to people using mobile devices and touchscreens, people with low vision, and people with cognitive and learning disabilities."
a11y  wcag2-1  accessibility 
december 2018
Book cover - SVG text + Writing Mode
Nifty example of SVG used to create a book cover image with live type, vertical writing modes (for spine text), etc.
responsive-design  svg  examples  bookcovers 
december 2018
The Edward Gorey House
In the Cape Cod vicinity.

8 Strawberry Lane
Yarmouth Port, MA 02675

(508) 362-3909

The Edward Gorey House is located just off Route 6A on the Yarmouth Port Common
sightseeing  museums  Massachusetts  travel  Cape-Cod 
november 2018
Shop Boswell is the outfitter for the spirited American. We believe that everything in your closet—from functional essentials to considered statements—should tell your story. Our shop is focused on finding the balance of utilitarian ease and forward yet timeless style. Let us help you find your next heirloom.

Future vintage from independent designers such as Caron Callahan, Vivien Ramsey, Bode and Correll Correll sit alongside our exclusive selection of vintage workwear. Unisex staples from Lloyd and Corridor sit alongside bold, playful accessories and shoes from Laura Lombardi, Feit and LOQ. Plus, hats by our owner’s eponymous line Brookes Boswell are hand blocked in the studio.

Time for wine? Don’t miss the in-store pop-up from our friends at Ardor Natural Wines.
pdx  shopping  clothing 
november 2018
habit shift: listen to black women.
I’ve spent a lot of time worrying about how to go about writing this post. But the points that I need to make are really absurdly simple: + White women benefit from, and uphold, systemic and structural racism. + Coming to terms with that complicity is imperative to building a more just and equitable future. + Listening to Black women and following their lead and their example is a habit shift that all people who call themselves feminists can benefit from.
privilege  racism  allies  education 
november 2018
Where to Donate Shoes | Soles4Souls
If you live in the United States, Zappos for Good will ship your shoe and clothing donation for free. Donate as many items as you’d like, up to 50 lbs per box.
donations  clothing  shoes  decluttering  closet-strategies  konmari 
october 2018
3 Ways to Create Angled Edges With SVG
In this tutorial you’ll learn three ways to create easy angled edges using SVG. To begin with we’ll use an inline SVG, then we’ll use an SVG background on a pseudo-element, before finishing off with a Sass mixin. Let’s dive in!
css  svg  masks  sass  tutorial 
august 2018
Let’s write books in HTML! HTMLBook is an open, XHTML5-based standard for the authoring and production of both print and digital books. HTMLBook is built on the following premises:

Books are timeless. The basic “book” structure has persisted for hundreds of years and will continue to persist for our lifetimes, be it in digital or print form.
HTML is the markup language of the world for the foreseeable future.
Single-source document processing will remain valuable for the foreseeable future.
semantics  ebooks  html5  epub  css  naming-conventions  reference 
august 2018
Headings with Side Lines
Fun with heading elements and pseudo-element side lines in Sass.
css  heading  rules  style 
july 2018
Duotone filtering w/ CSS variables 😎🌈
Was playing with mix-blend-mode to create different duotone filters. Then I thought it might be cool to have a handy selector wheel to try out different filters 🌈

So here it is! A duotone filtering tester using CSS variables. The inner ring is the lightening color whilst the outer is the darkening color 👍

To change the colors, adjust the colors variable in the pug code.

css  color  colorpalettes  duotone  filters  interface  interactive  images  photography 
july 2018
Bosky Dell Natives
Native plant nursery in West Linn. Dad’s a fan.
nursery  native-plants  pdx 
july 2018
Accessibility for Teams
This guide provides:

- An overview of how each team member can contribute to a product's accessibility
- A framework for thinking about accessibility and inclusive design in your role
- An understanding of the human need behind accessibility practices
- We focus on the issues most likely to impact government sites. These guidelines do not provide a comprehensive list of all possible issues. Your team will need additional resources and work to conduct manual audits to conform to the standards of Section 508 (which aligns with the W3C Web Content Accessibility Guidelines (WCAG) 2.0 Level AA), a law that ensures all web content is accessible to anybody with a disability.
a11y  accessibility  design 
july 2018
Life without plastic
Airtight containers, a substitute for plastic
shopping  plastic  alternatives  reduce  reuse  containers  groceries  food 
july 2018
Itty bitty sites self-contained within their own link.
internet  publishing  tools  web 
july 2018
Forgotten Shapes
The assortment of commercially available fonts is in constant flux. Typeface design is inevitably informed by media-specific conditions and the aesthetic discourse of the day. A further layer of complexity derives from the attitudes of the foundry and designers involved. Within each typeface, the entire context of its origin is subtly stored. Once released, additional perspectives accrue through its application.

Forgotten Shapes publishes digital reconstructions of typefaces that have somehow vanished. We revive such typefaces according to the guiding principle of Werktreue—that is, in a form as faithful to the original as possible. Extensive research forms the point of departure for all projects. Accompanying articles emphasize the background of each typeface in an appropriate narration along the found sources. These articles lead to an archive in which type design recalls fragments of its genesis.
fonts  foundry  historical 
july 2018
Beatrice Display
Very interesting! Good personality.

Beatrice is a new kind of typeface. The family is an exploration of contrast methodologies, combining various aspects from the canon expansionist systems, inverted contrast, and the contrast behavior of standard sans-serif grotesks. These methodologies were dissected and used as cornerstones in building our own system, with the final result landing largely in unexplored territory. Built on the foundation of a traditional American Gothic but with tight-as-can-be spacing, the superfamily spans a robust set of weights and includes 2 optical sizes: a super high-contrast, tightly packed Display cut, as well as a standard low-contrast cut, designed to function beautifully in a wide range of optical sizes.
font  display  text  wishlist  super-family 
july 2018
Salvaje Display | Coppers and Brasses
Salvaje Display is a typeface consisting of two distinct styles. Part of the broader Salvaje type family designed by Typozon, these typefaces draw their inspiration from the birds-of-paradise who only live in one part of the world: New Guinea-Australia. These rainforest birds have over time evolved in a very interesting visual way; they can radically transform their shape and the way they look—from very subtle to striking and elaborate—using many attributes unique to their species. This type family emulates this distinct behavior—the display version uses a very high contrast to be as dynamic, loud and noticeable as possible, and the upcoming text version shows a much lower contrast which makes it more neutral, readable and discreet. This attention seeking display typeface cleverly combines all of these attributes in its flamboyant parade.
fonts  display 
july 2018
Commercial Type » News » New Release: Canela Text and Deck
Canela, designed by Miguel Reyes, is a new typeface that defies easy categorization. Neither serif nor strictly sans, not overtly historical but drawing clear influence from Caslon Old Face, and somewhat soft in its finish while crisp in its contrast, Canela is obvious only in its grace and beauty.
font  flare-serif  super-family 
july 2018
How to make a chart of your users' window sizes · Mozilla Marketing Engineering & Operations
In preparation for the MDN redesign I examined our analytics to get an idea of how wide our users’ browser windows were. I wanted window widths, not screen sizes and I thought a chart would tell a more compelling story than a table.
googleanalytics  browsers  viewports  reports  charts  responsive-design  rwd 
july 2018
Dropdown Breadcrumbs
Dropdown Breadcrumbs

A breadcrumb solution that exposes the last item for small screens and reveals the rest of the items in the trail when clicked. The entire trail is exposed when space becomes available.

Saves space by only exposing the last element in the breadcrumb trail.
Small screen users are still able to traverse the breadcrumb trail

Accordion-like control doesn't necessarily map nicely to breadcrumb interaction
JS dependancy - not necessarily a con, but worth keeping in mind that the Javascript dependency means more testing and consideration
navigation  patterns  breadcrumb  responsive 
june 2018
Progressively-Enhanced Breadcrumb Navigation
A progressively-enhanced breadcrumb navigation pattern that allows for sibling pages to be easily accessible at every level via dropdown menus.

1. Baseline
We start with a traditional breadcrumb navigation as our baseline experience to ensure the component works for all users.

2. Sub-Menu Toggle
If Javascript is enabled, we then make the top level link a toggle which reveals the nested sub-menu when clicked or tapped.

3. :hover Support
If :hover is truly supported, then we allow for sub-menus to be revealed on mouseover and we remove the toggle functionality on the top-level link.
navigation  breadcrumb  progressive-enhancement 
june 2018
Other component articles have already explored the advantages of using lists to enhance assistive technology users' experience. Briefly:
Screen readers provide shortcuts to lists and between list items
Screen readers enumerate the items so users know how many are available
a11y  accessibility  css  design  cards  lists  components  focus  focus-within  layout  flexbox  grid  clip 
june 2018
The Pudding
The Pudding explains ideas debated in culture with visual essays. By wielding original datasets, primary research, and interactivity, we try to thoroughly explore complex topics.
storytelling  digital  ideas  culture  data-visualization 
june 2018
Easier scrollytelling with position sticky
Why use Sticky?
The short version: when using the sticky graphic pattern, you need a bunch of JavaScript to handle the stuck state, dimensions, etc.. With this approach, that is all done with (minimal) CSS. This means less bugs, less maintenance, and more happiness.
animation  css  javascript  sticky 
june 2018
russellgoldenberg/enter-view: Dependency-free JavaScript library to detect when element enters into view
Dependency-free JavaScript library to detect when element enters into view. Useful for triggering sticky behavior and others.
css  javascript  scrolling 
june 2018
Carbon Design System
What is the Carbon Design System?
Carbon is the design system for IBM Cloud products. It is a series of individual styles, components, and guidelines used for creating unified UI.
styleguide  component-libraries  opensource  css  html  components 
june 2018
Priority Guides: A Content-First Alternative to Wireframes · An A List Apart Article
Simply put, a priority guide contains content and elements for a mobile screen, sorted by hierarchy from top to bottom and without layout specifications. The hierarchy is based on relevance to users, with the content most critical to satisfying user needs and supporting user (and company) goals higher up.
design  wireframes  content-first  mobile  ia  ux  requirements 
june 2018
Aspect Ratio Cells with CSS Grid Layout by Michelle Barker on CodePen
I found myself recently building a layout in CSS Grid that would have previously needed JavaScript in order to work. It’s a layout based on equal sized square grid cells, where grid items could span one or two cells on the row and/or column axis. In other words, the grid cells needed to maintain an aspect ratio
css  grid  layout  practical  examples  aspect-ratios 
june 2018
GDPR and ePrivacy compliant online tracking | Cookiebot
Robust cookie management that gives users lots of control over what’s tracked. See example of cookie tracking widget here:
cookies  gdpr  privacy 
june 2018
The Slow Death of Internet Explorer and the Future of Progressive Enhancement · An A List Apart Article
Chrome, Opera, and Firefox ship new features constantly. Edge and Safari eventually catch up. Internet Explorer, meanwhile, has been all but abandoned by Microsoft, which is attempting to push Windows users toward Edge. IE receives nothing but security updates. It’s a frustrating period for client-side developers. We read about new features but are often unable to use them—due to a single browser with a diminishing market share.
progressive-enhancement  ie  crossbrowser  fallbacks  layout  css  feature-detect  feature-queries 
may 2018
The backdrop-filter CSS property | CSS-Tricks
I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside.

Take this example where I’ve replicated the iOS notification style: see how the background of each of these boxes are blurred but the text isn’t?
background-images  filters  css  blur 
may 2018
List, Detail and Beyond | Pipits for Perch
Fantastic in-depth practical approach to list/detail including adding your individual item views to a sitemap!
how-to  cms  sitemaps  dev  perch  list-details 
may 2018
The All-New Plugin from Plant – Prototypr
Visual design version control app and plugin for Sketch
design  versioncontrol  versioning  sketch-app 
april 2018
Introduction · Front-End Developer Handbook 2018
This guide for front-end folks covers HTML, CSS, and JavaScript and lists learning resources and development tools.
css  html  javascript  front-end  front-end-design  best-practices 
april 2018
« earlier      
per page:    204080120160

Copy this bookmark:

to read