John, Ward, and Dan Wahlin talk with Maxim Salnikov about his experience as a Progressive Web Apps PWA expert. Maxim discusses what they are and when he uses them, along with browser support, and how he uses service workers. Maxim shares a lot of tips on building and debugging PWAs
Why should we plan for offline? How can service workers help? Developer and author Jeremy Keith dives into the whys and hows of building good offline web experiences.
In this episode, I talk about CSS-in-JS, why I think its bad for the web, and how to address some of the legitimate problems it’s trying to solve.
Original video: https://soundcloud.com/vanillajspodcast/whats-wrong-with-css-in-js
Downloaded by http://huffduff-video.snarfed.org/ on Mon, 07 May 2018 10:04:52 GMT Available for 30 days after download
Published Mar 15, 2018
John has been building for the web since the early 90’s. With his timeless article, The Dao of Web Design, his book, Developing with Web Standards, and as co-founder of the Web Directions conference series, John has made a massive impact on the lives of designers and developers the world over.
Time Stamped Show Notes
0:51 – John came to the web from a computer science and software engineering background.
1:14 – In the early nineties, John developed a hypertext knowledge system. Whilst considering his options on how best to distribute the software, he realised that the internet would be a great fit. No publisher required, and no tiny royalties!
1:43 – At the beginning, John thought the web was a fad.
2:08 – The web was officially launched in 1991 but received a lot of criticism at the time. Users complained that links were one-directional, and that there was no centralised hub to see the links between documents. In fact, a paper proposed by Tim Berners-Lee (the man considered to be the inventor of the web) was rejected!
2:58 – What people initially saw as weaknesses of the web, actually turned out to be its strengths. One “weakness” was the fact that everything was freely available to everybody; even people who are not software engineers or programmers.
3:31 – Once John realised the power of the web, he started to develop courses, and CSS tools, training, and materials. In more recent years, his efforts have been focused on organising conferences where he helps “amplify the voices and ideas of other people”.
4:54 – John is interested in the way humans interact with computers and how this will evolve over time. He wants to see the current paradigm of “personal computing” broken down and become less text and screen-based.
7:43 – The idea of a computer as a bunch of apps with various features will change; our interactions will become much more contextual and unique to our individual conditions. Computing will become more and more a part of our everyday life. John gives two examples – cochlear implants, and technology that can predict the onset of a psychological episode.
11:53 – “Debugging is a black art.”
12:57 – John tells the story of a single missing character in Fortran code and how it lead to an unmanned space shuttle exploding!
13:47 – When deciding what to put where on his daily todo list, John considers the task’s importance, as well as the times of day during which he is most productive. He finds that todo lists give him a sense of accomplishment and progression.
14:55 – “People who show gratitude tend to be happy.” John encourages his kids to reflect on one thing each day for which they are thankful.
16:08 – When making the transition from developing software to running events, John had to begin a completely new learning process.
19:19 – John is interested in using his expertise to gain better insight into the wants and needs of his customers so that he can tailor the Web Directions service to better suit them.
20:22 – John started programming using BASIC on a “pre-PC style” computer. It relied on a tape deck with audio cassettes in order to write programs.
20:57 – John came from a very traditional, imperative, object-orientated approach to programming. Only when the web came around was he exposed to the declarative approach.
21:29 – John found the idea of declaring what you want to happen, rather than how you want it to happen, revelatory.
21:57 – John thinks CSS is greatly undervalued. Whereas experienced React developers are in high demand, skilled CSS developers seem to struggle to find good positions.
23:45 – Best advice about programming
“You ain’t gonna need it” (YAGNI). If you don’t need it, don’t build it.
24:15 – Habits for writing better code
A strange mixture of OCD and ADHD allows John to both drill down on the details and get them right, as well as make the disparate connections necessary for writing good software.
25:15 – Book“Designing with Web Standards” by Jeffrey Zeldman
26:19 – Inspiring devsJason Miller, the creator of Preact. Not only is he developing interesting technology, but he is also great at articulating his thoughts on the web platform as a whole.
27:33 – How to learn to code from scratch
Pick a real-world problem and learn new technologies as you solve it.
29:42 – How to work smart
Implement the 80/20 rule. Determine what requires only 20% effort, but yields 80% of the results.
Tools, Tips, and Books Mentioned
“A Dao of Web Design,” by John Allsopp
“Developing with Web Standards,” by John Allsopp
The Web Directions conference series
Amazon Web Services Machine Learning API
Watson AI API
Google Cloud Platform AI API
Dijkstra’s books on software engineering
“Design Patterns: Elements of Reusable Object-Oriented Software,” by The Gang of Four
“Designing with Web Standards” by Jeffrey Zeldman
The 80/20 Pareto Principle
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.
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.
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.
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.
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
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.
Published Nov 23, 2017
Harry Roberts is a heavy-weight in the world of front-end architecture. While working at Sky, Harry began developing approaches to writing manageable and scalable CSS, revolutionising the way people think about front-ends. Harry now consults for a long list of companies like Google, The UN, The BBC, and Deloitte.
Time Stamped Show Notes
1:55 – Harry loves anything to do with the outdoors. He enjoys hiking, mountaineering, mountain biking, and cycling.
2:36 – About ten years ago Harry and his best friend started a graphic design company. When building their company site, he realised he was way better at code than he would ever be at design. That’s when he decided to get into front-end development.
3:43 – In 2011, Harry started working as a senior developer at Sky, a broadcasting and multimedia company in the UK and Europe. This was where he got into large-scale performance architecture. He then got a job building the UI’s for highly-trafficked websites making hundreds of millions of Pounds a year. From there, he moved on to do the same for other companies. For the last three and a half years or so, he has been working for himself.
10:33 – Harry explains that he doesn’t really use many tools. He says that he’s good at prioritising things, and tools or not, he gets things done. Harry runs his life on a “just in time” basis. He only completes tasks right before they are needed as a way not to frontload too much information. This technique prevents him from having to memorise things for too long.
12:19 – Because he travels so much and is often in different time zones, Harry says that it’s difficult for him to develop a routine. Although he has known for a couple of years that he needs to address this, he isn’t sure how to go about it.
12:51 – Harry admits that he’s bad with email. He knows he could fix this by implementing a routine, but he hasn’t yet. Also, he still uses Gmail even though he has heard that Inbox is better as it allows you to treat your email like a todo list.
14:23 – Harry says that he doesn’t really use frameworks. He gets more excited about standard specifications. Service Worker is revolutionising everything.
15:00 – Harry uses Web Components. He thinks they will allow developers to start moving things out of frameworks and into standardised specs.
15:13 – “I really want the web to win so I’m just quite excited about the platform in general at the moment. I’m not working with a particular library or framework specifically at the moment – I’m quite agnostic in that regard.”
15:48 – Harry says that he’s lucky to get invited to a lot of conferences. Last year he went to thirty! Even though it is work for him, conferences are also great opportunities for him to learn. He is constantly surrounded by people doing interesting new things and who are demystifying complex concepts.
16:40 – Harry admits that he is genuinely in love with his industry. He is fascinated by what developers are doing, and browses Hacker News or Twitter whenever he gets the chance. He is constantly immersed in what developers are doing, but he doesn’t learn these things inside out. He just keeps a broad view of the industry. “You can just watch a 40 minute talk and think, “I understand enough about that to know that I don’t need it yet and when I do need it, I know where to start Googling”.
18:58 – Encapsulation has had the biggest impact on how Harry thinks about code. In his experience, when a client’s CSS is in a mess, it’s usually because they’ve made it too complex.
19:35 – “The first time you ever do anything you will probably get it wrong.” Understanding this, you should make sure that everything is undoable and encapsulated enough that you can decommission discrete sections of your code rather than having to rewrite everything.
20:55 – Best advice about programmingOliver Reichenstein once told Harry, “never do it for money, but never do it for no money”. Developers tend to love what they do to the point that they will do it for free. This often leads to open source burnout.
22:02 – Habits for writing better code
Pragmatism and laziness. Not trying to write perfect code the first time you are faced with a problem.
23:09 – BookHigh Performance Browser Networking by Ilya Grigorik. It has made Harry a fundamentally better developer because, after reading it, he understands how the internet actually works.
23:49 – Inspiring devs
Anyone on the Google Developer relations team. He mentions Alex Russell and, specifically, Jake Archibald, because he’s doing a lot of work with Service Worker. He also mentions Paul Lewis for his render performance work, and Nicolas Gallagher who made big waves at Twitter.
25:29 – How to learn code from scratch
When asked how he would go about learning programming from scratch, Harry jokes that he he might not want to, and that his dream job is to be a park ranger in a national park somewhere. He would like to “wake up and check that the eagles are ok and maybe release a deer trapped in a fence”.
26:42 – Another inspiring dev
Harry mentions Jeremy Keith as another developer who inspires him. Jeremy focuses on the fundamentals.
26:56 – How to work smart
Harry’s programming tip is not to memorise stuff you don’t have to. He believes that working smart is to devise a plan of attack, take a pragmatic approach to things, and become good at prioritising. Learn how to ask for help, and surround yourself with people who know more than you do.
Books, Tools, and Tips Mentioned
High Performance Browser Networking
Published Nov 16, 2017
Sara is a freelance front-end web developer, author, and speaker from Lebanon. She was named Developer of the Year in the 2015 .net magazine awards, and awarded a Web Platform Award from O’Reilly. Sara is the author of Codrops CSS Reference, and is the co-author of Real-Life Responsive Web Design, which focuses on smart “responsive” workflows, effective UX patterns, and powerful front-end techniques.
Time Stamped Show Notes
2:33 – Sara is passionate about the possibilities developers have to build useful things for people and for the generations to come. She believes developers have the tools for building the future, and is excited by the fact that the web is getting more powerful by the day.
3:21 – Sara says that learning and teaching have opened a lot of doors for her. She first got into speaking because of the articles she wrote whilst experimenting with, and learning new features. She actually got her first job from her experiments on CodePen.
4:34 – Burning out after working on a project taught Sara about what to do, what not to do, what to expect, what not to expect, and to tell clients what to expect and what not to expect.
8:16 – Sara explains that she doesn’t use a lot of frameworks or tools. She uses HTML, CSS, and Sass. On very simple projects, she doesn’t even use Grunt, Gulp, or any other build tool like that. She writes with the bare minimum.
9:00 – Sara uses Alfred to speed up her workflow.
9:37 – TextExpander helps Sara save time by allowing her to respond to frequently asked questions in emails she receives using templates.
10:17 – Sara loves Sublime Text as her editor, and uses a lot of the plugins that come with it to help her type less.
10:52 – Sara works early in the morning to avoid distractions on Twitter.
11:27 – Sara removes any applications, such as email and Twitter, from her work computer that are not essential for work.
13:05 – Larry mentions how Dash is an app that aggregates documentation, and also integrates nicely with Alfred. It also has its own snippet manager, similar to TextExpander.
13:56 – Sara finds that she doesn’t have the most productive way to set up projects. She currently uses Jekyll for her website, but the bigger the website becomes, the slower Jekyll becomes.
14:30 – She admits that Grunt, Gulp, Browserify, or Webpack would make her workflow better, but she finds the thought of installing them and getting them to work overwhelming.
15:42 – Sara is excited about CSS Grid, because it’s like a CSS framework without a framework. She believes that there’ll be no need for any kind of CSS framework to build grids and websites in the future. She mentions that she has never been a fan of frameworks like Bootstrap as she feels there’s always too much to edit, change, and fix.
16:21 – Combining CSS Grid with Flexbox is “like magic”.
17:23 – Sara makes time to learn new things when she needs to use new things.
20:17 – Best advice about programming
20:46 – Habits for writing better code
Thinking from a user’s perspective, not only a developer’s perspective. Test components early on – not code testing, but user testing.
21:39 – BookResponsive Design: Patterns & Principles by Ethan MarcotteGoing Responsive by Karen McGraneAdaptive Web Design by Aaron GustafsonInclusive Design Patterns by Heydon Pickering
22:50 – Inspiring devsEthan Marcotte and Jeremy Keith. Sara is inspired by anyone who works for the user and who teaches people in the industry to care about them too. She likes that these two authors teach developers how to write better experiences.
24:40 – How to learn code from scratch
Sara says that she would definitely be overwhelmed at first if she had to learn programming from scratch. She mentions that she is thankful that she had a mentor to help her get started from the right place. She would start with the basics, because she can’t use a tool or a language unless she really understands it.
25:34 – How to work smart
Work healthy. Take care of yourself and to get enough sleep. A healthy body is a healthy mind.
Books, Tools, and Tech Mentioned
CoDrops CSS Reference
The Smashing Book 5: Real-Life Responsive Web Design
Jobs hunting and the frustration with job titles. Why isn’t it ok to only know HTML and CSS in 2017? Why do bootcamps seem to focus on javscript so much? We’re joined by Lara and Mandy for this episode to try and figure all of this out.
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
Page 1 of 6Older