Welcome to Dykraf.com
Writings about web development such as NextJS, React, SCSS, HTML, CSS, NuxtJS, Nuxt/Content, SEO, Strapi, GraphQL, Wordpress, BootstrapCSS and TailwindCSS
Exploring Mantine and Material-UI, staying on top of the latest tools and technologies is crucial for building modern and visually...
Working with Relationship RESTful endpoints in React.js, it's common to interact with multiple endpoints to manage different data ...
Gain a deep understanding of the techniques and best practices involved in effectively comparing two JSON data objects, empowering...
Mantine is among the robust React component libraries designed to streamline the development of modern web applications using Reac...
Learn essential techniques and best practices to efficiently navigate and process parent-child relationships, empowering you to ta...
Latest Writings
React Hooks in React Front-End Web Development
Using React hooks is one way to increase productivity, speed up development and can become a useful libraries
By:
Dykraf Posted:
How To Use JavaScript Promises In Reactjs useEffect
Discover how to boost your ReactJS applications by effectively using JavaScript Promises in the useEffect hook.
By:
Dykraf Posted:
Node.js ORMs with Prisma and Sequelize Developer Experiences
Sequelize and Prisma are tools that simplify database interactions in JavaScript and Node.js projects.
By:
Dykraf Posted:
CSS-in-JS React.js UI Libraries in 2023 for Your Portfolios
As web development continues to evolve at a rapid pace, staying on top of the latest tools and technologies is crucial for building modern and visually stunning user interfaces.
By:
Dykraf Posted:
Connect your Vercel Postgres Database Store to PgAdmin 4
Web application development using Vercel PostgreSQL database and PgAdmin 4 for Effortless Database Management
By:
Dykraf Posted:
Vercel And Netlify Platforms, A Complete Comparison And Similarities
Both Netlify and Vercel are widely used by various types of web developers and support a range of technology stacks.
By:
Dykraf Posted:
A Cheatsheet Table for TailwindCSS and Bootstrap CSS Framework
Tailwind CSS and Bootstrap CSS both offer a range of features that make them popular and widely used frameworks.
By:
Dykraf Posted:
Using ::before and ::after CSS Pseudo-elements in SCSS
Pseudo-elements in CSS are special keyword selectors that allow developers to style specific parts of an element's content without adding extra HTML markup.
By:
Dykraf Posted:
How To Use Map Function In JavaScript For Rendering A React Component
In React, you can use the map() method to create a list of elements from an array of data to render a list of elements in a React component
By:
Dykraf Posted:
How to use Bootstrap UI Library in React.js Ecosystem
Starting a React project with your favorite CSS Framework for your website project using Reactstrap or React Bootstrap library.
By:
Dykraf Posted:
Create React Component With An Object As Props in TypeScript
React custom component that receives the object as a prop and then renders the properties of that object
By:
Dykraf Posted:
Free Graph Chart Libraries for Your Nuxt.js Application Dashboard
Starting a Nuxt.js admin dashboard project with attractive open-source data visualization also free graph charts libraries plugins
By:
Dykraf Posted:
How to Deploy Nextjs Web Application with PM2
How to write Next.js environment variables deployment scripts in several stages of development into production with PM2 process manager node clusters
By:
Dykraf Posted:
How to use Bootstrap CSS Framework in React.js
Start your website project with the popular Bootstrap 5 CSS framework integrated into a React.js application
By:
Dykraf Posted:
How to add Chart.js into Nuxt.js Web Application Dashboard
Adding Graph Charts Library into your Nuxt.js Vuetify Web Application Dashboard with Chart.js open-source JavaScript library for data visualization
By:
Dykraf Posted:
How To Add Plugins to Your Nuxt.js Web Application Dashboard
Adding plugins for Graph Charts libraries into your Nuxt.js Vuetify Web Application Dashboard with Chart.js and Apex Charts open source JavaScript library for graph chart data visualization
By:
Dykraf Posted:
How to Use Environment Variables in Nuxt.js Web Applications
Environment variables are very important if you are using different development stages such as the development stage, testing stage, or even in the production build environment stage.
By:
Dykraf Posted:
How to Connect PgAdmin 4 and PostgreSQL Server on Docker Container
Doing Web Development on a local machine requires multiple applications running together. Docker provides an os level virtualization on the host machine to have an application running together on the machine.
By:
Dykraf Posted:
How to Generate Dynamic Sitemap and Feed XML for your NuxtJS Website
How to create a dynamic XML sitemap and feed files for your NuxtJS Website for a better SEO performance support
By:
Dykraf Posted:
How MacBook Air M1 Just Works Out Fine for Web Programming
A story about how I got MacBook Air in my new office and Apple M1 Silicon Just Works Out Fine for Web Programming
By:
Dykraf Posted:
Strapi CMS Multilingual with Apollo GraphQL and Nuxt.js
Build a searchable multilingual help center website on top of Strapi CMS, Nuxt.js, Chakra UI, and Apollo GraphQL endpoint.
By:
Dykraf Posted:
First impression on using Strapi CMS a headless CMS
Strapi CMS is a great Headless CMS that provides rich features for any of your front-end side projects. RESTful or GraphQL is already implemented in the Strapi CMS system with rich content types, role permissions, and multilingual internationalization systems.
By:
Dykraf Posted:
How to Connect MySQL and MongoDB Servers on Docker Container
Running MySQL and MongoDB development server on local machines with Docker. Docker provides an os level virtualization on the host machine to have an application running together on the machine.
By:
Dykraf Posted:
How To Use useCallback In Reactjs Web Application
What is useCallback in Reactjs and how to use it to improve the performance of your Reactjs Web Application.
By:
Dykraf Posted:
Translation Table Model for Localization I18n
Website or web application with multilingual widely used by the company around the world for providing their product or information to the public.
By:
Dykraf Posted:
How To Use useEffect Hooks in React.js Application
It is a way to handle lifecycle events in function components, similar to how you would use lifecycle methods in class-based components.
By:
Dykraf Posted:
How To Have A Side Hustle For Web Developers
There are many ways that web developers can have a side hustle or a part-time business on the side of their full-time job
By:
Dykraf Posted:
VueJS Online and Offline Detection
Web Browser navigator API that represents the current internet connection state of the current browser's user agent.
By:
Dykraf Posted:
WordPress Set-Up for Different Home URL and Site URL
Have WP Admin with your hosting Public IP Address and WP Website with your domain name. The separation of Headless WordPress CMS from front-end website.
By:
Dykraf Posted:
My Static Websites Generator of Choices for Personal Favourite
Static Sites Generator is a great choice for developers that want to have a static website that has minimal maintenance and small and fast load file sizes.
By:
Dykraf Posted:
Nuxt.js Static Content using Vuex
Use Vuex state management in Nuxt.js Static Content Website and write your static website with markdown files.
By:
Dykraf Posted:
How To Add PostCSS Autoprefixer in Nuxt.js
A utility in Nuxt.js out of the box that really useful for older browser prefixes from PostCSS with autoprefixer.
By:
Dykraf Posted:
Using Loop in SCSS with @for and @each
Like other programming languages, except it’s on CSS. Operators, variables, extend, function and mixins also can be use in SCSS/SASS.
By:
Dykraf Posted:
CSS Preprocessor Are Fun To Use, Especially SASS
Making Layouts, Cards, Buttons, and Hover Effects never been this playful with only CSS and HTML assets in a static website.
By:
Dykraf Posted:
6 SEO List to Have in your Nuxt.js Website
A list of search engines optimizing your Nuxt.js website for better search results and indexing. On-site SEO with Nuxt.js modules and relevant JSON schemas.
By:
Dykraf Posted:
Nuxt.js Static Content AMP, Feed and Sitemap for Website SEO
There are some Nuxt Community modules to use for creating a Nuxt.js Website with AMP, Feed, Sitemap, on-page SEO support and of course some TailwindCSS framework.
By:
Dykraf Posted:
SEO in Next.js With Next-Seo and How To Implement in Your Website
Next.js community has become a place where it grows to become one of the popular React frameworks to work with.
By:
Dykraf Posted:
React Portfolios from Public APIs
A React or Vuejs project that you can add to your portfolios from public apis. Some ideas to start your front-end portfolio project.
By:
Dykraf Posted:
Next.js AMP Website with Simple Built-In Feature Support
Next.js brings AMP HTML support into the framework for developers with ease including the AMP libraries components to their webpages.
By:
Dykraf Posted:
Introduction how to start with Google AMP Version Websites
Google has made changes to AMP but assured users that they are still continue to support to the search engine result and will still impact your search results.
By:
Dykraf Posted:
Getting Started with Nuxt.js Static Content Website and SEO
With static HTML and the ultimate SEO support such as Sitemap, Feed, static websites are still a choice for those who like simplicity and minimum maintenance.
By:
Dykraf Posted:
A-List of Handy Nuxt Community Modules in Nuxt.js Projects
Nuxt.js is a very powerful VueJS framework with great support from the community. With modules made by the community for the community, building web applications become more time-efficient and faster.
By:
Dykraf Posted:
Stories
Code Road’s Web Development Story List
Code Road
Material UI Administrator Dashboard with Next.js
Code Road
Nuxt.js and Chakra UI Website Template
Code Road
How To Use Apex Charts in Nuxt.js Web Application Dashboard
Code Road
Nuxt.js Dynamic Sitemap and Feed for Static Websites
Code Road
Nuxt.js SEO Head Component
Code Road
Chart.js in Nuxt.js: How To Implement
Code Road
On-page SEO List to Have in your Nuxt.js Static Website
Code Road
How To Build VueJS Geo Location Weather Application
Code Road
MySQL Docker Container with MySQL Workbench and PhpMyAdmin
Code Road