The Web Platform Podcast

Chris Coyier (@chriscoyier), creator of CSS-Tricks & Codepen speaks with The Web Platform Podcast of buiding the Real Time Code Editor based on CodeMirror, Codepen.io. We go into what designers, educators,and developers are doing with this service and how we can best utilize codepen in our own work. We also focus on the UX and features of the service that have led to it’s success on various levels. Chris is a well known author, speaker and is the podcast host of ShopTalk Show. Resources Codepen.io - http://codepen.io Contribute to the Open Source parts of CodePen - https://github.com/CodePen Chris’s Twitter - https://twitter.com/chriscoyier Rachel Smith’s Story - http://codepen.io/rachsmith/blog/last-year-i-joined-codepen-what-happened-next-will-blow-you-away Shop Talk Show - http://shoptalkshow.com/ CSS Tricks - http://css-tricks.com/ The Lodge - http://css-tricks.com/lodge/ A video intro to Codepen - http://vimeo.com/66335155 CodeMirror API - http://codemirror.net/ ACE Editor - http

While working to secure Rails applications in a truly Agile development environment, it became clear to Ken Johnson (@cktricky), CTO of nVisium Security, and Mike McCabe (@mccabe615) that the Rails community needed attention to security in the form of free and open training. The events that have transpired this past year have only reinforced that belief. RailsGoat, an OWASP project, is an attempt to bring attention to both the problems that most frequently occur in Rails, solutions for remediation, and common attack scenarios. Ken, Mike, and their contributors built a vulnerable Rails application that aligns with the OWASP Top 10 and can be used as a training tool for Rails-based development shops. Resources   Brakeman -  http://brakemanscanner.org/ RailsGoat - http://railsgoat.cktricky.com/ OWASP - https://www.owasp.org/ OWASP NoVA - http://www.meetup.com/OWASP-Northern-Virginia-Chapter/ Rails Security Guide - http://guides.rubyonrails.org/security.html RoR Security Google Group - https://groups.

Our guests Michael Bleigh, Divshot CEO, and Kevin Chau, Director of Business Development at Divshot, talk about the importance of Static Applications, Hosting Static Apps, & Hackathons. Static Showdown is a worldwide 48 hour hackathon featuringstatic web apps. Divshot, a company born of a hackathon, is a leader in Static App Hosting. They are Community Builders and lovers of the web.   This year, Divshot brings us it’s 2nd incarnation of the Static Showdown competition that will be held online Jan 24th through Jan 25th. Registered teams will be provided with a private github repo & Divshot Static App hosting for the hackathon. Some prizes include Chrome Books, Moto 360’s, $300 Apple Gift cards, $500 Amazon gift cards, cold hard cash and more. This Serverless coding event is sponsored by some of the top companies & projects in the web development industry. Past Judges have included Yehuda Katz, Eric Bidelman, Alex McCaw, Mark Otto, Zach Holman, and many others. Sign ups end on Jan 22nd so hurry an

Offline access for applications is becoming more and more necessary for web development today due to increasing client usability demands. The HTML AppCache are a partial solution but is very sticky, often provides stale data and is not dynamic or adaptable. Developers can easily find themselves doing hacks with the deprecated Web SQL API, IndexedDB, & localStorage or a framework like Hood.ie to achieve a fully supported offline application.   Jake Archibald (@jaffathecake), Google software engineer, wrote an infamous article on A List Apart about the inadequacies of AppCache. This turned into the beginnings of ServiceWorker, an API for offline access that provides “scriptable primitives that make it possible for application developers to build URL-friendly, always-available applications in a sane and layered way.” ServiceWorkers allow developers to to make sites work faster and/or offline and also use network intercepting as a basis for other 'background' features such as push messaging and background syn

