Day one of React Alicante 2023
Me and Ástráður my co-worker are on React Alicante, I'll add my own take aways from the talks and tell you more about this conference
The conference took place at Palacio de Congresso de Alicante. It's nice venue, The chairs where nice and comfortable, the stage was big enough and the sound was good.
I'm going to add my take aways from the talks here, I'll try to keep it short and sweet. At times I forgot to write my take aways down, hence why there are not take aways from all the talks. These take aways are nota summary of the talk, and some of them might even be from me mis-understading things. So read them with a grain of salt.
React - The good parts
React is and has fundamentally been a developer health tool. In this talk, we will dive deep into some of the niceties React delivers for us with live code, and understand why the common conventionality of React is to move closer to server-side applications.
React is not perfect, but the mental model for React is good, it's easy to understand and it's easy to get started with. All of the React frameworks have pros and cons.
SolidJS for react developers
In 2023, Solid JS is poised to be the next big frontend framework. Its underlying fundamentals are fundamentally different from React's.
This talk will expose my learnings as I have approached Solid from the perspective of a React developer.
Solid is very interesting!
Couple of take aways from this talk:
- Signals are cool
- Signal values are getter functions
- Component function is only called once
- You can only use the signal getters in the JSX.
Playing your tests wright
It's time to play your tests wright. Let's take a look at how to write good tests and cover some of the best practices for testing, choosing the right locators and more. Let's make testing easy and fun by generating tests on user actions. Then lets explore some cool tips and tricks to help you write better tests.
I think we will use Playwright to do our end-to-end testing. It looks like a great tool!
Testing best practices:
- Write end to end tests
- Test closer to the user
- Use locators in Playwright
- avoid testing 3rd party dependencies
- Use the codegen in Playwright
Building text containers in canvas
Text Containers are one of the most widely used features when it comes to whiteboard, isn't it?
In my talk, we will be diving into how these text containers work under the hood in Canvas and I will also be sharing my experience building text containersin Excalidraw (https://excalidraw.com/) - A virtual free Open-Source collaborative end-to-end encrypted canvas based editor for sketching hand-drawn diagrams.
The textarea is inside the container in Excalidraw, hence why it can be moved around with its container.
Word wrapping is hard. Each element on the Canvas has a JSON where various attributes are stored, like the text, the position, the size, etc.
Before the conference this was one of the talks that I was the most excited for. I use excalidraw quite a lot and I'm curious to know more about it.
Pushing boundaries to the edge
While the technology goes further and further, web development tries to get closer to the user. CDNs and web servers are evolving, and they now offer us the possibility to execute server-side logic without depending on a unique data center located in aspecific place in the world.
The biggest take away here is that it matters a lot to have good talk. This talk was great! Facundo had a great analogy to compare the Edge with breweries. When you can connect easily to the audience the talk will sit longer in their mind!
Practical guide to building accessible forms in React
Web forms are crucial for user interaction on the web, and to ensure our products provide an inclusive experience for all, we need to build them with accessibility in mind. In this talk, we'll dive into best practices and practical tips for crafting accessible forms that won't leave anyone behind
We’ll start by diving into what accessibility is and how assistive technology works on the web. With this foundation, we’ll go through common patterns in forms and how to implement them accessibly. We’ll talk about: labelling, providing instructions, errors and validation, testing, managing focus, and more – all backed by practical examples in React.
Accessibility is important! And it's not that hard to get started with, but note that it's also not black & white. Make sure you are honest and think abut the user.