Forem: CodeShinobi

“I Built Linkships After Getting Frustrated With Linktree — Here’s What Happened.”

CodeShinobi — Mon, 09 Mar 2026 16:38:23 +0000

Introduction

In the modern digital economy, creators, developers, entrepreneurs, and professionals rely heavily on their online presence. Platforms such as Instagram, TikTok, X (formerly Twitter), LinkedIn, and YouTube have become central hubs for communication, networking, and business growth. However, despite the enormous possibilities these platforms offer, they all share a surprising limitation: most allow users to include only one clickable link in their profile bio.

This seemingly small limitation has created a large problem. Individuals today manage multiple digital identities across different platforms. A developer might have a GitHub repository, a portfolio website, a newsletter, and several projects. A creator might have a YouTube channel, an online store, social media accounts, and a membership community. Sharing all these resources effectively becomes difficult when constrained to a single link.

It was within this context that Linkships was conceived and developed by Muhammad Abdulmalik Obansa. The platform aims to solve this challenge by providing a simple yet powerful solution: a centralized page where users can organize and share all their important links through a single URL.

This essay narrates the inspiration, design philosophy, technical development, and vision behind the creation of Linkships.

The Inspiration Behind Linkships

The idea for Linkships did not emerge from theoretical research but from real-world challenges experienced during daily online activities. As a developer and entrepreneur involved in building multiple digital projects, Muhammad Abdulmalik Obansa frequently faced the problem of organizing and sharing numerous online resources.

Each project required its own link, and each platform limited how those links could be displayed. Sharing a GitHub project meant leaving out a YouTube channel. Promoting a new product meant excluding a portfolio or blog. This fragmentation created friction both for the creator and the audience.

Visitors interested in learning more about a person’s work often had to search across different platforms to find all relevant information. This inefficiency highlighted the need for a centralized digital hub where all online identities could be presented in one place.

From this observation came a simple but powerful idea:

What if a single link could represent an entire digital identity?

That question became the foundation for Linkships.

The Concept and Vision

Linkships was designed around a straightforward concept: one link that connects everything.

Instead of managing multiple scattered URLs, users could create a personalized page that displays all their links in an organized and visually appealing layout. This page acts as a digital gateway, directing visitors to different parts of the user’s online ecosystem.

The broader vision behind Linkships extends beyond link aggregation. The platform is intended to become a digital identity hub, enabling creators and professionals to present their work, connect with audiences, and grow their online presence efficiently.

The core philosophy guiding the development of Linkships focused on three principles:

Simplicity
Users should be able to create a page and add links within minutes.

Accessibility
The platform should work seamlessly on both mobile and desktop devices.

Scalability
The system must be capable of supporting future features such as analytics, monetization tools, and integrations.

Designing the Platform

The design process for Linkships began by examining how users interact with link-sharing platforms. Most visitors access profile links from mobile devices, particularly through social media apps. Therefore, the platform needed to be mobile-first and optimized for fast loading times.

The user interface was designed to be clean and minimalistic. Instead of overwhelming users with complex customization tools, the focus was placed on clarity and usability.

Each Linkships page includes:

A profile section with the user’s name and description

A list of links displayed as clickable buttons

Social media icons for quick navigation

Optional customization options such as themes and colors

This design ensures that visitors can quickly find what they are looking for without unnecessary distractions.

The Development Process

Building Linkships required careful planning and the use of modern web technologies. The development process followed a structured approach that included ideation, prototyping, backend development, and deployment.

Planning and Architecture

The first stage involved defining the architecture of the platform. The system needed to support user authentication, profile creation, link management, and page rendering.

The architecture was divided into two main components:

Frontend – responsible for the user interface and user experience

Backend – responsible for data storage, authentication, and server logic

This separation allowed the platform to remain flexible and scalable as new features are added.

Frontend Development

The frontend interface was built using modern JavaScript frameworks that allow dynamic rendering of content and responsive design.

The main objectives during frontend development were:

speed

responsiveness

clean design

smooth user interactions

Users needed to be able to:

create accounts

customize their profiles

add and reorder links

preview their page before publishing

Every interaction was designed to feel simple and intuitive.

Backend Development

The backend system manages the core functionality of the platform. It stores user data, manages authentication, and retrieves link information whenever a visitor accesses a Linkships page.

Key backend responsibilities include:

user account management

secure login and authentication

link storage and retrieval

analytics data processing

Database systems were used to store profile information and link structures efficiently, ensuring fast retrieval when pages are visited.

