DEV Community: langford

a platform for creating sales voice agents for businesses

langford — Sat, 26 Jul 2025 22:23:28 +0000

This is a submission for the AssemblyAI Voice Agents Challenge

What I Built

i built a platform that lets businesses create AI sales reps (voice agents) that can hold near-real-time conversations, pitch products/services, collect customer information, and answer relevant questions

the voice agent can be embedded into a website as a widget and users can trigger a conversation via a floating action button

each agent is provided with domain-specific knowledge tailored to the business, ensuring that responses stay accurate. these agents aren’t just chatbots, instead, they act as an extension of the business, using preconfigured behavior, and product/service expertise defined by the business

the app shows usage analytics as well as summarized conversations with extracted information like lead quality, customer information and intent, as well as next steps the business can take based on the conversation between user and ai sales agent

this project falls primarily under the business automation and domain expert prompt categories

Demo

app link: click here

GitHub Repository

click here

Technical Implementation & AssemblyAI Integration

the frontend is built with Next.js with Tailwind CSS, and the backend is in Node.js, Express, PostgreSQL and the AssemblyAI SDK

AssemblyAI’s Universal-Streaming API powers real-time voice transcription via WebSockets. The low-latency transcription it provides is essential for delivering almost instantaneous transcriptions

after a successful web socket connection is made, the app connects to Assembly's transcriber and pipes audio from the frontend to a transcriber stream

here is a sample nodejs code for connecting to Assembly AI via a websocket:

import { AssemblyAI } from "assemblyai";
import ffmpeg from "fluent-ffmpeg";
import { PassThrough, Readable } from "stream";

async function handleWebSocketConnection(ws) {
  const client = new AssemblyAI({ apiKey: process.env.ASSEMBLY_AI_API_KEY });

  const transcriber = client.streaming.transcriber({
    sampleRate: 16_000,
  });


  transcriber.on("turn", (turn) => {
    if (!turn.transcript) return;
    ws.send(JSON.stringify({ transcript: turn.transcript }));
  });

  await transcriber.connect();
  const inputStream = new PassThrough();

  const ffmpegProcess = ffmpeg()
    .input(inputStream)
    .inputFormat("webm")
    .audioFrequency(16000)
    .audioChannels(1)
    .audioCodec("pcm_s16le")
    .format("s16le")
    .on("error", (err) => console.error("ffmpeg error:", err))
    .pipe();

  Readable.toWeb(ffmpegProcess).pipeTo(transcriber.stream());

  ws.on("message", (data) => {
    inputStream.write(data);
  });

  ws.on("close", async () => {
    inputStream.end();
    await transcriber.close();
  });
}

once transcription is received, it's sent to an llm that generates appropriate responses based on predefined context. any response from the llm is read out loud in human voice using amazon polly's predefined voices

that's all for now. cheers!

Learning the Fundamentals of Web3 and Blockchain Development

langford — Fri, 17 Feb 2023 16:27:04 +0000

Are you a programmer interested in learning more about blockchain technology? You have come to the perfect spot!

Blockchain technology and its associated web3 protocols offer an exciting and powerful way to create, store and use digital assets. But before you can start building on the blockchain, you must first understand the basics.

The first step to learning the fundamentals of blockchain and web3 development is to understand the underlying technology. Blockchain is a distributed ledger technology that allows for a secure and immutable digital ledger. It is composed of a network of computers that are connected to each other and can securely store, update and transfer data. This distributed nature of the blockchain makes it incredibly resilient and secure, as the data stored on the blockchain is difficult to corrupt or tamper with.

Once you have a basic understanding of blockchain technology, the next step is to learn about web3 protocols. Web3 protocols are the protocols and standards that allow for the development and deployment of blockchain-based applications. They provide the necessary tools and frameworks for developers to create, deploy and manage decentralized applications.

Once you are familiar with the basics of blockchain and web3 development, the next step is to learn the specific programming languages used for blockchain development. The most common languages used for blockchain development are Solidity and JavaScript, both of which are powerful and versatile programming languages.

Finally, you will need to learn the basics of developing and deploying smart contracts on the blockchain. Smart contracts are pieces of code that are stored on the blockchain and can be used to facilitate transactions and other behaviors. Learning the fundamentals of smart contract development will go a long way in your pursuit of becoming a blockchain developer.

Learning the fundamentals of blockchain and web3 development is a challenging but rewarding endeavor. With some dedication and hard work, you can become a proficient blockchain developer and begin building powerful applications on the blockchain.

How Blogging Can Boost Your Career as a Developer

langford — Fri, 30 Dec 2022 14:31:26 +0000

Introduction

Ah, blogging - that old but surprisingly helpful pastime. If you're a developer, blogging can be an incredibly rewarding activity. It can help you hone your skills and learn new technologies and also allow you to make some extra passive income! So, let's get to it! In this article, we'll cover the many benefits of blogging for developers and provide tips for getting started.

