Resources for learning web design & front-end development:
ONLINE
Design
Gilles Hooghe ghooghe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * HTML5 ✰ Boilerplate | |
| * | |
| * style.css contains a reset, font normalization and some base styles. | |
| * | |
| * Credit is left where credit is due. | |
| * Much inspiration was taken from these projects: | |
| * - yui.yahooapis.com/2.8.1/build/base/base.css | |
| * - camendesign.com/design/ | |
| * - praegnanz.de/weblog/htmlcssjs-kickstart |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * Property prefix hacks | |
| */ | |
| /* IE6 only - any combination of these characters */ | |
| _ - £ ¬ ¦ | |
| /* IE6/7 only - any combination of these characters */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module.exports = (function(){ | |
| const MS = | |
| { seconds: 1000 | |
| , minutes: 60 * 1000 | |
| , hours: 60 * 60 * 1000 | |
| , days: 24 * 60 * 60 * 1000 | |
| , weeks: 7 * 24 * 60 * 60 * 1000 | |
| , months: 30 * 7 * 24 * 60 * 60 * 1000 | |
| , years: 365 * 24 * 60 * 60 * 1000 } |
nathansmith
/ web-design-development-learning-resources.md
Last active
October 12, 2024 17:08
Resources for learning web design & front-end development
pjkix
/ css-stats-ack.sh
Created
October 5, 2011 21:39
shell script to generate some css file statistics
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| ## v1.0.6 | |
| ## this script will gernerate css stats | |
| ### example output | |
| # CSS STATS | |
| # ---------- | |
| # Floats: 132 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @media only screen and (min-width: 320px) { | |
| /* Small screen, non-retina */ | |
| } | |
| @media | |
| only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), | |
| only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| # Favicon and Apple Touch Icon Generator | |
| # | |
| # This bash script takes an image as a parameter, and uses ImageMagick to convert it to several | |
| # other formats used on modern websites. The following copies are generated: | |
| # | |
| # * apple-touch-icon-114x114-precomposed.png | |
| # * apple-touch-icon-57x57-precomposed.png | |
| # * apple-touch-icon-72x72-precomposed.png |
paulirish
/ what-forces-layout.md
Last active
July 4, 2025 06:51
What forces layout/reflow. The comprehensive list.
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft,elem.offsetTop,elem.offsetWidth,elem.offsetHeight,elem.offsetParent
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $SERVER["socket"] == ":443" { | |
| ssl.engine = "enable" | |
| ssl.pemfile = "/etc/letsencrypt/live/yourdomain/ssl.pem" | |
| ssl.ca-file = "/etc/letsencrypt/live/yourdomain/fullchain.pem" | |
| ssl.dh-file = "/etc/ssl/certs/dhparam.pem" | |
| ssl.ec-curve = "secp384r1" | |
| ssl.honor-cipher-order = "enable" | |
| ssl.cipher-list = "EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH" | |
| ssl.use-compression = "disable" | |
| setenv.add-response-header = ( |