Deployment and Infrastructure

Once development was complete, the platform needed to be deployed on reliable infrastructure capable of handling traffic from users around the world.

Cloud services were used to host the platform, ensuring:

reliability

scalability

security

Content delivery networks were also considered to improve loading speed across different geographic regions.

Challenges Encountered During Development

Like most software projects, the creation of Linkships involved several challenges.

One major challenge was balancing simplicity with functionality. While many link-in-bio tools exist, they often become complicated as more features are added. The goal for Linkships was to remain powerful yet easy to use.

Another challenge involved ensuring performance optimization. Because most visitors access link pages through mobile devices, every element had to load quickly even on slower internet connections.

Security was also a critical consideration. User data and authentication processes needed to be protected to maintain trust and reliability.

Through iterative testing and refinement, these challenges were addressed and improved throughout the development process.

Who Linkships Is For

Linkships is designed for a broad range of users who maintain a presence across multiple digital platforms.

These include:

content creators

developers

freelancers

startup founders

influencers

educators

entrepreneurs

musicians and artists

Anyone who needs to share multiple online resources can benefit from having a single, organized page that represents their digital identity.

The Future of Linkships

Although the current version of Linkships focuses on link aggregation, the long-term vision for the platform extends much further.

Future features under consideration include:

advanced analytics dashboards

creator monetization tools

digital product storefronts

community integrations

developer APIs

customizable themes and layouts

The ultimate goal is to transform Linkships into a comprehensive platform that empowers creators and professionals to manage their digital presence effectively.

Conclusion

The creation of Linkships demonstrates how a simple idea can evolve into a meaningful digital solution. What began as a personal challenge—managing multiple links across different platforms—became an opportunity to build a tool that benefits creators and professionals worldwide.

By providing a single link that connects an entire online identity, Linkships simplifies how people share their work, promote their projects, and connect with their audiences.

The journey from concept to launch involved creativity, technical problem-solving, and a clear vision for the future of digital identity. As the platform continues to evolve, Linkships aims to become more than just a link-sharing tool—it aims to become a gateway for creators, developers, and entrepreneurs to present their work to the world in a unified and powerful way.

Author:
Muhammad Abdulmalik Obansa

Niching Around

CodeShinobi — Wed, 06 Aug 2025 13:25:58 +0000

The whole ecosystem of technology is large and vast to accommodate everyone, both new and old people with advanced knowledge or experiences can earn and make money easily & quickly. By just completing huge or small amount of money in different currencies or cryptocurrency through tasks, gigs, or even jobs either freelancing remotely, hybrid, or on-site on the web.

Just surfing through the internet, posting your works, goals achieved either daily, weekly or even monthly online gains you visibility to get traffic which increases the high rate of being employed by clients and top companies. This truly shows the more merits of the internet globally, and brings the points of picking a Niche ( which means area of focus).

what I have learnt as a tech bro for past 6 years of my career

CodeShinobi — Fri, 25 Jul 2025 17:32:52 +0000

Discovery: I started tech due to passion and curiousity, seeing my big bro 24/7 on PC and watching hacker's role or code thrilling actions on TV. Although i started coding with a simple mobile app back in 2018, then with an mobile app called sketchware. Then after secondary school, I went to the an innovative and co-working space called Colab Innovative Hub, to learn the fundamentals of web developments and ui/ux design. That added the discovery badge to my inventory.

Self Taught or Awareness: After then bootcamp, I became a self taught developer or learner discovering new skills and furthering from what i learnt from the bootcamp. I started a Youtube Channel during 2 months after COVID-19 i.e may 2020, enlighthen people on what to do during the outbreak. And started creating a videos of programming and design.

Opportunities: I got job opportunities both remote and hybrid with the small skills, I had acquired from the bootcamp. My 1st gig started was a Youtube JavaScript Tutor for Lux Tech Academy, Kenya on my 2nd entry year as programmer.Then got my freelance job which was remote from Analogue Shifts 2021.

Meetups & Networking: Attended my 1st meetup during my bootcamp at Colab, which was Google DevFest 2019. I networked and met new people new and experts in the field, and i got know about more technologies on the day. And got know the evolution of the Web.

Stay Tuned For More

How to be a good frontend Developer

CodeShinobi — Sun, 26 May 2024 06:02:39 +0000