Benefits of Blogging for Developers

Developers have a lot to gain by blogging. Here are some of the key benefits you can experience:

Enhancing Your Skills and Knowledge

One of the most significant advantages of blogging as a developer is that it can help you hone your skills and learn new technologies. That's because blogging is a great way to stay up to date with industry trends, network with other professionals, and get a better understanding of what's going on in the tech world.

Furthermore, you can expand your knowledge base and become an expert by writing about technology topics. This can help you stand out from the crowd and make you a more attractive hire for employers.

Increasing Visibility and Credibility

Blogging is also great for increasing your visibility and credibility in the tech community. By creating a portfolio of work that showcases your abilities, you can prove to potential employers or clients that you know what you're doing.

Additionally, you can make yourself known to a larger audience by connecting with other professionals and industry experts. This can lead to exciting opportunities you otherwise wouldn't have access to.

Generating Passive Income Opportunities

Finally, blogging can be a great way to generate passive income. You can create monetized content, leverage affiliate marketing opportunities, and even build an audience to market your content. This can be a great way to make some money on the side.

Tips for Getting Started with Blogging as a Developer

Now that you know the benefits of blogging for developers, here are some tips for getting started:

Decide on a topic and create a plan for your blog posts.

Choose the right platform for hosting your blog and decide on the design elements you want to include.

Promote your blog posts on social media platforms and other channels to reach more people.

Make sure you are consistent in creating content and engaging with readers.

Use SEO tactics to help your blog posts rank higher in search engine results pages.

Track your progress by measuring key metrics such as page views, time spent on the page, etc., so you can adjust your strategy accordingly.

Leverage guest blogging opportunities to increase your reach and establish yourself as an authority in the field.

Conclusion

As you can see, blogging can be an excellent way for developers to enhance their skills, increase their visibility and credibility, and even make some extra money. So, get those creative juices flowing and start blogging today! With the right strategy and commitment, you, too, can start blogging and see the benefits for yourself.

5 Tips for Advancing Your Career as a Developer

langford — Mon, 26 Dec 2022 16:58:20 +0000

Photo by Fotis Fotopoulos on UnsplashIt is essential for you, as a developer, to constantly strive for career advancement and remain up to date on the most recent technologies and best practices. This article will offer five suggestions to help you advance in your development career.

#1 Invest in ongoing education

Continuing education is one of the most important things you can do to advance your career as a developer. You can practice and use your skills in various ways by taking online courses, attending conferences and workshops, and working on personal projects. If you want to remain competitive and valuable to potential employers, you must keep up with the changes in the technology industry.

#2 Network and develop relationships

Networking and developing relationships with industry professionals can significantly benefit your development career. Not only can it assist you in finding employment opportunities, but it can also offer you expert guidance and mentorship. Joining online communities, attending meetups and conferences, and participating in hackathons are all ways to build your network.

#3 Participate in open-source projects

Being a part of open-source projects is a great way to learn new skills, improve your portfolio, and help the community. You can collaborate with other developers on real-world projects and receive feedback from industry veterans through open-source projects. It's also a great way to show potential employers your skills. You can search for open-source projects on websites like GitHub and GitLab or contribute to projects you already use to get involved.

#4 Develop your soft skills

It is essential to improve your non-technical skills, such as communication, teamwork, and problem-solving, in addition to your technical skills. Employers place a high value on these skills, referred to as "soft skills," frequently. You can work on team projects, take communication classes, and practice presenting to others to improve your soft skills.

#5 Set Goals & Objectives

To advance your development career, you should set and work toward specific, attainable career objectives. You can create a career development plan that outlines your short- and long-term objectives to set career goals. It allows you to track your progress and success and helps you stay focused and motivated. You can also look for chances to learn new skills and have new experiences that will help you get where you want to go.

Conclusion

In conclusion, advancing your career as a developer requires continuous learning, goal-setting, networking, and a combination of technical and non-technical skills. By following these five hints, you'll be well-headed to propelling your profession and making progress as a designer.
Connect with me on Twitter @langford_dev and email me at langfordquarshie21@gmail.com

Is AI the End of Traditional Programming?

langford — Sun, 25 Dec 2022 17:07:39 +0000

Artificial intelligence (AI) has made its way into nearly every industry, including software development. Some have wondered whether traditional programming will become obsolete as AI technologies advance.

In this blog post, we’ll define AI and traditional programming, provide examples of AI’s use in software development, discuss the challenges and ethical concerns associated with AI in software development, and consider the potential future role of traditional programming in a world where AI is becoming more prevalent.

AI vs. Traditional Programming

First, let’s define AI and traditional programming.

