recentpopularlog in

garrettc : webdevelopment   1972

« earlier  
The practical value of semantic HTML
"If the importance of good HTML isn’t well-understood by the newer breed of JavaScript developers, then it’s my job as a DOWF (Dull Old Web Fart) to explain it."
accessibility  html  html5  semantic  webdevelopment  worldwideweb 
5 days ago by garrettc
To Grid or to Flex?
Good pointers on how to decide when to use Grid and when to use Flexbox.
css  grid  flexbox  webdesign  webdevelopment 
5 days ago by garrettc
Gradians and Turns: the quiet heroes of CSS angles
"Degrees and radians are the angle units we all know and hate, but two lesser-known units are often much easier: turns and gradians"
css  webdesign  webdevelopment  animation 
5 days ago by garrettc
Building a modern carousel with CSS scroll snap, smooth scrolling, and pinch-zoom
Recently I had some fun implementing an image carousel for Pinafore. The requirements were pretty simple: users should be able to swipe horizontally through up to 4 images, and also pinch-zoom to get a closer look. The finished product looks like this:   Often when you're building something like this, it's tempting to use an…
webdevelopment  webdesign  css  javascript  carousels 
6 days ago by garrettc
The Many Ways to Change an SVG Fill on Hover (and When to Use Them)
"SVG is a great format for icons. Vector formats look crisp and razor sharp, no matter the size or device — and we get tons of design control when using them inline.

SVG also gives us another powerful feature: the ability to manipulate their properties with CSS. As a result, we can make quick and simple interactions where it used to take crafty CSS tricks or swapping out entire image files.

Those interactions include changing color on hover states. It sounds like such a straightforward thing here in 2019, but there are actually a few totally valid ways to go about it — which only demonstrates the awesome powers of SVG more."
animation  css  svg  webdevelopment  webdesign 
16 days ago by garrettc
Table Design Patterns On The Web
"Tables are a design pattern for displaying large amounts of data in rows and columns, and have not yet seemed to fall out of favor, so let’s take a look at how we can create tables on the web in 2019."
css  data  table  layout  webdesign  webdevelopment  markup  html  javascript 
18 days ago by garrettc
The Flexbox Holy Albatross
How to use flexbox to simulate container query functionality.
css  layout  webdesign  webdevelopment  flexbox  containerqueries 
18 days ago by garrettc
Putting the Flexbox Albatross to Real Use
"If you hadn't seen it, Heydon posted a rather clever flexbox layout pattern that, in a sense, mimics what you could do with a container query by forcing an element to stack at a certain container width."
css  webdesign  webdevelopment  layout  containerqueries  flexbox 
18 days ago by garrettc
Exclusive Design
"But if we want to create truly inclusive websites, expertise in ourselves is not enough. We also need expertise in designing interfaces for people who are excluded. This expertise is lacking. In this research at the Master Design at the Willem de Kooning Academy in Rotterdam I have worked with the question

What if we design websites exclusively for people with disabilities?

In other words, what if we flip the so called ability bias, and start creating tailor made experiences for, and with real people with real disabilities?"
accessibility  webdevelopment  webdesign  thesis 
18 days ago by garrettc
Building Better Forms™ by not taking away affordances
A good example of verything you get for free by using native elements.
accessibility  css  webdevelopment  forms  userexperience 
19 days ago by garrettc
CSS doesn’t suck - Andy Bell
Another week comes along and with it, another assault on CSS. It’s turning into a bit of a trend—particularly in the JavaScript community—to crap on CSS wherever possible.
IFTTT  Pocket  css  webdevelopment 
25 days ago by garrettc
Piecing Together Approaches for a CSS Masonry Layout | CSS-Tricks
Masonry layout, on the web, is when items of an uneven size are laid out such that there aren't uneven gaps. I would guess the term was coined (or at
css  flexbox  grid  masonry  webdevelopment  webdesign 
26 days ago by garrettc
Headless API CMS for both developers and marketers - Prismic
"Prismic helps developers and marketers/content managers to work on websites and apps together: 1) Developers can focus on code and never touch content 2) Content teams can change and create pages independently· Compatible with React, Angular, Node, Laravel, Rails, vanilla JS/PHP/Ruby"
javascript  api  cms  content  webdevelopment  headless 
4 weeks ago by garrettc
Design for internationalization
"Well, it turns out this app wasn’t designed in your language. It was designed in Elvish, then translated into your language. Most people are using the Elvish version, so they don’t know how things look in your language.

