Punched Card Coding - Slides

Developer
Size
6,019 Kb
Views
26,312

How do I make an punched card coding - slides?

Slides from my talk at Front Trends 2015As an email this has been built for Apple Mail only, it'll probably work on other webkit based desktop email clients maybe on mobile too. It could potentially be built to work in other email clients.. What is a punched card coding - slides? How do you make a punched card coding - slides? This script and codes were developed by Mark Robbins on 06 September 2022, Tuesday.

Punched Card Coding - Slides Previews

Punched Card Coding - Slides - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Punched Card Coding - Slides</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!DOCTYPE html>
<html lang="en" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- , _
/|/_) o |\_|_ |) | \| | | |/ | |/\_| | |(_/ \/|_/|/|_/|_/ \/ \/|/... (| RebelmailReb RebelmailRebelmailR RebelmailRebelmailRebel Rebelma Rebelma Rebelm Rebelm Rebel RebelmailRebe Rebel Rebel RebelmailRebelm Rebel Rebe RebelmailRebelma Rebe Rebel Rebel Rebe Rebe Rebe Rebe Rebe Rebe Rebe RebelmailRebelmai Rebel Rebe RebelmailRebelma Rebel Rebe Rebe Rebe Rebel Rebe Rebe Rebe Rebe Rebel Rebe Rebel Rebel Rebel Rebel Rebel Rebelm Rebel RebelmailRe Rebel Rebelmail Rebelm Rebelmail Rebelmail RebelmailRebelmailRebe RebelmailRebelma __ __ _ __ ________ / /_ ___ / /___ ___ ____ _(_) / / ___/ _ \/ __ \/ _ \/ / __ `__ \/ __ `/ / / / / / __/ /_/ / __/ / / / / / / /_/ / / /
/_/ \___/_.___/\___/_/_/ /_/ /_/\__,_/_/_/
--> <meta name="author" content="Rebelmail.com"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]--> <title></title> <style> #mb-email-wrapper,body{margin:0!important;padding:0!important;-webkit-transform:scale(1)!important;background:}*{text-size-adjust:none!important;-ms-text-size-adjust:none!important;-webkit-text-size-adjust:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.ExternalClass *{line-height:100%}table{table-layout:fixed;margin:0 auto}table table table{table-layout:auto;border-collapse:collapse}table,td{mso-table-lspace:0;mso-table-rspace:0}img{-ms-interpolation-mode:bicubic;display:block}:focus{outline:0}a,a *,button,label,label+*+*{cursor:pointer!important} .ExternalClass input[type=checkbox]+label,.ExternalClass input[type=radio]+label{background:0 0;padding:0;height:auto}@media screen and (max-width:px){.outer{width:100%}.img-100{width:100%;height:auto}} :root,body,html{background:#333;margin:0;padding:0}body{padding-top:5vw!important}img{background:rgba(0,0,0,.1)}#xz,#xz~[type=radio]{display:none}#xz:checked,#xz:checked~[type=radio]{display:inline-block}#xz:checked~* label:hover{background:rgba(0,0,0,.2)}.kkm{width:98vw;height:55vw;overflow:hidden;margin:0 auto 5vw auto}.dbj{width:98vw;max-height:0;overflow:hidden;height:55vw;float:left;background:#f99839;-webkit-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition:transform 1s;transition:transform 1s;box-shadow:0vw 1vw 5vw rgba(0,0,0,.8);border-radius:1vw;position:relative}.dgj{background:#333}#wk:checked~* .ymw{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#en:checked~* .bjm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#km:checked~* .rkj{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#dj:checked~* .gad{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#yw:checked~* .xoz{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#qr:checked~* .enn{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#lb:checked~* .qor{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#zo:checked~* .lwb{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#nd:checked~* .bqm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#bm:checked~* .kmm{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}#ja:checked~* .dgj{-webkit-transform:scale(1,1);-ms-transform:scale(1,1);transform:scale(1,1);max-height:55vw}.qyr,.ldb{display:block;width:25%;height:55vw;position:absolute}.qyr{left:0}.ldb{right:0}*{font-family:open sans,helvetica neue,arial;text-align:center;color:#fff;font-weight:100;line-height:1.25}h1,h2,p{margin:0}h1{font-size:5vw;margin-top:.75em}h2{font-size:3.5vw}p{font-size:2.5vw}ul{margin:5vw 0 0 5vw;width:40vw;float:left}li{text-align:left;font-size:3.5vw}li.wlk{list-style:none;font-weight:400;margin:0 0 .25em -3vw}iframe{border:none;min-width:1500px!important;min-height:1500px!important;overflow-x:scroll;overflow-y:scroll}.iframe{position:relative;float:right;width:40vw;height:40vw;margin-right:5vw;overflow-x:scroll;overflow-y:scroll}.iframe iframe{position:absolute;top:20px;bottom:20px;left:20px;right:20px}.zzo{width:25vw;height:25vw;display:block;margin:1vw auto;border-radius:50%;border:.5vw solid #fff}.nad{position:absolute;bottom:1.5vw;right:1.5vw;width:20vw}.jqa{width:40vw;height:auto;float:right;margin:2vw 5vw 0 0}.ode{width:28vw;height:auto;float:right;margin:0 5vw 0 0}.meg,.aye,.doj,.kxm{width:45vw;margin:2vw;float:left}.meg{width:45.5vw}.aye{width:31.1vw}.ydw{width:98%;margin:0 auto}.zqo{width:30vw;float:left;font-size:3vw}.zqo:first-of-type{margin-left:5vw}.zqo h2{font-weight:400}.zqo .nqd{font-weight:400;font-size:5vw;margin:.5em 0}[for=xz]{font-size:8vw}.oke,.roj,.jra{width:27vw;height:27vw;background-size:cover;margin:0 auto}.jra{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);position:relative}.jra:hover{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}[for=rj]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=oe]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=gd]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}[for=mg]{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg);height:6vw;width:6vw;background-size:cover;display:inline-block;margin-top:1vw}#rj:checked~* .roj{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#oe:checked~* .roj{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#gd:checked~* .roj{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#mg:checked~* .roj{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}#rj:checked~* [for=rj],#oe:checked~* [for=oe],#gd:checked~* [for=gd],#mg:checked~* [for=mg]{outline:.25vw solid #8b0000}.oke{-webkit-transition:background-image 1s;transition:background-image 1s;position:relative}#ae:checked~* .oke{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}#xdz:checked~* .oke{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}#wkk:checked~* .oke{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}#eln:checked~* .oke{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}[name=interactive]~* .myg{display:block}[name=interactive]:checked~* .myg{display:none}#ae:checked~* .myg{display:block}#xdz:checked~* .xnz{display:block}#wkk:checked~* .wzk{display:block}#eln:checked~* .egn{display:block}.oke{-webkit-animation:image-fade 30s infinite;animation:image-fade 30s infinite}[name=interactive]:checked~* .oke{-webkit-animation:none;animation:none}.grd,.ade{display:none;width:3.5vw;height:50%;padding-top:50%;position:relative;font-size:2vw}.grd{float:left}.ade{float:right}.grd::after,.ade::after{content:'';border:.15em solid #333;height:1em;width:1em;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);display:block;margin-top:-.5em;position:absolute}.ade::after{border-bottom-color:transparent;border-left-color:transparent;box-shadow:3px -3px 4px rgba(255,255,255,.3),inset -3px 3px 4px rgba(255,255,255,.3)}.test{color:inherit}.grd::after{margin-left:1vw;border-top-color:transparent;border-right-color:transparent;box-shadow:-3px 3px 5px rgba(255,255,255,.3),inset 3px -3px 5px rgba(255,255,255,.3)}.gallery-nav0{display:block}@-webkit-keyframes image-fade{0%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}}@keyframes image-fade{0%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}23%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_1_0f50056a-29ec-412d-9c6e-4abcfc3da67c_1024x1024.jpg)}25%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}47%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/camel_3_e021eb5e-2d69-4969-9025-bc659c91b929_1024x1024.jpg)}50%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}73%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_1_ecbd7b2e-44ad-4e59-b0ee-7086bdefd7a2_1024x1024.jpg)}75%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}98%{background-image:url(https://cdn.shopify.com/s/files/1/0070/1922/products/ASH_3_1024x1024.jpg)}} </style>
</head>
<body> <input type="checkbox" id="xz"> <input type="radio" name="page" id="wk" checked> <input type="radio" name="page" id="en"> <input type="radio" name="page" id="km"> <input type="radio" name="page" id="dj"> <input type="radio" name="page" id="yw"> <input type="radio" name="page" id="qr"> <input type="radio" name="page" id="lb"> <input type="radio" name="page" id="zo"> <input type="radio" name="page" id="nd"> <input type="radio" name="page" id="bm"> <input type="radio" name="page" id="ja"> <input type="radio" name="limited" id="rj" checked> <input type="radio" name="limited" id="oe"> <input type="radio" name="limited" id="gd"> <input type="radio" name="limited" id="mg"> <input type="radio" name="interactive" id="ae"> <input type="radio" name="interactive" id="xdz"> <input type="radio" name="interactive" id="wkk"> <input type="radio" name="interactive" id="eln"> <div class="kkm"> <div class="dbj ymw"> <label for="ja" class="qyr"></label> <label for="en" class="ldb"></label> <h1>Punched Card Coding</h1> <h2>JavaScript functionality with CSS</h2> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark" class="zzo"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> <img src="https://s3.amazonaws.com/presentations-fronttrends/rebelmail.png" class="nad"> </div> <div class="dbj bjm"> <label for="wk" class="qyr"></label> <label for="km" class="ldb"></label> <h1>Who loves HTML email?</h1> <ul> <li>It&apos;s outdated</li> <li>It&apos;s restrictive </li> <li>It&apos;s complicated</li> <li>It&apos;s time consuming</li> <li>It&apos;s spammy</li> </ul> <img src="https://s3.amazonaws.com/presentations-fronttrends/spam1.jpg" class="jqa"> </div> <div class="dbj rkj"> <label for="en" class="qyr"></label> <label for="dj" class="ldb"></label> <h1>There is more to it than that</h1> <ul> <li>Webfonts</li> <li>SVG</li> <li>CSS shapes</li> <li>Animation</li> <li>Device targeting</li> <li> Interaction</li> </ul> <img src="https://s3.amazonaws.com/presentations-fronttrends/spam2.jpg" class="ode"> </div> <div class="dbj gad"> <label for="km" class="qyr"></label> <label for="yw" class="ldb"></label> <h1>How interactions work</h1> <h2>:hover :focus :active :checked</h2> <img src="https://s3.amazonaws.com/presentations-fronttrends/code1.png" class="meg"> <img src="https://s3.amazonaws.com/presentations-fronttrends/code2.png" class="aye"> </div> <div class="dbj xoz"> <label for="dj" class="qyr"></label> <label for="qr" class="ldb"></label> <h1>Example 1</h1> <ul> <li class="wlk">Game Concept</li> <li>6 Radio buttons</li> <li>Score counter</li> <li>Progressively faster</li> <li>Prize at the end</li> </ul> </div> <div class="dbj enn"> <label for="yw" class="qyr"></label> <label for="lb" class="ldb"></label> <h1>Scaling this up</h1> <h2>Punched Card Coding</h2> <img src="https://s3.amazonaws.com/presentations-fronttrends/radiocard.png" class="kxm"> <img src="https://s3.amazonaws.com/presentations-fronttrends/punchedcard.jpg" class="doj"> <img src="https://s3.amazonaws.com/presentations-fronttrends/code3.png" class="ydw"> </div> <div class="dbj qor"> <label for="qr" class="qyr"></label> <label for="zo" class="ldb"></label> <h1>Example 2</h1> <ul> <li class="wlk">Shopping Cart Concept</li> <li>117 Radio buttons</li> <li>4 Checkboxes</li> <li>Multi page layout</li> <li>Add/remove products</li> <li>Calculate prices</li> <li>Form validation</li> </ul> </div> <div class="dbj lwb"> <label for="lb" class="qyr"></label> <label for="nd" class="ldb"></label> <h1>Support</h1> <div class="zqo"> <h2>Static</h2> <div class="nqd">25%</div> Gmail app <br> Outlook desktop </div> <div class="zqo"> <h2>Limited</h2> <div class="nqd">20%</div> Gmail (webmail) <br> Yahoo! </div> <div class="zqo"> <h2>Interactive</h2> <div class="nqd">55%</div> iOS <br> Apple Mail <br> Android </div> <p style="position:absolute;bottom:2vw;width:100%"> Based on 1.01 BILLION open in April tracked by Litmus.com</p> </div> <div class="dbj bqm"> <label for="zo" class="qyr"></label> <label for="bm" class="ldb"></label> <h1>Support</h1> <div class="zqo"> <h2>Static</h2> <div class="jra"></div> </div> <div class="zqo"> <h2>Limited</h2> <div class="roj"></div> <label for="rj"></label> <label for="oe"></label> <label for="gd"></label> <label for="mg"></label> </div> <div class="zqo"> <h2>Interactive</h2> <div class="oke"> <label for="eln" class="grd myg"></label> <label for="xdz" class="ade myg"></label> <label for="ae" class="grd xnz"></label> <label for="wkk" class="ade xnz"></label> <label for="xdz" class="grd wzk"></label> <label for="eln" class="ade wzk"></label> <label for="wkk" class="grd egn"></label> <label for="ae" class="ade egn"></label> </div> </div> </div> <div class="dbj kmm"> <label for="nd" class="qyr"></label> <label for="ja" class="ldb"></label> <h1>Example 3</h1> <br> <br> <br> <br> <label for="xz">this</label> </div> <div class="dbj dgj"> <label for="bm" class="qyr"></label> <label for="wk" class="ldb"></label> <h1>Thank you</h1> <img src="https://s3.amazonaws.com/presentations-fronttrends/mark" class="zzo" style="opacity:.9"> <h2 style="font-weight:400">Mark Robbins</h2> <p> Email Developer / CSS Hacker </p> <p> @M_J_Robbins &#xA0; &#xA0; &#xA0; @GoRebelmail </p> </div> <div lang="x-track2" class="yyw" onload="null"></div> <img src="https://staging-api.rebelmail.com/v0/emails/55131ad0a7ec1b1b00c65c0f/track.gif?type=forward&amp;forward=D" style="display:none!important;overflow:hidden;height:0;width:0" height="1" width="1"> <table class="qar" lang="x-forward" border="0" cellspacing="0" cellpadding="0" style="overflow:hidden;background-image:url(https://staging-api.rebelmail.com/v0/emails/55131ad0a7ec1b1b00c65c0f/track.gif?type=forward&amp;forward=A);height:0;width:0" background="https://staging-api.rebelmail.com/v0/emails/55131ad0a7ec1b1b00c65c0f/track.gif?type=forward&amp;forward=A" height="1" width="1"></table> <div class="lxb" lang="x-forward2"></div> </div>
</body>
</html> <script src="js/index.js"></script>
</body>
</html>

Punched Card Coding - Slides - Script Codes CSS Codes

/*
Slides from my talk at Front Trends 2015
As an email this has been built for Apple Mail only, it'll probably work on other webkit based desktop email clients maybe on mobile too. It could potentially be built to work in other email clients.
The code has been uglified and minified, sorry about that, it's how we keep things under 100kb.
EXAMPLE 1 - http://emailcodegeek.com/thwack-a-vole/#game
EXAMPLE 2 - not yet availible
*/

Punched Card Coding - Slides - Script Codes JS Codes

// Video here https://www.youtube.com/watch?v=xhUfiOSOk3g
Punched Card Coding - Slides - Script Codes
Punched Card Coding - Slides - Script Codes
Home Page Home
Developer Mark Robbins
Username M_J_Robbins
Uploaded September 06, 2022
Rating 3
Size 6,019 Kb
Views 26,312
Do you need developer help for Punched Card Coding - Slides?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mark Robbins (M_J_Robbins) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!