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.
Starter.dev: Bootstrap your project with zero configuration!
Starter.dev: Bootstrap your project with zero configuration! Table of contents - Why Starter Kits? - Why Showcases? - Getting Started - What Kits Exist Today? - Collaborate with Us - What’s Next? We’re excited to present you with starter.dev, a set of zero-configuration project kits built with your favorite tools. Each kit is configured with the following so you can focus on building features instead of spending time on configuration: - State Management - Data Fetching - Testing - Storybook - Community standardized ESLint and Prettier We’re also launching starter.dev showcases which utilizes the kits and demonstrates how to build at-scale applications and go beyond the basic TodoMVC app, though we love a good TodoMVC! Why Starter Kits? This Dot Labs engages with its clients to build modern applications, and many of them are requesting greenfield projects using the latest and greatest technologies. While starting these projects, our architects found that they were repeating a bunch of the same steps each time they needed to start a new one. Most meta frameworks ship with the bare minimum, and don’t include features like testing or Storybook out of the box, and configuring these technologies can be time consuming. With this challenge in mind, we sought to create zero-config _starter_ templates to help kick _start_ projects. And thus, starter.dev was born! Why Showcases? During starter.dev’s development, Minko Gechev from the Angular team approached us about a project to help enhance Angular education tooling. You can learn more about this specific effort in the blog post announcing the GitHub Clone Showcases. Minko’s idea was to demonstrate building applications that utilize these key features of the Angular framework: Routing Forms State Management API interactions - REST or GraphQL Authentication This idea laid the groundwork for many of the starter kits we created. We’ve developed several GitHub Clone showcase to help developers understand how to best utilize the kits, and build at-scale applications that accompany our kits. Getting Started Getting started with starter.dev (pun intended) is as simple as running a scaffolding script: - Run npx @this-dot/create-starter to run the scaffolding tool - Select one of the kits from our library from the CLI - Name your project - cd into your project directory, install dependencies using the tool of your choice. After completing these steps, you can start building features in your new project immediately. What Kits Exist Today? This Dot is happy to ship starter.dev with the following kits: - Angular + Apollo Client + Tailwind CSS - Angular + NgRx + SCSS - Create React App + RxJS + Styled Components - Next.js + TanStack Query (formerly React Query) + Tailwind CSS - Remix + GraphQL + Tailwind CSS - Vue 3 + Apollo Client + Quasar - Qwik + GraphQL + Tailwind CSS - SvelteKit + SASS Each kit ships with the following out-of-the-box: - Testing via jest or vitest - Storybook - ESLint and Prettier Configuration - State Management - Data Fetching for either REST or GraphQL - Some starter components to demonstrate global state management and data fetching These starter kits don’t ship with E2E testing libraries, such as Cypress or Playwright, for now, because these tools come with amazing out-of-the-box configurations and do not require additional setups. However, the showcases use Cypress tests consistency which you can check out in the showcases repo. Collaborate with us Starter.dev began as an internal need, but anyone can benefit from the existence of these kits. While there is a set structure for building out new kits, This Dot welcomes requests for new kits. We’ll work with you to determine what the structure of your kit should be and then scaffold out all of the issues needed to complete the work. Our team will help build out new issues, but we encourage the community to jump in and help build as well. This is a great opportunity to collaborate with the community as both a learner and a teacher. At This Dot, two of our guiding principles are: Getting Better Together and Giving Back to the Community. We believe that starter.dev is a perfect opportunity for us to get better through collaborative efforts with community members, and helping the community through what we hope is a great open source resource. What’s Next? We want to get this tool into your hands, and improve what exists. Tell us what is working for you and not, and we’ll do our best to address those issues. Next, we want to expand our library of kits. Tell us what are some kits you would like to see. We’re looking into building out kits for SolidJS and Node backend technologies as part of our next iterations, but we’re sure there other tools people would like to see. Finally, we’ll be publishing some additional educational materials around some of the decisions and design patterns we’ve chosen for each kit and showcase. We’re excited to share our process with you....
Nov 7, 2022
4 mins
Introducing Framework.dev
Have you ever started to learn a technology and felt overwhelmed by the amount of information out there and became paralyzed, not knowing where to start? We at ThisDot can certainly relate, which is why we are creating framework.dev...
Mar 3, 2022
3 mins
Double Click: Try Out the New Releases for jQuery UI & Lit
Welcome to the Double Click! This is the weekly blog series that shines a spotlight on emerging technologies, technological concepts, and community projects that enrich the JavaScript Ecosystem! This week, I’m diving into some updates from two web development technologies that have recently seen updated releases: jQuery UI & Lit. jQuery 1.13.0-rc.2 jQuery UI is a popular JavaScript library that sees wide use across the web despite the technology not previously receiving an update in about five years. Omg! That’s why I’m thrilled to see jQuery UI receive some much needed love in the form of this 1.13.0-rc.2 release, which contains no breaking changes, but sort of polishes off some of its deprecated features to support wider use in modern user interfaces. The jQuery UI team has noted that it has struggled over the years to find reliable contributors, which may explain why it has taken five years to see any updated releases. However, the team notes that they presently don’t intend to significantly expand the framework, and that it will now enter a maintenance phase to simply ensure that it is compatible with future jQuery releases, and secure. Lit 2.0 Lit has gone through a number of changes with this most recent release which officially launched last week. They have a new logo, a new name (having previously been called "Lit Element”), a new npm, and a ton of new features. If you aren’t familiar with Lit, it is a library that simplifies and supercharges the process of building and implementing web components from Google. With this new release, the Lit team has slashed the size of the library to 6KB, just a fraction of the size of your average JavaScript framework, which increases its speed and performance. But this isn’t the only significant improvement to the technology as the Lit team has also introduced new features like a class-based API for directive authors, templating enhancements, and reactive controllers. But what most caught my attention was the significant improvements to the Lit site and documentation. Aside from undergoing some major UI transformations, the new Lit website also features detailed documentation that includes a sandbox where users can test out Lit 2.0’s newest features in the browser! What are you excited about lately? Make sure to share with me on twitter @ladyleet....
Oct 1, 2021
2 mins
React 18: Concurrency and Streaming SSR
React 18 The React team just announced React 18 alpha, along with their plans for release, earlier this month. Included in that announcement is the creation of a working group to help prepare the community for the new features, nearly all of which can be gradually adopted. Concurrency (Concurrent mode begone!) So we finally have an answer to what we've been wondering about for the past three years! React 18 will ship with a new concurrency model, but not a completely separate concurrency "mode". Concurrency will come from a new set of features, and just happen automatically when those features are used, so it is completely optional. createRoot will now be the way that we initialize the root of our React applications going forward as you can see here: ` This new createRoot also enables all the new concurrent features- a subtle distinction from a "mode" 😉. This model allows you to render work and events to be interleaved together, and allows you to assign priority to various kinds of updates. This gives us better ways of keeping UI fluid and performant. Priority To achieve concurrency, React now uses a cooperative multitasking model which runs a single thread that can be interrupted based on priority. Interruptions happen in between rendering various components. Since the time it takes to render a component is usually very small, it provides a very granular way to interrupt when high priority work comes through. If you'd like to read more in depth, check out this topic in the working group. startTransition One of the new concurrent features is startTransition, which allows us to specify updates that might be lower priority- aka "transition" updates. Specifying updates as "transition", enables urgent updates to interrupt them, allowing interactions to be more performant. To do this, we'll use a new API: ` Urgent vs Transition Updates Urgent actions are things like clicking, hovering, scrolling, typing, or any other action where the user expect things to happen instantly as they do natively in the browser. Transition updates are more "React-centric" things like handling and managing UI state. Currently, all updates in React 18 and below are considered urgent. The way this is worded seems to imply a future where all updates are considered transitions, and we only need to specify urgent updates. I think it was done this way to make the adoption even more gradual, because I think realistically, most updates should be transitional, not urgent. However, people need time to get used to the idea of specifying priority before everything actually gets de-prioritized. Automatic Update Batching A small but significant change is that now all updates are automatically batched. You may have noticed, when building React apps, that any time you put multiple setState calls next to each other in something like an event handler, React combines them into one update so that only one render occurs. However, you may have also noticed that this does not occur in things like callbacks, setTimeout, Promises, etc. ` flushSync However, maybe you were relying upon that non-batching behavior! Well, there's a new API to opt-out of batching (although the team says this should be uncommon): ` Streaming Server Render Probably one of the most impactful changes in this set is now the ability for server-side rendering or SSR to be streamed to the browser, enabling partial page sections to be rendered before the entire page is ready. This should speed up the time it takes for the user to see anything on the page. Streaming + Selective Hydration What does this mean exactly? So first, current SSR efforts do the entire render of the HTML page, and wait until it's completely finished before sending it to the browser. The new method allows the page to be broken up into chunks using . Now, the server can start streaming HTML as soon as one of these chunks is ready. Even if that HTML gets to the browser faster, it still needs to be hydrated. Previously, this was an all-or-nothing operation, requiring the entire page's JavaScript to be downloaded. Now, we can use a combination of and React.lazy() to achieve partial hydration as well. If you'd like to see an example of how the server handles this, the React team put together a nice demo: Event Replay and Priority If that wasn't enough already, the team also found a way to prioritize hydration for user interactive sections. React will now record interactions with various parts of the page, and prioritize hydration based on what has been interacted with. This is really elegant because it lets things that the user cares about render as quickly as possible. 👏👏👏👏 Suspense is Now Very Important These new features are all enabled entirely by the component. Wrapping parts of the page that may take longer to load enables their execution to be deferred while the rest of the page gets rendered, streamed, and hydrated, enabling things to be faster and quicker to interact with! If you'd like to see an in-depth explanation, check out this topic in the working group complete with diagrams. Conclusion This is an extremely exciting update with lots of promise towards better performing apps and faster load times! Increased control over what gets rendered and hydrated first will lead to much better user experiences, especially on devices that struggle to load JS efficiently. I'm very glad we will finally get an answer on concurrency "mode" too! 😂 If you're excited to try these new changes, go ahead and install the alpha: ` The React team is looking for feedback through the working group, so feel free to participate in discussions there. I have to give lots of credit towards @swyx, who did a lot of investigation work to point out key features from the release in this thread. Check it out! Thanks!...
Jul 13, 2021
5 mins
What Can You Do with Tailwind 2?
Tailwind CSS released their new 2.0 version November 18th, 2020 with a spectacular launch trailer and new website redesign. The new version includes a plethora of features including new color palette, ring and form utilities, and dark mode, among others!...
Nov 24, 2020
7 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.