Believe it or not, this is what non-English users have to deal with time and time again. Because many apps are only designed with English in mind, some design details can get lost in translation if you’re not careful."
webdesign  webdevelopment  internationalisation  localisation  bestpractice  tips 
4 weeks ago by garrettc
Kickstart Cheatsheets
A selection of printable, one-page development cheatsheets.
html  css  python  javascript  programming  webdevelopment  cheatsheet  learning  reference  es6 
4 weeks ago by garrettc
The Ethics of Web Performance
"When you stop to consider all the implications of poor performance, it’s hard not to come to the conclusion that poor performance is an ethical issue."
performance  energy  webdevelopment  userexperience 
5 weeks ago by garrettc
Static Site Boilerplate
"Build static websites with automated build processes, a local development server, production minification and optimizations, and the latest standards."
boilerplate  webdevelopment  static 
5 weeks ago by garrettc
How To Learn CSS
"You don’t need to commit in memorizing every CSS Property and Value, as there are good places to look them up. There are some fundamental things, however, which will make CSS much easier for you to use. This article aims to guide you along your path of learning CSS."
css  webdesign  webdevelopment  learning 
5 weeks ago by garrettc
How to Make Content Marketing Work With an Agile Team
"To create content using Agile methodologies, set up parallel marketing and content marketing sprints."
content  contentstrategy  agile  process  webdevelopment 
5 weeks ago by garrettc
Aligning Content Work with Agile Processes
Brendan Murray persuasively argues that agile development is a framework within which content work can flourish.
contentstrategy  agile  webdevelopment 
5 weeks ago by garrettc
Content collaboration with an agile team – GatherContent
"In this webinar Rich Prowse, Digital Editor-In-Chief at the University of Bath, explores why the University adopted an agile approach to content."
content  contentdesign  contentstrategy  video  webdevelopment  agile 
5 weeks ago by garrettc
A Layman’s Introduction to Embeddings
"One of the interesting things about embeddings is that their dimensions — here, shelf height and position along shelf — often correspond to useful trends."
search  embedding  facets  webdevelopment 
5 weeks ago by garrettc
Benefits of a connected design system
"We’re seeing more and more organisations, big and small, empowering design teams to think more systematically. Couple that with the adoption of declarative JavaScript libraries, such as React and Angular, we’re able to unlock new ways to use web components to design, build and maintain interfaces.

This shift in approach is pulling design and engineering disciplines closer together, aligning workflows, and fundamentally changing the way teams communicate with each other."
designpatterns  designsystems  designthinking  webdesign  webdevelopment  patternlibrary 
5 weeks ago by garrettc
Gaming the System…and Winning
"Graham Herrli thinks the gamification of websites can be fun and creative…as long as it reaches the sites’ target users."
gaming  gamification  webdesign  webdevelopment  userexperience 
5 weeks ago by garrettc
Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]
"Let’s make 2019... fast! A front-end performance checklist (PDF/Apple Pages/MS Word), with everything you need to know to create fast experiences today."
performance  webdevelopment  userexperience  accessibility  checklist 
5 weeks ago by garrettc
The Cicada Principle and Why It Matters to Web Designers
What does the life cycle of periodical cicadas, Euclidean number theory and web design have on common?
css  patterns  random  webdesign  webdevelopment  background  tiling 
6 weeks ago by garrettc
Web components still need to be accessible
Eric Bailey explains why developers need to consider accessible web components in their work, and not to needlessly reinvent the wheel.
html  webdevelopment  accessibility  equality  userexperience  browsers  webcomponents 
8 weeks ago by garrettc
Clip Paths Know No Bounds
"Dan Wilson throws some Christmas shapes and gives us a run down of different ways to use CSS polygon clip paths to create interesting a flexible shapes with less code that you might have thought."
css  css3  clippath  webdesign  webdevelopment 
8 weeks ago by garrettc
Responsive design (designers and developers working together)
"This is a deep-dive into the role of development in the design process, with a focus on responsive design. It’s aimed at design leaders/managers and developers working with design teams, and visual designers looking to become better web designers."
responsivedesign  webdevelopment  webdesign  management  userexperience 
8 weeks ago by garrettc
The Discipline of Content Strategy
It’s time to stop pretending content is somebody else’s problem. If content strategy is all that stands between us and the next fix-it-later copy draft or beautifully polished but meaningless site launch, it’s time to take up the torch, time to make content matter. Halvorson tells how to understand, learn, practice, and plan for content strategy.
content  contentstrategy  webdevelopment  copywriting  userexperience 
8 weeks ago by garrettc
Content Security Policy - An Introduction
"Content Security Policy is delivered via a HTTP response header, much like HSTS, and defines approved sources of content that the browser may load. It can be an effective countermeasure to Cross Site Scripting (XSS) attacks and is also widely supported and usually easily deployed."
http  webdevelopment  csp  security 
9 weeks ago by garrettc
Accessible SVG Icons with Inline Sprites
"At a certain stage in a project, someone always says: ‘We need icons!' We need to ensure that people who can’t see or recognize these icons can understand their purpose."
accessibility  svg  userinterface  userexperience  webdevelopment 
9 weeks ago by garrettc
Masking vs. Clipping: When to Use Each
"I was recently doing some client work where I used both <clipPath>s and <mask>s in SVG to hide and show content for animation. When I started this project, I thought I knew all of the reasons to use one over the other. But, as tends to happen, working closely with something reveals idiosyncrasies. In this post, we'll go over some of these details so that you can get productive as soon as possible."
css  svg  webdevelopment  webdesign 
10 weeks ago by garrettc
Clipping in CSS and SVG — The clip-path Property and <clipPath> Element
"CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS and SVG, covering everything you need to know to get started."
webdesign  webdevelopment  svg  design  css  userinterface 
10 weeks ago by garrettc
What is First Input Delay?
"FID is a metric that tracks the delay between the time a user can attempt to interact with a part of the site, and the time that the interface is able to respond to that interaction. We have all experienced situations where a web page has visibly loaded and we try to click around on buttons or any Javascript-powered interactive elements, but nothing responds. This delay is what the FID metric tracks."
performance  webdevelopment  userexperience 
10 weeks ago by garrettc
An Extensive Guide To Progressive Web Applications
In this article, we’ll look at the pain points of users who are browsing old non-PWA websites and the promise of PWAs to make the web great. You’ll learn most of the important technologies that make for cool PWAs, like service workers, web push notifications and IndexedDB.
javascript  webdevelopment  progressiveenhancement  pwa  serviceworker 
10 weeks ago by garrettc
Vuex Explained Visually – Vue Mastery – Medium
Managing state in an application full of components can be difficult. Facebook discovered this the hard way and created the Flux pattern, which is what Vuex is based upon. Vuex is Vue’s own state management pattern and library.
IFTTT  Pocket  vuejs  vuex  state  webdevelopment  programming  javascript 
11 weeks ago by garrettc
CSS Animation 101
"Animation using CSS can be overwhelming to learn all at once.