AI refers to the ability of computers and machines to perform tasks that would typically require human intelligence, such as learning, problem-solving, and decision-making. On the other hand, traditional programming involves writing code in a specific programming language to create software applications.

How AI is used in software development

Now, let’s look at examples of how AI is used in software development.

One way AI is utilized is through code completion, where AI algorithms can suggest code snippets to programmers as they write code. AI can also detect code bugs, suggest fixes, and assist with natural language processing tasks, such as generating code from natural language descriptions.

Pros and cons of AI in software development

The potential benefits of using AI in software development include increased efficiency and accuracy. However, using AI in software development also has challenges and ethical concerns. One challenge is the need for large amounts of data to train AI algorithms, which can be a barrier for smaller organizations. Additionally, there is the potential for bias in AI algorithms if the data used to train them is biased. Ethical concerns surrounding the use of AI in software development include the potential impact on employment and the need for responsible use of AI.

So, what does the future hold for traditional programming in a world where AI is increasingly prevalent in software development? It’s essential to consider both the pros and cons of relying on AI versus traditional programming. On the one hand, AI can improve efficiency and accuracy in software development. On the other hand, traditional programming allows for more control and customization in the development process. Ultimately, AI and standard programming will likely continue to play a role in software development, with the balance between the two shifting over time.

Conclusion

In conclusion, AI is not the end of traditional programming but is changing how software is developed. While AI has the potential to improve efficiency and accuracy in software development, there are also challenges and ethical concerns to consider. The future role of traditional programming in a world where AI is increasingly prevalent remains to be seen. Both AI and standard programming will likely continue to coexist and evolve together.

NFT Metadata Upload DApp With React & Thirdweb Storage 🔐

langford — Wed, 09 Nov 2022 00:10:32 +0000

In this article, we’ll create an app that allows us to upload NFT metadata and get an IPFS link to the NFT.

What is Thirdweb Storage

Thirdweb Storage is a tool/package that makes it simple to store and access files using decentralized file storage systems such as IPFS. It currently only supports IPFS but will support Filecoin and Arweave in the future. More information is available in the thirdweb storage documentation.

When we store an item (file, string, object, etc.) with Thirdweb Storage, we are given a link to that item.

Installation and setup

First, we'll create our React app, which we'll call tw-nft-metadata-storage.

npx create-react-app tw-nft-metadata-storage

Next we install Thirdweb Storage with:

yarn add @thirdweb-dev/storage

If you use npm, you can install it with:

npm install @thirdweb-dev/storage

That's all we'll need to install for this app.

The Code

Let's begin by creating a few variables for the App.js file: name, description, image, link, and loading.

name - Name of NFT
description - NFT's description
image - Link to image source for the NFT
link - IPFS link to uploaded NFT
loading - displays when NFT is being uploaded

function App() {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [link, setLink] = useState("");
  const [loading, setLoading] = useState(false);

  return <main></main>;
}

export default App;

We have a basic layout in the App.js file with a page title, an upload button, and text input fields for the NFT's name, description, and image.

We also have a loader with the text loading... that appears when the app uploads our metadata; once the load is finished, the upload button appears.

function App() {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [image, setImage] = useState("");
  const [link, setLink] = useState("");
  const [loading, setLoading] = useState(false);

  return (
    <main>
      <h1>NFT metadata upload</h1>
      <input placeholder="name" onChange={(e) => setName(e.target.value)} />
      <textarea
        placeholder="description"
        onChange={(e) => setDescription(e.target.value)}
      />
      <input placeholder="image" onChange={(e) => setImage(e.target.value)} />

      {loading ? <p>uploading...</p> : <button>upload metadata 🚀</button>}

      <a target="blank" href={link} className="link">
        {link}
      </a>
    </main>
  );
}

export default App;

In the App.css:

