The Web Platform Podcast

Daniel X Moore (@STRd6) and Pirijan (@pketh) join our panel to discuss Hyperdev, A web based code editor aimed at making developers as productive as possible as quickly as possible. Is a web based IDE really a viable option for full stack production apps? Can Hyperdev be built with Hyperdev!? These questions and many more are on this week’s episode of The Web Platform Podcast. Resources HyperDev - https://hyperdev.com FogCreek - http://www.fogcreek.com/

Brian Kardell (@briankardell) joins Erik, Justin, and Danny on the panel along with our guest Marcy Sutton (@MarcySutton) in a discussion on WAI ARIA attributes & how we should or shouldn’t be using these in the context of our applications. Resources Marcy’s EggHead.io class - https://egghead.io/courses/start-building-accessible-web-applications-today AXE 2.0 - http://www.deque.com/blog/introducing-axe-2-0/ Best practices - https://w3c.github.io/aria-practices/#toc Examples - https://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#aria_ex Smashing article from 2014 - https://www.smashingmagazine.com/2014/07/the-wai-forward/ Getting started - http://a11yproject.com/posts/getting-started-aria/ Harvard University guide to online accessibility - http://accessibility.huit.harvard.edu/use-accessible-design-patterns Marcy’s performance post - https://marcysutton.com/accessibility-and-performance/ Free course on Web Accessibility - https://www.udacity.com/course/web-accessibility--ud891 Chrome A11y Insp

Kenneth Christiansen (@kennethrohde) and Alexis Menard (@darktears) the creators of the crosswalk project talk to us about creating hybrid mobile apps using a consistent and powerful runtime environment across mobile, TV, desktop and IoT devices. We talk in detail about what benefits Crosswalk can bring to the table, general features, its extension system and its compatibility with Cordova/PhoneGap projects. We also talk about how hybrid app development promises to maximize code reuse (“write once deploy everywhere”) and the reality of this promise. Finally we talk about Progressive Web Apps and how Crosswalk can be used to extend PWA exposure by also quickly getting them within the app store. Resources Crosswalk - https://crosswalk-project.org/ PhoneGap - http://phonegap.com/ Cordova - https://cordova.apache.org/

Paul Lewis (@aerotwist) talks with us about how we can better optimize web page speeds as well as how to avoid glaring light on videos caused by bald headed smoothness...or something to that degree. With the rise of web traffic on mobile devices, developers have had to rethink web performance over the past decade. Bandwidth & Latency have become much larger challenges than ever thought possible. The old ways to optimize performance on web pages just don’t work. The high level RAIL (Responsive, Animated, Idle, Load) & the lower level PRPL (Push, Render, Precache, Lazy Load) patterns are but many strategies Google is using to enable developers to deliver better User Experiences in an ever evolving internet,      Resources RAIL - https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en PRPL - https://www.polymer-project.org/1.0/toolbox/server Polymer Shop -  https://www.polymer-project.org/1.0/toolbox/case-study Speed Gun - http://speedgun.io/ Site Speed -  https:

This week on the Web Platform Podcast Danny Blue and Amal Hussein chat with Tom Greever (@tomgreever), Author of ”Articulating Design Decisions”. Tom helps our hosts learn how to help communicate more effectively and we learn that maybe Danny is a jerk. Learn how design and dev can work together, how to avoid the “CEO button” and more! Resources Articulating Design Decisions: https://www.amazon.com/gp/product/1491921560/ref=as_li_ss_tl?ie=UTF8&linkCode=sl1&tag=tgcom-20&linkId=84214e9d9eb43548e949ad37c2e43f6c Articulating Design Decisions video series, training: https://player.oreilly.com/videos/9781491921579 Tom speaking at Mad+UX last year https://www.youtube.com/watch?v=x-FYe53LRA4 Style Guide Driven Development: http://blog.bitovi.com/style-guide-driven-development/ && https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/ Tom on Twitter: https://twitter.com/atomgroom

