Tagged with “web design” (295)

  1. 301: Hangovers - ShopTalk

    We’ve recovered from our ep300 festivities and we’re back answering your Q’s with our best A’s - How to handle multiple projects on a dev team? What should we call JavaScript? Tips for scroll-jacking in a nice way? Best practices for CSS? And how to write when you don’t want to write?


    —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


    —Huffduffed by adactio

  3. 300: THIS. IS. 300. - ShopTalk

    Over the course of 300 episodes & 6 years, a lot has changed in the web world. We look back at what was going on when we started ShopTalk Show and check in with where things are at now - and speculate about what might be happening 6 years from now.


    —Huffduffed by adactio

  4. 047: The Web is Neither Good or Bad…nor is it Neutral. It’s an Amplifier with Jeremy Keith – User Defenders podcast : Inspiring Interviews with UX Superheroes.

    Jeremy Keith reveals how the web is neither good or bad, nor neutral, but an amplifier. He inspires us to not let the future be just something that happens to us, but rather something we make with the small things we do today. He encourages us to build software ethically with our users’ psychological vulnerabilities in mind. He motivates us to not build on rented land, but to publish using the superpower of our own URLs. He also shows us how looking to the past is just as important as looking to the future.

    Jeremy Keith lives in Brighton, England where he makes websites with the splendid design agency Clearleft. You may know him from such books as DOM Scripting, Bulletproof Ajax, HTML5 For Web Designers, and most recently Resilient Web Design. He curated the dConstruct conference for a number of years as well as Brighton SF, and he organised the world’s first Science Hack Day. He also made the website Huffduffer to allow people to make podcasts of found sounds—it’s like Instapaper for audio files. Hailing from Erin’s green shores, Jeremy maintains his link to Irish traditional music running the community site The Session. He also indulges a darker side of his bouzouki-playing in the band Salter Cane. Jeremy spends most of his time goofing off on the internet, documenting his time-wasting on adactio.com, where he has been writing for over fifteen years. A photograph he took appears in the film Iron Man.

    Iron Man Photo Story (4:43)

    On Net Neutrality (13:31)

    What’s “Adactio”? (20:44)

    Is the Internet Good or Evil? (24:41)

    Hippocratic Oath for Software Designers (35:51)

    Resilient Web Design (49:06)

    Why do you Love the Web so Much? (54:26)

    The Power and Generosity of the Community (63:05)

    What Comes Next? (71:34)

    Listener Question? (73:44)

    Last Words to the Builders of the Web (74:18)

    Contact Info (80:15)


    —Huffduffed by adactio

  5. Progressive enhancement and the things that are here to stay, with Jeremy Keith | Fixate

    Published Feb 8, 2018

    Jeremy is the founder of ClearLeft - a passionate group of UX and digital strategists based in the UK - where Jeremy now heads research and development. He is the author of a number of books on web development, including his latest book, Resilient Web Design, has been seen on stages like An Event Apart and South By South West, and is also the creator of the world’s first Science Hack Day.

    Time Stamped Show Notes

    1:00 – Jeremy plays in a band in Brighton called Salter Cane. He also enjoys traditional Irish music and goes to Irish music sessions with his mandolin in tow.

    1:42 – What excites Jeremy most about development is when he can accomplish something that makes somebody’s life easier and improves their day.

    3:11 – Jeremy discusses the difficulties of the contradicting goals among the various parties involved in a web project; namely business, designer, developer, and user goals.

    3:37 – Jeremy uses the example of an e-commerce site to demonstrate how tricky it can be to balance competing goals. For example, if the designer only cared about the user’s experience, everything in the store would be free! However, this is obviously not in line with the business goals.

    4:51 – Jeremy got to know Andy Budd and Richard Rutter through their blogs and books about web standards. In 2005, the three got together and founded Clearleft.

    6:22 – At the time, only a few other companies were focusing on user experience. Adaptive Path in America was one of them.

    8:38 – Jeremy thinks design sprints work well. Clearleft blocks out a few days for a group of people to be fully committed to solving a single, defined problem.

    9:21 – Clearleft uses roughly the same sprint structure as the five-day model advocated by Jake Knapp and Daniel Burka of Google.

    10:56 – Jeremy likes the intensity of a sprint as long as it’s followed by a break. He advises against doing design sprints back to back.

    11:16 – Clearleft works with two different development mindsets: a production mindset, and a quality mindset. The production mindest is for transient products like prototypes, whereas the quality mindest is used when creating production-ready code.

    12:54 – Don’t get attached to prototypes and never evolve them into the finished product. Throw the prototype away once it has answered the question, “will it work?” From there, build the product from scratch using the quality mindset.

    17:38 – It’s easier to write code than it is to convince someone to change their mind. “Computers easy; humans hard.”

    18:16 – Jeremy admits to being an awful procrastinator. However, he says it sometimes works in his favour as he often comes across useful content for his blog whilst “goofing off on the internet”.

    19:53 – Jeremy has an “inbox zero,” but only because people know not to email him and because he archives his mails!

    20:12 – Jeremy mentions Jessica Hische’s term, “procrastiworking”. Jessica believes that, “the work you do while you procrastinate is probably the work you should be doing for the rest of your life”.

    21:01 – Jeremy gets frustrated by the sheer number of development tools available. Whereas before you could just open up the text editor, save some html and CSS and build something that works, now you have to set up a build chain, NPM, Webpack, Grunt, Gulp, Unicorn etc.

    21:58 – Tools are supposed to help you work faster. If you find yourself spending more time on the tool than actually doing the work, then it’s not really a tool at all.

    22:26 – In a talk by Anna Shipman, she suggests thinking of your servers as cattle as opposed to pets. Jeremy likes this advice. Don’t get too attached to your servers or to your tools.

    23:03 – Frank Chimero says that working in the web over the past two decades doesn’t feel like twenty years. Instead, it feels like five years done four times over because of how often devs have had to overhaul their way of working.

    23:47 – Although tools and approaches in the industry are often transient, Jeremy is convinced that progressive enhancement is here to stay. Persistent principles like this are what get him excited about development.

    24:55 – Jeremy is excited about service workers and how they lead to faster sites, offline capabilities, and in turn, an improved user experience.

    31:48 – Progressive enhancement starts with the lowest common denominator – the simplest technology to accomplish what the user needs to do. Jeremy says that the trick is not mess it up as you layer elements on top.

    35:01 – Although progressive enhancement focuses on technology rather than the user, the result is often a much improved user experience.

    Quickfire Questions

    35:38 – Best advice about programming

    Jeremy agrees with Hemingway’s advice: “write drunk, edit sober,” as well as Anne Lamott’s concept of the “shitty first draft”. When writing, get everything out of your head first, then go back and edit later.

    36:49 – Habits for writing better code

    Feed your brain effectively and you’ll produce better work.

    Although Jeremy believes that “produce more than you consume” is great advice in general, he says it depends on the type of material you expose yourself to.

    38:51 – BookThe “A Book Apart” series. Jeremy thinks it’s terrific.

    In 2017, Jeremy didn’t read any two fiction, or any two non-fiction books back-to-back. He believes fiction gives you a kind of empathy that non-fiction doesn’t.

    “A Dao of Web Design” by John Allsopp. Although it was published in 2000, the ideas in it are still relevant.

    41:05 – Inspiring devsHarry Roberts, Sarah Soueidan, Sarah Drasner, Jen Simmons, and Rachel Andrew – not only for the great work they’re doing, but for the fact that they’re sharing it too. To Jeremy, this is what’s great about the spirit of the web.

    Alice Boyd-Leslie, Zara Syversen, Amber Wilson, and Cassie Evans for the amazing work they do at CodeBar in Brighton. CodeBar is a great initiative for introducing a more diverse range of people into the world of building for the web.

    44:07 – How to learn to code from scratchCodePen, Glitch, GitHub, John Duckett and Shay Howe’s books, CodeBar: Being in the same physical space as somebody sitting down with someone who’s going to show you this stuff is going to help you.

    46:32 – How to work smart

    Share what you know.

    Tools, Tips, and Books Mentioned


    Resilient Web Design

    An Event Apart

    South by Southwest (SXSW)

    Science Hack Day

    Salter Cane

    Adaptive Path

    Google Design Sprint


    Progressive Enhancement

    Service Workers

    “Bird by Bird: Some Instructions on Writing and Life” by Anne Lamott

    A Book Apart

    “A Dao of Web Design” by John Allsopp

    Brighton codebar

    Jeffrey Zeldman and Sarah Parmenter’s, “Ask Dr. Web”


    Smashing Magazine


    A List Apart



    John Duckett’s books

    Shay Howe’s books

    Contact Jeremy

    Twitter: @adactio

    Jeremy’s website: adactio.com


    —Huffduffed by adactio

  6. Contracting: Sara Soueidan

    Ever wanted to quit your job and work for yourself, on projects of your choosing? International speaker, trainer, consultant and front end expert Sara Soueidan joins us to talk about the benefits and challenges of becoming a contractor. We’ll look at contracting advice born of her experiences that you can apply to your escape from the rat race or just to learn more about tech contracting.


    —Huffduffed by adactio

  7. Greg Storey, Jina Anne, Jonathan Snook - The Season 2 Finale & Holiday Special - Design Driven

    Welcome to the Season 2 Finale and special holiday edition of Design Driven. Recording this show was a lot of fun, and you’ll hear why as you get into it.

    This episode is great not just because it was recorded in person, but because of who the guests are and the special chemisty we all share.

    It was recorded at a villa in the North Georgia mountains during Web Whisky Weekend. A getaway for people who love the web. This kind of conversation was happening the entire weekend, so we decided to capture some of it for you. If you like what you hear, you should consider joining us at the next event.

    Details at webwhiskyweekend.com

    My guests, Jonathan Snook, Jina Anne, and Greg Storey all have been designing things for the web, and leading the community towards better design for nearly two decades.

    Jonathan Snook is well known for his work with CSS. He’s written several books, spoken at literally hundreds of conferences, and helped thousands and thousands of people through his blog posts and generous contributions to many projects. He’s worked at Yahoo, Shopify, Xero, and done private consulting for a lot of other companies you’ve heard of. And being from Canada he’s one of the nicest people you’ll ever meet.

    Jina Anne has been a prolific designer, blogger, and community leader for well over 15 years. She led the Sass project, runs a Design Systems conference called Clarity, and manages the Design System community on Slack. She’s worked at Apple, Salesforce, Github, Amazon, and several other leading tech companies. She’s a world traveller, whisky aficionado, and lover of sushi and robots.

    Greg Storey created Airbag Industries, one of the very first websites I ever saw and thought, “wow, websites don’t have to look like crap”. He created a style that you just didn’t see back then, which inspired a lot of people to make their websites look great, too. If that isn’t enough, his writing has always been insightful, entertaining, and a bit provocative in the best possible way. He’s run small agencies like Airbag and Happy Cog, and worked for giants like IBM and USAA. He has a keen understanding of the business side of design, is always generous with his knowledge, and makes one of the best manhattans you’ll ever taste.


    —Huffduffed by adactio

  8. Understanding the basics, with Jonathan Snook | Fixate

    Published Nov 30, 2017

    Jonathan is the creator of the influential SMACSS methodology for writing scalable and modular C-S-S. He has worked his magic at Xero, Yahoo!, and Shopify, and has appeared on stage at conferences such as Generate, CSSConf, and the Smashing Conference. With 3 highly-acclaimed books, Jonathan has - a - knack for influencing devs around the world and earning the respect of the top people in the industry.

    Time Stamped Show Notes

    1:56 – Everything feels like an evolution of what came before. Jonathan loves the creativity and design of his work, rather than all the new things that will inevitably come out.

    4:48 – Recognising when you’re not behaving ok is the beginning of how to create an environment where everyone can do the best work they can do.

    6:04 – Jonathan loves Vim. He mentions that there are editors like Atom or Microsoft’s Visual Studio Code that bring a lot to the table, but Vim is his comfort zone. Likewise, when it comes to using Git, he is most comfortable with the command line.

    7:20 – Jonathan likes the ease of use that tools like MAMP being, where running an installer will set up your environment, and there’s very little configuration after that.

    8:02 – Procrastination or “busy work” gets in the way of getting work done. Blocking out social media using the Self Control app helps Jonathan to focus and get into a state of flow.

    10:03 – Larry mentions that he uses a Chrome extension, Kill News Feed, that blocks his Facebook feed.

    10:10 – Jonathan has started reading Deep Work by Cal Newport.

    10:49 – Jonathan has written a blog post in which he describes his approach to learning.

    First level: just take everything in

    Second level: implement an idea that you’ve discovered during a project. If you don’t get the opportunity to try something out on a project, come up with your own project and test out your ideas

    Last phase: teach people what you’ve learnt.

    Check out the full post here

    12:46 – To get to an implementation stage Jonathan will come up with his own projects that take a few hours that allow him to test out one idea and understand things better.

    14:44 – Jonathan explains the importance of understanding the basics. Because of all the libraries and frameworks available, people tend to jump into things at a higher abstraction level. Because he learnt to code before those things existed, he was forced to learn the underlying concepts first. He believes he is a better developer for it.

    15:05 – Jonathan contrasts his learning experience with devs who start with Rails and the built in ORM – he learned by writing SQL queries directly. Jonathan feels the need to understand datasets, joins, and the underlying concepts about how things are done.

    16:09 – Having the underlying knowledge allows Jonathan to write better code

    Quickfire Questions

    17:16 – Best advice about programming

    Understand the basics.

    17:29 – Habits for writing better code

    Good sleep and proper rest help you write better code.

    17:52 – BookScalable and Modular Architecture for CSSDesign Patterns: Elements of Reusable Object-Oriented Software by The Gang of Four

    18:52 – Inspiring devsChris Coyier. Not only is he a genuinely nice guy, but he also does a lot of great work and pumps out great content.

    19:41 – How to learn code from scratch

    Jonathan says that the best way for him to learn is to have a project. If he had to learn to program from scratch, he would pick up a project and start with the basics.

    20:55 – How to work smart

    Stay focused, whether it’s by blocking out social media or using time management tools like the Pomodoro technique.

    Tools, Tips, and Books Mentioned



    Visual Studio Code




    Self Control

    Kill News Feed

    Deep Work



    Design Patterns: Elements of Reusable Object-Oriented Software

    Contact Jonathan

    twitter: @snookca

    website: snook.ca


    —Huffduffed by adactio

  9. Presentable #35: Promoting Yourself as a Designer (And the History of Dribbble) - Relay FM

    My old friend Dan Cederholm joins the show. His work at Simplebits was profoundly influential in the early web, but he may be best known as the cofounder of Dribbble. We talk about this history of that community as well as what it’s like to build a reputation as a designer today.


    —Huffduffed by adactio

  10. Pragmatism and fundamentals, with Harry Roberts | Fixate

    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.

    Quickfire Questions

    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”.

    25:45 – If he had to learn programming again, Harry says he would probably take a similar approach to what he did the first time. He would reverse engineer things and pick them apart. However, this time he’d start with the fundamentals about the internet. After reading Ilya’s book, he learnt that you can learn all the HTML, CSS and JavaScript in the world, but if you don’t understand how it’s getting transported to users, then you’re probably making incorrect decisions.

    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

    Service Worker

    Web Components

    Hacker News


    High Performance Browser Networking

    Contact Harry

    twitter: @csswizardry


    —Huffduffed by adactio

Page 1 of 30Older