* {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

main {
  max-width: 500px;
  margin: 80px auto;
}

input,
button,
textarea {
  border-radius: 5px;
  padding: 10px;
  outline: none;
}

input,
textarea {
  border: 2px solid #4b0aff3b;
  width: 100%;
  margin: 5px 0;
  resize: none;
}

button {
  margin-top: 10px;
  background: #4b0aff;
  border: none;
  color: #fff;
  cursor: pointer;
}

.link {
  display: block;
  margin-top: 30px;
  color: #4b0aff;
}

When you run the React app, you should see something like this in the browser.

The Logic

When you press the upload button, the function uploadMetadata() is called.

<button onClick={uploadMetadata}>upload metadata 🚀</button>

The uploadMetadata() function is an async function that contains the logic for upload and link generation. We'll start by displaying a loading indicator, then create an object with a name, description, and a link to the image of the NFT we want to upload. These values come from what we type into the input fields.

const uploadMetadata = async () => {
  setLoading(true);
  const metadata = {
    name: name,
    description: description,
    image: image,
  };
};

Thirdweb Storage allows for simple file uploading. It is outside this tutorial's scope, so we'll cover it in another article.

Following that, we will work on the upload and link generation logic.

const uploadMetadata = async () => {
  /***/
  const uri = await storage.upload(metadata);
  const url = storage.resolveScheme(uri);

  setLink(url);
  setLoading(false);
};

To upload the metadata, we use the storage.upload() function and pass the metadata object; to get the IPFS link to the NFT, we use the storage.resolveScheme() function and pass the URI returned after the upload is complete.

Finally, we set the NFT URL value to the link variable and hide the loader.

When you return to the browser and enter the values, then click the upload button, you should see a loader for a few seconds, followed by a link to the uploaded NFT, as shown in the gif below.

Conclusion

That’s it for this article.

If you liked this article, consider following me on Twitter and signing up for my weekly newsletter. Also checkout my YouTube for more developer content.

5 ways to make your website 10x faster ⚡🚀

langford — Thu, 18 Aug 2022 23:06:14 +0000

The speed of your website significantly impacts how long people stay on it, the conversion rate, and the number of views it receives. Unfortunately, some developers overlook minor changes that could be implemented to address this issue.

Take a look at these statistics. A one-second delay:

reduces page views by 11%
decreases customer satisfaction by 16%
reduces conversion rates by 7%

Although these percentages may appear negligible, they make a significant difference. When a visitor has a negative experience and leaves, it isn't easy to persuade him back.

In this article, I will show you five things you should do right now to improve the speed of your website!

#1 Minify file sizes

The larger the file sizes on your website, the more HTTP requests are made on each visit to your page, and the more bandwidth it takes to download your page's content, making your website load slower.

CSS and JavaScript files are typically large. In such cases, reducing the file size can help to improve load time. When a file is minified, unnecessary comments, whitespaces, and formatting are removed. Essentially, anything the computer does not require to understand your code is removed. Reducing file size and increasing the load time

Fortunately, there are numerous online tools available to help you minify files.

#2 Asynchronously load CSS and JavaScript files

Loading imported files asynchronously significantly increases load time. This is how it works.

The synchronous method involves loading files one line at a time. When a file is being loaded, it must finish before other files can be loaded. This process is often reflected in the frontend, where the HTML content is sometimes displayed without CSS styles. After a few seconds, it shows a normal looking website, resulting in a bad experience.

Asynchronous loading involves loading multiple files at the same time. This way, your website does not have to wait for one file's load process to complete before moving on to the next.

Here's how to go about it:

<!-- async load CSS file-->
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

// async load javaScript
<script async src="script.js"></script>

You can use the 'defer' attribute to tell the browser not to wait for the 'script' to finish loading. In this fashion, the 'script' loads in the background and executes when the DOM is entirely built.

<script defer src="script.js"></script>

#3 Media optimization

Images and media take the longest to load and have larger file sizes than HTML and CSS files.

We are familiar with JPEGs, MP4s, and other file types that typically have larger file sizes, contributing to slower media loads and a poor user experience.

However, some other file formats have relatively smaller file sizes. Even though these files are compressed, they do not affect the resolution or quality of your media files. As a result, while using smaller media files, quality is maintained.

Optimized image file types:

SVG
WEBP
AVIF
ICO
TIFF
ICO

Optimized video file types:

WEBM
MPEG-4 Part 14

Optimized audio file types:

#4. Use a CDN

Content Delivery Networks (CDNs) cache content on servers located all over the world. When a user requests a file, the request is routed to the CDN server closest to the user's geographical location rather than the hosting server, which is likely thousands of miles away. As a result, the load time is reduced.

CDNs you can use today

Akamai
CloudFlare
Stackpath
CDN77
CacheFly
Amazon CloudFront

#5 Test website performance

During testing sessions, you can identify and fix issues affecting your website's performance before it goes live. To diagnose performance issues on your website, use a tool like Google's PageSpeed. You can use the network tab in the dev tools to track the number of requests made and the amount of bandwidth used.

Conclusion

That's it for this article.

If you found it useful, consider following me on Twitter and signing up for my weekly newsletter for more web developer content.

10 GitHub repositories to Become a React Master 👨‍💻💯

langford — Wed, 17 Aug 2022 23:05:00 +0000

I came across a couple of GitHub repositories that will make you a React Pro in no time! If you're new to React or are already familiar with the framework and want to advance, you should check out these GitHub repositories.

1. Awesome React

⭐ 50.3K
A massive collection of nearly everything you need to know about React.

enaqx / awesome-react

A collection of awesome things regarding React ecosystem

Awesome React

A collection of awesome things regarding the React ecosystem.

React

React General Resources

React Tutorials

View on GitHub

2. React Bits

⭐ 12.3K
A collection of React patterns, techniques, tips, and tips.

vasanthk / react-bits

✨ React patterns, techniques, tips and tricks ✨

React Bits

A compilation of React Patterns, techniques, tips and tricks.

Gitbook format: https://vasanthk.gitbooks.io/react-bits

Github repo: https://github.com/vasanthk/react-bits

Your contributions are heartily ♡ welcome. (✿◠‿◠)

Translations by community:

中文版 (Chinese): react-bits-cn

한국어 (Korean): react-bits-ko

View on GitHub

3. React Developer Roadmap

⭐ 17.4K
An amazing road map to becoming a React developer.

adam-golab / react-developer-roadmap

Roadmap to becoming a React developer

React Developer Roadmap

README in Chinese

README in Japanese

README in Korean

README in Portuguese (Brazil)

README in Russian

README in Spanish

Roadmap to becoming a React developer in 2019:

Below you can find a chart demonstrating the paths that you can take and the libraries that you would want to learn to become a React developer. I made this chart as a tip for everyone who asks me, "What should I learn next as a React developer?"

Disclaimer

The purpose of this roadmap is to give you an idea about the landscape. The road map will guide you if you are confused about what to learn next, rather than encouraging you to pick what is hip and trendy. You should grow some understanding of why one tool would be better suited for some cases than the other and remember hip and trendy does not always mean best suited for…

View on GitHub

4. React Hooks Cheat sheet

⭐ 750+
A cheatsheet for React hooks with live editable examples

ohansemmanuel / react-hooks-cheatsheet

🦖 React hooks cheatsheet with live editable examples

A Cheatsheet with live editable examples 💪

A one-stop reference for the React hooks APIs
Doesn't replace the official docs.
However, it contains actual code examples each mimicking all APIs of hooks.
Contains some real world examples of cases / issues you'll likely run into
Most importantly, the cheatsheet contains live editable codes.

Examples

includes live examples 🙋‍

👉🏿👉🏿👉🏿 Get Started

Todos

Add example call signatures to all hooks
Add more examples that explain interesting use cases from the official Hooks FAQ

Contributing

Contributions of any kind are welcome. If you wanna knock off any of the todos above, please feel free to issue a PR. Got an interesting idea for the cheatsheet? Issue a PR :)

