DEV Community: Paul C. Ishaili

Solved: Prisma "Cannot find module" & pnpm Build Script Warnings in Next.js 15

Paul C. Ishaili — Sun, 25 May 2025 06:10:37 +0000

Ever been stuck trying to get Prisma working in a brand-new Next.js 15 project using pnpm? I certainly was! It starts with a cryptic error, then leads to another, but don't worry – the fix is straightforward.

Let me describe the exact sequence of events I experienced and, more importantly, the simple solution.

The Initial Roadblock: "Cannot find module"

My journey began when I tried to run pnpm prisma init for the first time. Instead of the expected output, I was greeted with an error message like this:

Cannot find module 'C:\Users\ISHAIL~1\AppData\Local\Temp\@prisma\cli-init@latest-1748041200000\node_modules\@prisma\cli-init\dist\index.js' imported from C:\Users\Ishaili Paul C\AppData\Local\pnpm-cache\dlx\8f1b58d75bac52f467fe74fc409e2c5f30d82b5c62aa5c7aeba18d87aadf6e07\197039ad1d8-2588\node_modules\.pnpm\prisma@6.8.2\node_modules\prisma\build\index.js

This "Cannot find module" error means that Prisma's necessary command-line tools or core engine couldn't be located. This usually happens because a critical part of Prisma's installation—a "build script"—was skipped.

My first instinct (and often a good one for package manager issues) was to clean up:

rm -rf node_modules  # Delete the node_modules folder
rm -f pnpm-lock.yaml # Delete the pnpm lock file
pnpm install       # Re-run installation

This cleared the "Cannot find module" error, but immediately presented the real underlying issue in the form of a pnpm warning:

The Real Problem: Ignored Build Scripts Warning

After reinstalling, pnpm gave me this informative (but initially puzzling) message:

The following dependencies have build scripts that were ignored: @prisma/client, @prisma/engines, prisma, sharp, unrs-resolver

To allow the execution of build scripts for these packages, add their names to "pnpm.onlyBuiltDependencies" in your "package.json", then run pnpm rebuild

Why does this happen?

Packages like @prisma/client, @prisma/engines, prisma (the CLI tool itself), and sharp aren't just simple JavaScript files. They often contain native code or need to run specific setup steps (called "build scripts" or "postinstall scripts") to download binaries (like Prisma's database query engine) or compile code specific to your operating system.

pnpm is designed for efficiency and strict dependency management. By default, it can be cautious about running these potentially complex build scripts during a standard pnpm install. While this can sometimes speed things up or prevent unexpected issues, for these specific packages, ignoring their build scripts means they won't function correctly. That's why you saw the "Cannot find module" error earlier – Prisma simply wasn't fully set up!

The Solution: Tell pnpm What to Build!

The fix is surprisingly simple and involves a quick configuration in your package.json file.

We need to explicitly tell pnpm to execute the build scripts for these essential packages.

Here's how to do it:

Open your package.json file.

You'll find this at the root of your Next.js project.

Add the pnpm.onlyBuiltDependencies configuration.

Insert a new top-level section named pnpm. Inside it, add an array called onlyBuiltDependencies. List every package that pnpm warned you about.

Your package.json should look similar to this (pay close attention to the new pnpm block at the bottom):

{
  "name": "my-nextjs15-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "react": "^18",
    "react-dom": "^18",
    "next": "15.x.x",         // Your Next.js 15 version
    "@prisma/client": "5.x.x", // Your Prisma client version
    "@prisma/engines": "5.x.x",// Essential for Prisma's core
    "prisma": "5.x.x",         // The Prisma CLI itself
    "sharp": "^0.33.x",        // For image processing
    "unrs-resolver": "^x.x.x"  // As per your warning
    // ...your other dependencies
  },
  "devDependencies": {
    // ...your dev dependencies
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "@prisma/client",
      "@prisma/engines",
      "prisma",
      "sharp",
      "unrs-resolver"
    ]
  }
}

The pnpm block goes at the root level of your package.json, alongside name, version, dependencies, etc.

The package names in onlyBuiltDependencies must exactly match those listed in the pnpm warning message.

Run pnpm rebuild:

After saving your package.json file, open your terminal in the project's root and execute:

pnpm rebuild

This command specifically tells pnpm to re-run the build scripts for the packages you've now explicitly allowed. You should see output from Prisma downloading its engine and potentially sharp compiling native modules.

Finally, Initialize Prisma!

Once pnpm rebuild completes successfully, you can now run your Prisma initialization command without issues:

pnpm prisma init

Prisma should now successfully generate your schema.prisma file and .env file, getting you ready to define your database models.

