Ashutosh

What are Custom stores?

Typically in a store (Writable), there are three methods: subscribe()set()update()As long as we implemented the subscribe() method, the javascript object is a store. A store provides reactive data that can change over time. What if we want to create stores that restrict updates? It makes sense on

JavaScript

What are Stores in Svelte?

In large applications, passing the state of the application through the component is cumbersome. Often, several Svelte components require the same data (For example, notification or list of cart items). To achieve this feat, Svelte has stores. You can relate it (Svelte stores) similar to Redux in React. In this

How to use context in Svelte?

Let's think of a scenario where we have three components A, B, and C. We want to define a variable or an object in Component A. And we want, It to be accessible from Component C. In our previous articles, we discussed different methods to pass the props data to

Svelte3

Comprehensive guide of Event Handling in Svelte

Events are objects that serve as communication units between an emitter and the listeners. In short, any activity that happens on the HTML web page is an event. And with the help of JavaScript (Svelte in this case), we can handle these events.

Svelte3

A guide of Slots in Svelte

As per the developer.mozilla.org, The <slot> HTML element—part of the Web Components technology suite - is a placeholder inside a web component that you can fill with your markup, which lets you create separate DOM trees and present them together. It is represented as <

Svelte3

Six ways to share data between Svelte 3 components (Part-1)

We have a component that allows a user to enter their profile. It renders inputs for first name, last name, age, email, posts, and phone number. There is another component that displays a list of posts. It wants to know when the user creates a new post and then displays

Svelte3

How For Loop works in Svelte?

When we are developing web applications, we need to iterate over items often. Iterations in Svelte are no exception. Like {#if} iterations in HTML begins with {#each} and ends with {/each}. The expression that follows {#each} can be any JavaScript expression. Optionally {:else} can be used before {/each}. Content after

Svelte3

How Conditional Logic (IF ELSE) Works in Svelte 3?

If you're familiar with Angular or Vue, they use framework-specific attributes to implement conditional logic. Angular supports ngIf while Vue uses v-if. Svelte uses {#if} {/if} syntax. Implementation of IFConditional logic in the Svelte (component) HTML section begins with {#if }, and the condition is any valid JavaScript expression. It ends

Svelte3

Svelte 3 components - In Detail

In our previous articles, we learn about creating the components and pass properties to the components. However, there are a lot more things it does in a web app. We discuss it in detail in this article. As we already know that in Svelte .sveltefiles are components. These files have

Svelte3

How to pass properties in Svelte 3 component?

In our last article (here), We learn how to add components in Svelte. But we haven't passed any real data into it. In the FirstComponent.svelte, replace the contents with the following code: <script> export let firstName; export let lastName; </script> <h1> The first

Svelte3

How to add components in Svelte

In our last article (here), We learn how to get started with the Svelte. In this article, we see: How to add data in Svelte HTMLHow to add Components in SvelteIn the App.svelte file under the main tag, remove all the contents of <p> and add the

Svelte3

Getting Started with the Svelte 3 - Tutorial

Svelte is a comparatively new framework. It was created by Rich Harris in 2016. According to the documentation, Svelte is a radical new approach to building user interfaces.

Snowpack

How to get started with Snowpack

A Snowpack is a build tool used to automates the process of building the app from the source code.

Mojolicious

Mojolicious Routes

This article assumes you are already aware of how to create the Mojolicious app. The most basic Mojolicous routes accept a URI and providing a simple and expressive method of defining routes.

Next.Js

Add Contact Form in Nextjs

Contact FormIn the blog, we'll have our contact us form. So, readers or visitors can contact us. Let's create that form quickly. Before proceeding, we should have our thoughts in one place. What do we want in our contact form? We should have the email id of the user or

Next.Js

Linking Blog Content and Markdown conversion in Next.js

So far: We have set up a page to list blogs.Link blogs to their respective linksHowever, if we click on the individual blog, it is not showing relevant content. In this article, we fix this issue. And our blog URL presents relevant data to the users. When this series

Next.Js

Scaffolding the Next.js App (Part - 2)

In this series, I am rewriting the code of my blog ashutosh.dev in Next.js and Mojolicious as backend. This is the third article of the series. To do this, we downloaded all of our articles from the dev web app (JSON file is under the data folder). You

Next.Js

Scaffolding the Next.js App

In this series, I am rewriting the code of my blog (ashutosh.dev) in Next.js and Mojolicious as backend. This is the second article of the series. In this article, we cover How to configure the storybookConfigure the TailwindCSSAdd SEO friendly _document.jsCreate basic componentsConfigure StorybookIn our last article,

JavaScript

Setting Up Next.Js with Storybook, Tailwindcss and Apollo client

In this series, I am rewriting the code of my blog (ashutosh.dev) in Next.js and Mojolicious as backend. This is the first article of the series.

Next.Js

It's All About (The) Next.js Api routes (Part-2)

This article focused on retrieving the data from the database (in the Next.js api routes) and return the JSON object to the browser. It proves Next.js is absolutely a full-stack framework.

Next.Js

It's All About (The) Next.js api routes

When you create the Next.js application, you can see the "api" folder. Before proceedings, a few things about the API folder. It is to write the server-side code for our application.

How to Improve SEO in Next.js

In this article, we learn how to make an SEO-friendly Next.js application. First of all, we need to create the Next.js app. If you are new to Next.js, please follow this post to generate Next.js application scaffolding.

Next.Js

Two Ways You Can fetch client-side data in Next.Js

In Next.js, sometimes pre-rendering the page doesn't make sense and, it is the need of the hour to fetch the data on the client-side. For ex- the frequently updating data like the stock data, or the currency exchange prices, or the commodities prices.

Next.Js

Howdy NextJS getServerSideProps()?

In Next.js, There are two ways to pre-render a page: Static Server-Side Pre-rendering

Next.Js

What is getStaticPaths() in Nextjs?

In the last article, we learn how to use getStaticProps() in the Next.js application. In Next.js, we can pre-render a page during build time. We generate all the HTML code and data in advance. And the data is later cached by the server.