Rachel Nabors (@rachelnabors) adventures around the world to speak at conferences about animation, interaction, and storytelling. Based in Portland, Oregon, she works at her own company Tin Magpie, training folk to use web animation and publishing interactive stories. Rachel guides us through her interaction development process using the Web Animation API, CSS, HTML, JavaScript and more. We chat with her about training designers & developers animation techniques & fundamentals and the valuer of baked goods. Links Tin Magpie - https://twitter.com/tinmagpie / http://tinmagpie.com/ Rachel Nabor’s site - http://rachelnabors.com/ Training - http://rachelnabors.com/training/ Alice In Videoland - http://rachelnabors.com/alice-in-videoland/book/ Alice in Videoland code explained - http://webdesign.tutsplus.com/articles/how-they-did-it-alice-in-videoland--webdesign-16411 Alice in Videoland design explained - http://www.adobe.com/inspire/2013/12/interactive-html5-storybook.html?trackingid=KJGDU&a

A discussion on Open Source technologies with open source contributors & interested developers. We tackle topics such as how to get started contributing, resources that developers might need, starting a project of your own, understanding licenses, monetization strategies, and the darker sides of open source.   Our panelists: Rob Simpson, Senior Engineer at AgileX & Host of The WaterCooler Web Dev Show Joe Barnes, Senior Architect at Mentor Graphics & Lift web framework contributor Matt Creager - Developer Advocate at Heroku Erik Isaksen - UX Engineer at3Pillar Global Christian Smith - Open source developer and startup enthusiast Nick Niemeir- JavaScript Agent Engineer atNew Relic   This episode is also available on our YouTube channel Links Open Source Jerks - http://readwrite.com/2014/12/15/open-source-avoid-the-jerks What is open source? - http://en.wikipedia.org/wiki/Open-source_software_development The Open Source Initiative - http://opensource.org/ Open Source is innova

Daniel Buchner (@csuwildcat), Product Manager at Target & former Mozillian, talks with The Web Platform Podcast on x-tag, the Custom Elements library competitor to Polymer that he created alongside former Mozillian & Kraken Developer, Arron Schaar (@pennyfx). X-tag is a interesting way to work with web components that takes a totally imperative approach to creating Web Components as opposed to the declarative way of building with Polymer. Some features include legacy browser support, optional mixins to share across components, & functional pseudos to assist in delegation.   Daniel has worked on the W3C specs for Web Components and is now updating x-tag to meet the demands of developers to have more flexibility with Shadow DOM, Templates, and HTML Imports. Daniel is very active on github and would love to have more contributors help build the future of the x-tag projects as well as all projects that help make the web better. Resources   x-tag - http://www.x-tags.org x-tag documentation -http:/

Matt Claypotch (@potch), Mozilla Apps Engineer & Lead on Mozilla Brick Project and Soledad Penades(@supersole), GIF Hacktivist & Mozilla Apps Engineer, join us for Episode 20, “Mozilla Brick, ‘UIKit’ for The Web”, where we talk about building UI focused Web Components for the Mobile First Web Development.   Mozilla Brick is a set of ‘Mobile First’ focused Web Components built as close to the specs as possible. It is not a library built on top of web components but a collection of elements with as little abstraction as possible. Brick's goal has been to make building the interface of web applications easier. UI is not as easy for many developers to build from scratch and it can be difficult to get performant, usable, and attractive widgets.   “Just as native platforms have UI toolkits, Brick aims to provide a 'UIKit for the Web' using the latest standards to make authoring webapp UI easier than ever before.”   The Mozilla Brick Team Resources MozBrick - http://mozbrick.github.io/ MozBrick Blog -

Chetan Karande (@karande_c), talks about Node.js App security and ways developers can prevent attacks. He goes into detail about working with Express.js in particular, NodeGoat, & his work with OWASP. Chetan is a team lead and senior software engineer at Omgeo and frequently speaks at conferences about JavaScript, Front End Technologies, Java, & Node.js.Resources: Chetan’s Twitter - https://twitter.com/karande_c Chetan’s G+ - https://plus.google.com/103318808082524392883 FluentConf Interview - https://www.youtube.com/watch?v=BLd5xLXSz1A&index=29&list=PL055Epbe6d5bab7rZ3i83OtMmD-d9uq2K FluentConf Slides - https://speakerdeck.com/ckarande/top-overlooked-security-threats-to-node-dot-js-web-applications jssummit - http://environmentsforhumans.com/2014/javascript-summit/ omgeo- https://www.omgeo.com/ node.js vulnerabilities http://blog.nodejs.org/vulnerability/ Express vulnerabilities - http://expressjs.com/advanced/security-updates.html node security project - https://nodesecurit