Conclusion

The "Cannot find module" error and the pnpm build script warning are two sides of the same coin when it comes to packages like Prisma. By understanding that certain dependencies require explicit permission to execute their build steps, you can quickly resolve these installation headaches using pnpm.onlyBuiltDependencies.

This ensures all your native dependencies are correctly installed, allowing you to dive into building your Next.js 15 application with confidence.

Happy coding!

VSCode IntelliSense Broken in Tailwind CSS v4? Here’s the Solution

Paul C. Ishaili — Thu, 20 Mar 2025 09:55:45 +0000

Tailwind CSS v4 brings a bold new approach to styling—shifting from a JavaScript-based configuration to a CSS-first paradigm.

However, this transition introduces a notable challenge: VSCode IntelliSense no longer auto-suggests custom classes as it did before.

In this article, we’ll dive deep into what’s changed in Tailwind CSS v4, explain why IntelliSense issues arise, and provide comprehensive workarounds and best practices for a smooth upgrade.

Whether you’re developing with React, Next.js, or another modern framework, this guide will help ensure your development workflow stays efficient and productive.

What’s New in Tailwind CSS v4?

CSS-First Configuration:
The traditional tailwind.config.js file is replaced by a more integrated, CSS-first approach. Customizations are now defined directly in your CSS files using directives like @theme, @variant, and others. This change streamlines configuration and improves runtime performance.
Performance Enhancements:
With the integration of tools like Lightning CSS (a Rust-based CSS processor), Tailwind v4 offers faster build times and more efficient style processing.
Modern Feature Support:
Tailwind v4 supports native cascade layers, container queries, and other cutting-edge CSS features that keep your projects future-proof.

While these innovations bring many benefits, 🤔 at what cost?

Why is this Intellisense issue happening?

Many developers have reported that after upgrading to Tailwind CSS v4, VSCode IntelliSense no longer provides autosuggestions for custom classes. 😜 I restarted my VSCode multiple times, hoping IntelliSense magically start working again!

Here’s why:

- Removal of the JavaScript Config File:
Previously, the tailwind.config.js file acted as a centralized source for theme customizations and class definitions. IntelliSense extensions relied on this file to parse and offer auto-completion suggestions. With the shift to a CSS-first approach, that explicit source is no longer present.

- File Detection Challenges:
If your project uses a global CSS file (or multiple files) to manage Tailwind directives, the IntelliSense extension may struggle to determine which file contains the relevant configuration. This can lead to incomplete or missing suggestions when you type class names in your markup.

- Project Structure Variations:
Depending on where you store your CSS files—whether in the project root or a subdirectory like assets — the extension might not automatically pick up changes in your @theme declarations.

Workarounds and Solutions

Fortunately, there are practical solutions to restore IntelliSense functionality in VSCode:

Configure the Experimental Config File Setting: Tailwind CSS IntelliSense now includes an experimental setting that lets you explicitly point to your CSS file containing Tailwind’s configuration. Add the following to your VSCode settings (in your settings.json):
```
"tailwindCSS.experimental.configFile": "path/to/your/global.css"
```
Replace "path/to/your/global.css" with the relative path to the CSS file where you’ve defined your @theme and other custom directives. This directs the extension to the correct source, ensuring that autosuggestions are based on your current configuration.
Enable Quick Suggestions for Strings: Sometimes, VSCode may not trigger suggestions inside JSX or TSX files. To remedy this, update your settings to enable quick suggestions for strings:
```
"editor.quickSuggestions": {
"strings": true
}
```
. This will ensure that when you type class names within your markup, the IntelliSense popup will appear as expected.
Validate Your Project Structure: Ensure that your Tailwind CSS files are consistently located. If you’re using a global CSS file for your Tailwind directives, try to keep it in a central location that the IntelliSense extension can reliably detect. Also, If your repository contains multiple CSS files with similar configurations (e.g., one in the project root and another in an assets folder), consider consolidating them or temporarily removing the one not in use. This will minimise confusion for the extension.
Restart the VSCode Extension Host: Restarting the extension host can help apply changes immediately and clear temporary glitches. To do this: Open the command palette (Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS), then Type and select “Developer: Restart Extension Host”

Best practices for a Smooth Tailwind CSS v4 Transition

To ensure a smooth transition and maximize the benefits of Tailwind CSS v4, follow these best practices:

Migrate your project incrementally: Start with new components or modules using the CSS-first approach before converting your entire codebase. This minimizes risk and allows your team to adapt gradually.
Keep Dependencies Updated: Make sure that all your related dependencies (e.g., PostCSS, autoprefixer) are updated to versions compatible with Tailwind v4.
Stay updated with the Community: Follow the official Tailwind CSS GitHub repository, forums, and community channels. Developers often share fixes and workarounds for common issues, and updates to the IntelliSense extension may address these problems in future releases.
Maintain clear documentation: Document your project’s configuration thoroughly. This will be useful for onboarding new team members and troubleshooting issues related to the new CSS-first configuration.

Final Thoughts

While the transition to a CSS-first approach introduces challenges—such as the loss of traditional IntelliSense autosuggestions—the solutions outlined above can help you maintain an efficient development workflow.

By configuring your VSCode settings to point to the correct global CSS file, enabling quick suggestions, and standardizing your project structure, you can overcome the IntelliSense hurdle and fully leverage the power of Tailwind CSS v4.

Referenced Resources:

If you’ve faced similar issues or found additional fixes, drop them in the comments! Let’s make this transition easier for everyone. 🚀

How I created reusable React Icon Component using react-icons library in an AstroJs Project.

Paul C. Ishaili — Sun, 30 Jun 2024 02:43:37 +0000

In the past weeks lately, I have been focused on building clean landing page websites using AstroJs framework.

One of the difficulties I often face however is the limitation of the icon libraries available in the astro-icons, as compared to the react-icon library.

So here's what I decided to do:

import React from 'react';
import * as FaIcons from 'react-icons/fa';
import * as MdIcons from 'react-icons/md';
import * as AiIcons from 'react-icons/ai';
import * as GiIcons from 'react-icons/gi';
import * as IoIcons from 'react-icons/io';
import * as CiIcons from "react-icons/ci";
import * as FiIcons from "react-icons/fi";
import * as LuIcons from "react-icons/lu";

const iconSets = {
  fa: FaIcons,
  md: MdIcons,
  ai: AiIcons,
  gi: GiIcons,
  io: IoIcons,
  ci: CiIcons,
  fi: FiIcons,
  lu: LuIcons,
};

const Icon = ({ name, set = 'fa', size = 24, color = 'currentColor', className = '' }) => {
  const IconComponent = iconSets[set][name];

  if (!IconComponent) {
    console.warn(`Icon ${name} from set ${set} not found`);
    return null;
  }

  return <IconComponent size={size} color={color} className={className} />;
};

export default Icon;