Mark Nadal (@marknadal) joins Danny Blue, Justin RIbeiro and Leon Revil to chat about GunDB and all the challenges of developing a database, concurrency, and distributed systems. Our hosts and guest dive into these topics and even journey to space in the newest episode of the Web Platform Podcast. Resources GunDB - http://gun.js.org/ Readthesource.io episode on GunDB - https://www.youtube.com/watch?v=70dn1oZQFCk 15 minute ToDo list tutorial - http://gun.js.org/think.html Enterprise - http://gunDB.io/ Repo - https://github.com/amark/gun NodeJS `npm install gun && cd node_modules/gun && npm start`

Brian Kardell (@briankardell) chats with us on Web Development and how it has evolved over the years.  We discuss the beginnings of HTML, Web standards bodies, the inception of The Extensible Web Manifesto, Chapters.io, and more. Resources Brians recent presentation on Chapters.io & Web Standards - https://www.youtube.com/watch?v=rwWEQPc5GRE Web Incubator Group - https://www.w3.org/community/wicg/ Chapters.io - http://chapters.io/ SGML > HTML > XML https://www.youtube.com/playlist?list=PLzH6n4zXuckqTQBIEuBTyjsO-Ef7562_Z Brians Blog - https://briankardell.wordpress.com/

Jacob Rossi (@jacobrossi) & Travis Leithead (@TravisLeithead) join us to discuss the current state and roadmap of the Microsoft Edge Platform. Resources Microsoft Edge Resources Developer Resources - https://dev.microsoftedge.com Platform Data  - https://developer.microsoft.com/en-us/microsoft-edge/platform/data/ Web Platform public status - https://status.microsoftedge.com Blog - https://blog.microsoftedge.com Virtual Machines - https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/ Changelog - https://changelog.microsoftedge.com Dev tooling - https://developer.microsoft.com/en-us/microsoft-edge/platform/documentation/f12-devtools-guide/ User Voice - https://uservoice.microsoftedge.com Web Components Interview w/ Travis - http://webcomponents.org/articles/interview-with-travis-leithead/ Github - https://github.com/MicrosoftEdge, https://github.com/microsoft/chakracore PWAs on Windows - https://blogs.windows.com/msedgedev/2016/07/08/the-progress-of-web-apps/ Protocols article - https:/

Denis Radin (@PixelsCommander), Web Component advocate, has started work on a project called Polymer Native to enable developers to create part-hybrid, part-native applications using Web Components. This project aims to make it easier to get device specific look and feel in your applications by leveraging native elements on devices. Currently, the project supports iOS and it is hoped that more people will come onboard to help the open source project grow to other platforms such as Android and even TV platforms. Resources Polymer Native - https://github.com/PixelsCommander/polymer-native Polymer - https://github.com/Polymer/polymer Cordova SW Plugin - https://www.npmjs.com/package/cordova-plugin-service-worker HTML-GL - https://github.com/PixelsCommander/HTML-GL

Software developer at Softwire, Tim Perry (@pimterry), has created a set of “Server Components”. These are simple, lightweight tools for “composable HTML rendering in Node.js, broadly following the Web Components browser specification, but on the server side”. Rob Dodson (@rob_dodson), Google Developer Advocate & Polymer Legend & Trey Shugart (@treshugart), Atlassian superstar & SkateJS creator, round out the the guests for this episode discussing the reality & the possibilities of using Web Components on the server. Additionally, we look at other projects like the ‘Express Web Components’ by Jordan Last that take a different approach to this by running Chromium on the server side. Resources SS rendering for Web Components - https://scotch.io/tutorials/server-side-web-components-how-and-why Server Components Info - https://pimterry.github.io/server-components/ Code - https://github.com/pimterry/server-components Scram.js - https://github.com/scramjs WebComponentsJS Polyfills - https://g

