10: Mathematics & Dynamic CSS Visualizations

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 bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management.


Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc’ give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform’ rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript.

Resources

http://davidwalsh.name

http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24

http://davidwalsh.name/css-supports

http://www.w3.org/TR/css3-values/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

http://css-tricks.com/five-questions-with-david-walsh/

http://codepen.io/collection/wHune/

http://codepen.io/thebabydino/pen/jgtof

http://codepen.io/thebabydino/

http://techblog.rga.com/math-driven-css/

http://davidwalsh.name/css-flip

http://css-tricks.com/a-couple-of-use-cases-for-calc/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://stackoverflow.com/users/1397351/ana

http://davidwalsh.name/svg-animation

http://stackoverflow.com/users/1397351/ana

http://stackoverflow.com/help/badges/17/necromancer?userid=1878132

http://sass-lang.com/

http://www.myth.io/

http://dev.w3.org/csswg/css-extensions/

http://sarasoueidan.com/

http://shoptalkshow.com/episodes/129-sara-soueidan/

http://5by5.tv/webahead/81

http://www.sitepoint.com/css-variables-can-preprocessors-cant/

http://codepen.io/shankarcabus/pen/jcyDA

http://daneden.github.io/animate.css/

http://codepen.io/thebabydino/tag/calc()/

http://figures.spec.whatwg.org/

Direct download: episode-10_mathematics-and-dynamic-css-visualizations.mp3
Category:CSS -- posted at: 9:19am EDT
Comments[1]

9: Web Accessibility for JavaScript Components and Custom Elements

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 for things we take for granted like keyboard access. Examples on modifying these to better attend to user experience traditionally meant lots of overhead in development by forking the framework and updating it constantly. Based on the resources developers typically find in online searches & Roles the lack of good developer examples, WAI ARIA & even simple accessibility is easy to misunderstand.

 

Many newer client side frameworks focus on componentization of HTML elements. Angular Directives, Ember Components, React Classes and Web Components. Componentization gives developers a chance to build much faster and easier Web Accessibility using various tools like WAI ARIA roles at a much more focused & reusable level. What is the future of Web Accessibility with these technologies? Why are we so concerned about Web Accessibility?

 

References:

https://github.com/marcysutton/accessibility-of-mvcs

http://www.w3.org/TR/wai-aria/appendices#a_schemata

https://www.youtube.com/watch?v=BgvDZZ8Ms8c

https://www.youtube.com/watch?v=ZPsb-RR8SC0

http://w3c.github.io/aria-in-html/

https://www.youtube.com/watch?v=_IBiXfxhF-A

http://www.polymer-project.org/articles/accessible-web-components.html

http://marcysutton.com/target-corporate-website/

http://www.w3.org/TR/2013/WD-components-intro-20130606/#decorator-section

http://www.paciellogroup.com/blog/

http://www.paciellogroup.com/resources/wat/

http://www.w3.org/WAI/intro/aria

http://webaim.org/

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

 

Comments[1]

8: Exploring Dart & Polymer

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 leader in JavaScript, Ruby, & Dart. He is the author of3D Game Programming for Kids,Patterns in Polymer,Dart for Hipsters,The SPDY Book and Co-author ofRecipes with Backbone. He prefers to code with Dart but also builds with JavaScript, Ruby, Go and more.

 

Chris uses his ICE Code Editor project, written in Dart & Polymer, to teach kids how to code. Lately, he pair programs nightly and blogs daily on Dart, Polymer, and mentoring. Chris talks with Christian(@anvilhacks) & Erik (@eisaksen) about his writings, pairing experiences, teaching, and thoughts on Dart, Polymer, and the current state and possible futures of Dart as a platform of choice.

 

Resources:

 

https://www.dartlang.org/

http://japhr.blogspot.com

https://github.com/lvivski/start

http://pragprog.com/book/csdart/dart-for-hipsters

http://pragprog.com/book/csjava/3d-game-programming-for-kids

http://recipeswithbackbone.com/

http://spdybook.com/

https://github.com/eee-c/ice-code-editor

http://eeecomputes.com

Patterns in Polymer

http://www.sitepoint.com/client-server-dart-app-getting-started/

http://www.ecma-international.org/memento/TC52.htm

http://en.wikipedia.org/wiki/Dart_(programming_language)

https://www.dartlang.org/polymer/

http://www.polymer-project.org

 

http://designpatternsindart.com/

Direct download: episode-8_exploring-dart-and-polymer.mp3
Category:dart -- posted at: 11:19am EDT
Comments[0]

