teleren/devto huggingface dataset:
Level Up Your Coding Skills for Free!
Tags: webdev, codenewbie
Published: 2024-06-09 13:19:24

---
title: Level Up Your Coding Skills for Free!
published: true
description: Explore these fantastic free resources for web development, backend development, data, APIs, DevOps, and programming languages.
tags: webdev, codenewbies
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36qspkqsqmp7lfueuyhm.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-09 12:46 +0000
--- 
Are you ready to enhance your programming skills? Explore these fantastic free resources for web development, backend development, data, APIs, DevOps, and programming languages.

### Web Development

* 🌐 **HTML:** w3schools.com/html
    
* 🎨 **CSS:** w3schools .com/css/
    
* 💎 **Tailwind CSS:**[tailwindcss.com](https://tailwindcss.com/)
    
* ⚡ **JavaScript:**[javascript.info](https://javascript.info/)
    
* 🔷 **TypeScript:** typescriptlang.org/docs/
    
* 🔺 **Angular:** angular.io/tutorial
    
* ⚛️ **React:** react.dev
    
* 🌟 **VueJS:** vuejs.org
    
* 🔮 **Svelte:** svelte.dev/docs
    

### Backend Development

* 🚀 **Node.js:** nodejs.org/en/learn/
    
* 🛤️ **Ruby on Rails:**[rubyonrails.org](https://rubyonrails.org/)
    
* 🎡 **Laravel:**[laracasts.com](https://laracasts.com/)
    
* 🎸 **Django:**[djangoproject.com](https://www.djangoproject.com/start/)
    
* 🐹 **Go:**[gobyexample.com](https://gobyexample.com/)
    
* 🦀 **Rust:** rust-lang.org/learn/
    
* 📱 **Kotlin:** kotlinlang.org/docs/tutorials/
    
* 🍏 **Swift:** docs.swift.org/swift-book/
    
* 🔧 **ASP.NET:**[docs.microsoft.com/en-us/learn/aspnet/](https://docs.microsoft.com/en-us/aspnet/core/)
    

### Data & APIs

* 📊 SQL - [dev.mysql.com/doc/](http://dev.mysql.com/doc/)
    
* 🔌 **API:** rapidapi.com/learn
    
* 🕸️ **GraphQL:** graphql.org/learn/
    
* 🍃 **MongoDB:**[mongodb.com/docs/guides/](https://www.mongodb.com/docs/guides/)
    
* 🐘 **PostgreSQL:**[postgresql.org/docs/](https://www.postgresql.org/docs/)
    

### DevOps & Version Control

* 🐙 **Git and GitHub:**[git-scm.com](https://git-scm.com/)
    
* 🐋 **Docker:**[docker-curriculum.com](https://docker-curriculum.com/)
    
* ☁️ **AWS:**[aws.amazon.com/training/](https://aws.amazon.com/training/)
    
* 🛠️ **Kubernetes:** kubernetes.io/docs/tutorials/
    

### Programming Languages

* 🐍 **Python:**[learnpython.org](https://www.learnpython.org/)
    
* 🖥️ **C++:**[learncpp.com](https://www.learncpp.com/)
    
* 🔷 **C#:**[learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/](http://learn.microsoft.com/en-us/dotnet/csharp/tour-of-csharp/)
    
* 💻 **Java:**[docs.oracle.com/javase/tutorial/](https://docs.oracle.com/javase/tutorial/)
    
* 🦉 **Haskell:** haskell.org/learning/
    
* 📜 **Perl:** learn.perl.org  
      

    
    These resources are shared on my Twitter profile as well.
    {% twitter 1799774568212468065 %} 
    

### Conclusion

These resources cover a wide range of programming skills and technologies. Dive in and start learning today to enhance your coding expertise and advance your career in technology. Happy coding! 🚀💻
Setting up a Local Kafka Environment on Windows
Tags: java, kafka, zookeeper
Published: 2024-06-09 13:14:33

##Setting up a Local Kafka Environment on Windows##
===============================================

**Note:** It's recommended to place Kafka and ZooKeeper folders in the root directory (C:/Windows) without any spaces in the folder names to avoid potential issues.

Prerequisites
-------------

*   [Java Development Kit (JDK)](https://www.oracle.com/java/technologies/javase-jdk11-downloads.html)

Step 1: Download Kafka and ZooKeeper
------------------------------------

Download the following files:

*   [Apache Kafka 2.12](https://kafka.apache.org/downloads#2.12)
*   [Apache ZooKeeper](https://zookeeper.apache.org/releases.html)

Step 2: Extract Kafka and ZooKeeper
-----------------------------------

Extract the downloaded Kafka and ZooKeeper files to `C:/Windows`.

Step 3: Configure ZooKeeper
---------------------------

1.  Navigate to `C:/Windows/zookeeper/conf`.
2.  Rename `zoo_sample.cfg` to `zoo.cfg`.
3.  Edit `zoo.cfg` and set `dataDir=C:/Windows/zookeeper/data`.

Step 4: Start ZooKeeper
-----------------------

Open a terminal and navigate to `C:/Windows/zookeeper`. Run:

`bin\zkServer.cmd`

Step 5: Configure Kafka
-----------------------

1.  Navigate to `C:/Windows/kafka/config`.
2.  Edit `server.properties`.
3.  Set `zookeeper.connect=localhost:2181`.

Step 6: Start Kafka Server
--------------------------

Open a terminal and navigate to `C:/Windows/kafka`. Run:

`bin\windows\kafka-server-start.bat config\server.properties`

Step 7: Create a Topic
----------------------

In a new terminal, navigate to `C:/Windows/kafka`. Run:

`bin\windows\kafka-topics.bat --create --zookeeper localhost:2181 --replication-factor 1 --partitions 1 --topic test`

Step 8: Start Producer
----------------------

In a new terminal, navigate to `C:/Windows/kafka`. Run:

`bin\windows\kafka-console-producer.bat --broker-list localhost:9092 --topic test`

Step 9: Start Consumer
----------------------

In a new terminal, navigate to `C:/Windows/kafka`. Run:

`bin\windows\kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test --from-beginning`


Now you have a local Kafka environment set up on your Windows machine!
----------------------------------------------------------------------
Learn Bun.sh in Simple ways
Tags: webdev, bunjs, beginners, tutorial
Published: 2024-06-09 13:13:11

Bun.sh is a modern JavaScript runtime similar to Node.js, but it promises better performance and built-in tools for tasks such as bundling, transpiling, and running scripts.
10 Facts about Bun.sh
 [](https://youtu.be/eTB0UCDnMQo)

1. Bun.sh is a modern JavaScript runtime designed for better performance than Node.js.
2. It includes built-in tools for bundling, transpiling, and running scripts.
3. Bun.sh supports hot reloading, making development faster and easier.
4. It can directly run both JavaScript and TypeScript files without separate compilation steps.
5. Bun.sh uses the npm ecosystem for managing dependencies.
6. The installation of Bun.sh can be done via a simple curl command or through npm.
7. Bun.sh aims to simplify the development workflow with integrated tools and faster execution.
8. It is designed to work seamlessly with existing JavaScript and TypeScript projects.
9. Bun.sh provides a command-line interface for initializing new projects and managing builds.
10. Its built-in bundler can create production-ready builds from your source code.

![bun.sh](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa5s7d4a5sazxfxl3c6i.gif)
## **1. Install Bun.sh**[](https://bun.sh/docs/installation)

To install Bun.sh, you'll need to run the following script from your terminal:

for powershell(sh)

```
curl -fsSL https://bun.sh/install | bash

```
**Basic commands in bun.sh**

1. ##  Initialize   a new project

**For init a new project in  powershell(sh)**

```
bun init

```
This sets up a new project directory with the necessary files.

##2. Run a JavaScript or TypeScript file:
```
bun run <file>

```
For example, to run index.js

```
//eg file name index.js
bun run index.js
```

## 3. Install dependencies: 

```
bun install <package-name>
```
   Eg: To install express

```
bun install express

```

##4. Add Dependency to your Project 

```

bun add <package-name>

```
_This will add the package to your package.json and install it._

## 5. Remove a dependency from your project:

 
 

```
bun remove <package-name>
```

## 6. Bundle your code:

 

```
bun bundle <file>
```
_For example, to bundle index.js:_

```
bun bundle index.js
```

## 7.Run the project with hot reloading: 

```
bun run --hot <file>
```
_For example, to run server.js with hot reloading:_

```
bun run --hot server.js
```

## 8.Check the Bun.sh version:



```
bun --version
```

## 9._Build your project for production:_

```
bun build

```
_This will create a production build of your project._

## 10. Update Bun.sh to the latest version:


```
bun upgrade
```
These commands cover the basic functionalities you will use when working with Bun.sh, from initializing projects and running files to managing dependencies and building for production.
Test
Published: 2024-06-09 12:44:51

Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Types vs Interfaces in TypeScript
Tags: javascript, typescript
Published: 2024-06-09 12:43:11

To describe complex types, we can use two TypeScript entities: types or interfaces. In the post we will look into their differences and similarities.

Both allow us to create reusable structures for variables, function parameters, return types, and more. In many cases, types and interfaces are interchangeable and can be used similarly to function expression and function declaration:

```ts
type PersonType = {
  number: string;
  age: number;
  isFemale: boolean
}

interface PersonInterface {
  number: string;
  age: number;
  isFemale: boolean
}
```

However, there are slight differences that are important to consider: 

- Types allow you define types that can hold primitive types or union types within a single definition. This isn’t possible with interfaces, with them you can only define objects.

```ts
type A = number;
type B = A | string;
```

- Multiple interfaces with the same name and in the same scope are automatically merged. This is a feature called declaration merging. Types, on the other hand, are immutable. Multiple type aliases with the same name in the same scope will throw an error:

```ts
interface User {
  email: string;
}

interface User {
  password: string;
}

// No error

const user: User = {
  email: 'email',
  password: 'password',
};

// -------------------------------------

type User = {
  email: string;
}

type User = {
  password: string;
}

// Error
```

- When you extend an interface, TypeScript will make sure that the interface you’re extending is assignable to your extension. If not, it will throw an error which is quite helpful. This is not the case when you use intersection types: here, TypeScript will do its best to combine your extension.
Accessibility on TV
Tags: a11y
Published: 2024-06-09 12:45:29

---
title: Accessibility on TV
published: true
date: 2024-06-09 12:39:32 UTC
tags: accessibility
canonical_url: https://blog.nicm42.co.uk/accessibility-on-tv
---

There are all these rules for accessibility on websites, which admittedly most sites don't follow, but theoretically they should. However that's not the case on TV.

Last week's Doctor Who Dot and Bubble was a case in point. The main character spends her time in a literal social media bubble. It goes around her head so she can't see the real world. In the background are rectangles with various people in. In the foreground are rectangles of whoever she's talking to.

![The bubble in question](https://www.doctorwhotv.co.uk/wp-content/uploads/DW-14.5-D-dot-and-bubble.jpg)

That all sounds fine right? Now what if I tell you the background images constantly move around the bubble. From the perspective of the person looking at them, the background moves from one side of your vision to the other. Constantly. At a constant speed.

If you have a vestibular problem that is probably the worst Doctor Who episode to attempt to watch. Every time we saw that background moving I was distracted thinking about people who had to give up on the episode because it made them too ill.

And if that existed in real life, surely the constantly moving background would make you feel travel sick? The minute you turn it off you wouldn't be able to walk in a straight line. And if you tried standing up you'd end up leaning to one side.

There are warnings on TV before episodes, like for flashing images for example. But no one warns for a lot of motion. They should, though. Accessibility should apply to TV. I'd like to be able to turn off motion on my TV and watch the version where the background rectangles stay where they are. Then I could concentrate on the episode itself. And maybe I'd have enjoyed it more.
react js useEffect hook
Tags: react, useeffect, javascript, webdev
Published: 2024-06-09 11:50:06

The useEffect hook is used to handle function side effects in React. A function side effect in JavaScript is any effect outside the function’s local variable. Examples of function side effect include;
I.	Making network request
II.	Manipulating the DOM
III.	Fetching data from an API
IV.	Changing the value of a variable or an object that is outside the scope of the function 
V.	 setInterval or setTimeout operations
VI.	Accessing or modifying web API’s
The use effect hook runs every time the component is rendered. Remember that apart from the initial render when a component first load to the DOM, the component is re rendered whenever there is a state change.

## How to use the useEffect hook
First of all, we need to;
•	Import useEffect from react
`	import { useState, useEffect } from "react";`
•	Somewhere in your component, before the return statement, call the useEffect hook with two arguments. 

•	The first argument is a callback function containing instructions we want to execute whenever the useEffect is triggered. 

•	The second optional argument is an array of dependencies that will determine when the useEffect will run. If the array is empty, the useEffect will run only once after the initial render. If the dependency argument is omitted, the useEffect will trigger whenever there is a state change. If values are provided inside the dependency array, the useEffect will be triggered only when there is a state change in any of those values.

•	Syntax

```
useEffect(()=>{
    // excecute side effect
  }, [an array of values that the effect depends on]);

```
**Example **

```
import { useState, useEffect } from "react";

const Home = () => {
  const [name, setName] = useState("");
  const changeName = () => {
    const userName = prompt("what is your name");
    setName(userName);
  };

  useEffect(() => {
    alert(`welcome ${name}`);
  }, [name]);

  return (
    <>
      <h1>welcome {name}</h1>
      <button onClick={changeName}>click me</button>
    </>
  );
};

export default Home;



```
How To Watch India vs Pakistan T20 World Cup Live In USA
Tags: t20world, t20worldcup, worldcup, indiavspakistan
Published: 2024-06-09 12:03:26

Searching for how to watch the cricket World Cup live in the USA? then all the information is here.

[Click Here To Subscribe To Sling TV](https://sling-tv.pxf.io/c/2960521/1575796/14334?sharedid=cricket_2023)

The anticipation is building, and cricket fans across the United States are gearing up for the highly-awaited Men's ICC Cricket World Cup in 2024. Set to kick off on June 9, this tournament promises to be a cricketing spectacle like no other.

Watch Pakistan vs India World Cup match online in USA. Sling TV will stream live telecast of the match in its platform. New subscriber can get up to 45% OFF on their subscription.

## How to Watch T20 World Cup in USA

You have two options for watching the T20 World Cup in the USA:

[Sling TV](https://sling-tv.pxf.io/c/2960521/1575796/14334?sharedid=cricket_2023): This app offers live streaming of the T20 World Cup and other cricket content. The free tier includes some live streaming, but you will need to subscribe to get access to all of the matches.

Willow TV: and other cricket content. The free tier. This is the official broadcaster of the T20 World Cup in the USA. You can subscribe to Willow TV directly or through a streaming service that includes it, such as Sling TV or fuboTV.

## Which is the Best option to Watch T20 World Cup:

Price: If price is your main concern, compare Sling TV packages with the Willow TV subscription cost. Factor in any introductory offers available. Both have monthly Plan at 10$ and Annual at $100

Additional channels: Do you want other channels besides cricket? If so, a Sling TV package might be a good choice. Sling TV offers 15 channels while Willow offers only 2 channels at the same price.

Cricket focus: If you only care about cricket and the T20 World Cup, Willow TV offers a dedicated experience.

The T20 World Cup matches are currently underway, Now you can watch Live and enjoy.
How I built a rhymes dictionary ?
Tags: mobile, french, ionic, javascript
Published: 2024-06-09 12:00:00

Hi and welcome to this new article !

I've been working hard on my mobile dictionary Remède this last month (I released the `1.2.0-beta` version a week ago).

I've added many things but today I will focus on a special functionality.

I've added a **rhymes dictionary** which is completely running on your phone (or any browser) without an internet connection !

## 1. - Find data to build a rhymes database

I've searched for open source projects which had already built a rhymes database so I can re-use their database and adapt it for Remède.

After some searches, I discovered that [Open Lexicon](http://www.lexique.org), a project which provides various open database about words, has enough data to build a rhymes dictionary.

I found the [Drime](https://a3nm.net/git/drime/files.html) project, which uses _Open Lexicon_ database to generate its own rhymes database. With their documentation, I built my own base and added these rows in a new table of the Remède database.

## 2. - How it works ?

If you don't know Remède (you can check it out on [Github](https://github.com/camarm-dev/remede) and leave a star), it uses a **Sqlite database** which is downloaded locally.

Now that I have enough fields about words, how can I build an efficient dictionary ?

First, let's explain how this dictionary is working.

A table `rime` contains rows (one row is equal to one word) with the fields `phon_end`, `word_end` (and more fields like `feminine` or `elide` for particular rhymes...).

So for example, to get the rimes of the word `bonjour`, phoneme `\b$ZuR\`, we will filter all the words whose phoneme finishes with `uR`.

_The requests will look like_
```sql
SELECT word FROM rime WHERE phon_end LIKE '%uR'
```

And you understood the main concept ! Now we can add fields to filter and get more specific results, like in the application.

## 3. Final look

Yes we have a dictionary but not anyone can use it ! You must know Sql to browse it...

I tried to have the simplest and most understandable interface. For the interface, I use Ionic 7 with Vue 3.

I integrate this functionality as following in Remède:


| Description | Screenshot |
| --- | --- |
| Searching a word in the rimes dictionary  | ![Rimes dictionary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1kcrbhhrw81zlopyxp39.png) |
| Browsing rimes | ![Browsing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkuujri43t8m7ey4dvoc.png) |
| Set _syllabes_ filter | ![Filter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe1orlg7la6bpdxhw9ho.png) |

## What's next ?

For the moment, some functionalities are missing and the experience is not perfect... I want to add the possibility to choose the "nature" of the wanted rhymes (verb, noun...) and to enhance word finding experience.

Thank you for reading,
Don't hesitate to try Remède (https://remede.camarm.fr, and let me a message about your experience if you want !)
Have nice code !
I Hosted My first Website
Tags: webdev, javascript, firstweb, html
Published: 2024-06-09 11:37:10

I Hosted my first Website Lyricus😊😊.
Here you can get 🎶song🎶 lyrics simply.
take a look at [lyricus.netlify.app](https://lyricus.netlify.app/).
Dont forget to tell your opinions(and problems😜).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5ejg2tblb72i2xohgk6.png)
Building a Neat Node.js Project: Your Guide to a Clean Folder Structure 📂
Tags: node, cleancode, tutorial
Published: 2024-06-09 11:27:55

Starting a Node.js project? Keeping your codebase clean and organized is crucial. Let's talk about setting up a tidy folder structure for your project to make coding easier and collaboration smoother!

### Getting Started 🏗️

1.  **Root Directory**: First things first, create a main folder for your project. This is where all your project files and folders will live.
2.  **Package.json**: This file is super important. It holds key info about your project and its dependencies. Keep it at the main level for easy access.

### Essential Folders 📁

1.  **src/**: This is where your actual code lives. It's where you'll spend most of your time writing and editing files.
2.  **test/**: Keep your testing stuff separate. This folder is for organizing all your test files, making testing a breeze.
3.  **config/**: Configuration files like environment settings, database setups, and API keys go here. Keeping them separate helps manage different setups easily.

### Structure for Your App 🚀

1.  **Controllers/**: These handle incoming requests and send back responses. Keeping them separate helps keep your code organized and focused.
2.  **Models/**: Here's where you define your data structures and work with the database. Each data model gets its own file for easy management.
3.  **Views/**: If you're using server-side rendering or templates, put your view files here. They're what your users see, so keep them organized.
4.  **Routes/**: Define your API endpoints here. It's like mapping out the roads your app will use to communicate with the outside world.
5.  **Services/**: Sometimes you need extra logic that doesn't fit neatly into controllers. That's where services come in. They handle complex operations while keeping controllers clean and focused.

### Handy Tools and More 🧰

1.  **Utils/**: Store shared utility functions here. These little helpers keep your code DRY (Don't Repeat Yourself) and make life easier.
2.  **Public/**: Any static files like images, stylesheets, or client-side JavaScript go here. They're directly accessible to users and browsers.

### Extra Goodies ✨

1.  **Logs/**: Logging is crucial for tracking what's happening in your app. Create a folder to store log files for easy debugging and monitoring.
2.  **Docs/**: Don't forget documentation! Keep all your project guides and references here, making it easy for everyone to understand your project.

### Wrapping It Up 🎁

Following a clean folder structure makes your development journey smoother. It's easier to find what you need and collaborate with others. Stick to the structure you choose, and don't forget to adapt as your project grows. Happy coding! 🚀