24 ways

本頁 24 篇

• The Accidental Side Project

  • #Business

  Drew McLellan puts the chairs up on the tables, sweeps the floor, and closes off our season, and indeed the entire 24 ways project with a look back at what it’s meant to run this site as a site project, and what impact side projects can have on the work we do. Will the last one out turn off Christmas the lights? Brought to you by The CSS Layout Workshop. Does developing layouts with CSS seem like hard work? How much time could you save without all the trial and error? Are you ready to really lea

  2019/12/24 20:00Drew McLellanhttps://24ways.org/2019/the-accidental-side-project/

• Four Ways Design Systems Can Promote Accessibility – and What They Can’t Do

  • #Process
  • #style-guides

  Amy Hupe prepares a four bird roast of tasty treats so we can learn how the needs of many different types of users can be served through careful implementation of components within a design system. Design systems help us to make our products consistent, and to make sure we’re creating them in the most efficient way possible. They also help us to ensure our products are designed and built to a high quality; that they’re not only consistent in appearance, and efficiently-built, but that they are g

  2019/12/23 20:00Amy Hupehttps://24ways.org/2019/four-ways-design-systems-can-promote-accessibility/

• Usability and Security; Better Together

  • #UX
  • #security

  Divya Sasidharan calls into question the trade-offs often made between security and usability. Does a secure interface by necessity need to be hard to use? Or is it the choice we make based on years of habit? Snow has fallen, snow on snow. Security is often synonymous with poor usability. We assume that in order for something to be secure, it needs to by default appear impenetrable to disincentivize potential bad actors. While this premise is true in many instances like in the security of a bank

  2019/12/22 20:00Divya Sasidharanhttps://24ways.org/2019/usability-and-security-better-together/

• Flexible Captioned Slanted Images

  • #CSS
  • #Design

  Eric Meyer gift wraps the most awkwardly shaped of boxes using nothing but CSS, HTML and a little curl of ribbon. No matter how well you plan and how much paper you have at your disposal, sometimes you just need to slant the gift to the side. We have a lot of new layout tools at our disposal these days—flexbox is finally stable and interoperable, and Grid very much the same, with both technologies having well over 90% support coverage. In that light, we might think there’s no place for old trick

  2019/12/21 20:00Eric Meyerhttps://24ways.org/2019/flexible-captioned-slanted-images/

• There Is No Design System

  • #Process
  • #style-guides

  Jina Anne silences the night to talk about how we talk about Design Systems. Can the language we use impact the effectiveness of the solution? Fear not, if mighty dread has seized your troubled mind. Design systems of great joy we bring to you and all mankind. Ooh, clickbaity title. Why on earth would I, a self-proclaimed “design systems advocate”, say there is no design system? Yes, I’m being a little tongue-in-cheek. Maybe I just wanted an excuse to use the “there is no spoon” gif. But I do ha

  2019/12/20 20:00Jina Annehttps://24ways.org/2019/there-is-no-design-system/

• A Modern Typographic Scale

  • #CSS
  • #Design

  Rob Weychert reaches for the top notes to sing us a song of typographic scale. A little attention to scale and to the mathematics will help you to hit a high note with your designs this Christmas and beyond. I’ve been studying music theory this year. While some of its core concepts were already familiar to me, much of their specifics were not. Or so I thought. A funny thing happened when I was learning the major scales. While playing through a song I had written some years before, I started pick

  2019/12/19 20:00Rob Weycherthttps://24ways.org/2019/a-modern-typographic-scale/

• Five Interesting Ways to Use Array.reduce() (And One Boring Way)

  • #JavaScript
  • #Code

  Chris Ferdinandi turns the heat down low and lets the sauce reduce while we take a look at how to add spice to our source with a sprinkling of Array.reduce(). Just a little ingenuity with the humblest of functions. Of all the modern array methods, the one I had the hardest time wrapping my head around was Array.reduce(). On the surface, it seems like a simple, boring method that doesn’t do much. But below its humble exterior, Array.reduce() is actually a powerful, flexible addition to your devel

  2019/12/18 20:00Chris Ferdinandihttps://24ways.org/2019/five-interesting-ways-to-use-array-reduce/

• Building a Dictaphone Using Media Recorder and getUserMedia

  • #Code
  • #apis

  Chris Mills brushes up his shorthand and shows how the MediaStream Recording API in modern browsers can be used to capture audio directly from the user’s device. Inching ever closer to the capabilities of native software, it truly is an exciting time to be a web developer. The MediaStream Recording API makes it easy to record audio and/or video streams. When used with MediaDevices.getUserMedia(), it provides an easy way to record media from the user’s input devices and instantly use the result i

  2019/12/17 20:00Chris Millshttps://24ways.org/2019/building-a-dictaphone-using-media-recorder-and-getusermedia/

