Ashutosh

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.

Next.Js

What is getStaticProps() in Nextjs?

Next.js has an advantage over React apps on page pre-rendering. Please visit this link if you don't know server-side rendering. In Next.js, we pre-rendered a page during build time. What does it mean? It means we generate all the HTML code and data in advance.

Next.Js

Reusable Components (Headers and Footers) in Next.js

Reusable components are used multiple times in a single project. Or we can also say that they are the general components like Header, Footer, Button, etc. In this article, we see how to create reusable components in Next.js. Let's create the app using: npx create-next-appThe app will run at

Next.Js

Next.js File Based Routing (Dynamic Routes and Navigation) (Part-2)

There is an administrator whose job is to maintain the web application. He can create, edit, delete application users. It means we need to update the same component but for different parameters. Here dynamic routing comes into the picture.

Next.Js

Next.js File Based Routing (Part-1)

In traditional React apps, we need to install the React-Router first, and we need to write a code at least a few lines to set up the routes and navigation. However, in Next.js, routing is the core feature.

Next.Js

What is Server-Side Rendering in Next.js?

What is Server-side rendering in Next.js? The first thing that comes to our mind, what is server-side rendering? What does it mean? The server-side rendering means server prepares all the content of the web page. The client's only responsibility is to show the content on the web page. To