Create a simple store in Solidjs

 Stores are way to distribute collected data among components. In Vuejs Vuex (default) and Pinia stands for stores and for React, you have to choose one like Redux.Solidjs provides inbuilt store. There are two way to create a store, create a store using createStore method or create a mutable store using createMutable.A mutable store allow us to directly access and modify data, no need for getters...

Read More

How to apply refetch logic in Solidjs

 In Reactjs libraries such ReactQuery make API fetching so simple and fast. Solidjs also come with powerful tools. We have already seen how to fetch API using the Resource feature. 👓 Sometimes we need to fetch the API again under special circumstances such while network failure,  require to fetch content in a regular intervals etc.Resource provide us way to re-fetch/ reuse the...

Read More

How to set focus to a input in Solidjs

When we required to access the element in the DOM we can use the Ref. It is similar to the Ref in React.Suppose we have a input text box deeper in the return statement and want to set focus when it rendered, then Ref become handy 🖐.Here is the quick examplefunction Component(){ let myBox; setTimeout(() => myBox.focus());return(<> <div> <input ref={myBox} type="text"/></div>...

Read More

Quickly remove duplicates from array in Javascript

 Suppose we have array with duplicate values. How do we remove then duplicates? I remember Python have simplest way for that and JavaScript have such capabilities too.let langs=["Vuejs","Angular",Vuejs",Reactjs","Solidjs","Reactjs"];Here we have duplication values. To remove them, we can looping through each item. There is another way.Set Unlike array Sets only store unique values. So lets convert...

Read More

How to setup 404 route in solid-app-router

 404 or commonly known as page not found is must have for any web app. How do we setup the🎭 route and manage the error page ?Build a beautiful 👧 error component with 😎 animation.This example uses solid-app-router , let's setup a router with wild card in App.jsx <Route path="*" element={() => <PageNotFound />} />Here the path can be anything which doesn't exists, such as /download...

Read More

Create a fallback component in Solidjs

 Solidjs offer interesting features that let you conditionally render component. Vuejs and Reactjs didn't offer such a component as I know.It will be very help full, 😊 When fetching API data and sometimes the data may not retrieve correctly and you can use the <For> component's fallback with an arrow function to render a loading component instead.Solidjs also provides Show component which...

Read More

Fetch data from graphql API in Solidjs

 I am super excited about the Solidjs, the 🚀 speed JavaScript framework. In this I will show you how to read data from a Graphql endpoint. There are libraries such as Apollo which used a React specific approach, so I decide to use another library called URQL   How to ?For reading async data Solidjs provides us Resources, which is a signal. We can combine URQL client within...

Read More

How to use tailwindcss in Solidjs

 CSS is the most important part of UI development. There are lots of frameworks and libraries such as bootstrap, bulma to make thing easier. Each on has its own use cases.I prefer using TailwindCSS, it help me to build responsive layout and utility approach save a lot of time and code. How do we use tailwindCSS in Solidjs ? We have two options one is use the Tailwind with handy 🖐 features,...

Read More

Dynamic routes and params in Solidjs

 This example based on solid-app-router library. Dynamic routes are those route which are similar to /user/1 /post/79 /tag/tag-name . Note the value 1 and 79 these are used to access particular data from backed. In our case the post with id 79 or user with id 1. These value called parameters.So how do we setup a dynamic route in Solidjs ? <Route path='/posts/:id' element={<div>this...

Read More

Ceate a mock API using Github and Mockend

It's wise to establish a backed setup first, so that UI developers can test the data. So UI team has to wait for the later to complete job. The activation for single repo work only once, switching between repo will not work, it may cause to expire the mockend plan. Mocking data is a great in such situations is a must. How to create mock API with custom data? So how do we create our own mock...

Read More

How to use environment variables in Solidjs [vitejs]

 Environment variables can be used in JavaScript application (Nodejs) to store information such API SECRETS. Reactjs has inbuilt capacity to consume .env files while Solidjs have to go through vite config..First up all create .env file at the project root with some information .API_URI = SOME SECRET Configure in vite.config.jsAdd a define key ⚿ to the configuration settings as follows...

Read More

How to create global variable in vitejs [Solidjs]

 Vitejs is build tool for modern nodejs applications. Global variable requires in any application where common information need to be accessed in different modules. It is common practice is that store values such as URL, KEYS in separate files, in such cases we can use either environment variable or project level symbo...

Read More

How to fetching data from REST API in Solidjs

 REST API fetching is essential in modern web application. React and Vuejs has different approach for this. Solidjs provides a special featured for async data fetching call Resour...

Read More

Setup windicss for Solidjs

Windicss is the next generation utility CSS framework, for me it is like a simplified tailwind with some jet pack features, it is awesome 😂   Let's configure Windicss for Solidjs project. We are going through following steps. Initialize/create Solidjs a project Install dependencies add vite plugin🔌 Configure vite config Add windicss to entry point file. First up all create...

Read More