Becoming a good frontend developer involves mastering a mix of technical skills, best practices, and soft skills. Here are some key areas to focus on:
Technical Skills:
HTML/CSS: Understand the structure of HTML and the styling capabilities of CSS. Be proficient in layouts (Flexbox, Grid), responsive design, and CSS preprocessors like SASS or LESS.
JavaScript: Gain a deep understanding of JavaScript, including ES6+ features. Learn about concepts like closures, promises, and async/await.
Frameworks/Libraries: Familiarize yourself with popular frameworks and libraries such as React, Angular, or Vue.js. Understand the core principles of each and when to use them.
Version Control: Learn Git for version control. Understand how to commit, branch, merge, and manage code repositories.
Build Tools: Get to know tools like Webpack, Babel, and task runners like Gulp or Grunt. These help in automating tasks and optimizing your workflow.
APIs and AJAX: Understand how to interact with RESTful APIs and handle asynchronous data fetching using AJAX or Fetch API.
Testing: Learn about frontend testing frameworks and tools like Jest, Mocha, and Cypress. Writing unit and integration tests is crucial for maintaining code quality.
Best Practices:
Clean Code: Write readable and maintainable code. Follow conventions and style guides (e.g., Airbnb JavaScript Style Guide).Performance Optimization: Optimize your code for performance. Understand lazy loading, code splitting, and other performance enhancement techniques.
Accessibility: Ensure your applications are accessible to all users, including those with disabilities. Learn about ARIA roles and semantic HTML.Cross-Browser Compatibility: Test your applications on different browsers and devices. Use tools like BrowserStack for cross-browser testing.
Responsive Design: Ensure your applications work well on all screen sizes. Use media queries and responsive units (e.g., %, em, rem) effectively.Soft Skills:Problem Solving: Develop strong problem-solving skills to debug and resolve issues efficiently.
Communication: Communicate effectively with team members, designers, and stakeholders. Clear communication is key to understanding requirements and delivering on expectations.
Continuous Learning: Stay updated with the latest trends and technologies in frontend development. Follow blogs, attend conferences, and participate in the developer community.
Attention to Detail: Pay attention to design details and user experience. Small details can significantly impact the overall quality of the application.
Collaboration: Work well in a team environment. Use tools like Slack, Jira, or Trello to collaborate and manage tasks effectively.
Resources for Learning:
Online Courses:
Platforms like Udemy, Coursera, and freeCodeCamp offer comprehensive courses.
Documentation: Refer to official documentation of technologies you use (e.g., MDN Web Docs for HTML/CSS/JavaScript).
Books:
Read books like "Eloquent JavaScript" by Marijn Haverbeke and "You Don’t Know JS" by Kyle Simpson.
Community: Join forums like Stack Overflow, Reddit’s r/webdev, or participate in local meetups and conferences.
By focusing on these areas, you can develop the skills needed to be a proficient and successful frontend developer.

JavaScript Variables: Understanding the Basics

CodeShinobi — Tue, 07 Nov 2023 11:22:28 +0000

JavaScript, often abbreviated as JS, is a versatile and widely-used programming language that powers the web. One of the fundamental aspects of JavaScript is the use of variables, which play a crucial role in storing and manipulating data. In this article, we'll explore the basics of JavaScript variables, including their declaration, types, and common use cases.

What Are Variables in JavaScript?

Variables in JavaScript are containers that store data values. These values can be of various types, such as numbers, text, or even complex objects. Variables are used to keep track of information that can be accessed, updated, or manipulated within a JavaScript program.

Declaring Variables

In JavaScript, you can declare a variable using three different keywords: var, let, and const.

var: Historically, var was the primary way to declare variables in JavaScript. Variables declared with var are function-scoped, which means they are limited to the function where they are defined. However, var has some quirks and is considered outdated, so it's rarely used in modern JavaScript.
let: Introduced in ES6 (ECMAScript 2015), let allows you to declare block-scoped variables. Variables declared with let are accessible only within the block in which they are defined, like loops or conditional statements.
const: Also introduced in ES6, const is used to declare variables whose values should not be reassigned after their initial assignment. It's also block-scoped.

Here's an example of variable declarations:

var name = "John"; // Declared using var
let age = 30;      // Declared using let
const pi = 3.14;   // Declared using const

Data Types

JavaScript variables can hold different data types, including:

