The site looks like this today because the CSS is stripped off. #CSSNakedDay
Category: Technology
CSS Naked Day 2017 #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/
Happy 10th Annual Blue Beanie Day #bbd16
Today is the 10th annual Blue Beanie Day! #bbd16
Hail web standards!
http://bluebeanieday.tumblr.com/
https://medium.com/let-me-repost-that-for-you-zeldman/this-year-more-than-ever-blue-beanie-day-matters-34aa55aee4ad#.x2tjvogai
Happy 9th Annual Blue Beanie Day
Celebrating the ninth annual Blue Beanie Day. Support Web Standards! #bbd15 http://www.zeldman.com/2015/11/29/13853/
New Horizon Passes Pluto
Pluto was discovered/confirmed in 1930 by a 23-year old Kansas farm boy, Clyde Tombaugh, using a telescope at the Lowell Observatory in Flagstaff, Arizona.
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.
Zurb Foundation Stack With Sass
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 —
Ruby (1.9+) for Windows (I got version 1.9.3)
https://www.ruby-lang.org/
I used http://rubyinstaller.org/downloads/
Installed to C:\Ruby193\bin\ruby.exe
Git for Windows
http://git-scm.com/
Installed to C:\Users\[user-name]\AppData\Local\Programs\Git\cmd\git.exe
GitHub for Windows
https://windows.github.com/
Node.js (I got version 0.10.29)
http://nodejs.org/
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)
http://yeoman.io/
Installed to C:\Users\[user-name]\AppData\Roaming\npm\yo
Grunt (I got version 0.1.13)
http://gruntjs.com/
Installed to C:\Users\[user-name]\AppData\Roaming\npm\grunt
Bower (I got version 1.3.12)
http://bower.io/
Installed to C:\Users\[user-name]\AppData\Roaming\npm\bower
— These require Ruby —
Sass (I got version 3.3.14)
http://sass-lang.com/
Installed to C:\Ruby193\bin\sass
Compass (I got version 0.12.7)
http://compass-style.org/
Installed to C:\Ruby193\bin\compass
Foundation w/ Sass (I got version 1.0.4)
http://foundation.zurb.com/docs/sass.html
Installed to C:\Ruby193\bin\foundation
Naked CSS Day 2014
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/
Public Key, Private Key
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
ssh receiver
and it will ask for the pass phrase (not password) you supplied when you created the private key.
TinyMCE hack to shoehorn Paul Irish conditional statements into Cascade Server
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.)
UPDATE
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.
HTML5.tx 2013
I attended HTML5.tx in Austin, Texas, February 1-3. Friday, February 1, was 8 hours of CSS3. Saturday was a series of 7, 1 hour-long talks. Sunday was 5 hours of JavaScript. Here is a brain-dump of my notes.
Links
Friday
CSS: from Knowledgable to Ninja
Estelle Weyl
@estellevw
http://standardista.com/
http://estelle.github.com/CSS-Workshop/
Course Outline Selectors Specificity
Generated Content
Media Queries
Debugging
Colors & Transparency
Fonts / Typography
Backgrounds & Borders
Gradients
Transforms
Transitions & Animation
Other Features
http://copypastecharacter.com/
data-FOO is HTML5 for creating your own attribute.
http://caniuse.com
http://modern.ie
Saturday
Adaptive Images for Responsive Web Design
Chris Schmitt
http://github.com/teleject/hisrc/
http://www.useragentstring.com/
Feature Testing
1) width
2) screen resolution
3) bandwidth
but speed test hinder ux
there is native speed test
modernizer network-connection.js
Img old school
1) .htaccess
2) <picture> and or srcset
3) HiSRC
hisrc.js w/ jquery.js
and data-1x, data-2x
or
css media queries and single-pixel gif replacement
Workarounds
1) background-size:auto (fittextjs.com)
2) svg
3) font-based solutions
4) compressed jpeg (not for high contrast)
Img new school
1) simple design for users
2) browser, server handshake
3) same,…
DOM
codylindley.com/domit
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
@matthew_carver
“The Responsive Web”
Use code 13rw37 for 37% off book
http://manning.com/carver/
Tech has changed in the last 18 months.
People create with big device, consume with small device.
Rules:
1) responsive design doesn’t end with squishing
2) there is no responsive pixie dust
Think: prototyping
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
LIGHTNING TALKS
Aaron Murray
10 Minutes that can save hours of debugging headaches
or Dodging Javascript pitfalls
@aaronkmurray
In developer console
parseInt(010) – octal = 8
a == true doesn’t check type
=== does check type
—————————————————-
Ryan Joy
Drop the widgets
embrace html5
@atxryan
ryanjoy.com
<form>
<progress>
autocomplete
drag and drop
audio and video
contenteditable
javascript (sizzle)
css
input type=date
color picker input type=color
context menu
—————————————————-
Austin Hallock
clay.io
html5 games – cross platform
<canvas>
github.com/austinhallock/html5.tx
10 Things You Didn’t Know Browsers Could Do
Estelle Weyl
@estellevw
estelle.github.com/10
1) $(‘selector’) without jquery
Selectors API
2) everything is editable
contentEditable()
3) can store lots of data
local storage
session storage
webSQL (webkit)
indexedDB
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
navigator.getusermedia
9) animate sprites
10) help you manage memory
HTML5 on TV
Mike Taylor
github.com/pepelsbey/shower
Opera is everywhere
beware of overscan
navigation – spatial navigation (keyboard)
input
libraries – microjs
vanilla-js.com
javascript, html5 & DOM
storage
cookies
audio/video
tools
opera tv emulator
dragonfly
templates
dev.opera.com/tv
Model-View-Websockets
Garann Means
javascript
SPA – same page application
issues:
scaffolding
how/when to redraw
where client interactions fit
those damn http requests
twitter flight
airbnb – node.js
meteor
mvc vs. eda
model = object
view = presentation
controller = ?
eda – event-driven architecture
Controller
spine.js in Toolmvc
Presenter
backbone.js in todomvc
Viewmodel
knockback.js in todomvc
CRUD
REST
WebSockets
server push dataq
bi-directional
no request, no responce
Rapid Templating: “Designing in the Browser” with Sass, Compass, and Serve
Nathan Smith
@nathansmith
j.mp/get-serve
get-serve.com
nathansmith.github.com
unsemantic.com
Sunday
Advanced Javascript Training
Pamela Fox
http://tinyurl.com/html5tx
http://www.teaching-materials.org/workshops/html5tx.html
developers.whatwg.org
CLIENT SIDE STORAGE
1)localStorage/sessionStorage
Use a library like store.js or lscache https://github.com/pamelafox/lscache
Careful, there are ways not to use localstorage
2)IndexedDB
Again use a library like lawnchair,
Not in all browsers, need fallbacks
3) File APIs
There are many file APIs
jshint.com
MULTIMEDIA IN HTML5
online-convert.com – online video converter
handbrake – download video converter
Subtitle tag Use a tool
JavaScript APIs
There are javascript tools and hosted services.
GRAPHICS IN HTML5
Try to make it without use of plugins.
SVG
embed, inline, scripted, CSS background
There are tools and libraries.
<canvas> tag</canvas>
<canvas> HTML and Javascript.</canvas>
<canvas> Animation is redrawing the canvas.</canvas>
Javascript drawImage.
Canvas has lots of libraries & tools.
WebGL
Most people use ThreeJS.
There are libraries and tools.
CSS 3d Transforms
BONUS:
I managed to make videos of me at my hotel. I posed them to youtube: Irony in a hotel & Irony in a hotel part 2.