adactio / tags / web components

Tagged with “web components” (10)

  1. I/O chat with Monica Dinculescu  |  Web  |  Google Developers

    Informative mouth-words.

    In this episode we chat to Monica Dinculescu, who works on Chrome. We cover:

    The PWA starter kit. Using Redux outside of React. lit-element. The status of custom elements across browsers. HTML imports vs modules. When to use shadow DOM. CSS ::part and ::theme. What CSS working groups are like. Working on the emoji subcommittee. Dinosaurs vs sharks. 👯‍♂️. Also check out Monica’s I/O talk, building fast, scalable, modern apps with Web Components.

    https://developers.google.com/web/shows/http203/podcast/io-chats-monica

    —Huffduffed by adactio

  2. Keeping it simple on the cutting edge, with Ada Rose Cannon | Fixate

    Published Mar 1, 2018

    Ada is a developer advocate and senior developer at Samsung. Previously a PlayStation developer, Ada now dedicates her time to pushing the limits of WebVR, and experimenting with client-side APIs.

    Time Stamped Show Notes

    0:47 – When Ada isn’t writing code, she’s usually attending conferences, speaking at events, or watching films. She’s really interested in WebVR, so she enjoys spending time trying out new demos and playing video games.

    1:07 – Right now, Ada is really interested in the WebXR API which is being managed by the Immersive Web Community Group. It allows you to build fully immersive experiences and works with almost any VR headset that can connect to a browser.

    1:39 – Ada is also interested in HTML and how developers can start building dynamic software using declarative technology. Lately, she’s been researching web components to see how to build modern web apps using HTML, CSS, and JavaScript.

    2:12 – Despite a few teething issues, Web Components are gaining traction. Ada uses a combination of the official Polyfill and the ShadyDOM CSS polyfill.

    3:19 – One of Ada’s favourite libraries right now is A-Frame. It’s essentially a web component wrapper for three.js, and three.js is an abstraction library for WebGL. Ada says that three.js makes writing raw WebGL easy.

    3:55 – Anyone with experience only in HTML can learn A-Frame quite easily and start building with VR. Ada thinks it’s amazing that A-Frame uses web components but doesn’t actually use any of the scoped CSS or ShadowDOM aspects of it. The custom components A-Frame generates aren’t used to change anything in the DOM; they just add elements to the three.js scene in JavaScript.

    5:42 – Ada would like to see developers building suites of web components rather than full websites, so that designers who know CSS and HTML can use them to put together full layouts.

    6:12 – When Ada was a child, she used to make simple games in the browser using IE5, Firefox, and One Day. This is what inspired her to get into graphics.

    7:15 – After working as a Playstation developer, Ada moved to The Financial Times where she improved her web development skills and had the opportunity to work on some VR projects.

    8:06 – You can already build augmented reality projects in the web using libraries that give you access to the camera and accelerometer.

    8:17 – The WebVR Standard was recently renamed the “WebXR Standard” to include mixed reality, augmented reality, and virtual reality. Ada thinks that it will form part of the standard toolkit of the web in the future.

    8:54 – AR hardware is going to be the future of immersive media, because many people don’t like the isolation of VR.

    9:31 – Glitch has become an invaluable part of Ada’s workflow. It’s an online code editor like CodePen or JS Bin, but with access to a full virtual machine with a Node environment setup.

    10:13 – Ada loves that Glitch allows you to “remix”, meaning you can get a copy of a project’s source code, edit it, build something of your own, and then share it again.

    11:01 – Because Ada does a lot of rapid prototyping, she became frustrated setting up new build environments all the time. She also didn’t like explaining everything to other devs before they could work on her code.

    11:53 – This frustration caused her to change her approach. Now Ada uses HTML, CSS, and JavaScript on the frontend and doesn’t transpile any of her code. She uses ES6 if she’s building something that needs to work only in a few browsers, and adds a transpilation step if it needs to work across many browsers.

    14:41 – Ada is really excited about Comlink by the Chrome team. It allows you to expose an API through post message and provides an asynchronous API to your function calls. Not only does it work between a web worker and the main page, but it also works across domains. This is incredible because it means we can make API’s that work entirely in the client side without touching the network. Plus, with service workers, you don’t even need an active network connection to make an API request.

    18:27 – Ada is interested in developments in Web VR, new ways to think about the declarative web, and anything that changes the way developers work on the frontend or in the browser.

    19:12 – A talk by Jeremy Keith inspired Ada to rethink the power of declarative languages. She believes that the beauty of HTML is that it is forgiving. Rather than using HTML as a render target, she uses it to describe what she’s building. Then she uses CSS for styling, and JavaScript to bring everything together.

    Quickfire Questions

    22:16 – Best advice about programming

    It’s more important to get something out there that works than it is to get it perfect.

    23:09 – Habits for writing better code

    Use linting to create neat, readable code. Get to know your tools well and set them up in a way that suits your process. Become comfortable with CSS.

    25:03 – Book

    “JavaScript Patterns: Build Better Applications with Coding and Design Patterns” by Stoyan Stefanov.

    25:29 – Inspiring devsLea Verou. Her Mavo library is amazing and so is her book, “CSS Secrets”.

    26:00 – How to learn to code from scratch

    Get started with a basic A-Frame setup; tweak it, have some fun with it, and then expand upon it.

    26:47 – How to work smart

    Compartmentalise your code into reusable chunks. As soon as you build something that you’ll need more than two times, make it reusable.

    Twitter: @LadyAdaKing

    http://fixate.it/podcast/keeping-it-simple-on-the-cutting-edge-ada-rose-cannon/

    —Huffduffed by adactio

  3. Web Components w/ Alex Russell

    Official Post from Mikeal: After my recent adventures in WebComponents I thought it would be fun to sit down with Alex for a quick chat.Alex has been working on WebComponent standards since the beginning. We touch on the history as well as some of the changes in programming style when you have to live in the same world that n

    https://www.patreon.com/posts/webcomponents-w-14563373

    —Huffduffed by adactio

  4. Decoded Chats – Monica Dinculescu on Web Components | Decoded Blog

    Monica Dinculescu (@notwaldorf on Twitter) works on the Polymer team in Google and is an expert in emoji and how to make them appear correctly in browsers – or not. She’s lately given an eye-opening talk at the HTML special day of CSSConf in Amsterdam where she showed the shortcomings of the input element when it comes to browser support (you can watch it at the end of this post if you want to). We’ve caught up with her for this whirlwind interview on Web Components, backwards compatibility of the web and sensible use of JavaScript. It was recorded live at SmashingConf in Freiburg, so there is quite a high amount of background noise. But the content is worth it – promised!

    http://blog.decodedshow.com/2016/10/20/decoded-chats-monica-dinculescu-on-web-components/

    —Huffduffed by adactio

  5. The Web Platform Podcast : 111 Extensible Web Components

    A weekly show that dives deep into all things web from the developers building the platform today.

    Jeremy Keith (@adactio), web guru & co-founder of ClearLeft, talks with us about the potential pitfalls and hopes on Progressive Enhancement with Web Components.

    http://thewebplatformpodcast.com/111-extensible-web-components

    —Huffduffed by adactio

  6. Responsive Day Out 3: Peter Gasston

    Peter Gasston speaking at the third Responsive Day Out in Brighton on June 19th.

    The Responsive Day Out is an affordable, enjoyable gathering of UK designers and developers sharing their workflow strategies, techniques, and experiences with responsive web design.

    http://responsiveconf.com/

    —Huffduffed by adactio

  7. Web Components with John Rogerson

    Web development is becoming increasingly modular, and web components are part of that evolution towards modularity. But as a new spec, many devs remain uncertain about why, when and how to use them. Front-end expert John Rogerson returns to the show to help de-mystify web components. John not only defines web components, but offers some practical use cases and draws analogies to web dev approaches we are all already familiar with. We discuss the pros of web components (modularity, extensibility), the cons (new technology, undefined standards, accessibility) and how they may reflect the future of web development.

    http://ctrlclickcast.com/episodes/web-components

    —Huffduffed by adactio