View on GitHub

5. ReactJs Interview Questions

⭐ 23.1K
This repository contains almost every React interview question imaginable.

sudheerj / reactjs-interview-questions

List of top 500 ReactJS Interview Questions & Answers....Coding exercise questions are coming soon!!

React Interview Questions & Answers

Click ⭐if you like the project. Pull Request are highly appreciated. Follow me @SudheerJonna for technical updates.

I recommend this React course if you’re serious about learning React and want to go beyond the basics
Want to ace your coding interview and get hired at your dream company? Take this coding interview bootcamp

Note: This repository is specific to ReactJS. Please check Javascript Interview questions for core javascript questions.

No.	Questions
Core React
1	What is React?
2	What are the major features of React?
3	What is JSX?
4	What is the difference between Element and Component?
5	How to create components in React?
6	When to use a Class Component over a Function Component?
7	What are Pure Components?
8	What is state in React?
9	What are props in React?
10	What is the difference between state and props?

…

View on GitHub

6. React in Patterns

⭐ 11.6K
A free book that talks about design patterns/techniques used while developing with

krasimir / react-in-patterns

A free book that talks about design patterns/techniques used while developing with React.

React in patterns

📚 A free book that talks about design patterns/techniques used while developing with React.

Book

Translations

简体中文

Content

In brief

Foundation

Data flow

MISC

Source code

The code samples used in the book are available here.

Other resources

React Design principles
…

View on GitHub

7. 30 Days Of React

⭐ 15.6K
This repository provides a step-by-step guide to learning React in 30 days. Before you begin, however, you should be familiar with HTML, CSS, and JavaScript. This repository is intended for beginners, intermediates, and advanced developers.

Asabeneh / 30-Days-Of-React

30 Days of React challenge is a step by step guide to learn React in 30 days. These videos may help too: https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw

30 Days Of React

Author: Asabeneh Yetayeh
October, 2020

Day 1 >>

# Day	Topics
00	Introduction How to Use Repo Requirements Setup
01	JavaScript Refresher
02	Getting Started React
03	Setting Up
04	Components
05	Props
06	List, Map and Keys
07	Class Components
08	States
09	Conditional Rendering
10	React Project Folder Structure
11	Events
12	Forms
13	Controlled and Uncontrolled Component
14	Component Life Cycles
15	Third Party Packages
16	Higher Order Components
17	React Router
18	Fetch versus Axios
19	Projects
20	Projects
21	Hooks
22	Forms Using Hook
23	Fetching Data Using Hooks
24	Project using Hooks
25	Custom Hooks
26	Context
27	Ref
28	project
29	Explore
30	Conclusions

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

Support the author to create more educational materials

