recentpopularlog in

garrettc : webdevelopment   1898

« earlier  
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 
10 days 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 
15 days 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 
22 days 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 
27 days 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 
27 days 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 
4 weeks ago 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 
4 weeks ago 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 
4 weeks ago 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 
4 weeks ago 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 
6 weeks ago 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 
7 weeks ago 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 
8 weeks ago 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 
8 weeks ago 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 
8 weeks ago 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 
8 weeks ago 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 
9 weeks ago by garrettc
Perch add-on links
A curated list of third party add-ons.
cms  php  perch  webdevelopment 
9 weeks ago 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 
9 weeks ago 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 
9 weeks ago by garrettc
A Brief Intro to Docker for Djangonauts
Lacey didn'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 
9 weeks ago by garrettc
CSS Generator Tool
A CSS Generator Tool to demonstrate and quickly generate many different handy CSS declarations.
code  css  generator  webdesign  webdevelopment 
9 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago 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 
10 weeks ago by garrettc
Improving Your CSS with Parker
How to use Katie Fenn's excellent CSS tool Parker.
css  webdevelopment  performance  analysis  tool  nodejs  javascript 
11 weeks ago 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 
11 weeks ago 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 
11 weeks ago 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 
11 weeks ago 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 
12 weeks ago 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 
12 weeks ago 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 
12 weeks ago 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
Brutalist Web Design
Guidelines for web design that adhere to the tenets and ethos of Brutalism
webdevelopment  webdesign  minimalism  brutalism  manifesto 
july 2018 by garrettc
Interneting Is Hard
Friendly web development tutorials for complete beginners
html  css  learning  webdevelopment  javascript 
july 2018 by garrettc
Webstock '18: Jeremy Keith - Taking Back The Web on Vimeo
"In these times of centralised services like Facebook, Twitter, and Medium, having your own website is downright disruptive. If you care about the longevity of your online presence, independent publishing is the way to go. But how can you get all the benefits of those third-party services while still owning your own data? By using the building blocks of the Indie Web, that’s how!"
ifttt  vimeo  video  indieweb  webdevelopment  webdesign 
july 2018 by garrettc
CSS Architecture for Design Systems | Brad Frost
"I wrote this post a while ago about how we structure CSS for large-scale design systems"
css  designsystems  patternlibrary  webdevelopment  webdesign  scalability 
july 2018 by garrettc
Locking Master Pages in Perch
"Its built into Runway, but how can you prevent users selecting system master pages in standard Perch?"
perch  cms  webdevelopment  programming  php 
june 2018 by garrettc
A plain English introduction to JSON web tokens (JWT): what it is and what it isn't
If you’ve already read a few articles on JSON web tokens (JWT) before arriving here you may get an impression that JWT is part of modern authorization and authentication frameworks such as OAuth and OpenID. Although it is indeed used in these frameworks, it doesn't make up part of them.
IFTTT  Pocket  authentication  jwt  webdevelopment 
june 2018 by garrettc
Should Links Open In New Windows?
"**No, they shouldn't**. At first glance the decision to open links in new windows or not depends on the given site and the preferences of its visitors. Visitors of the sites with heavy linking are more willing to have links opened in new windows than open dozens of links in new windows manually. Visitors of less-heavy-linkage-sites are more likely to open some specific link in new window to remain on the site and continue to browse through it afterwards. However, this is not true."
userexperience  usability  webdevelopment  webdesign  accessibility 
june 2018 by garrettc
Links Should Open in the Same Window
"The best practice is to leave the default link behavior alone. Usually, this means that the link on a website will open in that same window or tab."
accessbility  userexperience  browser  webdevelopment 
june 2018 by garrettc
Why Design Systems Fail by Una Kravets
"It’s like going to the gym. Small incremental changes make a big difference over the long term. If you just work out for three months and then stop, you’ll lose all your progress. It’s like that with design systems. They have to stay in sync with the live site. If you don’t keep it up to date, people just won’t use it.

