Category: Technology

New Horizon Passes Pluto

Posted on | by Chris Siems | Leave a Comment on New Horizon Passes Pluto

Pluto from New Horizon craft 20150714Pluto 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

Posted on | by Chris Siems | Leave a Comment on 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

Public Key, Private Key

Posted on | by Chris Siems | Leave a Comment on 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

Posted on | by Chris Siems | Leave a Comment on 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.)

Paul Irish Cascade hack

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.

protect-top-cascade

HTML5.tx 2013

Posted on | by Chris Siems | Leave a Comment on 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.