recentpopularlog in

garrettc : webdevelopment   1931

« earlier  
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 
5 days 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 
5 days 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 
5 days 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 
9 days 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 
12 days ago by garrettc
SourceNote
A notes app for peace of mind while you work.
webdevelopment  programming  editor  macos 
13 days ago by garrettc
Concise Media Queries with CSS Grid
Write less CSS and organize responsive layouts with ease.
css  flexbox  grid  webdesign  webdevelopment  responsivedesign 
22 days ago by garrettc
AVA
Asynchronous javascript test runner.
programming  webdevelopment  javascript  testing  async 
22 days 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 
23 days 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 
27 days ago by garrettc
Implementing the Indieweb on a static website
Sending and receiving Webmentions and Micropub on a static site
indieweb  webdevelopment  static 
27 days ago 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 
4 weeks ago 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 
4 weeks ago 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 
4 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
5 weeks ago 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 
6 weeks ago 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 
6 weeks ago 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 
7 weeks ago by garrettc
Accessibility Cheatsheet
Practical approaches to Universal Design for making your website/webapp accessible to everyone
accessibility  cheatsheet  reference  webdesign  webdevelopment  bestpractice 
8 weeks ago 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 
8 weeks ago 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 
8 weeks ago 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 
9 weeks ago 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 
10 weeks ago 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 
11 weeks ago 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 
12 weeks ago 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 
12 weeks ago 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
Unlocking the Power of CSS Grid Layout
Once you have grasped the basics of CSS Grid, you quickly discover how it enables many existing design patterns in a streamlined, elegant way. However, we shouldn’t see Grid in isolation. Understanding how other parts of CSS work together with Grid is key, in order to get the most out of our new abilities.
css  grid  webdevelopment  webdesign 
september 2018 by garrettc
Super-Powered Grid Components with CSS Custom Properties | CSS-Tricks
A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid
css  grid  layout  webdevelopment  webdesign 
september 2018 by garrettc
Take A New Look At CSS Shapes
In this article, we take a look at CSS Shapes and how to create non-rectangular shapes using images, gradients, and basic shapes. We also discover how the new tools in Firefox make editing shapes easier.
css  webdevelopment  webdesign 
september 2018 by garrettc
Part 2: Scheduling Notebooks at Netflix
"What started as a guess at the future evolved into a strategic bet on notebooks for both interactive & scheduled workflows. We're now migrating 10k scheduled jobs - 150k runs/day - to run on notebooks"
casestudy  webdevelopment  programming  python  notebooks 
august 2018 by garrettc
You Might Not Need jQuery
Examples of how to do common event, element, ajax and utility operations with plain javascript.
javascript  jquery  reference  programming  webdevelopment 
august 2018 by garrettc
Sticky, Smooth, Active Nav
"Just like the title says! Here's a sidebar navigation bar that... Uses sticky positioning. It stays on the screen when it can"
css  navigation  webdevelopment  webdesign 
august 2018 by garrettc
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
cheatsheet  css  grid  webdesign  reference  webdevelopment 
august 2018 by garrettc
FLEX: A simple visual cheatsheet for flexbox
Learn all about the properties available in flexbox through simple visual examples.
cheatsheet  css  flexbox  webdesign  reference  webdevelopment 
august 2018 by garrettc
The power of progressive enhancement
"Building progressively means that I’ve avoided the need for a bunch of fixes and polyfills for older browsers. If something isn’t supported then the app provides a simpler method."
progressiveenhancement  webdesign  webdevelopment 
august 2018 by garrettc
Simple URL Forwarding with Routes
"Perch Runway's Routing a powerful feature. One thing it allows you to do with ease is URL forwarding which can be useful for social media, referral and affiliate links."
cms  perch  php  webdevelopment 
august 2018 by garrettc
Perch add-on links
A curated list of third party add-ons.
cms  php  perch  webdevelopment 
august 2018 by garrettc
Weft. — Ethan Marcotte
"I wrote about trying to understand what you’re designing or building before you design or build it"
css  designpatterns  designthinking  designsystems  webdesign  webdevelopment 
august 2018 by garrettc
An Intro to Docker for Djangonauts
If you've never used it before, Docker can be a little overwhelming. There is new vocabulary to learn, new commands to memorize, and new ...
webdevelopment  devops  python  django  talk  presentation  video 
august 2018 by garrettc
A Brief Intro to Docker for Djangonauts
Lacey didn&#x27;t have the opportunity to work with Docker at her last job. In this tidbit she steps you through getting started with Docker for Django developers.
webdevelopment  webdesign  programming  django  python  docker  container 
august 2018 by garrettc
CSS Generator Tool
A CSS Generator Tool to demonstrate and quickly generate many different handy CSS declarations.
code  css  generator  webdesign  webdevelopment 
august 2018 by garrettc
Disability Tek - Help others with a disability access technology by sharing how you use it.
Disability Tek offers a platform for sharing information about technology for people with disabilities. Join our community today.
webdevelopment  webdesign  design  userexperience  accessibility  equality 
august 2018 by garrettc
Solved with CSS! Logical Styling Based on the Number of Given Elements | CSS-Tricks
Did you know that CSS is Turing complete? Did you know that you can use it to do some pretty serious logical styling? Well you can! You don’t have to set all of your logic-based styling rules in JavaScript, or even have to use JavaScript to set classes you are styling against. In many cases, CSS can handle that itself. I’m still discovering new CSS tricks everyday, and it just makes me love it even more.
css  webdesign  webdevelopment  logic 
august 2018 by garrettc
Solved with CSS! Dropdown Menus | CSS-Tricks
A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. Let’s see if we can make one of these menus with CSS alone.
css  webdesign  navigation  userinterface  webdevelopment 
august 2018 by garrettc
Solved with CSS! Colorizing SVG Backgrounds | CSS-Tricks
This post is the first in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds (this post) Dropdown Menus Logical Styling Based On
svg  css  webdesign  webdevelopment 
august 2018 by garrettc
The Holy Grail Of Reusable Components: Custom Elements, Shadow DOM, And NPM
This article looks at augmenting HTML with components that have built-in functionality and styles. We’ll also learn how to make these custom elements reusable across projects using NPM.
components  webdesign  component  webdevelopment 
august 2018 by garrettc
Converting Images To WebP
In this excerpt from his eBook “The WebP Manual,” developer and author Jeremy Wagner will show you the many ways you can convert your existing images to the WebP format.
webp  images  compression  performance  webdevelopment  webdesig 
august 2018 by garrettc
Improving Your CSS with Parker
How to use Katie Fenn's excellent CSS tool Parker.
css  webdevelopment  performance  analysis  tool  nodejs  javascript 
july 2018 by garrettc
BackstopJS - Visual regression testing
"BackstopJS automates visual regression testing of your responsive web UI by comparing DOM screenshots over time."
css  javascript  html  webdevelopment  testing  chrome  headless  automation  regression  tool 
july 2018 by garrettc
Parker - Stylesheet analysis tool
Parker is a stylesheet analysis tool. It runs metrics on your stylesheets and will report on their complexity.
css  webdesign  webdevelopment  performance  tool  javascript  nodejs 
july 2018 by garrettc
Getting to Know a Legacy Codebase
Excellent advice from Harry Roberts on getting to know a new (but legacy to you) codebase.
css  legacy  html  webdevelopment  worldwideweb 
july 2018 by garrettc
Text Editing Tips And Tricks Roundup
"We asked the Smashing Community for their favorite tips and tricks when editing text and code. With so many great suggestions, we've decided to collect them all into one article so you can add it to your useful bookmarks."
programming  webdevelopment  text  editing  editor  tips  tricks 
july 2018 by garrettc
Webmentions: Enabling Better Communication on the Internet
Breaking down the walls between the internet’s many social silos, Webmentions offer a new level of freedom for web interactions.
worldwideweb  webmentions  indieweb  webdevelopment 
july 2018 by garrettc
Beyond 800 Words: Prototyping New Story Formats for News
"News on the internet is largely served up as 500 to 800-word articles - a legacy of newspapers. Although the digital article has been enhanced and improved with new technologies, it still works on the assumption that 'one size fits all'. BBC R&D is developing new story formats for news that are more effective than conventional video or article formats. I have written elsewhere about the current landscape of digital news. We think there might be better things."
news  bbc  appdevelopment  webdevelopment  data  research  userexperience  prototyping 
july 2018 by garrettc
Why GOV.UK content should be published in HTML and not PDF
"Compared with HTML content, information published in a PDF is harder to find, use and maintain. More importantly, unless created with sufficient care PDFs can often be bad for accessibility and rarely comply with open standards."
accessibility  pdf  govuk  gds  html  publishing  webdevelopment  bestpractice 
july 2018 by garrettc
Pattern Library First: An Approach For Managing CSS
"CSS can be hard to manage across a project, especially when you need to include media queries for various breakpoints and fallbacks for older browsers. In this article, we will take a look at using Fractal to manage components which use CSS Grid."
css  styleguide  fractal  patternlibrary  webdesign  webdevelopment 
july 2018 by garrettc
Gallery Grid With CSS Grid
Simple and clever gallery layout with CSS grid.
css  grid  webdesign  webdevelopment  gallery  tips 
july 2018 by garrettc
REST vs GraphQL APIs, the Good, the Bad, the Ugly
GraphQL adoption is exploding, but should you migrate to GraphQL?
rest  restful  graphql  webdevelopment  api 
july 2018 by garrettc
Browsh
A fully interactive, realtime and modern browser rendered to TTY
browser  opensource  software  terminal  text  webdevelopment 
july 2018 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read