• A History of CSS Through Fifteen Years of 24 ways

  • #CSS
  • #Code

  Rachel Andrew guides us through a tour of the last fifteen years in CSS layout, as manifested in articles here on 24 ways. From the days when Internet Explorer 6 was de rigueur, right up to the modern age of evergreen browsers, the only thing you can be sure of is that the web never stands still for long. I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at th

  2019/12/16 20:00Rachel Andrewhttps://24ways.org/2019/a-history-of-css-through-15-years-of-24-ways/

• Microbrowsers are Everywhere

  • #Code
  • #performance

  Colin Bendell gets into the minutia of microbrowsers - the small previews of your site that are pervasive all around the web and through social media apps and search engines whenever an item of content on your site is referenced. You’ve seen it everywhere - that little thumbnail preview of a website mentioned in a tweet, the expanded description in a Slack channel, or in WhatsApp group chat. Figure 1: The preview shown in a group chat provides a hint of what the real webpage looks like These lin

  2019/12/15 20:00Colin Bendellhttps://24ways.org/2019/microbrowsers-are-everywhere/

• Design Tokens and Component Based Design

  • #style-guides
  • #Design

  Stuart Robson rolls up his sleeves and begins to piece together the jigsaw puzzle that is design tokens and component based design. Starting with the corners, and working around the edges, Stu helps us to piece together a full picture of a modern design system. If you stare at your twitter feed long enough, it can look like everyone is talking about Design Systems. In some cases you could be persuaded to think how shallow the term can go. “Isn’t this what we called Style Guides?”, “Here’s my Rea

  2019/12/14 20:00Stuart Robsonhttps://24ways.org/2019/design-tokens-and-component-based-design/

• Art Direction and the New WordPress Editor

  • #Design

  Mel Choyce explores how the new WordPress editor (also know as Gutenberg) can be used to create more carefully art directed posts. Like gifts carefully arranged beneath the Christmas tree, it’s the contents that matters but the presentation that sells. The New York Times release of Snowfall in 2012 took the web industry by storm. Media-rich and captivating, its design evoked wonder, fear, and desperation in the face of an avalanche. Snowfall was one of the first great art directed digital experi

  2019/12/13 20:00Mel Choycehttps://24ways.org/2019/art-direction-and-the-new-wordpress-editor/

• Making Distributed Working Work

  • #Process
  • #productivity

  Anna Debenham harnesses up the huskies and puts them to work to figure out how teams distributed across multiple locations can work effectively to all pull in the same direction. With modern workforces distributed from north pole to south, can they all be kept running in step? Four years ago, I started working at a small startup called Snyk that’s based in two locations – London and Tel Aviv. The founders made it clear they wanted to grow headcount in both locations at the same rate, and for the

  2019/12/12 20:00Anna Debenhamhttps://24ways.org/2019/making-distributed-working-work/

• Gift Giving to the World (Wide Web)

  • #Mobile
  • #Process

  Frances Berriman asks us to give the gift of consideration to those who are using the web on constricted devices such as low-end smart phones or feature phones. Christmas is a time of good will to all, and as Bugsy Malone reminds us, you give a little love and it all comes back to you. If I was given the job of Father Christmas with all my human limitations, apparently it would take me something like 6 months at non-stop full speed to deliver gifts to every kid on the planet. The real Father Chr

  2019/12/11 20:00Frances Berrimanhttps://24ways.org/2019/gift-giving-to-the-world-wide-web/

• Z’s Still Not Dead Baby, Z’s Still Not Dead

  • #Design

  Andy Clarke digs deep into snow to find ways flat design can be brought back to life in CSS with the use of techniques to create a sense of depth. Like spring after an everlasting winter, perhaps it’s time to let a different style of design flourish. What a relief. A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colours, squa

  2019/12/10 20:00Andy Clarkehttps://24ways.org/2019/zs-still-not-dead-baby-zs-still-not-dead/

• It’s Time to Get Personal

  • #Business

  Laura Kalbag discusses the gift of personal data we give to Big Tech when we share information on its platforms, and how reviving ye olde personal website can be one way to stay in control of the content we share and the data we leak. Christmas is a time for giving, but know what you’re giving to whom. Is it just me or does nobody have their own website anymore? OK, some people do. But a lot of these sites are outdated, or just a list of links to profiles on big tech platforms. Despite being peo

  2019/12/9 20:00Laura Kalbaghttps://24ways.org/2019/its-time-to-get-personal/

