ndw + web   41

Hero Patterns
A collection of repeatable SVG background patterns for you to use on your web projects.
web  css  svg  backgrounds 
22 days ago by ndw
How Flexbox works
Flexbox promises to save us from the evils of plain CSS (like vertical alignment).
Well, Flexbox does deliver on that goal. But mastering its new mental model can be challenging.
So let’s take an animated look at how Flexbox works, so we can use it to build better layouts.
Flexbox’s underlying principle is to make layouts flexible and intuitive.
css  web  flexbox 
5 weeks ago by ndw
Code Smells in CSS Revisited
Way back in 2012, I wrote a post about potential CSS anti-patterns called Code Smells in CSS. Looking back on that piece, I still agree with all of it even four years later, but I do have some new things to add to the list. Again, these aren’t necessarily always bad things, hence referring to them as code smells: they might be perfectly acceptable in your use case, but they still smell kinda funny.
css  web  programming  codesmell 
6 weeks ago by ndw
The Google Analytics Setup I Use on Every Site I Build
Google Analytics is a powerful yet quite complicated tool. And unfortunately, the truth is most people who use it don’t reap its full benefits.
web  analytics 
6 weeks ago by ndw
Use `httpd-start' to start the web server. Files are served from
`httpd-root' on port `httpd-port' using `httpd-ip-family' at host
`httpd-host'. While the root can be changed at any time, the server
needs to be restarted in order for a port change to take effect.
emacs  web  http 
8 weeks ago by ndw
A delightful language for reliable webapps.
Generate JavaScript with great performance and no runtime exceptions.
javascript  programming  web  apps 
10 weeks ago by ndw
10 things I learned making the fastest site in the world
This post is about performance techniques, so I hope you won’t mind that the site in question is not quite finished.
web  performance 
december 2016 by ndw
Installing web apps on phones (for real)
If you're building for the web, you've likely heard the term "Progressive Web App" by now.

Its definition is a bit vague and somewhat contentious perhaps, but generally the idea is that it's a web page that has "taken all the right vitamins" so it can behave more like an app you installed from the app store. It starts as a normal tab in your browser and if it has all the right stuff the browser will prompt visitors if they'd like to "Add to Homescreen", which up to this point has largely equated to being a glorified bookmark.

Once opened from the Homescreen it hides the browser UI and appears as its own app when switching apps, etc.

This is huge!
web  apps  publ  javascript 
december 2016 by ndw
Progressive web components
Browsers have given us all this power — and what do we do? We turn around and abuse it, to the point that websites are now actually slower and more brittle than they used to be.
web  javascript  frameworks  publ 
december 2016 by ndw
How to Design React Components with a Live Style Guide — Eldarion Blog
In building wine.study, we quickly got to the point where we were experiencing a development bottleneck in the construction of components. This bottleneck occurred due to a number of reasons. We solved it with a live style guide.
react  web  design  styleguide  publ 
november 2016 by ndw
A free visual guide to CSS
Learn by example: cssreference.io is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.
css  web  design  publ 
november 2016 by ndw
You might not need Javascript
JavaScript is great, and by all means use it, while also being aware that you can build so many functional UI components without the additional dependancy.
web  javascript 
october 2016 by ndw
The Case for Custom Elements: Part 2
In this post I will present some of the features that make Custom Elements compelling if you’re considering building your own component library. I’ll also touch on ideas that are often overlooked when discussing Custom Elements, such as their ability to work with Virtual DOM and be rendered on the server. Check out Part 1 if you haven’t had a chance to read it yet.
web  dev  html  custom-elements 
september 2016 by ndw
A modern CSS framework based on Flexbox
css  design  web  flexbox 
august 2016 by ndw
A static site generator based on org-mode http://tumashu.github.io/org-webpage/
org  emacs  web 
august 2016 by ndw
Adblock development build
Used by over 50 million people, a free ad blocker that blocks ALL annoying ads, malware and tracking.

/via @mattb
adblocker  web 
june 2016 by ndw
Bourbon Neat
A lightweight semantic grid framework for Sass and Bourbon.
css  sass  framework  web 
january 2016 by ndw
Webshell - The API Combinator
The API Combinator
Combine APIs easily in Javascript and create REST/JSON API on the fly.
api  development  javascript  shell  web 
october 2015 by ndw
Charles Web Debugging Proxy • HTTP Monitor / HTTP Proxy / HTTPS & SSL Proxy / Reverse Proxy
Charles is an HTTP proxy / HTTP monitor / Reverse Proxy that enables a developer to view all of the HTTP and SSL / HTTPS traffic between their machine and the Internet. This includes requests, responses and the HTTP headers (which contain the cookies and caching information).
debugging  http  proxy  web  tools 
may 2011 by ndw
Information | Adobe Web Fonts
Introducing Adobe Web Fonts, a specialized subset of fonts from the Adobe Type Library, which look great on screens and are easy to add to your website.
typography  adobe  webfonts  web  design 
august 2010 by ndw
HTML5 and Atom Gone Wrong ・ 詹姆斯
Clever use of CSS for upside down answers. Also some other CSS cleverness wrt quotes and "..." for more.
css  web  html 
june 2010 by ndw
Readability - An Arc90 Lab Experiment
Readability is an simple tool that makes reading on the Web more enjoyable by removing the clutter around what you're reading.
web  usability  ui  css 
december 2009 by ndw
Styling HTML Lists with CSS: Techniques and Resources - Smashing Magazine
In addition, we’ll look at a showcase of various uses, techniques, and tutorials that utilize HTML lists. All of this should put strong emphasis on the importance of using lists in modern web design, reminding even experienced coders how HTML lists can improve the flexibility and maintainability of a website.
css  web 
december 2009 by ndw
Daring Fireball: Markdown
Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).
html  web  markup  text 
october 2009 by ndw
Opera Unite
Opera Unite allows you to easily share your data: photos, music, notes and other files. You can even run chat rooms and host entire Web sites with Opera Unite. It puts the power of a Web server in your browser, giving you greater privacy and flexibility than other online services.
opera  unite  api  web  browser  from delicious
june 2009 by ndw
A List Apart: Articles: Put Your Content in My Pocket
Tips and suggestions for improving web rendering on an iPhone
iphone  web  safari  css  html 
july 2008 by ndw
List of Web Safe Fonts - Font Tester
Here is the list of websafe fonts that I use in my own personal web development. Websafe fonts are fonts that are common among Windows, Mac, Linux, etc.
websafe  fonts  web  safe  web-safe  windows  mac  linux  font  tester  help 
may 2008 by ndw
Fluid - Free Site Specific Browser for Mac OS X Leopard
Using Fluid, you can create SSBs (Site Secific Browsers) to run each of your favorite webapps as a separate desktop application.
osx/leopard  browser  web 
january 2008 by ndw
Blueprint: A CSS Framework
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
css  web  development 
august 2007 by ndw
Worst practice: 'click here'
A thoughtful summary of one of my pet peeves.
style  web 
december 2004 by ndw

Copy this bookmark: