Event Notes | Modern Web Development

Event link: https://www.meetup.com/microsoft-reactor-london/events/291954792/

Event video: https://www.youtube.com/watch?v=s2oW-AWCiZg

Sessions/TOC:

General thoughts:

  • Presentations (especially when code was on screen) was grainy at times– even with 1080p fullscreen, as the screen was PIP with presentation and presenter.

⚠️ Note: these generally are unrefined notes taken on-the-fly while watching the event.

  • I claim no ownership over any screenshots taken of the presentations or reproduced text– and only use them for my own learning and notes.
  • These “notes” posts are not search-engine-indexed and only appear on my site for my own archiving purposes.

Session 1: Centering DIVs in New and Exciting Wrong Ways with AI?

w/Chris Heilmann

  • Whatever you do, you’re winding up with HTML, CSS, and JS.
    • Those three have evolved A LOT, but also a lot of what you see (like on StackOverflow) is old old complaints.
    • HTML is now an application framework
    • CSS is now a layout engine.
    • JS is there to make sure users wait 4-5 seconds wait until the page is interactive 😆
  • Enter the AI
    • Examples
      • GPT4 can make websites from drawn wireframes.
        • But it generates code that is.. not good.
      • Galileo AI calls itself “copilot for interface design” or “ChatGPT for UI Design”
    • These generated interfaces are not production ready, accessible (especially to screen readers), or dynamic (used in different environments, responsive, etc)
    • Real web development means: not blocking anyone out, making sure data is safe, and dealing with unknown content (and translatable, accessible, etc), and performant
    • Conversational AI: lowers barrier to access, is highly engaging, and has that scifi feel ™
    • We thought Google/Siri/Alexa/Cortana would be THE THING, but we really use them for things like setting alarms/timers, reminders, asking definitions, unit conversions, etc.
  • “AI will take our jobs!”
    • The Full-StackOverflow Developer
      • “full stack” in that whatever they aren’t specialized in, they go to stackoverflow, find the first result, paste it, and if it doesn’t explode, submit it for code review.
      • But now the machine (AI) does it for us.
    • In “Context Recognition,” the AI even knew to generate code to copy it to the clipboard.
      • Just like well written html structure should give a human developer an idea of what to do with it, a well-trained AI should be able to understand the context/semantics and turn it into decent code.
    • In “Code Explanation” – AI (like GH Autopilot) can do wonders for explaining what the code is doing.
    • Code Translation – AI can help translate code from one language to another.
    • Coders using GH Copilot were 55% faster because they could skip the repetitive/etc work.
    • AI-assisted coding is exactly that– an assisted starting point, not “the work being done for you.”
  • Let’s not OVERDO it.
    • Don’t do double the work because “I can talk to my machine now.”
      • Because you can automate, doesn’t mean “I can do more work,” it means “I can do more sensible and meaningful work.”
      • Use the extra time to talk to project stakeholders, to improve workflow, etc.
    • The shift from writing code to reviewing code will “make us all ‘senior developers’.”
    • Prompt engineering will be a big thing.
    • “How will we get new junior engineers if they’re getting automated away?”
      • You still have to think about code quality and impact. “Where’s SQL injections and performance issues?” The overall SYSTEM design is critical.

Session 2: 99 Frameworks and I can’t Choose 1

w/ Yann Duval

  • Rough guidelines. It ALWAYS “depends.”
  • The “Big 3” are still Angular, React, and Vue.js
  • The “New Kids on the Block” are Alpine.js, Remix, Svelte, and Solid.js
  • Data-driven decisions (but it is biased by the predominantly white male respondents)
  • “Sometimes the boring parts go away by using AI to bootstrap our applications.”
  • Prompt engineering is super important. Wildly different (or none at all) results can be obtained by slight wording changes.

Session 3: Playwright Can Do This?

w/ Stefan Judis

  • Testing was slow, hard to write, and flaky. You might have to wait over an hour for a test to run– only to be faced with false positives.
  • Playwright helps out with that. Demo~
  • “There’s no silver bullet when it comes to e2e testing… but Playwright is a Stellar solution”
  • Treat your UIs like your APIs.

Session 4: Fonts Are Software (and Icons Too!)

w/Tobias Kunisch