View on GitHub

8. React World React Apps

⭐ 2.7K
This repository's /app directory contains a plethora of open source real-world projects built by highly experienced React developers.

jeromedalbert / real-world-react-apps

Real world React apps and their open source codebases for developers to learn from

Real world React apps

Real world React apps and their open source codebases for developers to learn from

Learn from React apps written by experienced developers.

You'll find the source code for the apps in the apps/ subdirectory.

Thank you to every developer who has worked on a project this repo links to, your work is helping developers learn React.

How to install on your computer

# Clone this git repo:
git clone git@github.com:jeromedalbert/real-world-react-apps.git

cd real-world-react-apps/

# The apps are linked to as git submodules.
# This will take some time... (see comment below for possible speedup)
git submodule update --init

# OR if you've got git 2.9+ installed try to run updates in parallel:
# git submodule update --init --jobs 4

How you can analyze the apps

Some of the examples below use ag, but could just as well use grep or equivalent.

Global searches

# Look for

…

View on GitHub

9. React Coding Challenges

⭐ 2.1K
As the name implies, this repository contains a curation of various React challenges ranging in difficulty level.

alexgurr / react-coding-challenges

A series of ReactJS coding challenges with a variety of difficulties.

⭐️ Looking for collaborators ⭐️

We're looking for people to come and help work on the latest challenge Coinbee. If you're interested, get in touch via our slack community or via my website alexgurr.com!

A series of ReactJS coding challenges with a variety of difficulties. Deep dive into the why here.

Interested in some React fundamentals / philosophies? Check out the react-philosophies GitHub repo.

Time To Estimate. A fun, simple way for agile teams to remotely estimate tasks together. Free, with no sign-up required.

mixmello. Create remixed versions of your favourite Spotify playlists.

The Challenges

Easy 🙂

🚀 Rocket Ship

Unnecessary re-renders, fine grained control.

Medium 😐

🌙 Dark Mode

State / shared state, DOM manipulation.

🐝 Coinbee

Data visualisation and graphing. API usage.

Hard 😬

🎧 Spootify

Loading state, API usage.

🤖 Chatter

Web sockets, events, callbacks & React hooks. Talks to Botty…

View on GitHub

10. React TypeScript Cheatsheet

⭐ 35.8K
If you're a React developer learning TypeScript, this repository includes a variety of cheatsheets that you'll find extremely useful.

typescript-cheatsheets / react

Cheatsheets for experienced React developers getting started with TypeScript

React+TypeScript Cheatsheets

Cheatsheets for experienced React developers getting started with TypeScript

Web docs | Español | Português | Contribute! | Ask!

👋 This repo is maintained by @swyx, @eps1lon and @filiptammergard. We're so happy you want to try out TypeScript with React! If you see anything wrong or missing, please file an issue! 👍

| |

All React + TypeScript Cheatsheets

The Basic Cheatsheet is focused on helping React devs just start using TS in React apps
- Focus on opinionated best practices, copy+pastable examples.
- Explains some basic TS types usage and setup along the way.
- Answers the most Frequently Asked Questions.
- Does not cover generic type logic in detail. Instead we prefer to teach simple troubleshooting techniques for newbies.
- The goal is to get effective with TS without learning too much TS.
The Advanced Cheatsheet helps show and explain advanced usage of generic types for people writing…

View on GitHub

Conclusion

That's it for this article.

If you found it useful, consider following me on Twitter and signing up for my weekly newsletter for more web developer content.

Create A Custom Mouse Pointer in HTML, CSS and JavaScript 👆

langford — Tue, 16 Aug 2022 15:18:00 +0000

In this tutorial, we'll see how to transform the standard mouse pointer into a fancy emoji that changes style when we click.

I will post a complete video tutorial on my YouTube channel, and you can view it there.

With that said, let's get coding!

What we'll be building

Start by creating these three files; index.html, styles.css, and script.js.

The HTML Structure

Create the standard HTML boilerplate code.

<!DOCTYPE html>
<html>
    <head>
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>

Then, in the <link> tag of our HTML file, we import the styles.css.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body></body>
</html>

Import the JavaScript file by setting the src of the <script> tag at the bottom of our HTML file to our script.js file.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <script src="script.js"></script>
    </body>
</html>

Finally, create a div with the class pointer. This element will be used in place of the default cursor. And since it’s an html element, we can apply numerous styles to it

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
        <title>Custom Mouse Pointer</title>
    </head>
    <body>
        <div class="pointer"></div>
        <script src="script.js"></script>
    </body>
</html>

That's all there is to the HTML file! You should get an empty page when you open the index.html file in your browser.

Styling Our HTML

First, we set the background of our webpage to a light purplish color.

body {
    background: #8499ff;
}

We set the webpage's height and width to the maximum height and width of the device that is viewing the page.

