Developer Insights
Join millions of viewers! Our engineers craft human-written articles solving real-world problems weekly. Enjoy fresh technical content and numerous interviews featuring modern web advancements with industry leaders and open-source authors.
State of A11y Wrap-up | April 19th, 2022
In this wrap-up for State of A11y, we will talk about the key points presented by our hosts and panelists. I'll lay out who our hosts were and who was a part of our list of speakers. Our experts spoke about how we can improve developer tools like CMS' to improve the accessibility development process for those who use no-code tools. They also gave their thoughts on the top 1,000,000 homepages from an accessibility perspective; you can view that report here. In case you missed the event or want to rewatch, you can head over to Youtube to rewatch State of A11y otherwise, keep reading! First, here is a list of everyone who attended State of A11y: Hosts - Rob Ocell, Team Lead, and Software Architect, @robocell - Jesse Tomchak, Senior Software Engineer, @jtomchak Panelists - Anna E. Cook, Senior Accessibility Designer, Northwestern Mutual, @annaecook - Adrián Bolonio, Accessibility Software Engineer, GitHub, @bolonio - Amy Carney, Accessibility Specialist, Digilou, @click2carney - Amina Aweis, Accessibility Advocate and Founder of RecipeMate, @yeahshewrites - Albert Kim, Accessibility Lead, Korn Ferry, @djkalbert - Crystal Preston-Watson, Senior Digital Accessibility Analyst, Salesforce, @ScopicEngineer - Beatriz González Mellídez, Head of Accessibility & Digital Inclusion, Central Europe at Atos, @b_atish Accessibility is an after-thought for most, but why? In recent months, WebAIM released a report named "The WebAIM Million" which focuses on the state of accessibility for the top one million homepages. This report indicated a few key points that our panelists spoke about. Most websites being built in recent years are by those who might not be entirely technically inclined. The developers building these web pages might be using no-code solutions that don't entirely support the creation of web elements with accessibility in mind. On the other hand, out-sourcing development is not an uncommon practice. You might run into working with developers who haven't made web accessibility, a priority. This goes hand-in-hand with how accessibility has taken a back seat in development. The most common reason behind accessibility not being important is largely due to ignorance. If there was a focus on educating developers and creators (not excluding managers either), there would be a greater focus on making sure your websites work for every kind of person. A lack of education is one of the larger theories on why accessibility is lacking in most cases. The web does move fast; faster than it has in recent points in history. So many tools and websites are being created on a daily basis that often things like accessibility get left behind in favor of development speed and lack of priorities. The problem doesn't explicitly lie with developers. "Blame" (for a lack of a better word) can also be attributed to individual users too. For example, when posting images on social media websites, alt text isn't used nearly enough. To be a champion for web accessibility, one might take advantage of such opportunities to improve the overall integration of accessible tools. How culture and complexity impact accessibility There's a growing gap between accessibility and usability - you need one with the other. If you don't have accessibility, you won't have usability because, without accessibility, you limit the usability of your website for users who require accessibility. It sort of goes full circle. Designers and developers must keep the entire scope of usability in mind when creating their designs and developing their websites. But, it's not easy to keep these aspects a priority, so how do we do that? Some would argue that we need a culture shift that emphasizes user empathy. If you have empathy for all users of your site regardless of their limitations or not, you will consider all types of people. When you have empathy for your users, you will consider those who might require accessible features. With a culture change, comes compassion, empathy, and a greater focus on prioritizing those aspects that may have been left aside. Similarly, an increase in homepage complexity has also contributed to the fall of accessibility. While the number of elements and interactions increase on any given webpage, the state of accessibility falls or is largely forgotten. However, while these complexities increase, so should a focus on accessibility. How Twitter is helping normalize accessibility Twitter has, for the most part, always had the ability for you to add ALT text to your images. However, you could only see this ALT text (or see if a particular image had ALT text to begin with) if you were using a screen-reader. They've added a small badge to each image to show that ALT text has been added. This lets you know if the image you're about to retweet has accessibility in mind. By putting this feature in front of the eyes of every user, they are helping contribute to the normalization of accessibility features which in turn will encourage others to do the same. If you need a little accessibility accountability, check out this fun bot on Twitter named: Caption Clerk. When should I think about it? In short: from the start. It should be a priority during the early design and developing stages of whatever you're building. Rather than have it as an afterthought, make it a priority from the start and ensure it never loses focus. You might consider hiring people with disabilities to gather valuable feedback from them and allow them to contribute to the overall growth of your product. Having people with disabilities directly involved in the building or designing of your product ensures that accessibility will always be impactful. Building a career in accessibility Being in this space can be boring. There's a lot to learn and while it is universally helpful, it's not too thrilling. While lacking in the entertainment department, it emphasizes a deeper, human aspect: integrity. Designing with integrity is crucial for making the web more accessible. It forces you to account for users who might benefit greatly from accessible components. When you design and develop with integrity, you automatically include accessibility on your priority list. Teaching accessibility to others is not an "us vs. them" situation. We need to come alongside each other and prop each other up to teach us the importance of accessibility and growing in the areas we lack. It can be taught, and likewise, it can be learned. But it needs to happen in a team environment. Furthermore, prioritizing accessibility goes further up the chain than just developers and project managers. It goes all the way up to the C-Suite level (CEOs / CTOs). If they make it a priority, then it will trickle down to the rest of the teams. However, as a developer, don't feel forced to learn accessibility. Instead, lean on those who are experts in the space already to help you develop more usable applications. If needed, you might also look to find an accessibility mentor. Conclusion In the end, accessibility should always be a priority for you and your teams. Designing and developing with integrity allows you to provide a greater usability experience for all kinds of different users. Usability without accessibility isn't very usable at all....
Apr 27, 2022
5 mins
JavaScript Marathon: Exploring Nuxt 3 and Composition API
Wrapping up our week of free live trainings, @temitopedavid_ walked us through setting up and using Nuxt 3 with the composition API. It's pretty in-depth and for the sake of this wrap-up, I will direct you to the repo itself so you can look through it and see how it works. The event is also available on Youtube for you to watch as well. Nuxt 3 is a very powerful hybrid Vue framework. If you'd like to learn more, check out the documentation....
Apr 6, 2022
1 min
JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract
Writing custom CSS throughout your app is time-consuming and error-prone. Relying on Tailwind or similar frameworks locks you into their way of doing things. But with Vanilla Extract, you can pursue the happy medium path: write type-safe CSS, create your own utility classes, and compile everything down to static CSS files at build time. Tom walked us through how to setup and use Vanilla Extract to create themeable CSS architecture in our example app. Helpful links - GitHub repo: https://github.com/tvanantwerp/vanilla-extract-javascript-marathon/tree/empty-for-live-code - Youtube video: https://www.youtube.com/watch?v=LxUVASrxxu4 To learn more about Vanilla Extract, head over to their docs for a more detailed look into what working with Vanilla Extract is like. With Vanilla Extract, we don't need to run any CLI commands like other processors. We create the appropriate *.css.ts files which get evaluated at build-time, and turned into properly scoped class names. One thing to point out is our example is uses Vite. Don't forget to look at the config file we've modified that will look slightly different than the basic one created by the Vite CLI. Install the dependencies You can also reference the complete setup docs. > npm install @vanilla-extract/css @vanilla-extract/webpack-plugin Create our folder structure Let's get started by creating our folder structure that will hold our theme definitions. In the end, your folder structure is entirely up to you, but for the sake of this example, we will create a theme folder and within that we will add theme.css.ts. In this file, we will describe our different themes. We also have a sprinkles folder which is where we define our "utility classes" of sorts. It operates in a similar way to how TailwindCSS operates. These sprinkles are styles we can include in other parts of our code. We can see in our sprinkles file how we have defined certain custom styles. And if we head over to our button.css.ts, we can see where and how our custom styles are used. It's like creating style variables within our CSS so we can keep a relatively consistent design feel across our app. Our defined CSS styles will return classes with our properties defined. This is an example class from our Button/index.tsx: className={buttonStyle[color]}. This is a simple way to add different variants and styles to our components without bloating the component itself. For the sake of covering all our bases, we also defined a few global styles. Wrap-up Have a look at the example repo for a detailed look at how to use Vanilla Extract in a more in-depth way. We hope this has helped you understand how Vanilla Extract is used at a higher level, and how you can leverage it to create your own type-safe CSS styles....
Apr 6, 2022
3 mins
State of Vue Wrap-up
State of Vue recently wrapped up. Our Vue contributors and library authors gave us insights into some pretty large changes coming to Vue. There's a new state management player where Pinia will be taking over instead of VueX, a new way of writings scripts which seems to be picking up steam, and other changes we think are interesting. In this wrap-up, I'll summarize our State of Vue event with key takeaways and things to look forward to in the future. If you'd like to see the event in full, check it out on Youtube. Pinia replacing VueX 4 Pinia is VueX 4 successor. There won't be a VueX 5 because that's what Pinia is. It has a slightly different API, and works very well with Typescript. There are some arguments around whether useing VueX would be better for larger, complex projects, but Pinia is definitely becoming very popular in its own right. The main point for using Pinia over VueX 4 relates to Typescript users. VueX 4 does not work well with Typescript; Pinia aims to fix that. Keep an eye out for Pinia. There will also be documentation changes in VueX 4 to inform developers of this namechange, and that Pinia will be a VueX 4 upgrade. Volar Volar is being sponsored by Evan You for full-time work. Some of this works includes refactoring the internals of the language service. This refactor will help open the door for contributions in the near future. If you'd like to follow Johnson on Twitter as he works on Volar, you can follow him at @johnsoncodehk. Script Setup vs Composition API Script setup was hoping to became the “new way” of writing, and the community seems to be working in that direction. The State of Vue panelists agree that using script setup is more exciting to write with, and offers greater flexibility. Reactivity transform - Allows props to be destructured (with default values too) while still being reactive - Type-safe - Assignment based reactivity - Docs - Discussions Other interesting points - Vitest - Vitest Discord - swrv...
Mar 25, 2022
2 mins
State of Web Performance Recap
We recently wrapped up our State of Web Perf event host by Rob @robocell and Jae @dulcedejae. There were many great topics proposed and questions asked. In this article, I'm going to give you a quick rundown of the event. However, I would strongly encourage you to watch State of Web Perf on Youtube. What is State of Web Perf "State of Web Performance" is an event hosted by This Dot Labs where you'll hear from a panel of various web performance experts. Key points Even though there are a lot of tools, libraries, frameworks, and methodologies, a continued focus on web performance means that things will continue to get better. An increased focus on reducing Javascript bundle sizes means the web will continue to prioritize web performance, although as developers, we should always be keeping performance and speed in mind. Javascript bundle sizes One of the stumbling blocks with measuring web performance is getting an idea of how big of a stumbling block bundle sizes actually are. With the availability of fast network speeds, are Javascript bundle sizes something to keep close to heart? Most would argue yes. Not only does it help your site load faster in all aspects, even those who may not have high-speed internet or a reliable data connection, can still experience your site. This does go without saying that bundle sizes aren't the only thing we need to worry about in web performance. Web builder performance issues More often than not, website builders struggle in the web performance department. If you've used one, you know. Mostly recently companies such as Shopify have been creating dedicated web performance departments focused on creating the most performant product. It's always a great idea to address web performance from the beginning that way you stay ahead of the game and won't struggle to fix performance issues later down the road. Things to consider 👉 Always be aware of the trade-offs when it comes to your webpage! 👉 Keep in mind the number of #npm packages, fonts, or images for example! 👉 Make good use of devtools to measure the web performance impact. 👉 The less JavaScript you have to render in the browser, the better your web performance will be! 👉 Lots of frameworks and libraries are working hard to address this issue 👉 Testing and user metrics are key components to measuring we performance Image handling Images are complicated. JPG and PNG used to be the most popular format for photos, but when it comes to photos on the web, it could be better. Web performance is a fast growing format that is great for the web. Following close behind is WebP. Definitely check them out if you'd like to improve photos on your website. This wraps up our State of Web Perf recap!...
Mar 3, 2022
2 mins
State Of GraphQL Wrap-up
One of the first events of 2022 wrapped up in a spectacular way. The State of GraphQL included many wonderful people and presented a number of interesting topics and questions. Before we get into the key take-aways, I would highly suggest you watch the live stream for a more in-depth and highly entertaining experience. Let's get started with introducing our hosts and panelists for The State Of GraphQL. 🗣 Hosts 👉 Dustin Goodman - @dustinsgoodman 👉 Eve Porcello - @eveporcello 🗣 Panelists 👉 Roy Derks - @gethackteam - Hackteam - StepZen 👉 Janessa Garrrow - @janessagarrow - Apollo 👉 Milecia McGregor - @flippedcoding - Iterative 👉 Jamie Barton - @notrab - Graphql Screencasts - Graph CMS: The GraphQL Headless CMS Key Points The State of GraphQL live-stream consisted of numerous questions, and discussions presented by our panelists and viewers on Youtube. There are a lot of advantages when using GraphQL. Having one endpoint to dynamically and effectively gather different types of information is useful. However, one of the biggest obstacles for people switching from REST to GraphQL is the relatively complexity of setting up and using GraphQL. There are more and more tools coming to market that aim at easing that burden. Some of the questions that were asked were: - If you could add one thing to the #graphql spec, what would it be? - With so many GraphQL tools and options out there, how do you choose which to use? Based on comfort? Requirements? Project scope? - Are there any community events that you’re excited about? - Is GraphQL a viable communication protocol for IoT devices? - Right now the hardest thing about implementing GraphQL is the scheming (coming from REST). Is there anything that has been a blocker for you in implementing GraphQL? - Where do you lie on the REST vs GraphQL scale? - What are you most excited about in the GraphQL space right now?...
Feb 8, 2022
2 mins
State of Headless CMS Wrap-up
We recently hosted State of Headless CMS where we were joined by some very talented people to talk about a growing ecosystem. There are a lot of problems that a headless CMS can solve when it comes to indie development, and even small restaurants and shops. Before we dive into the key points of the event, I'll give you a brief introduction to the hosts and panelists. Hosts - Jesse @jtomchak - Keionne @KeionneD Panelists - Kapehe - Senior DevRel, sanity.io - @kapehe_ok - Daniel Madalitso Phiri - DevRel, Strapi - @malgamves - Samuel Snopko - Head of Developer Relations, Storyblok - @samuelsnopko - Stefan Judis - Dev Rel, Contentful - @stefanjudis - Arisa Fukuzaki - Dev Rel Engineer, Storyblok - @arisa_dev There were a lot of great discussions during this event which is why I want to suggest that you head on over and watch The State of Headless CMS on Youtube to hear all of the great discussions. Who is a headless CMS for? Headless CMSs give developers the ability to use a CMS without being restricted to using the CMS platform itself. It's like using Wordpress, without having to actually use Wordpress itself. This enables developers to build more customized solutions for their clients. Some questions to ponder - What are some Headless CMS technologies that you're excited about? - How do we help the little shop manage their content? - What problems does Headless CMS solve for you? We want to give a huge shout out to our hosts and panelists for participating in the State of Headless CMS event....
Feb 8, 2022
2 mins
State of React - What's new in the React ecosystem?
We recently wrapped up our highly anticipated State of React which featured a group of powerhouse developers. If you were unable to make it, don't worry, we have you covered! In this article, I'm going to share with you some of the key takeaways from the event. If you want to watch the event to be up to date on everything that happened, check out State of React on Youtube! Before we get into the highlights, let me introduce our host and panelists. Host Our host for State of React was our very own Dustin Goodman! You can find him on Twitter as @dustinsgoodman! Panelists Joining Dustin was: 👉 Aakansha Doshi - Excalidraw, ex HackerRank - @aakansha1216 - React 18 Working Group Member 👉 Shaundai Person - Senior Software Engineer @ Netflix - @shaundai - React 18 Working Group Member 👉 Tanner Linsley - VP of UI/UX @ nozzle.io - @tannerlinsley - ReactQuery & React 18 Working Group Member 👉 Dominik Dorfmeister - @TkDodo - react-query maintainer 👉 Mark Erikson - Software Engineer @ Northrop Grumman - @acemarke - Redux maintainer 👉 Ian Sutherland - Maintainer of Create React App - Node.js collaborator - Principle Software Engineer @ Neo Financial - @iansu 👉 Delba de Oliveira - Developer Advocate @ Next.js & Vercel - @delba_oliveira Key Takeaways - React Query will work without an internet connection in v4 - Tracked Queries will be turned on by default in v4 - Look for React Query v4 some time next year! - React Location makes storing state in the URL incredibly easy - Create React App has JUST released v5.0 with tailwindcss out of the box - Nextjs compiler support for react 18 - Redux toolkit - SSR Support - RTK Query mutation status values can be shared across components via 'fixedCacheKey' - createSlice now lazy-creates reducers - React-Redux v8 - typescript conversion and removed legacy options - API cleanup - React-Redux v8 is still in beta - RxJS - Huge bundle size changes with #rxjs v7. It's almost half the size of v6 - Better typings - Multicast simplified - Cleaner way to create connectables - Improved retry ergonomics - Is now at over 30m downloads a week! Keep an eye out for some amaing events coming early in the new year! You can follow us on Twitter at @ThisDotMedia for future updates!...
Jan 4, 2022
2 mins
JavaScript Marathon: How to Write Clean Code
Writing clean code is an essential part of any developer’s toolkit. Not only does it ensure legibility, but it also helps you and other developers understand what your code is doing at a quick glance. In this article, I’ll share with you the key takeaways from Nacho Vazquez’s session on writing clean code. These points can be found in Uncle Bob’s book “Clean Code: A Handbook of Agile Software Craftsmanship”. Host Nacho Vazquez @nacho_devc - Software Engineer, This Dot Labs Key Takeaways - Clean code is more of an art and intuition!! - To become effective at writing clean code, constant practice is needed! - In order to write clean code, a combination of proper naming with variables, functions and components is needed. - Don't be afraid to use long names for your variables Naming Lessons for Programming! - No abbreviations - Avoid disinformation - Make meaningful distinctions - Pronounceable names - Searchable names - Use domain-specific names - Abstraction and code-splitting is effective, yet needs to be managed carefully - Abbreviations - Don't Repeat Yourself - Write Everything Twice - Avoid Hasty Abstractions - You Ain't Gunna Need It - Don't abstract prematurely. Wait until it becomes necessary (if your code starts to become hard to read for example). If you missed the #javascriptmarathon make sure to head on over and watch it. Nacho shares a lot of useful information in such a short period of time alongside practical examples....
Dec 6, 2021
2 mins
#StateOfA11y - Why A11y is so important
🤔 What is accessibility and what does it mean on the web? How can we improve accessibility within our websites? Is accessibility something we can overlook or put on the back burner? If you’ve been curious about what accessibility is and how it plays a role on the web, this talk will definitely be one to watch. In this article, I will talk about the key points and takeaways from the #StateOfA11y event hosted by Rob Ocel and Dacey Nolan. Before we get started, let’s take a look at our panelists! Hosts Rob Ocel @robocell - Team Lead and Software Architect, This Dot Labs Dacey Nolan @dacey_nolan - Software Engineer, Trainual Panelists Marcy Sutton @marcysutton - Owner and Lead Engineer, Modern Sole Design Tim Winfred @Contimporary - Front-End & JavaScript Web Developer, Curative Anna E. Cook @annaecook - Senior Accessibility Designer, Northwestern Mutual Carie Fisher @cariefisher - Sr. Accessibility Consultant and Trainer, Deque Nicolas Steenhout @vavroom - Independent Accessibility Consultant Crystal Preston-Watson @ScopicEngineer - Quality & Accessibility Engineer, Salesforce 🔑 Key Takeaways - UX promotes effective accessibility. If the UX is poor and fails to deliver on key points, accessibility will also suffer. - Want to become effective at writing accessible code? Try going to your favourite websites and using your keyboard to navigate! Once you're familiar with how it works, you can improve your code in accessibility! - How does the increase in remote work affect accessibility? Introducing more people to websites and applications to help facilitate effective communication and work. - Accessibility exists in many forms and exists beyond the web in more ways than one - How do we get better at onboarding ourselves and others into building better accessibility? Documentation. - The future of accessibility is: choice. Dark mode, enlarged text, animations. Having a single source of truth is the future! - Want to be effective at writing accessible code? Bring it back to the basics! Learn how to write proper HTML! 💭 Have any questions or points to share? Use #StateOfA11y on Twitter and talk with us! 📺 View the replay here for fun stories, great tips, and faces to names! 🤝...
Nov 18, 2021
2 mins
Let's innovate together!
We're ready to be your trusted technical partners in your digital innovation journey.
Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.