After which I imported this IconX (which I called it, that it doesn't conflict with the icon component from astro-icons) component into the components I would like to use it in.


<IconX size={24} set="ci" name={"CiSearch"} client:load />

Now I have access to the thousand of icons provided by react-icons right in my AstroJs Project.

Do like, share and follow for more.

Enjoy the read.

Building a Note-taking and Sharing App for University Students

Paul C. Ishaili — Thu, 09 May 2024 11:51:29 +0000

Introduction to C Programming and Data Structure.

Paul C. Ishaili — Sun, 20 Aug 2023 10:02:54 +0000

From the smallest electronic devices to the largest supercomputers, computers are an essential part of our daily lives. Despite the wide variety of computer types, they all share one thing in common: they are all driven by the C programming language (S, 2023).

Four important aspects of any programming language are:

the way it stores data,
the way it operates upon the data,
how it accomplishes input and output, and
how it lets you control the sequence of execution instructions in a program.

C is a programming language developed at AT & T's Bell's Laboratories of USA in 1972 by Dennis Ritchie and became popular because it is simple and easy to use. The C progrmaming language has been one of the most popular programming languages for the past 40 - 45 years.

Here are several reasons why you too should learn C as one of yor first programmming languages:

1. It makes more sense to learn C first and then migrate to C++, C#, or Java. Though this two-step learning process may take more time, at the end of it, you will definitely find it worthwhile of the trouble. C++, C#, or Java make use of the Object Oriented Programming (OOP) principle to organize programs which offers many advantages. While using this organizing principle, you need basic programming skills (Kanetkar, 2020).

2. Major components of well-known operating systems like Windows, UNIX, Linux, and Android are written in C. In addition, device driver programs, which are only written in C, are necessary to extend the operating system to work with new devices (Kanetkar, 2020).

3. Common consumer goods like microwaves, washing machines, and digital cameras are becoming smarter on a daily basis. This smartness comes from a microprocessor, an operating system, and a program embedded in these goods. These programs have to run quickly and operate in a limited amount of memory. C is the language of choice when building such operating systems and programs (Kanetkar, 2020).

4. The popular gaming frameworks (like DirectX) that are used for developing such games are written in C. You must have seen several professional 3D computer games where the user navigates some object, say a spaceship, and fires bullets at invaders (Kanetkar, 2020).

I hope that these are very convincing reasons why you should adopt C as the first step in your quest for learning programming.

Features of the C Language

From the introduction, you can already deduce most of the interesting features of the C language.

Modularity: C is a general-purpose structured language. This feature of C language allows you to break a code into different parts using functions which can be stored in the form of libraries for future use and reusability.. Structuring the code using functions increases the visual appeal and makes the program more organized and less prone to errors.
Dynamic Memory Management: One of the most significant features of C language is its support for dynamic memory management (DMA). It means that you can utilize and manage the size of the data structure in C during runtime. C also provides several predefined functions to work with memory allocation. For instance, you can use the free() function to free up the allocated memory at any time. Similarly, there are other functions such as malloc(), calloc(), and realloc() to perform operations on data structure and memory allocations.
Extensibility: You can easily (and quickly) extend a C program. This means that if a code is already written, you can add new features to it with a few alterations. Basically, it allows adding new features, functionalities, and operations to an existing C program.
Portability: Another feature of the C language is portability. To put it simply, C programs are machine-independent which means that you can run the fraction of a code created in C on various machines with none or some machine-specific changes.
Simple and Efficient: The basic syntax style of implementing C language is very simple and easy to learn. This makes the language easily comprehensible and enables a programmer to redesign or create a new application.
Recursion: Recursion means that you can create a function that can call itself multiple times until a given condition is true, just like the loops. C language provides the feature of recursion and recursion in C programming provides the functionality of code reusability and backtracking.
Pointers: Pointers point to a specific location in the memory and interact directly with it. With the use of pointers in C, you can directly interact with memory which enables you to operate with memory, arrays, functions, and structures.

Getting Started with C

Learning the English language and learning the C language are very similar, as illustrated in the figure below:

(Source: Kanetkar, 2020).

Alphabets, Digits and Special Symbols

Figure below shows the valid alphabets, numbers and special symbols allowed in C.

(Source: Kanetkar, 2020).

Constants, Variables and Keywords

The alphabets, digits and special symbols when properly combined form constants, variables and keywords.

Constants

A constant is an entity that doesn’t change. Constants in programming are often called literals, and in C, they can be divided into two major categories:

(a) Primary Constants

(b) Secondary Constants

These constants are further categorized as shown in the Figure below:

(Source: Kanetkar, 2020).

Variables

A variable, also known as identifiers in programming, is an entity that may change. There are as many types of variables in C as there are types of constants in it. This is because any C program performs many calculations, the results of which are stored in some cells (locations) of the computer's memory. To make the retrieval and usage of these values easy, the memory cells are given names. Since the value stored in each location may change, the names given to these locations are called variable names.

A variable name can be any combination of 1 to 31 alphabets, digits or underscores. Some compilers allow variable names whose length could be up to 247 characters. Do not create unnecessarily long variable names as it adds to your typing effort.

It's important to note also that the first character in the variable name must be an alphabet or underscore (_).

Keywords

A keyword is a word that carries special meaning. There are only 32 keywords available in C; they are words whose meaning has already been communicated to the compiler (or, more broadly, to the computer) (Kanetkar, 2020).

The figure below gives a list of these keywords.

(Source: Kanetkar, 2020).

Although it is not recommended to use the keywords as variable names, some C compilers allow you to create variable names that closely resemble the keywords (Kanetkar, 2020).

Structure of a C program

The structure of a basic C Program code consists of the Header and the Body.

#include <stdio.h>

int main()
{
    printf("Hello World!");
    return 0;
}

To explain futher,

The Header

This is the part that consists of all the header files inclusions, an example of this in our Hello World code is the #include <stdio.h>. This line of code here means that we are including a header file, indicated by the .h file extension, with the name stdio. In adding this line, we have made all the function declarations and macro definitions in that file to now be accessible for our use in our program coding.

Do you understand?

We will be seeing, exploring and using many more header files as we continue.

The Body

Yes, everything else apart from the head (this time, header). In thi C program, all codes that comes after the last line of the header files inclusion is part of the body.

The body can consist of various components: variable declarations, functions, statements etc. Most importantly, in a basic C program, our Hello World, there must be a int main() {}. This is the entry point for any C program and execution typically starts here.

The curly braces in that line of code contains the statement
that needs to be executed by the C program. In our case, we need our C program to print Hello World, therefore, our entry point function became:


int main()
{
    printf("Hello World!");
    return 0;
}

The return 0 is to indicate to the interpreter that our function ran successfully.

The `prinf()` function

The you notice that expression in our lines of code? Yes, the print(""), it is a very powerful function in a C program that is used to

Writing a C Program

🤔 Right now! You too want to write your first Hello World Program?

There are a number of online IDEs that are available for free that you can use to start writing your C program without installing a compiller. An example of this is GeeksforGeeksIDE.

For windows users, there are many IDEs available. Th most popular of them are CodeBlocks and Dev-CPP. CodeBlocks has strongly been recommended by the netizen community for development in C.

Don't know what Netizen is? 🤔 It's the Internet Community.

Linux users, GCC compiler comes bundled with Linux which compiles C programs and generates executables for us to run, and CodeBlocks can also be used with Linux.

🤓 Mac users, macOS already has a built-in text editor where you can just simply write the code and save it with a “.c” extension.

My favourite code editor is the VsCode editor. I write more on our to download and setup on Mac, and possibly on Windows for development in the C language.

Share your thoughts and comments

I am critically open for your constructive criticisms. Enjoy
as you explore the world of programming in C.

✌🏾 Peace.

Paul Ishaili C.

References

Kanetkar, Y. (2020). Let Us C: Authentic Guide to C PROGRAMMING Language 17th Edition (English Edition). Let Us C.
S, R. A. (2023). Use of C language: Everything you need to know. Simplilearn.com. https://www.simplilearn.com/tutorials/c-tutorial/use-of-c-language

5 Authentic Websites to Generate Stunning Favicons for Your Next.js or React Project

Paul C. Ishaili — Sat, 05 Aug 2023 22:20:31 +0000

Have you ever come across a website with an impressive logo and a seamless user interface, yet found its browser tab lacking that distinctive touch? That's where favicons come into play! Favicons are those tiny, yet impactful, icons that grace your browser tabs, bookmarks, and browser history, leaving a lasting impression on your users.

If you're developing a Next.js or React app, don't overlook the power of a well-crafted favicon. Not only does it add a touch of professionalism, but it also reinforces your brand and provides users with a visual cue that keeps them engaged.

In this post, I'll share five authentic websites that will help you generate perfect favicons for your Next.js or React project. Let's dive in! 🚀

1️⃣ Favicon.io 🎨 https://favicon.io/
Favicon.io offers a user-friendly interface, making favicon creation a breeze. Simply upload your logo or icon, and Favicon.io generates a comprehensive set of favicon files compatible with all major browsers and devices. It also provides additional options like Apple Touch Icons and Windows 8/10 tiles for complete branding coverage.

2️⃣ Favicon Generator 🛠️ https://www.favicon-generator.org/
Favicon Generator is a powerful tool that caters to both novices and advanced users. It allows you to upload your image and provides customization options for different platforms. Additionally, it offers an extensive library of pre-designed favicons if you're looking for some creative inspiration.

3️⃣ RealFaviconGenerator 🔄 https://realfavicongenerator.net/
RealFaviconGenerator takes favicon generation to the next level. It automatically generates favicons for not only browsers but also for various platforms like Android, iOS, and even Windows. The website also checks for favicon compatibility issues and helps you fix any potential problems.

4️⃣ Favic-O-Matic 📦 https://favicomatic.com/
Favic-O-Matic is an easy-to-use tool that caters to those who prefer simplicity. Upload your image, and it instantly generates a package of favicon files for you. You'll find all the standard favicon formats, ensuring your website looks great across all devices.

5️⃣ Genfavicon 🎯 https://www.genfavicon.com/
Genfavicon is a nifty favicon generator that allows you to create favicons in a matter of seconds. It supports a wide range of image formats and provides handy options like favicon size adjustments, background color selection, and more.

💡 Pro Tip: When choosing or designing your favicon, keep it simple, memorable, and aligned with your brand's identity. Also, ensure that the favicon is appropriately sized (usually 16x16 or 32x32 pixels) for optimal display.

With a well-designed favicon, you're not just enhancing your website's identity, but also providing users with a memorable and cohesive browsing experience. ✌🏾 Happy development and coding!

Follow me for more insights. I am Mr. Paul Ishaili, a dedicated Software Developer based in Abuja.

webdesign #favicons #branding #Nextjs #React #webdevtips

How I fixed Module '"@prisma/client"' has no exported member 'PrismaClient'.ts

Paul C. Ishaili — Mon, 08 May 2023 09:23:18 +0000

I switched to using pnpm over npm and yarn after discovering the benefits over the other package manager for developments.

So today i ran into the bug in the image, stating that Module '"@prisma/client"' has no exported member 'PrismaClient'.ts.

First, I thought this is an issue related to the prisma or @prisma/client package, until I browse through the web and discovered opened issues regarding this same error. it was coming from the pnpm package.

This github issue thread really helped: https://github.com/prisma/prisma/issues/13672.

How I fixed?

I navigated to prisma.schema file and updated my generator client block of code to this:

generator client {
  provider = "prisma-client-js"
  output   = "../node_modules/.prisma/client"
}

After which, I ran the npx prisma generate command again, and 💥 Boom! Module import error got fixed! 🎉

Thanks for reading, and I am happy to help.

Remember to check out the GITHUB THREAD.

Follow me on Twiiter for more interesting updates!

Configuring vscode to Pro Level

Paul C. Ishaili — Wed, 18 Jan 2023 02:52:14 +0000

Introduction to Solidity

Paul C. Ishaili — Mon, 19 Dec 2022 03:24:31 +0000

Introduction

In the beginning, there was Bitcoin. It was a fast, easy way to exchange money in a decentralized way – no banks involved. And people could trust it because every transaction is recorded in a public ledger that can’t be changed.

But Bitcoin was limited. Blockchain technology had the potential to do so much more than peer to peer currency exchanges if it had the right code. So the Ethereum network was created, underpinned by a new language called Solidity.

What is Solidity?

Solidity is a brand-new programming language created by the Ethereum which is the second-largest market of cryptocurrency by capitalization, released in the year 2015 led by Christian Reitwiessner.

Solidity is an object-oriented, high-level langauge designed for implementing smart contracts on the Ethereum Virtual Machine (EVM).

While Bitcoin provides rewards for running a transaction, Ethereum charges fees for executing software instructions. The gas mechanism in Ethereum lets users pre-pay for the instructions they want to execute on the EVM using Ether, its native currency. The contracts that are run using the EVM are written using Solidity.

Solidity is currently the core language on Ethereum and other private blockchains operating on competing platforms, such as Monax and its Hyperledger Burrow blockchain which uses Tendermint for consensus.

Historical View

August 2014: The Solidity language is proposed by Gavin Wood.
October 2014: Solidity is adopted as a language by Monax, a rival platform.
August 2015: Solidity is officially released.

The Solidity project team was led by Christian Reitwiessner, and they were successful in creating a Turing-complete, object oriented programming language for implementing smart contracts. Being a high-level language means developers create smart contracts without having to manipulate system-level information like memory or bytecode to perform computations.

The profound influence of Solidity from C++ can be seen in the syntax for variable declarations, for loops, the concept of overloading functions, implicit and explicit type conversions and many other details.

In the early days of the language, Solidity used to be partly influenced by JavaScript. This was due to function-level scoping of variables and the use of the keyword var. The JavaScript influence was reduced starting from version 0.4.0. Now, the main remaining similarity to JavaScript is that functions are defined using the keyword function. Solidity also supports import syntax and semantics that are similar to those available in JavaScript. Besides those points, Solidity looks like most other curly-bracket languages and has no major JavaScript influence anymore.

Another influence to Solidity was Python. Solidity’s modifiers were added trying to model Python’s decorators with a much more restricted functionality. Furthermore, multiple inheritance, C3 linearization, and the super keyword are taken from Python as well as the general assignment and copy semantics of value and reference types.

Terms Associated with Solidity language

In programming with the solidity language there are terms associated with the sphere.

Ethereum

Ethereum is a decentralized open-source platform based on blockchain domain, used to run smart contracts i.e. applications that execute the program exactly as it was programmed without the possibility of any fraud, interference from a third party, censorship or downime. It serves a platform for nearly 260,00 different cryptocurrencies.

Ehter

Ether is the cryptocurrency generated by ethereum miners used to reward for the computations performed to secure the blockchain.

Ehtereum Virtual Machine (EVM)

Ethereum Virtual Machine (EVM) is a runtime environment for executing smart contracts in ethereum. It focueses widely on providing security and execution of ntrusted code using an internaitonal network of public node. EVM is specialized oto prevent Denial-of-Service attack and confirms that theprogram does not ensure that the commnication is established without any potential interference.

Smart contract

Smart contract are high-level program codes that are compiled to EVM byte codes and deployed to the ethereum blickchain for further execution. It allows us to perform credible transactions without any interference of the third party. These transactions are traceable and irreversible.

Features of Solidity

The features of Solidity programming language can be numerous, and these include:

It is high level programming langauge designed for implementing smart contracts.
It is a statically typed object-oriented (contract-oriented) language.
It is influenced by C++, Python and JavaScript and it is designed to run on the Ethereum Virtual Machine (EVM).
It supports complex user-defined programming libraries and inheritance.
It is the primary language for blockchains running platforms.
It is a language that can be used to creating contracts like voting, blind auctions, crowdfunding, multi-signature wallet, etc.

How Solidity works

The beauty of the Ethereum ecosystem is that so many different cryptocurrencies and decentralized applications can use it. Smart contracts make it possible for unique technologies to be made on Ethereum for all kinds of businesses and organizations.

Smart contracts built using Solidity can be thought of as a way to automate business and non-business processes between different people. This ensures that people making transactions on the blockchain do not have to worry about risks such as fraud or not being able to use the same currency.

One of the key components that makes the execution of Solidity code possible is the EVM. The EVM is described as a virtual computer on the blockchain which turns people’s ideas into code that runs applications on the blockchain.

Under the hood, Solidity creates machine-level code that is executed on the EVM. A compiler is used to break down high-level human-readable code, which it turns into instructions that the processor reads. Different platforms provide free Solidity compilation, including the Remix online compiler and a downloaded command-like compiler on a PC.

EVM smart contracts have some limitations which need to be addressed. One of the most significant of these is the limited access to useful library functions for parsing JSON structures or floating-point arithmetic.

Why Solidity language

The feasibility of Solidity programming for Ethereum blockchain depends a lot on the value advantages it delivers.

Other than the basic functionalities, Solidity offers many interesting features which verify that it is a better option than many Ethereum-based programming languages.

The first benefit of Solidity programming refers to the support for complicated data types and member variables alongside the fundamental data types.
Furthermore, Solidity programming language also offers an Application Binary Interface or ABI for enabling data type safety. The Application Binary Interface (ABI) could help in quick identification of errors when the compiler recognizes any data type mismatch for specific variables.
Another popular highlight of Solidity programming in Ethereum points towards the effect of ‘Natural Language Specification.’ Solidity leverages the Natural Language Specification for transforming user-centric specifications into a language that is comprehensible to machines.

The other critical advantages of using Solidity to build decentralized applications and smart contracts would include the following:

Easy access to object-oriented attributes in smart contracts, such as multi-level inheritance traits.
Solidity supports multiple variants of supporting roles by leveraging the Application Binary Interface or ABI.
The easier syntax helps beginners in learning the fundamentals of smart contracts and blockchain development.
Development of smart contracts on Solidity programming language would help in driving secure and trustworthy processes for various platforms dealing with agreements between two parties.

Applications of Solidity

Solidity is the foundation of the Ethereum network. No Solidity = no Ethereum. Here’s what you can do, thanks to the language.

Dapps: The programming language gives developers the ability to create their own decentralized apps. A way to think about is like apps you get on your smartphone. You can download all kinds of apps from the app store, from games to fitness to banking. Dapps are the same. The main difference is that they are open source and don’t have a middleman (hence the word decentralized’). Just like apps in the Apple app store are built to run on iOS, Dapps on Ethereum are built to run on Solidity.
Smart contracts: Within Dapps, there are pieces of code known as smart contracts. These help people exchange money, shares, property and nearly anything of value when certain conditions are met. That eliminates the need for an expensive third party like a notary.
ICOs: Developers can also create their own tokens and launch an ICO right on the Ethereum platform. These tokens are known as ERC20 tokens; examples include OmiseGO, 0x, and the Basic Attention Token.

Conclusion

Ethereum is changing. The slew of developments and upgrades are bundled together under the banner, Ethereum 2.0. This will include developments like a new proof of stake, and sharding to make the blockchain run faster.

It’s all being done as an open source project by a large group of developers and researchers. This community goes far beyond the Ethereum Foundation – the group behind Ethereum. As such, there have been problems, disagreements, and roadblocks along the way, you can read about some of those issues in our ongoing coverage on the future of Ethereum. But whatever happens Solidity is here to stay.

Futher Reading & Resources

Bitcoin Whitepaper. https://bitcoin.org/bitcoin.pdf
Ethereum Whitepaper. https://ethereum.org/en/whitepaper/
How to learn Solidity in 30 days. https://medium.com/coinmonks/how-to-learn-solidity-in-30-days-78b02e503d23
The Complete Guide to Full Stack Ethereum and EVM Development. https://dev.to/dabit3/the-complete-guide-to-full-stack-ethereum-development-3j13
Tips And Tricks In Solidity. https://techblog.geekyants.com/tips-and-tricks-in-solidity
Learn Solidity, Blockchain, and Smart Contracts in a Free 16-Hour Course. https://www.freecodecamp.org/news/learn-solidity-blockchain-and-smart-contracts-in-a-free/

References

Calvin Ebun A., (2021). What Is Solidity and How Is It Used to Develop Smart Contracts?. https://www.makeuseof.com/what-is-solidity/

Matt Hursey, (2019). What is Solidity Programming Language?. https://decrypt.co/resources/solidity. https://www.makeuseof.com/what-is-solidity/

Solidity - Useful Resources. https://www.tutorialspoint.com/solidity/solidity_useful_resources.htm

Vedant Chainani, @envoy_. (2022). History and Origin of Solidity. https://dev.to/envoy_/history-and-origin-of-solidity-2mhl

Follow on Twitter for more.

Continuous deployment for front-end projects with surge.sh

Paul C. Ishaili — Thu, 17 Nov 2022 02:10:21 +0000

Surge.sh has indeed boosted my efficiency for deploying front-end projects.

How to get started

Globally install surge.sh
```
npm install -g surge
```
Run the surge command
```
surge
```
Setup an email and password
Assign a domain for your project

Add this command to your package.json scripts

...
"deploy": "surge --domain your-assigned-domain.surge.sh"

Run the command when next your build is ready.

Voila 🚀!

Was this helpful? Let me know in the comment section, especially compared to deploying on other platforms.

I am Paul Ishaili C., a software engineer and tech writer. I share interesting thoughts and processes on solving problems and truly understanding programming.

Follow me on Twitter and LinkedIn

Credits

Cover image: Mimadeo

Create react app and node.js server in one line

Paul C. Ishaili — Thu, 27 Oct 2022 06:31:58 +0000

mkdir client server && cd client && npx create-react-app . && npm i react-router-dom && cd ../server && npm init -y && npm i express

Transitioning from NoSQL to also implementing SQL

Paul C. Ishaili — Tue, 25 Oct 2022 10:11:55 +0000

Transitioning from NoSQL to also implementing SQL has been a great leap in my career as a developer.

Here are a few important tips that I have learned and are helping me in implementing SQL properly in projects.

The MySQL workbench

The MySQL Workbench is an alternative to the MySQL command line. It enables the creation of schemas and tables using the GUI and also generates query codes that can be run on the command line. It is a great tool when working with structured data.

Communicating from NodeJS to MYSQL Database

I experienced difficulties here due to the fatal authentication error I received after installing the MySQL node package. The solution that I had for this was to rather install mysql2 in place of the MySQL, import as MySQL, and use it in my server.js.

Thanks to this resource on stackoverflow for helping with this solution.

I'm Paul Ishaili C., and I share interesting thoughts and processes for solving problems and truly understanding programming.

developer #programming #nodejs #mysql #database #sql #projects #career #nosql

Join my Telegram Channel 👉 https://t.me/devpacademy for more.

DEV Community: Paul C. Ishaili

Solved: Prisma "Cannot find module" & pnpm Build Script Warnings in Next.js 15

The Initial Roadblock: "Cannot find module"

The Real Problem: Ignored Build Scripts Warning

Why does this happen?

The Solution: Tell pnpm What to Build!

Open your package.json file.

Add the pnpm.onlyBuiltDependencies configuration.

Run pnpm rebuild:

Finally, Initialize Prisma!

Conclusion

VSCode IntelliSense Broken in Tailwind CSS v4? Here’s the Solution

What’s New in Tailwind CSS v4?

Why is this Intellisense issue happening?

Here’s why:

Workarounds and Solutions

Best practices for a Smooth Tailwind CSS v4 Transition

Final Thoughts

Referenced Resources:

How I created reusable React Icon Component using react-icons library in an AstroJs Project.

Building a Note-taking and Sharing App for University Students

Introduction to C Programming and Data Structure.

Features of the C Language

Getting Started with C

Alphabets, Digits and Special Symbols

Constants, Variables and Keywords

Constants

Variables

Keywords

Structure of a C program

The Header

The Body

The prinf() function

Writing a C Program

Share your thoughts and comments

References

5 Authentic Websites to Generate Stunning Favicons for Your Next.js or React Project

webdesign #favicons #branding #Nextjs #React #webdevtips

How I fixed Module '"@prisma/client"' has no exported member 'PrismaClient'.ts

How I fixed?

Configuring vscode to Pro Level

Introduction to Solidity

Introduction

What is Solidity?

Historical View

Terms Associated with Solidity language

Ethereum

Ehter

Ehtereum Virtual Machine (EVM)

Smart contract

Features of Solidity

How Solidity works

Why Solidity language

Applications of Solidity

Conclusion

Futher Reading & Resources

References

Follow on Twitter for more.

Continuous deployment for front-end projects with surge.sh

How to get started

Credits

Create react app and node.js server in one line

Transitioning from NoSQL to also implementing SQL

developer #programming #nodejs #mysql #database #sql #projects #career #nosql

The `prinf()` function