teleren/devto huggingface dataset:
Props Unpacked: The Magic Behind Data Flow in Components
Tags: reactjsdevelopment, prop, webdev, javascript
Published: 2024-02-24 01:29:01

So, what's the deal with props? In the simplest terms, props, or properties if you're not into the whole brevity thing, are how you pass data from a parent component down to a child component. This is super handy for shuffling information between different sections of your project. But here's the kicker: props aren't just one-trick ponies; they're all about that reusability life, making them total rockstars in the component world.

Let's break it down with an example that's close to every gamer's heart: Pokémon. Say you've got your main App component that's keeping tabs on all your Pokémon. You can set up a state here and, like passing the baton in a relay race, hand off the setter function to a child component called PokemonContainer. This is where it gets interesting. PokemonContainer grabs that prop, runs with it, and sorts those Pokémon to display them just the way you want.

But wait, it gets better. That very same prop you handed off to PokemonContainer? You can pass it down further to a completely different component, or even a sub-component of PokemonContainer, without breaking a sweat.

Imagine we've got another component in the mix, dubbed PokemonSorter. This little wizard takes the prop straight from the App component, just like PokemonContainer did, and does its own magic trick. Maybe it sorts Pokémon by type, or power, or whatever criteria you fancy.

Now, I know what you're thinking. "Isn't that basically the same thing but with a different twist?" And yeah, you're not wrong. The outcome might seem similar, but that's exactly my point. Props are all about giving you the flexibility to manipulate and display your data in as many ways as you can dream up. They're like the Swiss Army knife in your development toolkit.

So, while my Pokémon example might not win any awards for originality, it perfectly illustrates the power of props. They're not just about passing data around; they're about opening up a world of possibilities for your components to interact, share, and thrive together. And that, my friends, is the true magic of props in the world of component-based development.
Creating Animations with CSS3
Tags: css, html, javascript, beginners
Published: 2024-02-24 00:27:22

## Introduction

CSS3 has revolutionized web design by allowing users to create animations without the use of heavy software like Flash. This makes it easier for web designers to add dynamic and engaging visual elements to their websites. In this article, we will discuss the advantages and disadvantages of creating animations with CSS3.

## Advantages of CSS3 Animations

1. **Lightweight**: CSS3 animations are lightweight and do not require any external plug-ins or software. This reduces page load time and improves website performance.

2. **Flexibility**: With CSS3, web designers have more control over the timing, duration, and direction of animations. This flexibility allows for more creative and complex animations.

3. **Cross-browser Compatibility**: CSS3 animations are supported by all modern browsers, making them accessible to a wider audience.

## Disadvantages of CSS3 Animations

1. **Limited Browser Support**: Older browsers do not support CSS3 animations, which can lead to a degraded user experience for some viewers.

2. **Steep Learning Curve**: Creating complex animations with CSS3 requires a good understanding of CSS syntax and animation properties. This can be challenging for beginners.

## Key Features of CSS3 Animations

1. **Keyframe Animations**: CSS3 allows for the creation of keyframe animations, which allows for more detailed and precise control over the animation sequence.

2. **Transitions**: CSS3 transitions make it easy to add simple animations such as hover effects or button clicks.

### Example of a CSS3 Animation

```css
@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
```

This example demonstrates a simple keyframe animation where a **div** element changes its background color over 4 seconds.

## Conclusion

Overall, CSS3 animations offer a lightweight, flexible, and user-friendly solution for creating dynamic animations on websites. However, they do have some limitations, particularly with older browsers. Web designers should consider the target audience and their browser usage when deciding to use CSS3 animations. The ability to engage users with creative animations without sacrificing performance or compatibility is a significant advantage of CSS3.
Simple things you actually didn't know about CSS
Tags: css, beginners, webdev, programming
Published: 2024-02-24 00:13:54

Check this out guys! 
It is very educative and will teach you little things you actually didn't know about styling your webpage. 

Animation in CSS and some of its hidden features https://princemikel.hashnode.dev/animation-in-css-and-some-of-its-hidden-features

