Redux Toolkit 2.0 release
This change is considered a major version of the library and comes with breaking changes because, as the core team declared, it has been 4+ years since they released Redux tool kit...
Mar 8, 2024
3 mins
Build Beautiful Storefronts Quickly with Shopify and Next
Introduction Shopify is one of the world’s best e-commerce platforms for building online stores of any size. It’s a hosted platform, which means you don’t have to worry about the technical details of managing a server or dealing with software updates. You can focus on building your business instead. Next.js is a React framework for building static and server-side rendered applications. It’s a great choice for building e-commerce storefronts and enables you to do more customization, and it’s what we’ll be using in this article. Shopify Next.js Starter Kit Recently, we’ve created a starter kit that you can use to build your own Shopify storefront with Next.js. It’s a great way to get started quickly especially since it is powered by the new App Router and React Server Components, and it’s completely free. You can find it on GitHub here: Shopify Next.js Starter Kit We also have a live demo of the starter kit here: Shopify Next.js Starter Kit Demo Getting Started To get started, open your terminal and run the following command: And choose Shopify, NextJS 13.4 and Tailwind CSS Then, choose the project name And everything ready to go, next steps are to go to the directory and install the packages Setup Shopify Account Next, you’ll need to create a Shopify store. There are two ways to get a Shopify account: 1- You can do this by going to Shopify and clicking on the “Start free trial” button and create a Shopify account. 2- Or you can create a Shopify Partner Account for development purposes Once you’ve created your store, you’ll need to create a private app. You can do this by going to the “Apps” section of your Shopify admin and clicking on the “Manage private apps” link. Then click on the “Create a new private app” button. Give your app a name, and then click on the “Save” button. You’ll then be taken to a page where you can see your API credentials. You’ll need to copy these credentials into your .env.local file. You can find the .env.local file at the root of your project. It should look something like this: Modify the design After adding the required secrets, run npm run dev to run the development server locally The project structure is simple and easy. Since we are using the App Router, all of the routes are under /app folder and the shared components are under /components folder. This structure make it easy for you to edit and modify easily on the design Also all of the components have been written in a clean way with Tailwind CSS to make it easy for you to edit it. Deploy Since it’s a Next.js project, its deployment is easier than ever, most of the modern host providers support deploying it with just one click like * Vercel * Netlify * Cloudflare Page * AWS Amplify * Render * Fly.io Just push the project to a remote git repository using GitHub and connect it to the hosting provider of your choice. Conclusion In this article, we’ve shown you how to build a Shopify storefront with Next.js with our new starter kit from Starter.dev. We’ve also shown you how to use the new App Router and React Server Components to build a fast and performant storefront. We hope you’ve enjoyed this article and found it useful. If you have any questions or comments, please feel free to reach out to us on Twitter or GitHub. We’d love to hear from you!...
Nov 1, 2023
4 mins
Bun v1.0
On September 8, 2023, Bun version 1 was released as the first production-ready version of Bun, a fast, all-in-one toolkit for running, building, testing, and debugging JavaScript and TypeScript. Why a new JS runtime You may ask, we already have Node and Deno, so why would we need another javascript runtime, Well yes we had Node for a very long time, but developers face a lot of problems with it, and maybe the first problem is because it’s there for a very long time, it has been changing a lot between different versions and one of the biggest nightmares for JavaScript developers these days is upgrading the node version. Also, Node lacks support for Typescriptt. Zig programming language One of the main reasons that Bun is faster than Node, is the programming language it has been built with which is Zig. Zig is a very fast programming language, even faster than C) (here is some benchmarks), it focuses on performance and memory control. The reasons it’s faster than C is because of the LLVM optimizations it has, and also the way it handles the undefined behavior under the hood Developer Experience Bun delivers a better developer experience than Node on many levels. First, it’s almost fully compatible with Node so you can use Node packages without any issues. Also, you don’t need to worry about JS Common and ES Modules anymore, you can use both in the same file, yup you read that right, for example: ` Also, it has a built-in test framework similar to Jest or Vitest in the project so no need to install a different test framework with different bundler in the same project like Webpack or Vite ` Also, it supports JSX out-of-the-box ` Also, Bun has the fastest javascript package manager and the most efficient you can find as of the time of this post ` Bun Native APIs Bun supports the Node APIs but also they have fun and easy APIs to work with like * Bun.serve() : to create HTTP server * Bun.file() : to read and write the file system * Bun. password.hash(): to hash passwords * Bun.build(): to bundle files for the browser * Bun.FileSystemRouter(): a file system router And many more features Plugin system Bun also has an amazing plugin system that allows developers to create their own plugins and add them to the Bun ecosystem. ` Conclusion Bun is a very promising project, and it’s still in the early stages, but it has a lot of potential to be the next big thing in the JavaScript world. It’s fast, easy to use, and has a lot of amazing features. I’m very excited to see what the future holds for Bun and I’m sure it will be a very successful project....
Oct 25, 2023
2 mins
Introducing the New Shopify and Next.js 13 Starter Kit
Rapidly build custom Shopify storefronts with Next.js 13 App Router. Features include light/dark themes, authentication, infinite scroll, Zustand for state management, and exceptional performance....
Aug 4, 2023
4 mins
Next.js 13 Server Actions
Start using Server Action in your Next.js 13 application now. Break down the separation between Server and Client with Server Actions...
Jul 3, 2023
3 mins
How to Optimize GraphQL Performance with Redis
Intro GraphQL is a great way to build backend applications. It simplifies the project’s structure and scales easily, but there are some challenges that come with it. One of the biggest is how to optimize GraphQL at scale. In this post, we will show you how to use Redis as an optimization tool for your GraphQL servers. What is Redis? Redis is an open-source database that can be used with any programming language. It is well-suited for large-scale applications. It’s a key-value store that can be used to store and retrieve data. It is designed to be fast, with no single point of failure. It also provides a high degree of concurrency, which means it's possible for multiple clients to access the same data at the same time. Redis is also lightweight enough that you can run it in the cloud. Why GraphQL? GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. Why Redis with GraphQL? Redis can be your best friend when it comes to optimizing the performance of GraphQL. First, Redis provides a powerful system that helps you to cache queries and results so that they can be reused. This is crucial because there's no way to predict how often you'll need to run a query on a serverless architecture. Sometimes you use a 3rd party API that is slow, or there are request limits, or even the local databases could take a quite long time to return the data. If you're creating tons of different queries every day, this can add up quickly! Different caching strategies There are two main caching strategies that you can use with GraphQL and Apollo Server: 1. Caching the entire response (use Redis as a cache) Caching the whole response is the most straightforward way to cache your GraphQL queries. When you cache the entire response, you're essentially caching the entire query, including all of the fields that are returned by the query. This is a great option if you're only interested in caching the data that are returned by the query, and you don't need to worry about caching any of the other data that is returned by the query, or if you have a repeatable query for different users. Example of in-memory cache: 2. Caching individual fields (use Redis as a data store) This is a more proper way to cache your GraphQL queries. It's also a more complex way to cache queries in Apollo Server. When you cache individual fields, you're caching the individual fields that are returned by the query. This is a great option if you're only interested in caching the data that are returned by the query, and you don't need to worry about caching any of the other data that are returned by the query. What not to cache? Redis is not built for large data. If you're storing critical business data, you're going to need a more traditional data solution. If you're looking for a way to store complex data queries, look elsewhere. Redis is designed to be simple and fast, but that doesn't mean it's ready for just about anything. Even if you think your data could grow into a large enough set that it would benefit from relational databases, remember that Redis does not have support for building relational databases from scratch. It has no support for tables or relationships or any other kind of constraints that would be required if your data was stored in a relational database. Conclusion In this post, we showed you how to use Redis as an optimization tool for your GraphQL. We also showed you how to use Redis as a cache and as a data store. We hope you found this post helpful! Also, check out our GraphQL Serverless Contentful starter kit on Starter.dev If you have any questions or comments, please feel free to send them to us by email at hi@thisdot.co. Thanks for reading!...
May 15, 2023
3 mins
Introducing the new Expo, Styled Components, and Zustand Starter Kit
Intro We are delighted to announce our brand new Expo React Native starter kit to our Starter.dev kits collection. We built this starter kit to enable our team members who work mostly with web technologies to make an easy transition for them to work on native mobile apps with their current knowledge without any extra effort. This Starter kit contains: - Expo a React native wrapper. - Styled Components lets you write actual CSS in your JavaScript-like web. - Zustand A small, fast, and scalable barebones state-management solution. - TypeScript JavaScript with syntax for types. - Jest is a delightful JavaScript Testing Framework with a focus on simplicity. - React Navigation Routing and navigation for Expo and React Native apps. Problems This Kit Addresses React Native Styling One of the most difficult things for React Native beginners is its styling system. It's difficult for people who come from a web background because it’s not similar to CSS at all. It has different units, and each property accepts a different value. For more information visit React Native Style Documentation styled-components/native fixed that problem, you literally write CSS like for web and it translates the CSS code to a React Native Styles without any extra effort. Share Components Across Platforms Thanks to the Expo team, we can use the React Native components cross-platform, even with frameworks like Next.js. This saves teams a lot of work. Instead of building the same feature twice, one for the web and the other for the mobile apps, we only build it once. Let me show you an example: A lot of libraries in the React ecosystem use the setImmediate() API (like react-native-reanimated). It’s a method used to break up long-running operations, and run a callback function immediately after the browser has completed other operations such as events and display updates, which Next.js doesn't polyfill by default. To fix this, you can polyfill it yourself. First, we need to install set immediate package yarn add setimmediate Then import it in the app root pages/_app.js import 'setimmediate'; Use the @expo/next-adapter in the next.config.js ` Add image support with next-images ` Add font support with next-fonts ` Now you can use your Expo React Native components in Next.js site. Skip the Tedious Steps of Installing React Navigation We use React Navigation in almost every project we work on, it’s a necessary piece of the app, so we already set it up so you can start your new app quickly. We also grouped the screens under the src/screens directory, where each screen has its own folder with its related files. Defining a better organization pattern for components to scale your app We structured this project from our experiences with big React projects. One challenging part of using React is that it gives the developer a lot of freedom to choose their own file structure. However this is not good on a bigger app scale, because every developer has their own way to organize the files, and with a big React project that a lot of developers are working on, we usually end up with a mess. We figured this structure out from the previous projects we built. Imagine we have a component, and this component has different files like, testing, …etc Our way to structure the components is: Each component has its own folder: ` Each folder has the component files ` The problem now is the importing sentences gonna be ugly like this: ` So it solve this, we add in each Component folder an index.ts file with the following: ` Now the folder structure will look like this: ` Now the import sentence will be much cleaner: ` This can help keep your files and folders organized, and help scale your codebase with time. Conclusion This starter kit is the result of a lot of experience we gained on React projects we built internally and for clients. It helps you to start quickly without going through the tedious task of installing and setting up dev tools, and at the same time, it helps your app scale more easily....
Apr 26, 2023
4 mins
Introducing the New SolidJS and Tailwind CSS Starter Kit
We are delighted to announce our SolidJS + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidJS and Tailwind CSS in no time. In this article, we will walk you through the kit, and how it is a great option for building your next project. This kit has been designed to build tiny and optimized web applications on both the JavaScript and CSS sides. It's very useful when the load time of your application's files is critical, like when the internet connection is slow or when you are building a mobile application for a targeted audience. Why SolidJS? SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you build web applications using a declarative API that you’re already familiar with. It’s a great alternative to React, Vue, and other popular JavaScript frameworks. It’s also a great choice for building static sites. The best feature of SolidJS is how tiny its build bundles are. It helps you ship less JavaScript to the browser. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It makes it easy to build complex UIs without having to write custom CSS. And the best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. --- Starter Kit Features - SolidJS - A declarative, efficient, and flexible JavaScript library for building user interfaces. - Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces. - Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects. - Storybook - An open-source tool for developing UI components in isolation for React, Vue, and Angular. - Vitest - A fast and simple test runner for Vite. - TypeScript - A typed superset of JavaScript that compiles to plain JavaScript. Tailwind CSS Tailwind CSS makes it easy to build complex UIs without having to write custom CSS. The best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Also, Tailwind CSS is great at scale, so you can add as many utilities as you want. Storybook Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and others. It makes building stunning UIs organized and efficient. It also helps you build components faster, and reuse them in your projects. It also helps you document your components. This kit comes with Storybook pre-configured. You can start using it right away. Why Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's a great alternative to Webpack. It's fast and easy to use. It also helps you ship less JavaScript to the browser. It's a great choice for building static sites. This kit comes with Vite pre-configured. You can start using it right away. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. How to get started? - Run npx @this-dot/create-starter to start a new project from one of the kits in the Starter CLI library. - Select the SolidJS, Tailwind kit from the CLI library options - Name your project - cd into your project directory and install dependencies using the tool of your choice (npm, yarn or pnpm) - Copy the contents of the .env.example file into a .env file When to use this kit? This kit is a great alternative to React and SCSS. It focuses on performance and developer experience by providing a fast and leaner development experience for modern web projects. It also helps you write less CSS, and less JavaScript. Options to scale the kit to fit your needs In this section, we will walk you through the options you have to scale the kit even further to fit your needs. We didn't want to add too many options to the kit in order to keep it simple and easy to use, but we also wanted to provide you with the ability to scale the kit. PWA PWA is a great way to make your app available offline, and installable on mobile devices. It caches your app's assets to make it load faster. It also helps you build a great user experience, and increase your app's engagement by providing push notifications. If you want to add PWA support to the kit, you can use the PWA Vite Plugin to add PWA support to the kit. It covers the PWA integrations for Vite, and the ecosystem with zero-configuration and is framework-agnostic. Conclusion So as we discussed in this article this SolidJS starter kit is a great way to start your new SolidJS project because it has most of the tools you need installed and preconfigured for you from Storybook to Testing, and even the PWA configurations. We hope you enjoyed this article, and we hope you will enjoy using the kit. If you have any questions or suggestions, please feel free to reach out to us on Twitter or Contact form....
Apr 7, 2023
4 mins
Introducing the SolidStart, TanStack Query and Tailwind CSS Starter kit
We are delighted to announce our SolidStart + TanStack + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidStart, TanStack Solid Query, and Tailwind CSS in no time. In this article, we will walk you through the kit and how it is great for building your next project. Why SolidStart? Solid.js is a really cool new framework with a lot of amazing features. Its syntax is mostly like React syntax. However, they work in completely different ways behind the scenes. Solid.js is a declarative, component-based library for building user interfaces. It is a highly customizable, low-level framework that gives you all of the building blocks you need to build bespoke designs without any opinionated styles that you have to fight to override. SolidStart is a meta-framework that helps you build your Solid.js apps with ease. It supports Client-side rendering, Server-side rendering, Streaming SSR, and Static site generation. Vite Vite is a new frontend build tool that significantly improves the frontend development experience. It consists of two major parts: - A dev server that provides rich feature enhancements over native ES Module imports (e.g. module hot-reloading, proper dependency analysis, etc). - A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production. Vite is designed from the ground up for the es-module era, and as such, it doesn't require a bundler like webpack or Parcel during development. It also doesn't require a complicated configuration file like snowpack. Instead, it leverages the browser's native support for ES modules (i.e. native ES imports) and the new spec proposal for importing CSS as modules. This means that Vite can provide instant feedback during development, and also enables features that are simply impossible with other tools, such as server-side rendering and static site generation. Vite is designed to be framework-agnostic. It is not opinionated about your choice of framework, and it is also framework-agnostic in the sense that it doesn't require you to use a specific framework-specific toolchain. You can use Vite with any framework that supports native ES imports, including React, Vue, Svelte, Angular, and even vanilla JS. Vite is also designed to be plugin-based. It is built on top of Rollup, which is a powerful and flexible bundler. However, Vite is not a wrapper around Rollup. Instead, it is a plugin-based build tool that uses Rollup under the hood. This means that you can use any Rollup plugin with Vite, and you can also create your own Vite plugins to customize Vite's behavior. Why Tanstack? TanStack is a full-stack framework for building web applications with Solid, Tailwind CSS, and TypeScript. It is a highly customizable, low-level framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles that you have to fight to override. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. Conclusion SolidStart is still in the beta phase. However, it has a lot of good DX improvements. This kit is great if you want to build a fast and lightweight fullstack web application. It provides you with everything you need from backend to frontend, even data caching and Tailwind configurations with two examples out of the box. For more SolidJS resources, check our solidjs.framework.dev, where you can find courses, tutorials, and libraries for SolidJS. Also, you can create your next SolidJS project. Try our SolidJS starter kit from Starter.dev. It has a lot of tools pre-configured for you. If you have any questions or suggestions, please feel free to send them to us or reach out to us on Twitter....
Mar 20, 2023
3 mins
How to Create Your Own Custom Renderer in SolidJS
Intro In this article, we will explore what custom renderers are, the problem they solve, and how SolidJS has created a custom renderer that is quite unique because of its simplicity and ease of use. We will also learn how to create a custom renderer in SolidJS, and how to use it in our applications. Custom renderers have a long history with all the major frameworks in the market like Renderer2 in Angular, createRenderer in Vue, and React Reconciler in React. They are used to build awesome technologies and mind-blowing libraries. SolidJS recently added the ability to create a custom renderer with Solid Universal Renderer. > Note: We also have a great article about How to create a custom renderer for React that you can check out! Custom Renderers in SolidJS To better understand how custom renderers in SolidJS work, we have to understand it first in React and Vue (VDOM frameworks). In React, the library itself (React.js) doesn’t know anything about the DOM. It doesn’t understand what a div or h1 means. React converts all of the components into a JavaScript object that represents the UI in the memory (Virtual DOM), and then update the related nodes when the state changes in specific components. That’s it! This is how React and Vue work under the hood. The React Renderer (which is a different package called “react-dom”) then works on rendering this Virtual DOM on the screen, and updates it when it receives updates from React.js. The same thing happens in Vue. From here, the custom renderers have come to live. You aren’t limited to using only the official Renderer for the framework, but you can also build your own.. We will learn more about them in the proceeding sections. But for now, you just need to know that there is no virtual DOM in SolidJS. But it modifies directly on the DOM. This is the only difference between the Custom Renderers in SolidJS and React or Vue. Real-world Custom Renderers In this section, I’ll show you the most popular custom renderers that are used in many production applications in different frameworks. One of the most popular custom renderers in the industry is React Native (yes, it’s a React custom renderer for Android and iOS platforms). React-three-fiber is one of the most famous examples of React Reconciler in production. It converts the JSX VDOM to WebGL graphics. React-pdf is a React renderer for creating PDF files on the browser and server. TroisJS is a Vue custom renderer for Three.js and WebGL. There are many, many more examples. HTML Nodes Everything you see on the screen in the web browser is a node; the HTML element is a node, the attribute of that HTML element is a node, for example: ` Also, the text between and opening and closing tags of this HTML element is a node: ` Let’s code a SolidJS custom renderer The process is going to be similar to React, but SolidJS Universal is even easier than React Reconciler because it has fewer options. Create a new file to write our renderer and import the createRenderer from SolidJS universal: ` Second, let’s create an empty renderer: ` Renderer Options Let’s break all of these options down in detail: createElement This option is responsible for handling the creation of a new element node. It takes only one parameter which is the element type and it could be something like h1, p, divetc ` And here we can play with the JSX elements for fun. For example, we can add our custom elements like: ` Technically, there is no HTML component called customLikeButton. But here in this option, we can resolve this type as we desire. createTextNode This option is responsible for handling creating a new text node. It takes only one parameter which is the text itself. ` replaceText This option is responsible for handling updating the text node when it gets updates. It takes two parameters; the actual text node that has been updated, and the new text. ` insertNode This option is responsible for inserting or injecting a new node in the UI and the DOM. It takes three parameters, the parent node, the node itself, and a reference node (anchor) in the parent node. ` removeNode This option is responsible for removing a node from the DOM. It takes two parameters, the parent node, and the node which needs to be removed ` setProperty This one is a little bit more complicated than the previous ones because it handles more categories. It is responsible for handling the attributes or properties of the element such as the classNames, style, and events like onClick and onSubmit. ` isTextNode This option is used internally to determine if this node is a text node or not. ` > Note: the node.type in the line above is a pure JavaScript code. In JavaScript nodes have 12 types with 12 numbers each representing a type. For example, 1 represents an element node, and 2 represents an attribute node. For more info see the HTML DOM Element nodeType on W3Schools and Node.nodeType - Web APIs | MDN. getParentNode This option is being used internally in SolidJS renderer to get the parent node of a given node. ` getFirstChild This option is being used internally in SolidJS renderer to get the first node of a given parent node. ` getNextSibling This option is being used internally in SolidJS renderer to get the next node of a given node in the DOM tree. ` Renderer method There are a lot of methods for this renderer, but the most important one is render which we will replace the SolidJS web one with. ` There are additional methods available: - effect - memo - createComponent - createElement - createTextNode - insertNode - insert - spread - setProp - mergeProps The performance of SolidJS Universal Renderer Ryan Carniato, the creator of SolidJS, created a test on the SolidJS Universal Renderer in his stream of Benchmarking and Custom Renderers on his YouTube channel, and it was pretty interesting. It wasn’t much slower than the SolidJS web renderer at only a few milliseconds slower. To test it, you can use the js-framework-benchmark repo, which is an amazing tool you can use to compare the performance of different JavaScript frameworks. Conclusion In this article, we learned about the custom renderers in SolidJS and how to create one. We also learned about the performance of SolidJS Universal Renderer and how it compares to the SolidJS web renderer. I hope you enjoyed this article and learned something new. For more SolidJS resources, check out our solidjs.framework.dev where you can find all cool courses, tutorials, and libraries for SolidJS. Also you can create your next SolidJS project, try our SolidJS starter kit from Starter.dev it has a lot of tools pre-configured for you. If you have any questions or suggestions, please feel free to send them to us or reach out to us on Twitter....
Mar 13, 2023
5 mins
What's new in Tailwind CSS 3?
Introduction Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files. Tailwind CSS v3 Tailwind CSS v3 was released at the end of 2021, and it has even more cool features. Just-In-Time Engine "Just-in-time", or @tailwindcss/jit, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB. The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server. Scroll Snap API Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for: - Scroll behavior: we have to classes scroll-smooth and scroll-auto - Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-my-4 - Scroll padding: exactly like scroll margin it’s scroll-{padding class} - Scroll snap align: it’s used to snap every element to a specific direction on scroll like span-start, snap-end and snap-center - Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are snap-always and snap-normal. - scroll snap type: it used to control how strictly snap points are enforced in a snap container like snap-none, snap-x, snap-y, snap-both etc More Colors The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors! Colored Box Shadows This is a cool feature you can use the shadow utility shadow-{color}. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity} like: ` Print Modifier It’s a new feature that allows you to control how the page will look when people print it like: ` Colored Underline Styles Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color} is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy} used to change the text underline’s style. Multi-Column Layout Tailwind CSS 3 supports colums. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer: ` Modern Aspect Ratio API Use the aspect-{ratio} utilities to set the desired aspect ratio of an element like aspect-auto, aspect-square, or aspect-video. RTL and LTR Modifiers Also, we have two new modifiers ltr and rtl to provider good user experience in multidirectional websites. You can use them, like: ` Portrait and Landscape Modifiers Also, we have new modifiers that give us more control over the page, like: ` Wrap Up Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!...
Sep 1, 2022
3 mins
What is Agile? Everything You Need to Know
Managing software projects has never been easy. There are continuos changes, risks, and sometimes the clients don’t know what they want. And that is why we have Agile. What is Agile? There is no straight answer. Is it a project management methodology? Framework (like Scrum)? Tool (like Jira)? Technically all are true. Maybe we can define Agile as a mindset that helps us deliver valuable software despite uncertainty and risk. But what does that mean? When working on a project, we usually build some features that the team didn’t agree on from the beginning. Other times, the clients don’t know what they want exactly. This makes it tough to create a complete plan from the beginning with all the project details, and its absense adds more risk to the project. By approaching the development process with an Agile mindset, we can manage this risk and stil deliver valueable products for our clients despite the lack of a specific plan. History of Agile Agile was created organically as a result of a market need to deal with the crisis product development faced in the 1990s. Back in the 1990s, it was taking somewhere in the range of 2-4 years to get a software solution to production from the time it was conceived. This delay was not acceptable for enterprise business users. The market had started to evolve, and developers realized that both the needs and expectations from the business users would not remain static for long. In the Spring of 2000, a group of industry experts gathered in Oregon to come up with some common ground on Agile. This meeting led to a famous gathering in Utah in February 2001 where 17 thought leaders finalized The Agile Manifesto. This historic gathering set the foundation for all Agile frameworks. Since Agile was developed for software development, many think that software is the only place where Agile is valuable. However, today Agile is being applied in all industries across the globe. How it works? The Agile methodology is a way to manage a project by breaking it up into several phases. It involves constant collaboration with stakeholders and continuous improvement at every stage. Once the work begins, teams cycle through a process of planning, executing, and evaluating. Continuous collaboration is vital, both with team members and project stakeholders. The first point is *validation*. Because of uncertainty, we need to check with the client regularly to ensure that we are on the right track. Additionally, we need to ensure that we are delivering our second point: *value*. We are not simply fulfilling requirements or creating features (of course we are but it’s not what we should focus on). We are delivering *value* to the client. And this value also comes from the uses/client, so the validation is so important. *Changes* are an expected result of the regular validation process, so we can respond to that validation and provide more value. To achieve that in an organized fashion, we have to do two things: - *Deliver fast* (small parts so it's easier to validate them with the client) - *deliver frequently* And to achive that, we need to have a team that understands all of this cycle and focuses on the *value* that the client needs. Agile is a Mindset Ultimately, Agile is a mindset informed by the Agile Manifesto’s values and principles. Those values and principles provide guidance on how to create and respond to change, and how to deal with uncertainty. When you face uncertainty, try something you think might work, get feedback, and adjust accordingly. Values of Agile Manifesto It says that we improve software by valuing some items over others like: - Individual interactions over processes and tools - Working software over comprehensive documentation - Customer collaboration over contract negotiation - Responding to change over following a plan Agile vs Waterfall Waterfall Model methodology which is also known as Liner Sequential Life Cycle Model. Waterfall Model followed in the sequential order, and so the project development team only moves to the next phase of development, or testing if the previous step completed successfully. The main differences between them are that Waterfall is a Liner Sequential Life Cycle Model whereas Agile is a continuous iteration of development and testing in the software development process. In Agile vs Waterfall difference, the Agile methodology is known for its flexibility, whereas Waterfall is a structured software development methodology. Other differences include: - Agile follows an incremental approach, while the Waterfall is a sequential design process. - Agile performs testing concurrently with software development, while in Waterfall methodology, testing comes after the “Build” phase. - Agile allows changes in project development requirements, whereas Waterfall has no scope of changing the requirements once the project development starts. Advantages of Agile - Persistent software delivery - Increased stakeholder satisfaction - Inspect and adapt - Welcome to changes at any stage - Design is important - Daily interaction Agile Frameworks There are multiple frameworks to implement Agile in your project Scrum Scrum is the most popular one. It is a framework that helps teams work together. It encourages teams to learn through experiences, self-organize while working on a problem, and reflect on their wins and losses to continuously improve. While the scrum I’m talking about is most frequently used by software development teams, its principles and lessons can be applied to all kinds of teamwork. This is one of the reasons scrum is so popular. Often thought of as an Agile project management framework, scrum describes a set of meetings, tools, and roles that work in concert to help teams structure and manage their work. Kanban Kanban is a popular Lean workflow management method for defining, managing, and improving services that deliver knowledge work. It helps you visualize work, maximize efficiency, and improve continuously. Work is represented on Kanban boards, allowing you to optimize work delivery across multiple teams and handle even the most complex projects in a single environment. Originating from manufacturing, it later became a territory claimed by Agile software development teams. Recently, it started getting recognized by business units across various industries....
Aug 9, 2022
6 mins