• It All Starts with a Humble <textarea>

  • #UX
  • #craft

  Andy Bell rings out a fresh call in support of the timeless concept of progressive enhancement. What does it mean to build a modern JavaScript-focussed web experience that still works well if part of the stack isn’t supported or fails? Andy shows us how that might be done. Those that know me well know that I make a lot of side projects. I most definitely make too many, but there’s one really useful thing about making lots of side projects: it allows me to experiment in a low-risk setting. Side p

  2019/12/8 20:00Andy Bellhttps://24ways.org/2019/it-all-starts-with-a-humble-textarea/

• Iconography of Security

  • #security
  • #Design

  Molly Wilson and Eileen Wagner battle the age old Christmas issues of right and wrong, good and evil, and how the messages we send through iconography design can impact the decisions users make around important issues of security. Are you icons wise men, or are they actually King Herod? Congratulations, you’re locked out! The paradox of security visuals Designers of technology are fortunate to have an established visual language at our fingertips. We try to use colors and symbols in a way that i

  2019/12/7 20:00Molly Wilson & Eileen Wagnerhttps://24ways.org/2019/iconography-of-security/

• Beautiful Scrolling Experiences – Without Libraries

  • #CSS
  • #UX

  Michelle Barker appears as one of a heavenly host, coming forth with scroll in hand to pronounce an end to janky scrolljacking! Unto us a new specification is born, in the city of TimBL, and its name shall be called Scroll Snap. Sponsor: Order any Standard paperback(s) and get a surprise gift card in the box for YOU. While supplies last, from your pals at A Book Apart! One area where the web has traditionally lagged behind native platforms is the perceived “slickness” of the app experience. In p

  2019/12/6 20:00Michelle Barkerhttps://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/

• Interactivity and Animation with Variable Fonts

  • #Design
  • #Code
  • #typography

  Mandy Michael turns the corner on our variable font adventure and stumbles into a grotto of wonder and amazement. Not forgetting the need for a proper performance budget, Mandy shows how variable fonts can free your creativity from bygone technical constraints. If you read Jason’s introductory article about variable fonts, you’ll understand the many benefits and opportunities that they offer in modern web development. From this point on we’ll assume that you have either read Jason’s introduction

  2019/12/5 20:00Mandy Michaelhttps://24ways.org/2019/interactivity-and-animation-with-variable-fonts/

• An Introduction to Variable Fonts

  • #Code
  • #typography

  Jason Pamental forges a path through the freshly laid snowy landscape of variable fonts. Like a brave explorer in a strange new typography topology let Jason show you the route to some fantastic font feats. Everything you thought you knew has changed. Everything you thought you knew about fonts just changed (for the better). Typography has always been a keen interest of mine, long before we were able to use fonts on the web. And while we’ve had the ability to that now for ten years, we’ve always

  2019/12/4 20:00Jason Pamentalhttps://24ways.org/2019/an-introduction-to-variable-fonts/

• Future Accessibility Guidelines—for People Who Can’t Wait to Read Them

  • #Accessibility
  • #Code

  Alan Dalton uses this, the International Day of Persons with Disabilities, to look back at where we’ve come from, to evaluate where we are, and to look forward to what’s coming next in the future of accessibility guidelines. Happy United Nations International Day of Persons with Disabilities! The United Nations have chosen “Promoting the participation of persons with disabilities and their leadership: taking action on the 2030 Development Agenda” for this year’s observance. Let’s see how the Wor

  2019/12/3 20:00Alan Daltonhttps://24ways.org/2019/future-accessibility-guidelines/

• Twelve Days of Front End Testing

  • #Code
  • #testing

  Amy Kapernick sings us through numerous ways of improving the robustness and reliability of our front end code with a comprehensive rundown of ideas, tools, and resources. The girls and boys won’t get any toys until all the tests are passing. Anyone who’s spoken to me at some point in November may get the impression that I’m a bit of a grinch. But don’t get me wrong, I love Christmas, I love decorating my tree, singing carols, and doing Christmas cooking - in December. So for me to willingly be

  2019/12/2 20:00Amy Kapernickhttps://24ways.org/2019/twelve-days-of-front-end-testing/

• Making a Better Custom Select Element

  • #Accessibility
  • #Code

  Julie Grundy kicks off this, our fifteenth year, by diving headlong into the snowy issue of customising form inputs. Nothing makes a more special gift at Christmas that something you’ve designed and customised yourself. But can it be done while staying accessible to every user? In my work as an accessibility consultant, there are some frequent problems I find on people’s websites. One that’s come up a lot recently is that people are making custom select inputs for their forms. I can tell that pe

  2019/12/1 20:00Julie Grundyhttps://24ways.org/2019/making-a-better-custom-select-element/