We covered the basics of WebRTC (Web Real Time Communication) & Real Time Application Development in episode 7 of the podcast with Agility Feat and now, with the recent news that Microsoft has decided to start implementing ORTC (Object Real Time Communication), we felt it was time to get a closer look at this ‘peer-to-peer’ technology and how we can start using it today. ORTC is an ‘evolution’ of WebRTC (AKA Web RTC 1.1) and it changes a few things to the underlying way Web RTC works. Despite this, ORTC seems to retain all of its previous API’s and functionality.   Our guest Tsahi Levent-Levi (@tsahil) goes through the API's associated with ORTC, sharing his experiences with each piece of the technology. He takes us through possible client strategies ,deployment 'gotchas', what is relevant and working today, the misconceptions, and the power of peer-to-peer communication & media interactivity.      Resources ORTC news - http://www.infoq.com/news/2014/08/ortc-webrtc Skype article - http://bloggeek.

Defender of Magic, wizardry and the web, and CEO of Famo.us, Steve Newcomb (@stevenewcomb), walks us through the current state of Famo.us. Steve talks about how they are innovating the web and what we can expect in the future of “mobile first” web development from Famo.us.   Famo.us utilizes the power of a Virtual DOM combined with several engines that optimize the power of “cpu bound” performance. Famo.us claims to have mobile performance improvements that eliminate ‘janky’ animations and blur the lines between native device apps and mobile web apps.   Steve goes on to talk about how in April Famo.us will be releasing several features that will enable designers to easily pair with developers and also a new way of building with the framework that will “marry” native and web technology. “Mixed Mode” is a breakthrough for the team and apps built with this new feature will likely have native or even better than native UX & performance. Resources   Famo.us Crunchbase - http://www.crunchbase.com/organizatio

Pair Programming is an agile software development technique in which two programmers work together on the same development work at the same time. Many variants exist for this practice, each having there own merits and drawbacks.   From a business perspective, many companies are skeptical and critical of this practice because it incurs cost. Whether that cost is measured by time or by labor hours, determining a measure of success for pair programming is not an easy thing to do. In a world where metrics and numbers define ‘the bottom line’ it is no surprise that pair programming is not used everywhere.   What does it provide for the business of product & software development? The benefits definitely outweigh the drawbacks from a developer perspective. Our Evan Light talks about the aspects of testing practices in pairing, tools, and many other secrets to unlocking the power pairing.   Evan Light (@elight) is a software developer with nearly 20 years of professional experience. Having a passion for communit

Episode 15 deep dives into the programming experiences of Adam Solove (@asolove), Head of Engineering at Pagemodo. Adam has spent the last ten years building web interfaces various technologies such as CGI, Flash, DHTML, RJS, jQuery, and many MVC JavaScript frameworks. Adam has found over his career that working with a more functional style of programming is much more rewarding in many ways.   Functional programming and FRP (Functional Reactive Programming) provides improvements in performance and purposely avoids changing-state and mutable data. This can be an extremely effective technique in web application development because of the stateful nature of DOM (Document Object Model) implementations in the browser. Adam evangelizes and works with several languages and tools to provide incredible functional style applications including, but not limited to, Elm, ClojureScript, OM, & React.js.   Facebook’s React.js, met with mixed reviews when it was first released in 2013.  Since then it has been stirring up

Today, Web Components have emerged from cutting edge technologies to technologies we can implement in our small scale production. It won’t be long before we are building large scale applications with Custom Elements, HTML Imports, Template Tags, and the infamous Shadow DOM. In embracing this type of developer environment, with it’s flexibility and compositional nature, consider interoperabilty as a core concept.   If you need a custom element for a card layout, as an example, you should be able to use any Web Component out there in the ecosystem regardless of which library or toolchain it comes from. If the component provides the desired functionality and styling you would require it should work seamlessly in your application. Furthermore, toolsets should not limit the the extending and composition of these custom elements. In practice, this may or may not always be the case and library & toolchain creators will need to be aware of these concerns.   Rob Dodson (@rob_dodson), Developer Advocate on the Goo

