The site looks like this today because the CSS is stripped off. #CSSNakedDay
April 9, is designated CSS Naked Day. During this international day show off your naked websites by stripping the CSS. https://css-naked-day.github.io/
Celebrating the ninth annual Blue Beanie Day. Support Web Standards! #bbd15 http://www.zeldman.com/2015/11/29/13853/
After a 2 month search for names, an eleven-year-old schoolgirl, Venetia Burney, from Oxford, England, suggested the name Pluto to her father who passed it on to an astronomy professor who passed it on to colleagues in the United States.
New Horizons’ almost 10-year, three-billion-mile journey to closest approach at Pluto took about one minute less than predicted when the craft was launched in January 2006. The spacecraft threaded the needle through a 36-by-57 mile (60 by 90 kilometers) window in space — the equivalent of a commercial airliner arriving no more off target than the width of a tennis ball. Source: NASA 2015-07-14
When the New Horizon spacecraft was launched in January 2006, Pluto was still the 9th planet. Nine months later, in September, Pluto was reclassified as a dwarf planet. It belonged more to the Kuiper belt (or Trans-Neptunian objects) than with the rest of our eight planets.
I’ll put this here so I don’t lose it ;-)
Zurb Foundation Stack With Sass
Here are the programs I installed that allowed me to create a Foundation 5 project using their Sass (and other) files. I’m running Windows 7 Enterprise (64 bit).
— These require Windows administrator rights —
Git for Windows
Installed to C:\Users\[user-name]\AppData\Local\Programs\Git\cmd\git.exe
GitHub for Windows
Node.js (I got version 0.10.29)
This also installs npm.
Installed to C:\Program Files (x86)\nodejs\node.exe
You might need to create the ‘npm’ folder in C:\Users\[user-name]\AppData\Roaming\ to be able to use npm.
— These require npm —
Yeoman (I got version 1.2.1)
Installed to C:\Users\[user-name]\AppData\Roaming\npm\yo
Grunt (I got version 0.1.13)
Installed to C:\Users\[user-name]\AppData\Roaming\npm\grunt
Bower (I got version 1.3.12)
Installed to C:\Users\[user-name]\AppData\Roaming\npm\bower
— These require Ruby —
Sass (I got version 3.3.14)
Installed to C:\Ruby193\bin\sass
Compass (I got version 0.12.7)
Installed to C:\Ruby193\bin\compass
Foundation w/ Sass (I got version 1.0.4)
Installed to C:\Ruby193\bin\foundation
April 9 is designated Naked CSS Day! Show off your <body>
So I stripped off the CSS on this site today in support. If you want to read more about it go to http://naked.threepixeldrift.com/
If you use ssh (Secure Shell) with public/private keys, here is a quick reference. The private key stays on the computer you will connect/send from. The public key goes on the computer(s) you will connect/send to. You can think of the private and public keys as a signature of the sending computer, and they are used to validate/authenticate the sender. (Keys are also affiliated with the user account that creates them.)
Create the public key, private key pair:
ssh_keygen -t rsa
I used RSA encryption here. You can also use DSA. This generates two files: id_rsa (private key) and id_rsa.pub (public key). Move id_rsa to your .ssh directory.
mv id_rsa ~/.ssh
Copy/send id_rsa.pub to the .ssh directory on the computer you will connect to.
scp id_rsa.pub receiving_username@receiving_domain.com:~/.ssh
Add id_rsa.pub to the authorized_keys file on the receiving computer.
cat id_rsa.pub >> authorized_keys
That is essentially it. Now when you connect from the computer with the private key to the computer with the public key, you will be using a secure connection.
To take this one step further and simplify connection commands, you can add an IdentityFile directive to a ssh config file. This allows you to use the keys along with a known, well used username to connect to the receiving_domain computer more quickly.
Create a config file in your .ssh directory (litterally named config) if you don’t already have one. Add the reference to the private key.
Host receiver User: receiving_username IdentityFile: ~/.ssh/id_rsa
Then, when you connect, you can issue the command
and it will ask for the pass phrase (not password) you supplied when you created the private key.
Here is some code to shoehorn Paul Irish’s conditional statements for Internet Explorer into Hannon Hill’s Cascade Server using PHP’s ob_start() function. This is a mashup from a few people on the Cascade help forum. Really, it’s a TinyMCE (Cascade’s WYSIWYG editor) hack to get conditional code, i.e. comments, around the HTML tag. I know it’s a very specific use case, but if you are trying to make your web site responsive using HTML5 Boilerplate in Cascade you’ll want this. (Irony: WordPress’s WYSIWYG editor won’t save the code correctly so I took a screen shot.)
Hannon Hill added a set of special tags in version 7.4 of Cascade that allow code – even “illegal” code – to sit in a page unrendered. You’ll find it in their knowledge base under Code Sections. Below is a revised version of the Boilerplate conditional statements using the new “protect-top” tag.
CSS: from Knowledgable to Ninja
Course Outline Selectors Specificity
Colors & Transparency
Fonts / Typography
Backgrounds & Borders
Transitions & Animation
data-FOO is HTML5 for creating your own attribute.
Adaptive Images for Responsive Web Design
2) screen resolution
but speed test hinder ux
there is native speed test
Img old school
2) <picture> and or srcset
hisrc.js w/ jquery.js
and data-1x, data-2x
css media queries and single-pixel gif replacement
1) background-size:auto (fittextjs.com)
3) font-based solutions
4) compressed jpeg (not for high contrast)
Img new school
1) simple design for users
2) browser, server handshake
1. document node
2. element node
3. text node
encompass 90% of nodes
jQuery = “find something, do something”
The New Rules of the Responsive Web
“The Responsive Web”
Use code 13rw37 for 37% off book
Tech has changed in the last 18 months.
People create with big device, consume with small device.
1) responsive design doesn’t end with squishing
2) there is no responsive pixie dust
3) your workflow will change
Think: style tiles
4) your tools will change
Think: CSS preprocessors; scss, sass, less
Book: SMACSS (lumberjack book)
5) the web is responsive by default
6) embrace unpredictability
10 Minutes that can save hours of debugging headaches
In developer console
parseInt(010) – octal = 8
a == true doesn’t check type
=== does check type
Drop the widgets
drag and drop
audio and video
color picker input type=color
html5 games – cross platform
10 Things You Didn’t Know Browsers Could Do
1) $(‘selector’) without jquery
2) everything is editable
3) can store lots of data
your whole site with appcache
4) svg as background image
5) count with css
6) css can calculate
7) IE6 and IE7 can buy you a house
8) take your picture
9) animate sprites
10) help you manage memory
HTML5 on TV
Opera is everywhere
beware of overscan
navigation – spatial navigation (keyboard)
libraries – microjs
opera tv emulator
SPA – same page application
how/when to redraw
where client interactions fit
those damn http requests
airbnb – node.js
mvc vs. eda
model = object
view = presentation
controller = ?
eda – event-driven architecture
spine.js in Toolmvc
backbone.js in todomvc
knockback.js in todomvc
server push dataq
no request, no responce
Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve
CLIENT SIDE STORAGE
Use a library like store.js or lscache https://github.com/pamelafox/lscache
Careful, there are ways not to use localstorage
Again use a library like lawnchair,
Not in all browsers, need fallbacks
3) File APIs
There are many file APIs
MULTIMEDIA IN HTML5
online-convert.com – online video converter
handbrake – download video converter
Subtitle tag Use a tool
GRAPHICS IN HTML5
Try to make it without use of plugins.
embed, inline, scripted, CSS background
There are tools and libraries.
<canvas> Animation is redrawing the canvas.</canvas>
Canvas has lots of libraries & tools.
Most people use ThreeJS.
There are libraries and tools.
CSS 3d Transforms