Springy Popup Card

HTML (Jade) + CSS (SCSS) + JavaScript
I just wanted to have a play around with Rebound.js with this one, so there’s not much to the functionality.A possible modification would be to make a custom slider for the top bit that also uses Rebound to make things extra springy.

See the Pen Springy popup card by Nathaniel Watson (@nw) on CodePen.


Html5 is the current and future of the web development and mobile app in the today’s technology. Previously we build the web site in simple html which was good for some years ago but Html5 is the extended version of the Html specially created for the cross platform and mobile application.

Re-creating WarGames with Tableau and Mapbox

So you all remember the film “Wargames”:

Well, we (Jeffrey Shaffer, Anya A’Hearn, Chris DeMartini and I) decided to build a tribute to it.  Except instead of using a Hewlett Packard 9845 and an IMSAI we’d use Mapbox, Tableau, CSS3, Javascript, HTML5, GDAL, and rather a lot of data, and quite a bit of math:

Find Chris DeMartini’s blog post here.

View the  IMSAI here.

View the animated WOPR here.

View the Война Операция План реагирования here.

Find out how Chris DeMartini added WOPR’s voice using Jeffrey Shaffer’s voice commands for Tableau (called “Tabitha”) here.

Mercator View

Polar Projection View


Война Операция План реагирования

Overview of the screens from the Film

(Left Hand Side) Close Up of the screens from the Film

(Right Hand Side) Close Up of the screens from the Film

The Story.

“No rush, but can you send me the arc equation you have used in the past formapping with arcs instead of straight link paths?” Asked Chris DeMartini.  “Of course!” I said, and sent Chris to over some links on Wikipedia and an R package.  The fact was, I’d always used ESRI to generate Great Circles.  But Chris has been doing some amazing stuff in Tableau with bezier curves, and drawing Great Arcs native was his next challenge.

Imagine my surprise when he said - “have you got anything to go with to test this out in Tableau?” and “ Still needs work, but 1 hour in I have great circles calced on tableau… Thanks for the references!” - so I sent him the World Bank Global Migration 2000 data.  You can view that output here.

Viewing that visualization reminded me of WarGames. I sent an email to Chris:

“The other piece I was thinking was "war games” - the film is a bit old, but…if we geolocate this : The Bulletin of Atomic Scientists - Worldwide Deployment of Nuclear Weapons as the origins (and the destinations are geonames cities1000.txt) in ranked pop order…” then we could visualize a nuclear Armageddon.” and added this picture:

and of course, we’d want a Mapbox map styled by Anya A’Hearn to bring the 1980′s cold war vector graphics up to date, so another email was sent: “I’d hope we could go for something like this:”

Game on, and boy, did Anya deliver.

Talking about Games, Joshua Milligan had previously created a Tableau version of Tic-Tac-Toe

and Chris also wanted to build out the “launch code sequence”:

 - so these were both incorporated into the design.

The Data.

The Processes.

Web Design.

A semi-responsive template in the style of the WarGames film was designed in CSS3.  I used some 3d transforms to “bend” the screens inwards, and modal windows.  Thanks to: @desandro

I also created some responsive circular divisions based from this design, except I modified it for (mobile and multiple) viewports.

Javascript was used to call the Tableau Visualizations, animate the dashboards, and also to generate the UTC clocks.

Data Design.

The majority of the nuclear sites were geocoded by hand by using Mapbox Satellite View and/or Google Maps.  For example, the hardened aircraft shelters at Kleine Brogel in Belgium:

But that left the rather tricky issue of dealing with the target sites.  That was made slightly less ambiguous when this happened. Apart from the introduction of ICBM’s, MIRV’s and SLBM’s since 1959, and the number of countries participating in this MADness…has anything else really changed, other than the time it would take to blow us all to Kingdom Come?

Also: for the Polar Projection: I used GDAL ogr2ogr to convert the ESRI Shapefiles from Mercator: thanks for the advice from Matt Irwin of Mapbox!

Possible Improvements: 

30+ Best HTML5 CSS3 Personal Portfolio Web Design Templates
Online portfolios are no longer just for certain brands, industries, or companies. It has become more important than ever to have a strong online presence. If you have an online portfolio, it will …

If the potential client or employer sees the link to your website in your resume or signature, it is very likely they will click it and see what you are all about. When they will see that you have made efforts and taken time to build a professional website with your presentations, work experience and recommendations, it will create a good first impression.

10 CSS3 Animation Tools You Must Have

10 CSS3 Animation Tools You Must Have

External image

As the use technology increases and the people tend to more easily observe the things that are moving. The smart and active use of the animations can increase the user experience of a site simply by drawing attention to the important elements that users needed to quickly notice. CSS3 Animation makes it possible to animate development from one CSS style configuration to another. Animations consist…

View On WordPress

Who Wants to Learn HTML5 and CSS3?

I’m in my graphic design program’s web design 101 class right now and honestly I’m crazy bored because I already know a lot of the basics… There’s a great book my professor is using though and I was thinking maybe I can do a set of video tutorials that kind of follow the book?

I would code with live preview on so you guys could see what certain code does and I could give tips on file management, too! I think it’d be really helpful if you just want to know basic web coding (and it helps with tumblr themes too, haha).

What do you guys think? Please reblog if you’re interested (and to help spread the word)!

HTML5/CSS3のニュースやTIPSなどのまとめ (2016年2月9日)

モジラ、スマホ向け「Firefox OS」の開発終了を公式発表 (携帯総合研究所)

モジラ「Firefox」のリリースサイクルを変更 (窓の杜)

これでEdgeを使う気になる?目玉の拡張機能は間もなく提供へ (ITmedia)

新刊 書籍:MdNデザイナーズファイル2016

神戸市公式サイトがトップページを検索窓と青空だけにした理由 (THE PAGE)

ネットショップにおける色 (Hail2u)

GeoJSONをブラウザ上で作成できる「geojson io」 (かちびと)

Redux+Reactのboilerplateっぽいチートシート未満 (inuscript | Qiita)

ChromeOS向けFile System for Dropboxの構造 (天使やカイザーと呼ばれて)

AngularJS入門 02: 要素の属性を動的に変える (Fumio Nonaka)

WebSocketには注意が必要 (POSTD)

jQuery.on()は追加式なのでイベントの重複登録に注意しよう (nekoneko-wanwan | Qiita)

よく使うgitコマンド (スターフィールド)

豊富な種類がまとめられたベストフリーアイコン選「Best of 2015: 100 Great Free Icon Packs」 (DesignDevelop)