7: Web RTC and Designing Realtime Experiences

In episode 7 of the web platform podcast, ‘’Web RTC and Designing Realtime Experiences”,  we talk with Agility Feat (http://agilityfeat.com/), a design and development firm in the US, Costa Rica, Nicaragua, and Honduras. Agility Feat has been not only building out real-time apps for a while now but they are also actively contributing back to the community around it as well by speaking at events, distributing a RealTime.com newsletter, and more.

 

Web RTC (http://www.webrtc.org/) is “a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple JavaScript APIs”. It is a peer-to-peer communication tool and its been around for a while. Contrary to popular belief Web RTC is not just video & chat in the browser. It is more than just that, it has data channels, screen sharing, streaming, and much more.

 

Web RTC is an evolving standard for realtime app development and is gaining popularity quickly in the realtime web community. More browsers are starting to implement it and Agility Feat has seen the capabilities & usefulness of Web RTC to assist in developing the user experience of realtime applications. In this episode Agilty Feat discusses how they approach designing for browsers that don’t support it and how they use Web RTC effectively in their applications.

 

Christian Smith (@anvilhacks) and Erik Isaksen (@eisaksen) host this episode with guests Allan Naranjo (@OrangeSoftware), Mariana Lopez (@nanalq), & Arin Sime (@ArinSime) The AgilityFeat team talks with us about the user experience considerations in building realtime applications and the technologies involved.

 

Allan Naranjo (@OrangeSoftware) is a core member of the development team at AgiltyFeat. He is a leader in creating detailed mobile experiences with heavy client side frameworks. Allan was the winner of  ‘The  Access Innovation Prize’ in 2012 for one of his Facebook Applications.

 

Mariana Lopez (@nanalq) is the UX lead at AgilityFeat. She designs real-time applications for clients across a variety of industries.  Mariana studied Human Computer Interaction at Carnegie Mellon University, and is also a professor of Interaction Design at the Universidad Veritas (Costa Rica) and Universidad de Costa Rica.

 

Arin Sime (@ArinSime) is co-founder of AgilityFeat. Arin has over 16 years of experience as a developer, entrepreneur, consultant, and trainer for everything from small startups to Fortune 100′s and federal agencies.

 

Resources

http://www.realtimeweekly.com

http://agilityfeat.com/blog

http://iswebrtcreadyyet.com

http://techcrunch.com/2014/06/27/google-hangouts-will-no-longer-require-a-plugin-for-chrome-users/

http://www.agilityfeat.com/blog/2014/05/real-time-ux-design-video/

http://www.nojitter.com/post/240168527/webrtc--the-good-and-the-bad

https://plus.google.com/u/0/communities/106044262972906929746/stream/8faf729a-47a6-48d5-810f-e3f261ff585a

https://www.accessnow.org/blog/2012/12/11/first-annual-access-innovation-awards-prize-winners-announced

http://bloggeek.me/amazon-fire-phone-webrtc/

http://www.realtimeweb.co/

http://youtu.be/vvg_uFEu9Kk

http://webrtchacks.com/

http://learnfromlisa.com/learn-webrtc/

http://www.html5rocks.com/en/tutorials/webrtc/basics/

http://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

http://www.html5rocks.com/en/tutorials/webrtc/datachannels/

https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/Peer-to-peer_communications_with_WebRTC

https://github.com/html5rocks/www.html5rocks.com/tree/master/content/tutorials/webrtc

Direct download: episode-7_web-rtc-and-designing-realtime-experiences.mp3
Category:realtime -- posted at: 10:26am EDT
Comments[0]

6: What Agile Brings to Products & Teams

Agile is a buzzword that, for better or worse, has caused emotional reactions that are both negative and positive. It is a highly overused and misunderstood term in our industry but it has shaped the way web software has been built for years. Agile is a flexible set of tools and practices that enable businesses to rapidly produce software that is extremely versatile to change. It has spawned many variants in its implementation and has endured much scrutiny. Agile strives to create quality software that embraces collaboration & individuals over interactions.

James Shore (@JamesShore), creator of LetsCodeJavaScript.com (http://www.letscodejavascript.com/) and co-author of the book ‘The Art of Agile Development’ (http://shop.oreilly.com/product/9780596527679.do), talks with us in our 6th episode - ‘What Agile Brings to Products & Teams -Why TDD is Not Dead’.

This episode, at its core, is about Agile software development and how Test Driven Development (TDD) can help us, as programmers, build better quality software products & services. Development is not just about coding, it’s about people and working together to build software that can easily change and adapt over time. The way we build products & services varies in techniques & implementation depending on the project. By using one or many Agile methodologies such as TDD we may be able to get there faster and with a better degree of maintainability, quality, and user experience.

James is an author, thought leader, and software testing guru. He believes that great software development teams consistently deliver market success, technical success, and personal success for team members and stakeholders. He is one of the early pioneers of Agile software development and an incredible mentor.

Direct download: episode-6_what-agile-brings-to-products-and-teams_why-tdd-is-not-dead.mp3
Category:agile -- posted at: 2:11pm EDT
Comments[0]

5: The Web Components Community

Web Components are a set of emerging and rapidly changing technologies alter the way many developers are starting to build web applications. Zeno Rocha (@zenorocha), a dominant force in the front end development community talks with hosts Erik Isaksen (@eisaksen) & Christian Smith(@anvilhacks) on how developers can get started building with these technologies today & how to build their own components, tooling & using the Github & Bower communities, and other front end developer goodness.

Zeno, began a small project, CustomElements.io ( http://customelements.io/), that was meant to track his and others Web Components. CustomElements.io, now used by Mozilla as their X-Tags (http://www.x-tags.org/) registry, has become much more than that and is now a central place for developers to share, publish, and maintain their Web Components. The project spawned an incredible amount of support from the web development community that grew into several other related projects such as ‘WebComponents.org’ ( http://webcomponents.org/ ) & the boilerplate Yeoman project ‘generator-element’ https://github.com/webcomponents/generator-element )

Direct download: episode-5_the-web-components-community.mp3
Category:web-components -- posted at: 12:00am EDT
Comments[0]

4: Static Application Hosting & All Things Firebase

“The Rise of BAAS : Static Application Hosting & All Things Firebase”,  episode 4, is the second of our exploration into Backend As A Service (BAAS) and how it’s changing how we build applications today.

Static Application development is on the rise & the tools that help us quickly host and iterate on these applications are emerging rapidly. With the exit of GoInstant as a BAAS, can we safely rely on these services as dedicated backends or do we solely use BAAS for real time interaction, prototyping, or something else? Ossama Alami, VP of Developer Happiness, at Firebase talks with us about the recent Firebase Hosting service, deploy tools, open data sets, static hosting & BAAS applications and everything Firebase.

Firebase, a young but influential player in BAAS was founded in 2012. At it’s core, it is a backend that lets developers store and sync data in real time. Ossama has dedicated himself to empowering developers and ensuring Firebase remains a force for good in the developer community.

Direct download: episode-4_firebase-hosting-and-all-things-firebase.mp3
Category:technology -- posted at: 8:54am EDT
Comments[0]

3: GoAngular & The GoInstant Platform

“The Rise of BAAS : GoAngular & The GoInstant (@GoInstant) Platform”,  episode 3, is the first of our exploration into Backend As A Service (BAAS) and how it’s changing how we build applications today. Matt Creager (@Matt_Creager), lead developer on the GoAngular project, talks with us about GoInstant, a powerful BAAS. The rise of BAAS has caused mixed feelings in the developer community. Static application development is rapidly increasing and evolving & the toolsets to build these are getting more detailed. This is due to many factors and static applications are quickly being recognized as solving more & more problems & pain points in application development today. Why would you build your applications with BAAS & how can you leverage the developer tools / frameworks out there? Matt tells his perspective in this episode.   

Direct download: baas-part-1_goinstant.mp3
Category:technology -- posted at: 1:00pm EDT
Comments[0]

2: Prototyping with Purpose

Episode #2 features Engineers Adi Chikara (@adi_ads) & Pam Selle (@pamasaur) on Prototyping strategies and goals. Building HTML, CSS, JavaScript prototypes is becoming more and more prevalent in our work. The fast development time and information yielded by a prototype can save your clients so much time, money, and headaches. Much of our discussion focuses on why & when you would want to prototype, strategies for purposeful prototype construction, and how all of this could impact business outcomes.

Direct download: pamaur_and_adi_ads_mixdown.mp3
Category:prototyping -- posted at: 12:00am EDT
Comments[0]

1: RubyNation & Ruby's Cultural Impact

This is Episode #1 featuring live interviews from RubyNation 2014,  a regional Ruby Conference in Silver Springs, MD. It showcases the importance of building meaningful digital experiences,  development culture & community, & the value sharing knowledge.

Direct download: rubynation_mixdown.mp3
Category:technology -- posted at: 11:09pm EDT
Comments[0]