The views expressed by Eric Knudtson on The Web Platform Podcast episode 97 do not necessarily represent the views of GE Eric Knudtson (@vikingux) from GE Digital walks us through their Predix User Interface (Predix UI) Web Components library built on top of Google’s Polymer Project. Predix is a cloud platform built to assist developers build for the ‘Industrial Internet’. Under the Predix family or resources is Predix UI, a set of UI components that “enable designers and developers to quickly and easily create Industrial Internet web applications that run on top of Predix services and data.” Eric also discusses challenges and best practices for managing a component based UI architecture, as well as GE’s new open source initiatives. Resources InnerSource Book - http://www.oreilly.com/programming/free/getting-started-with-innersource.csp NvD3 Charting Library - https://github.com/novus/nvd3 Predix Site - https://predixdev.github.io/predix-ui/ Predix Family - https://www.predix.io/

Nathen Harvey (@nathenharvey), VP of Community Development at Chef Software, joins us to discuss modern devops culture, tools, and practices as well as how Chef Software can help teams automate, scale, and reproduce tasks, and environments. Nathen defined devops as how to build high velocity organizations by reducing build and deployment cycles. Topics includes how to manage your infrastructure like code, devops community, Chef cookbooks and recipes, and improving your devops knowledge and processes as web developer.   Resources Chef & Habitat http://www.chef.io - Main Website http://learn.chef.io - Tutorials and such for getting started with Chef & DevOps DevOps Kung Fu - A talk from ChefConf 2015 that describes and defines the Principles, Forms, and Application of DevOps.  It’s also where I get my definition of DevOps from: https://www.youtube.com/watch?v=_DEToXsgrPc - YouTube video of the talk https://github.com/chef/devops-kungfu - GitHub repository of the talk http://chef.github.io/devops-kung

Sean Fioritto (@sfioritto) talks with the panel on building large web applications in JavaScript. Sounds easy enough? This episode goes into building with large teams, large codebases, legacy migration, team building, frameworks & libraries, code smells and much more. Resources Sean’s homeland - http://www.planningforaliens.com Sean’s awesome blog post ‘Why Javascript Development is Crazy’ - http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/ Strangular Application - http://www.martinfowler.com/bliki/StranglerApplication.html Atlassian on The Web Platform Podcast - http://thewebplatformpodcast.com/77-project-management-and-git-workflows Sketching with CSS - http://www.sketchingwithcss.com/

Gleb Bahmutov (@bahmutov) chats with the panel on Reactive Programming in JavaScript. What is Reactive Programming? Join Gleb and the panel to learn about event streams, sequences over time, and how these help developers build complex JavaScript applications. Resources Gleb’s 2016 OSConf Talk on Reactive Programming - http://conferences.oreilly.com/oscon/open-source-us/public/schedule/detail/49290 The talk is mostly how to train anyone coming to JavaScript in different techniques, each more powerful than the previous one. Slides, video and all links to futher information in https://glebbahmutov.com/blog/oscon/ I posted the list of interesting things from OSCON at https://glebbahmutov.com/blog/oscon/#interesting-things-i-saw-at-oscon Companion code repo showing the same simple example (literally multiply numbers then print them) implemented using different styles https://github.com/bahmutov/javascript-journey - from imperative to FRP and beyond. The long and evolving blog post https://glebbahmutov.com/blog

Rachel Andrew (@RachelAndrew) , Managing Director and founder of edgeofmyseat.com (currently working exclusively on CMS Perch), talks withe panel on the mysterious ways of CSS Layout. Rachel has been speaking quite a lot on the subject in the developer speaking circuit for a while now. Join us as she shares her stylish insights on Grid, Flexbox, Floats, Bootstrap, Regions, and much more. Resources http://gridbyexample.com - where I keep CSS Grid Layout stuff, info about browser support, code samples, inks to other resources I dig up. http://csslayout.news - weekly newsletter on CSS Layout. http://www.slideshare.net/zomigi/using-flexbox-today-frontend-united-2016 - Zoe Gillenwater slides, Using Flexbox Today https://rachelandrew.co.uk/archives/2016/03/30/should-i-use-grid-or-flexbox/ “Should I Use Grid or Flexbox?” Here is which to use and when. http://caniuse.com/#feat=flexbox https://github.com/w3c/csswg-drafts CSS Working Group drafts on GitHub https://rachelandrew.co.uk/archives/2016/03/25/css-grid-and