Connectivity and ubiquity will play a huge role in how web development for connected devices evolves. The rise of makers & builders in the development community is sparking innovation as well as curiosity in the business world. From connected cars & living spaces to fashion and novelty, The Internet of Things (#IoT) stretches far and wide. We are seeing more and more that our clients and users are demanding applications that integrate seamlessly not just w/ their phones, tablets, and computers but with their tv’s, security systems. Many companies are now seeing the viability & market for connected IoT. Many of these companies want to unify product experiences and blur the lines between the physical and digital worlds. With that said, how can we start building our skills and becoming the experts in this development arena?   Whether you are interested in building assembly line robotics, medical technology solutions, or even a simple product with blinking LED’s, developers will need to know many thi

“Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.” - Facebook’s Flux Architecture Home Page -   Bill Fisher (@fisherwebdev), Facebook Software Engineer & Lead Developer of the Flux Documentation, joins The Web Platform Podcast for ‘Episode 12:  Flux Application Architecture & ReactJS.’   Bill talks with hosts Nick Niemeir (@nickniemeir) & Erik Isaksen (@eisaksen) about Flux, an application architecture similar in ideas to CQRS & Data Flow Programming. It was created to alleviate the performance & scalability problems that Facebook encountered in building Facebook Messenger (Watch ‘Hacker Way: Rethinking Web App Development at Facebook’ - a presentation by Jing Chen, Software Engineer at Facebook, for further information). Flux pro

Raphael Rougeron joins us from Toulouse, France to talk about The Bosonic Project.  Raphael and his team of developers mostly focus their development efforts working in the Financial Industry, building out secure and robust applications as well as intricate cross browser UI Components. The UI components part of his work is especially interesting in that it led him to create The Bosonic Project.   Raphael was frustrated, like most of us, with having to constantly rewrite all of his components every time his team shifted technologies so he created The Bosonic Project. Bosonic, deriving its name from the word Boson, which is a subatomic particle that has zero or integral spin, is a philosophy and supporting tool chain to assist in building better UI components as the standardized Web Component specs (Custom Elements, HTML Imports, Shadow DOM, Templates, and CSS Decorators) describe them. This approach shields components against potential spec changes and provides support for “not-so-modern” browsers like Intern

In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don’t Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it’s containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.   It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridgin

In Episode 9, ‘Web Accessibility for JavaScript Components and Custom Elements’. Steve Faulkner (@stevefaulkner) from The Paciello Group and Marcy Sutton (@marcysutton) from Substantial discuss the lack of focus in product development today in building accessible applications & services. Many times web accessibility becomes an afterthought in creating a software product, having little prioritization from the business side until it is a problem. Retrofitting such an important part of our development can make web accessibility seem more like a chore with low ROI for the the time taken to implement it. It can be easy if developers know how to do it and hardly any work when it is successfully incorporated into a development process and it’s valued at the business level.   With recent advances in the past few years in JavaScript MV* frameworks like Angular, React, & Ember we are seeing the need for web accessibility more and more. Heavy JavaScript applications tend to provide little or wrong functionality

Dart was originally a Google language revealed in 2011 and is now an ECMA Standard known as TC52. When Dart first came into being it was annoounced it's purpose was to "ultimately to replace JavaScript as the 'lingua franca' of web development on the open web platform". It's a far stretch from JavaScript's flexible dynamic scripting approach in that It is statically typed and relies on source-to-source compilation. Now that Dart has evolved into a platform with it's own package manager, tooling, full stack implementations, & libraries,  it's community is growing and moving closer and closer toward it's original purpose.   Combined with powerful libraries like  “polymer.dart”, a Dart port of Polymer to build structured, encapsulated, client-side web apps with Dart and web components, can Dart become a first class browser language & the platform of choice for our development?   Chris Strom (@eee_c), our guest in this episode and owner of EEE Computes LLC, is a code explorer, daily blogger, and community