body {
    ...
    height: 100vh;
    width: 100vw;
}

Then, by setting the overflow property to none, we prevent vertical and horizontal scrolling.

body {
    ...
    overflow: hidden;
}

Finally, we hide the pointer.

body {
    ...
    cursor: none;
}

You should have this for the body:

body {
    background: #8499ff;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    cursor: none;
}

We're now going to style the pointer. We will not style the pointer directly but rather the ::after pseudo-class.

The ::after pseudo-class selects content that comes after a selected element—allowing you to insert text after a specific tag, which is what we'll do in this tutorial.

.pointer::after {
    content: "🤩";
    font-size: 40px;
}

We set the content property in the code above to an emoji (🤩). This emoji will be our default cursor icon. The size is then increased to 40px to make it a little bigger.

We change the default emoji every time the mouse is clicked to (😜). The class pointer-clicked is created to accomplish this. This class will be assigned to the pointer in the JavaScript.

.pointer-clicked::after {
    content: '😜';
}

Adding functionality with JavaScript

First select the pointer we created in the HTML with the document.querySelector() method

const pointer = document.querySelector(".pointer");

We have to listen for these two mouse events:

mousemove: When the mouse pointer is moved
mousedown: When the mouse pointer is clicked/pressed down

window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);

Lets create the callback functions for these event listeners.

const onPointerMove = (e) => {
    // on pointer move
}

const onMouseClick = () => {
    // on mouse click
}

When the actual pointer moves, we want to get its position and pass it to the pointer element we created in HTML.

const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

The clientY returns the vertical coordinate of the pointer relative to the viewport. The clientX property, on the other hand, returns the horizontal coordinate.

In the pointer.style.transform line, we change the location of the custom pointer by assigning it the coordinates of the actual cursor. Smart move! 😊

When the mouse clicks, we add a new class called pointer-clicked. And then remove this newly created class after 150 milliseconds in the setTimeout function, resolving the pointer to its default state.

const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}

At the end of everything, the script.js file should have this:

const pointer = document.querySelector('.pointer');

const onPointerMove = (e) => {
    const mouseY = e.clientY;
    const mouseX = e.clientX;
    pointer.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
}

const onMouseClick = () => {
    pointer.classList.add('pointer-clicked')
    setTimeout(() => {
        pointer.classList.remove('pointer-clicked')
    }, 150)
}

window.addEventListener("mousemove", onPointerMove);
window.addEventListener("mousedown", onMouseClick);

Now opening the index.html in your browser, you should see this!

Code is available on GitHub

Conclusion

That's it for this article.

If you found this article useful, consider following me on Twitter and signing up for my weekly newsletter for web and software development content.

Best Books For Learning Web Development 📚

langford — Mon, 15 Aug 2022 14:27:00 +0000

Tutorial videos and online courses are the most popular ways to learn almost anything. However, a fraction of people prefers reading from a physical book. If you fall into this category and want to learn web development, this article is for you.

We'll go over the best and most highly recommended books for learning and mastering web development. Let's get started.

1. HTML & CSS, and JavaScript & JQuery by Jon Duckett

This book deserves to be at the top of this list. It is, without a doubt, one of the most popular web development books among the tech community.

It is well written and simple to understand, especially for beginners.

This book is also available in digital format on the internet.

Get it on Amazon
Download here

2. Eloquent JavaScript, 3rd Edition: A Modern Introduction to Programming

Written by Marijn Haverbeke, Eloquent JavaScript is known as The Best JavaScript Book. It is centered around beginners and teaches you JavaScript from the basics to the more complex topics. It employs a practical method of teaching by building mini projects and simple games so you can further understand JavaScript.

Read online here
Get on Amazon

3. HTML and CSS Learn The Fundamentals In 7 days by Michael Knapp

Here’s why I love this book:

It is geared toward beginners
Doesn’t require the reader to have any prior web development experience at all
Is excellent for starting your web development journey

This book touches on almost everything there is to know about HTML and CSS. Knapp teaches basic HTML structure, hacking together a website, analytics, and SEO.

Get on Amazon
Download here

4. A beginner’s guide to HTML, CSS, Javascript, and Web Graphics, by Jennifer Niederst Robbins

This book, which has over 500 pages, breaks down concepts such as how the web and web pages work before delving into HTML, CSS, JavaScript, Responsive Design, and web graphics.

Download here

5. Kyle Simpson’s You Don’t Know JS

You Don't Know JS is a series of smaller books that cover different topics and delve deeply into the core mechanics of the JavaScript language.

This book is an excellent recommendation if you’re a beginner.

Download here

6. Bonus: The Clean Coder by Robert Martin

Based on the title, you've probably guessed what this book is about. You are correct! It's all about writing clean code. Robert Martin teaches us the art of writing clean, readable code, as well as tips on how to advance in your developer career.