This week our panel talks with Kenneth Christiansen (@kennethrohde) about reactions and responses to Google I/O 2016. Listen to the goings on of I/O including news about Google products such as  Android as well as their web products. The panel digs into Progressive Web Applications (PWA’s) and discusses some of the community response to Google’s approach on them. Firebase is another hot I/O topic, becoming an umbrella for different Google services and has gone through a major rebranding. Is Firebase still the same service so many fell in love with before the Google acquisition? These topics plus many more on Episode 92. Resources https://events.google.com/io2016/ https://firebase.google.com/ https://developers.google.com/web/progressive-web-apps/

This week on the Web Platform Podcast Sam Quayle (@samquayle), Senior UX designer and front-end consultant at Valtech, joined us to discuss Lean UX with hosts Danny Blue, Justin Ribeiro, and Amal Hussein. Lean UX is a design approach which is fits the highly evolving needs of development teams creating products for the modern web. It allows for rapid iteration and user driven design. Sam shares best practices tips and his positive experiences with clients. A very interesting case study is the UK Government Digital Service adoption process, and the benefits they have seen from embracing Lean UX. Show links: Slides from Sam’s talk on Lean UX ,  the Lean UX book that started it all, and this awesome article Resources Lean creative presentation - http://www.slideshare.net/SamQuayle/lean-creative-beyond-user-needs http://shop.oreilly.com/product/0636920021827.do https://www.smashingmagazine.com/2011/03/lean-ux-getting-out-of-the-deliverables-business/

Michael Glukhovsky (@mglukhovsky), co-founder of the innovative Rethink brand, chats with us about two core free open source projects that are changing the ways we think of data in our web applications. Join us as we dive into the unique database known as RethinkDB. We also talk in depth about Horizon, a realtime JavaScript backend used to build powerful web & mobile apps that scale utilizing the power of RethinkDB.   Resources RethinkDB - http://rethinkdb.com/ Horizon - https://horizon.io/ Rethink on GitHub - https://github.com/rethinkdb/rethinkdb Horizon on GitHub - https://github.com/rethinkdb/horizon Who to follow on Twitter: Mike Glukhovsky: http://twitter.com/mglukhovsky Annie Ruygt (resident artist at RethinkDB): https://twitter.com/annieruygt Horizon: http://twitter.com/horizonjs RethinkDB: http://twitter.com/rethinkdb JSJ Ng-Conf - https://devchat.tv/js-jabber

This week on The Web Platform Podcast, Erik Isaksen, Danny Blue, and Leon Revill talk with Mano Marks (@ManoMarks) all about Docker and how containerized deployments can help you from the time you start your web project all the way to the time you need it to scale up. Is Docker good for small applications, large applications, or both? Is it all just and adorable excuse to put a whale mascot on merchandise? Likely not. Mano Marks informs three primarily front end developers on the exciting ways your can use Docker, from simple push button server solutions to creating Quake...yes, Quake.   Resources Docker on Github - https://github.com/docker/docker Docker main site - http://www.docker.com/ Docker Hub - https://hub.docker.com/ CodeShip Docs - http://pages.codeship.com/docker Digital Ocean docs - https://www.digitalocean.com/community/tutorials/how-to-use-the-digitalocean-docker-application

Summary Cypress.io is geared toward making testing easy and painless. Gleb Bahmutov (@bahmutov) and Brian Mann (@be_mann) chat with us on this upcoming project. Cypress eliminate the need for PhantomJS and Selenium. It aims to provide developers with instant feedback, reliable automation, and painless debugging, It is an interesting and different way of approaching how we think about testing code.   Show Links Cypress.io - https://www.cypress.io/ Gitter - https://gitter.im/cypress-io/cypress Docs - https://docs.cypress.io Gleb’s blog post: https://glebbahmutov.com/blog/web-testing-nirvana-with-cypress/