Found 101 bookmarks
Custom sorting
Houdini.how Worklet Library
Houdini.how Worklet Library
The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today. “Houdini is a set of low-level APIs that exposes parts of the CSS engine, giving developers the power to extend CSS by hooking into the styling and layout process of a browser’s rendering engine. Houdini is a group of APIs that give developers direct access to the CSS Object Model (CSSOM), enabling developers to write code the browser can parse as CSS, thereby creating new CSS features without waiting for them to be implemented natively in browsers.” —MDN
·houdini.how·
Houdini.how Worklet Library
Font style matcher
Font style matcher
If you're using a web font, you're bound to see a flash of unstyled text (or FOUC), between the initial render of your websafe font and the webfont that you've chosen. This usually results in a jarring shift in layout, due to sizing discrepancies between the two fonts. To minimize this discrepancy, you can try to match the fallback font and the intended webfont’s x-heights and widths [1]. This tool helps you do exactly that.
·meowni.ca·
Font style matcher
NoCode
NoCode
Curated directory of the best free resources and tools for non-technical entrepreneurs. Packed with the best discount codes for your favourite online tools.
·nocode.tech·
NoCode
Ahmad Shadeed: Uncommon CSS Properties
Ahmad Shadeed: Uncommon CSS Properties
Including some centering techniques, `li::marker`, and `display: inline-flex`, `column-rule`, `background-repeat: round`. There are a lot of CSS properties that some don’t know about, or they know about them, but forget to use them when they’re needed.
·ishadeed.com·
Ahmad Shadeed: Uncommon CSS Properties
Pinegrow Web Editor
Pinegrow Web Editor
Pinegrow is a Mac, Windows and Linux web editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling, CSS Grid editor and smart components for Bootstrap, Foundation and WordPress.
·pinegrow.com·
Pinegrow Web Editor
Lite YouTube Embed
Lite YouTube Embed
Provide videos with a supercharged focus on visual performance. This custom element renders just like the real thing but approximately 224× faster.
·github.com·
Lite YouTube Embed
Find out who can use your color combination
Find out who can use your color combination
It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments. The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision. The standard grading system is a great start, but I thought I'd try to humanize the people who are affected by the different grades.
·whocanuse.com·
Find out who can use your color combination
awesome-selfhosted
awesome-selfhosted
This is a list of Free Software network services and web applications which can be hosted locally. Selfhosting is the process of locally hosting and managing applications instead of renting from SaaS providers.
·github.com·
awesome-selfhosted
Water.css
Water.css
Water.css is a just-add-css collection of styles to make simple websites like this just a little bit nicer.
·kognise.github.io·
Water.css
Vijay Sharma: Aligning Text Smartly in CSS
Vijay Sharma: Aligning Text Smartly in CSS
How to make a short block of text center-aligned but left-aligned when it's longer. Use `text-align: center` on the container and `display: inline-block` on the text container.
·nocode.in·
Vijay Sharma: Aligning Text Smartly in CSS
I am the fold
I am the fold
An experiment to show how designing for The Fold can be treacherous. Each line below is from a random sampling of past-visitors' viewport heights. Take care when making assumptions about people's screen sizes on the web.
·iamthefold.com·
I am the fold
Start Bootstrap
Start Bootstrap
Free HTML starter themes and templates for Bootstrap - up to date for Bootstrap 3! An even faster way to develop websites in Bootstrap!
·startbootstrap.com·
Start Bootstrap
Timmy Cai: Create a HTML Email Signature for Mac OS X Mountain Lion 10.8
Timmy Cai: Create a HTML Email Signature for Mac OS X Mountain Lion 10.8
If you want to create a custom HTML email signature for Mail on Mountain Lion, the HTML coding part remains the same but the installation have changed. Follow this tutorial to create a HTML email signature file and to get it installed into the new version of Mail on Mountain Lion OS X 10.8.
·mydesignpad.com·
Timmy Cai: Create a HTML Email Signature for Mac OS X Mountain Lion 10.8
Chris Coyier: Using SVG (CSS-Tricks)
Chris Coyier: Using SVG (CSS-Tricks)
SVG is an image format for vector graphics. It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know.
·css-tricks.com·
Chris Coyier: Using SVG (CSS-Tricks)
Ann Robson: Progressive jpegs: a new best practice (Performance Calendar)
Ann Robson: Progressive jpegs: a new best practice (Performance Calendar)
And even though not all current browsers make use of progressive jpeg’s progressive rendering, the ones that do really benefit, and we get file size savings across the board. It’s our best option today and we should use it. Progressive jpegs are the future, not the past.
·calendar.perfplanet.com·
Ann Robson: Progressive jpegs: a new best practice (Performance Calendar)
Laura Franz: Avoiding Faux Weights And Styles With Google Web Fonts (Smashing Magazine)
Laura Franz: Avoiding Faux Weights And Styles With Google Web Fonts (Smashing Magazine)
If you’re using Google Web Fonts on your websites, then there’s a very good chance that 1 in 5 visitors are seeing faux bold and italic versions of your fonts — even if you correctly selected and used all of the weights and styles. That’s because the implementation method recommended by Google Web Fonts doesn’t work with Internet Explorer 7 or 8.
·smashingmagazine.com·
Laura Franz: Avoiding Faux Weights And Styles With Google Web Fonts (Smashing Magazine)