This book gives you a solid introduction to the topic, combining theory with practical lessons. You’ll learn how, and why to use animation on your web pages and hopefully be inspired to try it on your own projects!"
animation  css  ebook  programming  webdesign  webdevelopment 
11 weeks ago by garrettc
SourceNote
A notes app for peace of mind while you work.
webdevelopment  programming  editor  macos 
11 weeks ago by garrettc
Advanced web security topics – George's Techblog
"This post discusses web security issues that I come across – so far thankfully mostly by reading about them. It is a work in progress which I’ll keep updating."
IFTTT  Pocket  security  webdevelopment  worldwideweb 
12 weeks ago by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign  flex 
12 weeks ago by garrettc
AVA
Asynchronous javascript test runner.
programming  webdevelopment  javascript  testing  async 
12 weeks ago by garrettc
Cypress: Write Automated Tests to Validate Web Applications
"In this tutorial, you will learn how to use Cypress to write automated tests that run on browsers to validate web applications. Although the article uses a React application to illustrate the topic, Cypress is agnostic when it comes to what technologies you are using in your web applications."
testing  javascript  webdevelopment 
12 weeks ago by garrettc
Braces to Pixels
In this installment of our “From URL to Interactive” series, Greg Whitworth explains how cascading actually works, and then some.
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
november 2018 by garrettc
Implementing the Indieweb on a static website
Sending and receiving Webmentions and Micropub on a static site
indieweb  webdevelopment  static 
november 2018 by garrettc
Responsive Navigation Patterns
"Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness."
webdesign  webdevelopment  navigation  userexperience  mobilefirst  bestpractice 
november 2018 by garrettc
What Does My Site Cost?
Find out how much it costs for someone to use your site on mobile networks around the world.
performance  tool  webdevelopment  testing 
november 2018 by garrettc
Meta Tags — Preview, Edit and Generate
With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
webdevelopment  metadata  google  facebook  twitter  graph  socialmedia  testing 
november 2018 by garrettc
Design systems pro video series—Master product design at scale with Brad Frost, Dan Mall, and Josh Clark
Watch videos of design system pros Brad Frost, Dan Mall, and Josh Clark sharing best practices for product design at scale. Get expert recommendations for improving speed, quality, and consistency with design systems.
video  webdesign  webdevelopment  designsystems  bestpractice  patternlibrary  styleguide  lessons 
november 2018 by garrettc
Tags to DOM
"Continuing our “From URL to Interactive” series, the second part dives into how HTML is parsed."
html  http  javascript  webdevelopment  network  browser  dom  css  parser 
november 2018 by garrettc
Server to Client
"Kicking off our “From URL to Interactive” series, we take a look under the hood to find out how our code makes it to the browser."
html  http  javascript  webdevelopment  network  browser 
november 2018 by garrettc
Building a Design System: A Practitioner's Case Study
- How to build a design system from scratch
- How to audit your product for design consistency
- How to structure and communicate a design system to an Agile…
webdevelopment  webdesign  designsystems  styleguide  presentation 
november 2018 by garrettc
Building a compelling business case for a Design System
"Design Systems are here to stay. […] But it’s not designers who we have to convince when it comes to investing in the build of a design system. Especially if we aren’t lucky enough to be in an organisation where design has a ‘seat at the table’. How can we sell the benefits of a design system with more focus on appealing to upper management, who may not see the same benefits we do?"
designsystems  webdevelopment  webdesign  business 
november 2018 by garrettc
Design Systems Handbook
Your guide to design systems best practices. Learn how to design, build, maintain, and implement design systems–from design leaders and world-class teams.
webdesign  webdevelopment  styleguide  ebook  bestpractise  designsystems 
november 2018 by garrettc
Ubiquitous Language & the joy of naming
"I want to discuss a topic near to my heart, a topic I believe to be the crux of effective software design. No, it’s not a new functional language, it’s not a fancy new framework, it’s not a how-to guide to do micro-services, nor a quantum leap in the field of machine learning.

It’s much simpler. It’s about names."
webdevelopment  programming  domain  glossary  language 
november 2018 by garrettc
Dark Mode and CSS • The Breakroom
The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites.
IFTTT  Pocket  css  webdesign  accessibility  webdevelopment 
october 2018 by garrettc
UX — A quick glance about The 5 Elements of User Experience (Part 2)
"When you experience a website, maybe to buy something, or do anything, you make some decision while surfing this website. So, If we study the elements of that experience(considering all actions user can make), we can begin to understand how those decisions are made. Thus, Enhancing that experience, and satisfying user needs will get people motivated to use & interact with the product."
userexperience  webdevelopment  strategy  research 
october 2018 by garrettc
Use Cases For Flexbox
"In this final article of the series, we wrap up by taking a look at some of the common uses for Flexbox. What should we use Flexbox for, and what it is not so good at?"
css  flexbox  grid  layout  webdesign  webdevelopment  flex 
october 2018 by garrettc
Accessibility Cheatsheet
Practical approaches to Universal Design for making your website/webapp accessible to everyone
accessibility  cheatsheet  reference  webdesign  webdevelopment  bestpractice 
october 2018 by garrettc
Valid CSS Content
"There is a content property in CSS that's made to use in tandem with the ::before and ::after pseudo elements. It injects content into the element."
css  content  webdevelopment  tips 
october 2018 by garrettc
Inside look at modern web browser (part 1)
Learn how browser turn your code into functional website from high-level architecture to the specifics of the rendering pipeline.
architecture  browser  chrome  webdevelopment  worldwideweb 
october 2018 by garrettc
LOW←TECH MAGAZINE
Our new blog is designed to radically reduce the energy use associated with accessing our content.
webdevelopment  energy  performance  science  solar  conservation 
october 2018 by garrettc
CSS Layout cookbook
The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your own sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used, and the choices you can make as a developer.
css  examples  layout  webdevelopment  webdesign  flexbox  grid  flex 
september 2018 by garrettc
How to get HTTPS working on your local development environment in 5 minutes
"Almost any website you visit today is protected by HTTPS. If yours isn’t yet, it should be. Securing your server with HTTPS also means that you can’t send requests to this server from one that isn’t protected by HTTPS. This poses a problem for developers who use a local development environment because all of them run on http://localhost out-of-the-box."
webdevelopment  https  security  ssl  tls 
september 2018 by garrettc
Create your design system, part 1: Typography
Typography is arguably the essential part of a website. When we think about the content of a web page, we think about words. In this article, we’ll take a look at how to set a typography system in…
css  webdesign  designsystems  webdevelopment  typography  grid  colour  space  icons  buttons 
september 2018 by garrettc
Design with Difficult Data
Stop designing for the happy path! Steven Garrity shows how to create more robust layouts by designing with difficult data.
data  design  webdesign  webdevelopment  visualisation  accessibility 
september 2018 by garrettc
Carousels on Mobile Devices
Carousels on touch screens are plagued by low discoverability and sequential access, and not all designs implement swipe as a carousel control.
userexperience  webdevelopment  carousels  mobile 
september 2018 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read