Numbers: Represented as integers or floating-point numbers (e.g., 10, 3.14).
Strings: Sequences of characters enclosed in single (') or double (") quotes (e.g., "Hello, World").
Booleans: Representing true or false values.
Objects: Complex data structures that can store various values and methods.
Arrays: Ordered collections of values.
Undefined: A special value indicating that a variable has been declared but hasn't been assigned a value.
Null: A value that represents the intentional absence of any object value.

Variable Naming

When naming variables in JavaScript, there are a few rules to follow:

Variable names are case-sensitive, so myVariable and myvariable are considered different variables.
Variable names can include letters, digits, underscores, and dollar signs.
Variable names cannot start with a digit.
JavaScript has reserved keywords (e.g., if, function, let) that cannot be used as variable names.
Use meaningful names that describe the variable's purpose for better code readability.

Common Use Cases

Variables are at the core of any programming language, and JavaScript is no exception. Here are some common use cases for variables in JavaScript:

Storing Data: Variables are used to store and manage data like user input, results of calculations, and more.
Control Structures: Variables are frequently used in conditionals (if statements), loops, and other control structures to make decisions and control program flow.
Function Parameters and Return Values: Functions often take parameters as variables and return values that can be be stored in variables.
DOM Manipulation: When working with web pages, variables are used to store references to HTML elements, allowing for dynamic manipulation of the Document Object Model (DOM).
API Requests: Variables can store data retrieved from external sources, such as web APIs.

Conclusion

JavaScript variables are essential for storing, accessing, and manipulating data in your programs. By understanding variable declaration, data types, and best practices for naming, you can leverage this fundamental concept to build powerful and dynamic web applications. Whether you're a beginner or an experienced developer, mastering JavaScript variables is a crucial step in your programming journey.

Becoming a Great Programmer: A Guide to Mastery

CodeShinobi — Wed, 01 Nov 2023 20:56:54 +0000

Introduction

Becoming a good programmer is not just about learning a programming language or mastering a specific technology. It's a journey of continuous learning and improvement, which involves not only technical skills but also problem-solving, communication, and collaboration. In this article, we will explore the key principles and practices that can help you become a great programmer.

Learn the Fundamentals

To be a good programmer, you must start with a strong foundation. Understand the fundamental concepts of programming, data structures, algorithms, and computer science. These concepts are timeless and apply across various languages and technologies. Learning the basics will give you a solid understanding that you can build upon throughout your career.

Choose the Right Language

While it's important to learn multiple programming languages, it's equally crucial to specialize in one or two that align with your interests and career goals. Mastering a language involves not only understanding its syntax but also its libraries, frameworks, and best practices. Becoming an expert in a language allows you to solve complex problems efficiently.

Practice Regularly

Programming is a skill that requires consistent practice. Work on real-world projects, participate in coding challenges, and write code every day to hone your skills. The more you practice, the more you will understand the nuances of coding, which will lead to better, more efficient solutions.

Problem-Solving Skills

Great programmers are excellent problem solvers. Focus on developing your problem-solving skills by working on algorithmic challenges, puzzles, and logical thinking exercises. Understanding how to break down complex problems into smaller, manageable steps is a crucial skill.

Code Readability and Documentation

Writing code is only half the battle; writing clean and readable code is equally important. Document your code, use meaningful variable and function names, and follow coding conventions. When your code is easy to understand, maintain, and debug, you become a more valuable programmer.

Version Control

Learn to use version control systems like Git. These tools are essential for collaborating with others and tracking changes in your codebase. Understanding how to branch, commit, and merge code will make you a more effective team member.

Collaborate and Communicate

Programming is often a team effort. Being a good communicator and collaborator is as important as writing code. Participate in code reviews, share your knowledge, and learn from others. Effective communication can lead to better code quality and more efficient projects.

Continual Learning

The tech world is ever-evolving. Keep up with the latest trends, technologies, and best practices. Attend conferences, webinars, and workshops. Read technical books, articles, and blogs. Being a lifelong learner is a defining trait of successful programmers.

Debugging Skills

Bugs are an inevitable part of programming. Learn to debug effectively. Use debugging tools, breakpoints, and logs to identify and fix issues in your code. A good programmer is not someone who never makes mistakes but someone who can quickly correct them.

Ethics and Security

Understand the ethical implications of your work. Follow best practices in security to protect your code and data. Being a responsible programmer means considering the ethical and security aspects of your work.

Conclusion

Becoming a good programmer is a journey that requires dedication, continuous learning, and the development of various skills. Whether you're just starting or have years of experience, these principles can help you on your path to becoming a great programmer. Remember that it's not just about the code you write but how you approach problems, collaborate with others, and contribute to the software development community. Keep improving and striving for excellence, and you'll be well on your way to becoming an exceptional programmer.

Installing Tailwind CSS with Create React App

CodeShinobi — Tue, 17 May 2022 13:36:56 +0000

Create your project

Start by creating a new React project with Create React App v5.0+ if you don't have one already set up.

npx create-react-app my-project
cd my-project

2.Install Tailwind CSS

Install tailwindcss and its peer dependencies via npm, and then run the init command to generate both tailwind.config.js and postcss.config.js.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure your template paths Add the paths to all of your template files in your tailwind.config.js file.

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS Add the @tailwind directives for each of Tailwind’s layers to your ./src/index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Start your build process

Run your build process with npm run start.

npm run start

Start using Tailwind in your project

Start using Tailwind’s utility classes to style your content.

export default function App() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

Credit TailwindCss

How to use Bulma CSS in React Js

CodeShinobi — Sat, 14 May 2022 12:51:26 +0000

Designed for mobile first and built using the Flexbox methodology, the open source CSS framework Bulma provides ready-to-use frontend components to build responsive web interfaces without JavaScript, making it ideal to use with React.

Known for having the simplest grid system, Bulma is so smooth that columns automatically resize themselves depending on the screen size of the device being used.

Unlike most CSS frameworks, Bulma isn’t an all-or-nothing framework; it enables you to import and use specific components, such as a breadcrumb or form, without importing the entire framework. It also offers a plethora of already customized components, elements, columns, layouts, and forms for designing websites, letting users get up and running quickly.

And because Bulma does not include any JavaScript, you have total control over your components’ functionality when using it with React, giving you the freedom to write the JavaScript code the way you deem fit instead of being restricted to Bulma’s opinion of writing JavaScript. For developers who want to use their own JavaScript implementation, the fact that Bulma follows a strict CSS-only approach enables them to achieve this.

Bulma has browser support on Chrome, Edge, Firefox, Opera, Safari, and Internet Explorer (10+), providing you with CSS classes to help you style your website.

In this tutorial, you will learn how Bulma CSS can be used with React.

Using Bulma CSS in React
While Bulma’s creators state there’s no need to have any knowledge of CSS to use Bulma, having a basic understanding of CSS will bolster your work in any CSS framework, including Bulma.

This tutorial assumes that you have a basic knowledge of CSS as well as the following:

Node 8.10 or higher installed on your local development machine
npx 5.2 or higher installed on your local development machine
A basic knowledge of HTML and JavaScript
A basic understanding of how to create components in React
Now, let’s see how we can use different Bulma CSS elements and components with React.

*Install Bulma CSS in React *
First, let’s spin up a React application by using Create React App and running the following command:

npx create-react-app bulma-tutorial
`
Once the React app is installed on your local machine successfully, switch to its directory using the cd bulma-tutorial command, and install the Bulma package into your React project using the npm install bulma command.

After installing Bulma, run npm start to access the app on your browser window via localhost:3000.

Now, navigate to the src folder, click App.js, and paste the code snippet below:
`

`
import 'bulma/css/bulma.min.css';

const App = () => {
return (

Primary
Link
Info
Success
Warning
Danger
Black
White
Dark
Light

)
}

export default App;
`
`
By importing Bulma CSS into our project, we can now access Bulma’s components, elements, variables, and more, and utilize Bulma within our project.

Stylizing with Bulma in React
Here is the created component App with the added parent div. By then exporting the component, we can target it in other sections of the application.
`

`
const App = () => {
return (

...

)
}

export default App;
`
`
Here, we added a

div

containing 10 `

buttons
` and styled it with Bulma CSS.

 <div className="buttons"> <button class="button is-primary">Primary</button> <button class="button is-link">Link</button> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button> <button class="button is-black">Black</button> <button class="button is-white">White</button> <button class="button is-dark">Dark</button> <button class="button is-light">Light</button> </div>

Most Bulma elements have alternative styles that require using either

is-

has-

to access them. For example, in the code snippet above, you’ll notice that each button contains two values: the element’s name, button, that signals to Bulma that this element is a button; and the modifier, is-dark, that accesses the style class property.

So, if you want to color an element of your app turquoise, for example, you’d use the is-primary modifier syntax.

The default color shades that can be used in Bulma are below, with their respective modifiers:

is-primary is turquoise.
is-link is blue.
is-info is cyan.
is-success is green.
is-warning is yellow.
is-danger is red.
is-white is white.
is-black is black.
is-dark is dark.
is-white is white.

With the buttons complete, save the code and return to the browser window to view what the updated page looks like. If everything is done correctly, it should look like the screen below:
Codepen

Altering sizes of elements and components

With the understanding of how to apply colors to elements and components within React, we can continue to manipulate buttons by using Bulma’s modifier classes, is-small, is-medium, and is-large, to resize any element or component.

As each modifier name implies, elements will become smaller by adding is-small, medium by adding is-medium, and large by adding is-large to the element’s property.

Let’s add these properties to the code in our App.js file and see how it plays out:

With the understanding of how to apply colors to elements and components within React, we can continue to manipulate buttons by using Bulma’s modifier classes, is-small, is-medium, and is-large, to resize any element or component.

As each modifier name implies, elements will become smaller by adding is-small, medium by adding is-medium, and large by adding is-large to the element’s property.

Let’s add these properties to the code in our App.js file and see how it plays out:

import 'bulma/css/bulma.min.css';

const App = () => {
      return (
        <div classname="main"> 
          <div className="buttons">
            <button class="button is-success is-small">Small</button>
            <button class="button is-warning is-medium">Medium</button>
            <button class="button is-danger is-large">Large</button>
          </div>
      </div>
      )
  }

export default App;

By adding is-small, is-medium, and is-large to the codebase, your React app should now look like the following:
Codepen

Controlling the state of elements and components

The ability to control the state of an element or component in an application is very important. To do this in a React app, use any of the three Bulma CSS properties below:

is-outlined
is-loading
disabled

In the code snippet below, the first button’s state is outlined by adding is-outlined, the second button shows a loading wheel by adding is-loading, and the third button becomes disabled by adding is-disabled.

import 'bulma/css/bulma.min.css'; const App = () => { return ( <div classname="main"> <div className="buttons"> <button class="button is-success is-outlined">Outlined</button> <button class="button is-warning is-loading">Loading</button> <button class="button is-danger" disabled>Disabled</button> </div> </div> ) } export default App;

You can see the output of this code below:

Utilizing Bulma’s customized code snippets

As mentioned earlier, Bulma offers a collection of already customized components that you can use to quickly customize your React apps instead of styling them from scratch.

For example, if we wanted to spin up a navigation bar, Bulma provides boilerplate code, and we can copy a snippet from their website, paste it into the App.js file, and add a closing tag to the img and hr elements.

import 'bulma/css/bulma.min.css'; const App = () => { return ( <div> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://bulma.io"> <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/> </a> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Home </a> <a class="navbar-item"> Documentation </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> More </a> <div class="navbar-dropdown"> <a class="navbar-item"> About </a> <a class="navbar-item"> Jobs </a> <a class="navbar-item"> Contact </a> <hr class="navbar-divider"/> <a class="navbar-item"> Report an issue </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="buttons"> <a class="button is-primary"> <strong>Sign up</strong> </a> <a class="button is-light"> Log in </a> </div> </div> </div> </div> </nav> </div> ) } export default App;

Now we have a navigation bar on my website with a simple copy and paste and can customize it further using the concepts used in this tutorial.

CodePen

Conclusion
Although this tutorial covers some of the fundamentals of using Bulma with React, they provide a base to expand upon when styling. You can learn more about how Bulma works, access code snippets, and experiment by visiting their official documentation. Feel free to explore these Bulma tutorials that I created on CodePen as well.

If you have any questions, you can leave them in the comments section below.

Full visibility into production React apps
Debugging React applications can be difficult, especially when users experience issues that are hard to reproduce. If you’re interested in monitoring and tracking Redux state, automatically surfacing JavaScript errors, and tracking slow network requests and component load time, try LogRocket.

LogRocket
is like a DVR for web and mobile apps, recording literally everything that happens on your React app. Instead of guessing why problems happen, you can aggregate and report on what state your application was in when an issue occurred. LogRocket also monitors your app's performance, reporting with metrics like client CPU load, client memory usage, and more.

The LogRocket Redux middleware package adds an extra layer of visibility into your user sessions. LogRocket logs all actions and state from your Redux stores.

Modernize how you debug your React apps — start monitoring for free

Credit Twitter @didicodes

Things that to know when accepting an order in any freelancing Platform

CodeShinobi — Wed, 11 Aug 2021 13:33:17 +0000

I have lost like 2-3 gig offers due a mistake i made on Fiverr by not creating an offer in a DM between me and my clients.
If you don't create an offer you're at risking the offer.
So create an offer to show