Download here

Conclusion

That's it for this article.

If you found this article useful, consider following me on Twitter and signing up for my weekly newsletter for web and software development content.

How To Create A React Component Library ⚛️

langford — Sun, 14 Aug 2022 18:14:00 +0000

If you're reading this, I assume you're familiar with UI component libraries such as Material UI, Ant Design, Semantic UI, Chakra UI, and others. These libraries provide components like Buttons, Popups, Labels. Spinners, Loaders, etc.

Luckily, setting up a similar React UI component library is pretty simple, allowing you to create reusable components that can be imported and used in any React project. This article will walk you through the process of creating your very own React component library step by step.

Getting started

Creating our folder structure may be difficult, so we will take the easy way out by using the CLI tool create-react-library.

This tool configures our project with Rollup, Babel, and Jest for bundling, transpiling, and testing. It also allows our project to support TypeScript, complex peer dependencies, and CSS modules.

Installing create-react-library

This package requires Node version 10 or higher. The most recent Node version can be downloaded from the official NodeJs downloads page.

Install create-react-library by running the following command from your terminal:

npm install -g create-react-library

Creating our project

Now that we've installed create-react-library, we can run the command below to create our project. For this tutorial, we'll name our project as test-library. You can change the name to whatever you want.

create-react-library test-library

Or with npx:

npx create-react-library test-library

You will be required to enter a:

Package Name
Package Description
Author's GitHub Handle
GitHub Repo Path
License
Package Manager
Template

After the installation is done, open the newly created project in your text editor, you should have a similar folder and file structure as seen in the screenshot below. If something doesn't seem right, repeat the preceding command.

The package creates a local repository and links the packages together, allowing us to view and test our components locally. That's pretty cool.

Development

Our local development is divided into two separate parts:

Using rollup to watch and compile our code from src/ into the dist/ folder
Running and listening from changes in the example/ react project

Running the example react app

A basic react app that has already been linked to the library we're creating can be found in the example/ folder. Start the react app dev server by:

cd example # change directory into the example/ folder
npm start # runs a dev server for the react app

You might get an error like this:

{
  ...
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

If you do, open the package.json file in the example/ folder and change the default script object to:

"scripts": {
    "start": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider test",
    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js --openssl-legacy-provider eject"
  }

When you navigate to localhost:3000/ in your preferred browser, you should see this.

Running the component’s code

In the base directory, run this to watch for changes and compile the code from our src/ folder in real-time

npm start # runs rollup with the watch flag

The Component's Code

A sample component ExampleComponent has been created for us in the base directory's src/ folder. This component takes a text property and renders a simple UI, as seen in the browser.

import React from 'react'
import styles from './styles.module.css'

export const ExampleComponent = ({ text }) => {
  return <div className={styles.test}>Example Component: {text}</div>
}

The styles for the component can be found in the styles.module.css file. From here, you can style your component however you want.

/* add css module styles here (optional) */

.test {
  margin: 2em;
  padding: 0.5em;
  border: 2px solid #000;
  font-size: 2em;
  text-align: center;
}

Our component(s)' compiled code can be found in the dist folder. This is the folder we’ll be deploying to npm.

Importing Our Library

In the example/src/App.js file, our library is imported together with the CSS file containing all of our stylings.

import React from 'react'

import { ExampleComponent } from 'test-library'
import 'test-library/dist/index.css'

const App = () => {
  return <ExampleComponent text="Create React Library Example 😄" />
}

export default App

Publishing our project to npm

We run the following command to generate a commonjs and es version of our code, push it to the dist/ folder, and publish it to npm:

npm publish

Thats it!

Deploying to GitHub Pages

npm run deploy

This generates a build version of our example/ React app in which we imported and displayed our components. It will be pushed to our GitHub repo, and a GitHub page will be created.

Final words

That’s it! We've created our very own react component library that can be imported and used in any react project.

Milky UI is an open source react UI component project I'm working on. I created the project using the same method. The code is available on GitHub. It is also available on npm

I hope you found this post useful. See you in the next article

CSS Rainbow Text Animation 🌈

langford — Sat, 13 Aug 2022 22:11:00 +0000

In this tutorial, we'll make a simple CSS rainbow text animation.

Click here to checkout the source code for this tutorial.

HTML

In the index.html file, we'll only need an h1 tag with text.

<h1>Superdev.</h1>

CSS

Our CSS file will include the h1's basic styling as well as the code for animating the text.

Styling the text

h1 {
    background-clip: text;
    background: url('https://vivaldi.com/wp-content/uploads/colors-1024x656.png');
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: text 3s linear infinite;
}

Because no animations have been applied up to this point, our text will look like this:

Adding animations

@keyframes text {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 50%;
    }
}

That's it 🎉

You should see something like this when you open the index.html file in your browser.