Kindly like and comment after reading
Basic guide to code review
Tags: codereview, dx, braziliandevs
Published: 2024-02-24 00:09:03

A software developer will have their code reviewed and will review others' code practically every day, and even with this repetition, sometimes we forget a point or two.

This is a guide with basic points to be checked in a code review, feel free to use/modify/improve it, in your company or open-source project.

## For the requester

1. Write good commit messages (following the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/) is a good start);
2. Review your pull request before opening it, make sure you haven't forgotten any debugger or typing error;
3. Keep your pull request small, this makes it easy to review and less harmful to the business;
4. Ensure that your pull request passes tests, linters, and builds, and has no conflicts;
5. Write a good description;
6. Comment on your own pull request if any piece of code is not obvious;
7. Wait for the reviewer to finish before starting to fix;
8. Choose the right reviewers (example: someone who has already worked on the same part of the code);

## For the reviewer

1. Be kind;
2. Be a thorough person (this [document](https://www.morling.dev/blog/the-code-review-pyramid/) can help you);
3. Seek context. Read the pull request description, the ticket, even check the screens (if any);
4. Make sure you've set aside the necessary time to understand and make the best code review you can;
5. Respect the context. If a pull request fixes a bug, don't ask the developer to refactor the entire component, this can be addressed in the future;
6. Make it clear that you are doing the review, comment _Reviewing_ when starting, and _Reviewed_ when finished.

**This guide is constantly evolving** 😊
When should you start writing tests?
Published: 2024-03-01 23:29:53

---
title: When should you start writing tests?
published: true
date: 2024-02-24 00:00:00 UTC
tags: 
canonical_url: https://www.oliverdavies.uk/archive/2024/02/24/when-should-you-start-writing-tests
---

When you start a new project, when should you start writing tests and doing test-driven development?

Is it before you write any code, or is it something you can start later?

When starting [versa](https://www.oliverdavies.uk/archive/2024/02/19/introducing-versa), I was only scaffolding the console commands and running some basic commands such as "composer install" and "phpunit".

At that point, there wasn't any business logic to test.

The first versions only supported PHP, so there was no complexity around which language the project used.

There was no logic to determine which language or package manager was used.

Now I've started to add this functionality - such as determining the project type from its composer.json or package.json file - there is logic to test, and I've started to write tests and do test-driven development.

At this phase, I can see the value, which I couldn't when setting up the application to begin with, and different have any logic worth testing.

P.S. Do you need immediate access to an expert Drupal Developer? With my [Drupal development subscription](https://www.oliverdavies.uk/subscription), make unlimited requests for a fixed monthly price in less time than posting to a job board!
Try to run python in a Pure Browser-Based Web App running on Cloudflare
Tags: webdev, opensource, typescript, python
Published: 2024-02-23 23:47:23

In the ever-evolving landscape of web development, the ability to run various programming languages directly in the browser has become a sought-after feature. Thanks to advancements in WebAssembly System Interface (WASI), developers can now explore new possibilities for running languages like Python, Go, and TypeScript in a pure browser-based web application.

WASI, short for WebAssembly System Interface, provides a standardized interface for running WebAssembly modules outside of a web browser. This allows developers to execute code written in different languages in a secure and efficient manner, opening up a world of possibilities for web applications.

Recently, there has been a push to enable support for languages like Python, Go, and TypeScript via WASI. By leveraging tools like esbuild wasm and integrating projects like python-wasi, developers can now run arbitrary Python code directly in the browser.

One of the key projects in this space is [python-wasi](https://github.com/nalgeon/python-wasi), developed by nalgeon. This project provides a way to run Python code using WASI, enabling developers to execute Python scripts in a browser environment. By fetching the python.wasm file from a specified URL and providing the Python script to execute, developers can seamlessly run Python code and see the output in real-time.

I successfully tested it by using the following code snippet:

```javascript
const url = "https://unpkg.com/@antonz/python-wasi/dist/python.wasm";

const pythonScript = `
a = 1
b = 2
c = a + b
print(c)
print("Hello World!")
`;

import("@antonz/runno").then(({ WASI }) => {
    WASI.start(fetch(url), {
        args: ["python", "-c", pythonScript],
        stdout: (out) => console.log(out),
        stderr: (err) => console.error(err),
    }).then(result => console.log(`exit code = ${result.exitCode}`));
});
```

I guess I can combine it with [ChatCraft](https://github.com/tarasglek/chatcraft.org) in this way. But still need help to make sure if I need support the "function" and "run code".

This week I also [fix a small bug](https://github.com/tarasglek/chatcraft.org/pull/477) "Show More..." button's text is improperly layered and visible through the options menu", I found the button uses zIndex={10}, so I just try to use zIndex={11} at first. Thanks [Amnish](https://dev.to/amnish04) provided a more suitable way by using Chakra theme `theme.zIndices.dropdown`.

Next week, I will keep working on combine python.wasm in ChatCraft.
Hat Flower Arrangements
Published: 2024-02-23 23:25:07

Welcome to Bloom Infinity, where passion meets purpose! I am an avid explorer of life's kaleidoscope, driven by curiosity and fueled by [hat flower arrangements](https://bloominfinityinc.com/blogs/news/how-to-arrange-flowers-in-a-hat-box). A harmonious blend of resilience and optimism, I navigate challenges with a spirit that seeks growth and embraces change. As an enthusiast of innovation, I weave ideas into narratives, fostering a landscape where imagination blossoms into reality. Join me on this journey of endless possibilities, where every moment is a canvas waiting to be painted with the vibrant hues of passion, purpose, and boundless potential. Together, let's cultivate a garden of dreams in the vast expanse of Bloom Infinity.
ChatCraft week 7: New issue, new provider?
Tags: chatcraft, chatgpt, opensource, typescript
Published: 2024-02-23 22:54:11

---
series: Collaborating on ChatCraft
---

This week on ChatCraft, I am beginning work on a new issue.

{% github https://github.com/tarasglek/chatcraft.org/issues/401 %}

This issue involves adding a new default provider so users can try it for free. However since the issue is so big I have broken it up into a smaller issue:

{% github https://github.com/tarasglek/chatcraft.org/issues/478 %}

# PR

{% github https://github.com/tarasglek/chatcraft.org/pull/479 %}

I created `providers/OpenAiProvider.ts` and `providers/OpenRouterAiProvider.ts` containing provider-specific methods. These classes are child classes of the parent class `ChatCraftProvider` which I created last month. Eventually I will also create one called `DefaultProvider.ts`.

Most of the provider-specific methods I copied over from [`ai.ts`](https://github.com/tarasglek/chatcraft.org/blob/main/src/lib/ai.ts).

I also made changes to the [`fromJSON`](https://github.com/tarasglek/chatcraft.org/pull/479/files#diff-163489fb9d67f12a96f71b1a06ec2c3cc41152124ad90c14adcc6ded77869f1a) method. This method used to take JSON and return a `ChatCraftProvider` object. Now it returns either a `OpenAiProvider` or `OpenRouter` object depending on the provider url in the json. To do this I had to use dynamic imports.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hcsrbt0z22y8eo20imm.png)

# Code Changes after Review

I have received a code reviews from Taras and Amnish who have both given me advice on how to refactor my code further.

Here are my [code changes](https://github.com/tarasglek/chatcraft.org/pull/479#issuecomment-1962839950) after receiving their feedback and making the requested changes:

# What's Next

My PR is yet to be merged, but once it is, the next step is for me to create another subtask/issue so that we can start using these methods from their provider-specific classes rather than from `ai.ts`. This will also involve storing our provider settings information into a `ChatCraftProvider` object in `settings.currentProvider` or something, so that we can use `currentProvider isinstanceof OpenAiProvider` and `currentProvider isinstanceof OpenRouterProvider` to check which provider we are using so that we can call on the correct methods.

# My Reviews on Team's PR

{% github https://github.com/tarasglek/chatcraft.org/pull/463 %}

I [reviewed](https://github.com/tarasglek/chatcraft.org/pull/463#pullrequestreview-1896887855) Amnish's [PR](https://github.com/tarasglek/chatcraft.org/pull/463) which was about refactoring code to minimize code duplication introduced from his previous sidebar UI changes. I looked through his code, it involved renaming some things and extracting a context for clarity. I also did regression testing on the sidebar functionalities in desktop and mobile to make sure his code did not introduce any issues.
Understanding Parameter Order in Kotlin's Primary Constructors
Tags: kotlin
Published: 2024-02-23 22:29:17


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wzmadog5vs1l7oddi732.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d0nm16ze52ppnsb05xd.png)

Kotlin follows positional parameter passing by default. So the first example does not work, the first parameter will be taken as a.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8a6moyx8tee1stsjz08j.png)
Discover How AI-Cartel is Shaking Up the Hiring Game (Without the Boring Jargon)
Tags: recruiting, automation
Published: 2024-02-23 22:18:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xq4530z0f5775gq0effd.jpg)

Hey everyone!

I wanted to share something that's been blowing my mind lately: AI-Cartel. Okay, okay, I know the name might sound a bit intimidating, but hear me out.

Picture this: You're on the hunt for new talent for your business. It's always a headache, right? Well, AI-Cartel is here to change that.

First off, forget about all those complicated technical terms. AI-Cartel is just a platform that uses artificial intelligence to help you find the best candidates. It's like having your own super-smart assistant doing all the work for you!

You know what I love most? It makes everything so much easier. No more spending hours sorting through resumes or scheduling interviews. AI-Cartel takes care of all that for you, leaving you free to focus on what really matters: growing your business.

So, if you're tired of struggling with hiring, check out AI-Cartel. It could be a game-changer for you too!

What do you think? Have you ever tried AI-Cartel or a similar platform? Share your experiences in the comments!
How to become a Full-Stack Developer: A Simple and Fast approach
Tags: webdev, programming, tutorial, python
Published: 2024-02-23 22:17:32

Want to become a full-stack developer? Unsure of what you need to know? Need a helpful point in the right direction? This post will explain how to link your frontend to your backend simply and quickly! 

More specifically, I will give a quick way to link two very popular web technologies together: Django and React! We will use Cors Headers to make this magic happen. I know when I was introduced to Django, creating a frontend was always a challenging task and got complicated very quickly. React was a tool that I learned later, that simplified things, and connecting it to Django was ultimately my end goal. This is why I am writing an article to show this solution!

## Setup

Firstly, you need to have created a Django project with an app called 'backend'. This will be the API for our project. We then need to install Cors Headers so Django allows our React frontend to make requests:

```
pip install django-cors-headers
```
We now need to install our frontend. I will use Vite for this example. CD: to the root of the project and type the following commands:

```
npm create vite@latest frontend-- --template react
cd frontend
npm install
```
Then we need to add cors-headers to our installed apps in settings.py . Make sure it looks like this:
```
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    
    # added below
    'backend',
    'corsheaders',
]
```

Then, below, add these lines of code to trust our frontend...

```
CORS_ALLOWED_ORIGINS = [
    'http://localhost:5173', # default port of react
]

CSRF_TRUSTED_ORIGINS = CORS_ALLOWED_ORIGINS
```

... and add this line to the middleware:
```
MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

    'corsheaders.middleware.CorsMiddleware', # add this line
]
```
And that is all you need for settings.py!

## Usage

Now we have completed these steps, we can use this project by visiting the react app and making API requests to the backend port (default is 8000). An example of making such a request is:
```
axios.post('/api/{yourApiView}/', {})
```

And there you go! You can now connect your react app to your Django backend.
Made a online 3D Tetris
Tags: tetris, 3d, blockout, online
Published: 2024-02-23 21:47:42

Hi.
So me and some friends did an update on a online 3D Tetris version called BlockOut.
https://blockout.nu
But we want it to look and work as the professional version 
BlockOut2.
https://blockout.net/blockout2
Anyone here remember this game from 1989 ?

Just wanted to check here if anyone is interested in this open source development of this game.....

Regards MagI
What would you use instead of WordPress?
Tags: discuss, webdev, programming, productivity
Published: 2024-02-23 21:18:34

**WordPress** is a popular open-source content management system (CMS) that enables users to create and manage websites with ease. It was first released in 2003 and since then, WordPress is one of the most popular CMS used. 

**However:**
- WordPress sites can sometimes become slow and sluggish, especially if too many plugins are installed or if the theme is poorly coded.
- Being the most popular CMS, WordPress is a frequent target for hackers. Though the WordPress core is secure, vulnerabilities can arise from third-party themes and plugins.
- While WordPress can handle sites with varying sizes, high-traffic sites might require significant optimization.

**So let's discuss on this main questions**:
- What alternatives to WordPress do you know? 
- Which one have you used, and what was your experience with them?
- Would you use **dev.to** as a data provider for your portfolios? 

**Be sure to follow my [dev.to blog](https://dev.to/mainarthur) and [Telegram channel](https://t.me/MainArthur); there will be even more content soon.**
Quick Tip: Simpler sharding configuration for Playwright
Tags: playwright, githubactions, ci, testing
Published: 2024-02-23 21:07:46

Playwright’s [sharding docs](https://playwright.dev/docs/test-sharding) present the following GitHub actions configuration:

```yaml
strategy:
  fail-fast: false
  matrix:
    shardIndex: [1, 2, 3, 4]
    shardTotal: [4]
[...]
steps:
- name: Run Playwright tests
  run: |
    npx playwright test \ 
      --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
```

While it works, I think the following reads much better:

```yaml
strategy:
  fail-fast: false
  matrix:
    shard: ["1/4", "2/4", "3/4", "4/4"]
[...]
steps:
- name: Run Playwright tests
  run: npx playwright test --shard=${{ matrix.shard }}
```

You don't even need the quotes around `"1/4"`, you could write them naked, but I prefer to be explicit in yaml:
```yaml
    shard: [1/4, 2/4, 3/4, 4/4]
```

What do you think?
How to replace a single-page application with a different page in React Router
Tags: react, beginners, tutorial
Published: 2024-02-23 20:16:32

React Router is an npm package that enables you to construct dynamic routing in your web application, as Create React App(CRA) does not include page routing. This tutorial will walk you through changing your single-page application to another page, such as the one that registers new users.

**Prerequisite**
You should have a basic understanding of React and Javascript to fully comprehend this tutorial. If you don’t, start by looking [here](https://react.dev/learn) and [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript).

Make sure you have react-router-dom installed from the node package manager at [nodejs](https://www.npmjs.com/package/react-router-dom).

**Folder Organisation**
Assume for the purpose of this tutorial that you have a folder called screens that contains javascript files with the names Home, Overview, Timeline, FAQ (Frequently Asked Questions), Register screen, and then a Navbar.

The screens are stacked on top of each other in App.js as a single-page application like this:


![code snippet from snappify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1yr8w2dkjzt0r1rewbp6.png)
 
  Assuming that you want to replace all of the screens with the register screen when a user clicks on the register button in the navbar of your web application. The trick is to arrange all of the pages to sit on one page to make up the main page. Then you wrap it with `<Routes> </Routes> ` like this:

![code snippet from snappify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6g04weu71yz9ki9k9jl.png)

Your home page should look like this:

![code snippet from snappify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz3jk885mk086lx3waz5.png)

Finally, you go to your navbar.js to handle the logic of replacing the home screen with the register screen. Your navbar should look like this:


![code snippet from snappify](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kd1co5dxc1o7d7qewx2a.png)

 All of your screens should now be accessible from your navbar. You should also be able to replace your single-page application with the register screen when a user clicks on the register button.