It’s really important to have a solid core. Accessibility needs to be built in from the start. And the design system needs ownership and dedicated commitment. That has to come from the organisation."
designsystems  designpatterns  patternlibrary  styleguide  webdevelopment  webdesign  business 
june 2018 by garrettc
Executable Specifications
"How do we specify requirements? Chatting is inherently imprecise. Email looses context. Even the ideal requirement document starts to decay once it is done. The most precise way we know to store knowledge is code. Could we use code to write specifications that are easy to understand by non-technical stakeholders […]"
bdd  testing  programming  webdevelopment  development  specification 
june 2018 by garrettc
New tools for art direction on the web
Jeremy outlines how he built gesiowka.adactio.com with CSS grid, variable fonts, and service workers.
serviceworker  offlinefirst  webdevelopment  webdesign  progressiveenhancement  inspiration 
june 2018 by garrettc
Centering in CSS: A Complete Guide
"Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn't that it's difficult to do, but in that there so many different ways of doing it, depending on the situation, it's hard to know which to reach for.

So let's make it a decision tree and hopefully make it easier."
css  tips  tricks  webdesign  webdevelopment 
june 2018 by garrettc
Centering: The Newest Coolest Way vs. The Oldest Coolest Way
"This isn't a comprehensive guide to centering things. We have that! This is just a little observation about old and new."
css  webdevelopment 
june 2018 by garrettc
The Layouts of Tomorrow
Lovely "metro like" UI, with parallax , built almost entirely in CSS using Grid and CSS 3D transforms.
css  grid  inspiration  layout  webdesign  webdevelopment 
june 2018 by garrettc
XMySQL
One command to generate REST APIs for any MySql Database.
nodejs  mysql  rest  restful  database  api  webdevelopment  javascript 
june 2018 by garrettc
Debunking the Myths of RPC & REST
"The internet is chock-full of articles, blog posts, and discussions about RPC and REST. Most are targeted at answering a question about using RPC or REST for a particular application, which in itself is a false dichotomy."
api  rest  restful  rpc  programming  webdevelopment 
june 2018 by garrettc
Understanding RPC Vs REST For HTTP APIs
"For the last few years, whenever somebody wants to start building an HTTP API, they pretty much exclusively use REST as the go-to architectural style, over alternative approaches such as XML-RPC, SOAP and JSON-RPC. REST is made out by many to be ultimately superior to the other “RPC-based” approaches, which is a bit misleading because they are just different. This article discusses these two approaches in the context of building HTTP APIs, because that is how they are most commonly used. REST and RPC can both be used via other transportation protocols, such as AMQP, but that is another topic entirely."
api  http  https  webdevelopment  rpc  rest  restful  programming 
june 2018 by garrettc
The Problem with Patterns
It started off as an honest problem with a brilliant solution. As the ways we use the web continue to grow and evolve, we, as its well-intentioned makers and stewards, needed something better than making simple collections of pages over and over again. Design patterns, component libraries, or even style guides have become the norm for organizations big and small. Having reusable chunks of UI aids consistency and usability for users, and it lends familiarity and efficiency to designers. This in turn frees up designers’ time to focus on bigger problems, like solving for their users’ needs. In theory.
designpatterns  designsystems  webdevelopment  webdesign 
june 2018 by garrettc
The Cult of the Complex
"ALA’s Zeldman bemoans our industry’s fetish for the needlessly complicated over the straightforward."
css  webdevelopment  simplicity  webdesign  javascript 
june 2018 by garrettc
Will Kubernetes Collapse Under the Weight of Its Complexity? | Blog | InfluxData
A few weeks ago, I attended and spoke at KubeCon EU. It was a massive event attended by around 4,700 people...However, I felt there was an underlying problem with the whole spectacle: everyone I talked to was either an operator or an SRE. Where were all the application developers?
kubernetes  devops  deployment  sysadmin  development  webdevelopment  appdevelopment 
june 2018 by garrettc
Making Avengers ID Card In HTML And CSS
"In this tutorial, we will build a sci-fi ID card for Avengers. You will learn Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project."
css  flexbox  html  tutorial  webdesign  webdevelopment 
june 2018 by garrettc
Introducing Kit
Say hello to Kit, a set of tools for developing, documenting, and testing React components.
javascript  webdevelopment  reactjs  documentation  testing  toolkit 
may 2018 by garrettc
Realizing common layouts using CSS Grid Layout
"To round off this set of guides to CSS Grid Layout, I am going to walk through a few different layouts, which demonstrate some of the different techniques you can use when designing with grid layout. We will look at an example using grid-template-areas, a typical 12-column flexible grid system, and also a product listing using auto-placement."
css  grid  webdesign  webdevelopment  layout  examples 
may 2018 by garrettc
« earlier      
per page:    204080120160

Copy this bookmark:





to read