teleren/devto huggingface dataset:
Create Floating Hearts 3D model in Three.JS and React Three Fiber
Tags: webdev, javascript, react, programming
Published: 2022-12-05 04:36:37

###What is Three.JS?
Three.JS is a cross-browser JavaScript library and API used to create and display animated 3D graphics in Web browsers.

Three.JS allows the creation of GPU-accelerated 3D animations using the JavaScript language without relying on plugins

###What is React Three Fiber?
`react-three-fiber` is a React renderer for Three.JS that has no additional overhead. Components participate in a unified render loop outside of React. It outperforms Three.JS at scale due to React’s scheduling abilities.

###Set up
There are a lot of dependencies for this:

```
yarn add three @react-three/fiber @react-three/drei @react-three/postprocressing
```

###Build the canvas
The `Canvas` object is where you start to define your React Three Fiber Scene.


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

In the code above, I just created a canvas with has configured camera and shadows

###Lights and Shadows
Inside the canvas, we need the lights and the shadows, so our models will have their shadows, and look bright


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

###Create the Hearts
First, we have to create the heart shape:


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

Then multiply it with different factors and speed:


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

Because we want our hearts to float, we are going to set their position with `useFrame`


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

Finally, we will cast the hearts with `Instances` and put it to the `Canvas` above


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

Lastly, we need some effects


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

###Conclusion
The results:


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

Live demo: [https://threejs-floating-hearts.vercel.app/](https://threejs-floating-hearts.vercel.app/)

Source code: [https://github.com/leduc1901/threejs-floating-hearts](https://github.com/leduc1901/threejs-floating-hearts)
How to render components in javascript?
Tags: webdev, javascript, typescript, npm
Published: 2022-12-05 04:30:51

Hello everyone! Often, when creating components, the question of their rendering arises. This is a rather interesting question, the solution of which can be one of the methods described in this article.

If the component is made through a class, then a _render_ function can be created for this component.
`class Component{ 
 constructor(selector,template,options){
  this.selector=selector;
  this.template=template;
  this.options=options;
}
render(){
 document.querySelectorAll(this.selector).forEach(
 (e) => {e.insertAdjacentHTML("afterbegin",this.template);}}}
}`

This function will find the selector of the corresponding tag of this component on the page, and add HTML markup to this selector.

Having created an instance of the class of this component, it can be passed to the class that calls the given render function on an instance of the component class.

`class Cample {
 render(options = {component}){
 Object.keys(options)
 .forEach((component) => {options[component].render();
 });
}}`

Using this method, components are rendered.

Thank you very much everyone for reading this article!

[cample.js](https://github.com/Camplejs/Cample.js)
I need a guild please
Tags: webdev, javascript, beginners, programming
Published: 2022-12-05 04:21:52

Hi everyone..Thanks for always trying to guild..Please I need to understand something..
Please how does the communication happen between web2 built platform to web3?
I mean you build the frontend with HTML CSS and even Javascript..And you want to connect it to web3 at the backend..Please I need a guild
Writing a bash script to automatically setup Ubuntu 22.04
Tags: ubuntu, bash, linux, management
Published: 2022-12-05 04:18:43

It is annoying to setup a newly installed Ubuntu machine, so I wrote a shell script to install my favorite softwares. You can replace the statements with your favorite commands. 🥰

The script automatically installs google-chrome, vscode, openssh-server, docker, autojump. If any target command exists, it will skip installing it like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0ui0o95qrzjfwmjzroo.png)

```bash
Reset='\033[0m'
Green='\033[0;32m'
MyUser=lin            # Replace this with your username

echo "${Green}Change working directory to /home/${MyUser}/Downloads.${Reset}"
cd /home/${MyUser}/Downloads

if ! [ -x "$(command -v google-chrome)" ]; then
    echo "${Green}Install Google Chrome.${Reset}"
    wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    dpkg -i google-chrome-stable_current_amd64.deb
else
    echo "${Green}Google Chrome is already installed.${Reset}"
fi

if ! [ -x "$(command -v code)" ]; then
    echo "${Green}Install VS Code.${Reset}"
    wget "https://code.visualstudio.com/sha/download?build=stable&os=linux-deb-x64" --output-document vscode.deb
    dpkg -i vscode.deb
else
    echo "${Green}VS Code is already installed.${Reset}"
fi

if ! [ -x "$(command -v sshd)" ]; then
    echo "${Green}Install openssh-server.${Reset}"
    apt install -y openssh-server
    systemctl enable ssh
    systemctl start ssh
    echo "${Green}Run ssh-keygen as your user after installation.${Reset}"
else
    echo "${Green}openssh-server is already installed.${Reset}"
fi

if ! [ -x "$(command -v docker)" ]; then
    echo "${Green}Install Docker.${Reset}"
    apt install -y ca-certificates curl gnupg lsb-release
    mkdir -p /etc/apt/keyrings
    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | gpg --dearmor -o /etc/apt/keyrings/docker.gpg
    echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" > /etc/apt/sources.list.d/docker.list
    chmod a+r /etc/apt/keyrings/docker.gpg
    apt update
    apt install -y docker-ce docker-ce-cli containerd.io docker-compose-plugin
    groupadd docker
    usermod -aG docker $MyUser
    systemctl enable docker
    systemctl start docker
    echo "${Green}You might logout or restart for docker group to take effect.${Reset}"
else
    echo "${Green}Docker is already installed.${Reset}"
fi

if ! [ -x "$(command -v autojump)" ]; then
    echo "${Green}Install autojump.${Reset}"
    apt install autojump
    echo "# Setup autojump" >> /home/$MyUser/.bashrc
    echo "[[ -s /usr/share/autojump/autojump.sh ]] && source /usr/share/autojump/autojump.sh" >> /home/$MyUser/.bashrc
else
    echo "${Green}Autojump is already installed.${Reset}"
fi
```
The "MERN" Stack is in danger.
Tags: mongodb, react, webdev, javascript
Published: 2022-12-05 04:13:44

First of all, I'm not saying the MERN stack is going anywhere. I'm saying, the tech is moving at the speed of a flash. in around 2 years, react.js is gonna look like angular. express I don't think express is gonna get replaced, and also for MongoDB and Node JS.

## 1.MongoDB
![img](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9LWanAP4vkRc1-SXQqtKN4vq5tx6G--GTUg&usqp=CAU)
MongoDB Is a pretty fun database. It's a pretty easy-to-use database. Just install a library, and you are on your way. MongoDB is pretty damn fast! There are almost no complaints about MongoDB.

Replacement for MongoDB is gonna be tuff. Soo the replacement for MongoDB is Metamask. This was very tuff. But "tech is moving at the speed of a flash". Metamask is not a database but it can hold nfts, so you know what I am talking about.

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

## 2.Express.js
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynm6j3exjz0u4cstpdd5.png)
The same story applies, here express is cool, it's good, and it's also pretty fast. This was a wild one. I chose Astro because it's good as express.


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


## 3.react

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

I am just not talking about react read my previous blogs, you will just understand it. Just use svelte. svelte is fast, easy, and reliable.

![img](https://miro.medium.com/max/720/0*lPloL8w-ZKtjxeB5.webp)

## 4 (and last one). NodeJS

![img](https://upload.wikimedia.org/wikipedia/commons/d/d9/Node.js_logo.svg)

This thing is not Replaceable.


## The Stack
This Is The MASN stack, which stands for METAMASK, ASTRO, SVELTE, AND NODE JS. Better than the MERN stack.
Using TextBelt SMS with Elixir
Tags: elixir, textbelt, sms
Published: 2022-12-05 03:56:57

I was recently introduced to the SMS service [TextBelt](https://textbelt.com/) which is a pre-pay and simplified service to provide the ability to send and receive SMS messages from code. 

However, the site did not provide any examples of how to connect their service with projects coded in Elixir. 

Sending SMS with TextBelt and Elixir

```
    # Add HTTPoison and Poison to your project dependencies
    params = %{
      phone: "5555555555",
      message: "Hello, world!",
      key: "textbelt"
    }

    HTTPoison.post(post_url, 
      Poison.encode!(params), 
      [{"Content-type", "application/json"}])
```
Consistency Tips for Developers That Actually Work
Tags: productivity, beginners, codenewbie, programming
Published: 2022-12-05 03:44:43


![Be consistent until you are lucky](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wxiskm0x7wtyw2ouq8t.png)

Inconsistency is the most common error made by developers.

Follow these simple tips to stay consistent and develop a coding habit.

Let's start!

## TL;DR

- [Set small goals 🎯](#set-small-goals)
- [Keep It Simple 🙂](#keep-it-simple)
- [Track your progress 🗓️](#track-your-progress)
- [Take breaks ⏲️](#take-breaks)
- [Reward yourself 🥇](#reward-yourself)

## Set small goals 🎯

With small goals you are far likely to stay motivated over time.

Your goals should have these 5 tenets.
✓  Specific
✓  Measurable
✓  Attainable
✓  Relevant
✓  Timebound

Use it as a checklist.

Remember: Clarity minimizes procrastination.

## Keep It Simple 🙂

It’s the easiest way to reduce stress.

And with less stress you can do it for a longer period.

How?
- It’s either a Hell YES!! or a No
- Learn one thing at a time
- Automate repetitive tasks

 Simplifying is about taking things away.

##Track your progress 🗓️

Measuring progress doesn’t come naturally.

But it skyrockets the likelihood of you achieving your goal. 

Track finished projects.
Track time taken for tasks.
Track happiness levels.

Because, you can only improve what you measure.

## Take breaks ⏲️

While coding you will get stuck. A lot!

So limit the time spent in a session. After that, take a break.

Let your mind wander.

Clear your head and come back later to the task.

## Reward yourself 🥇

Rewards increase dopamine levels in your brain.

However frequent or small, celebrate each milestone.

Doesn’t matter if it’s sleeping in, spending time with family or short outing. 

Do it. Because you’ve earned it.

## Wrapping up 📝


Skill of consistency will help your career more than any technology. 

If you liked this post, you can follow me on [Twitter](https://twitter.com/codewithvoid) for more of these.

Share your favorite consistency tip in the comments. Would love to hear it.
Styling your React App for beginners.
Tags: beginners, react, tutorial, programming
Published: 2022-12-05 03:09:03

Styling your project is one of the most difficult things to do especially when you are just starting in your career and want to build a nice portfolio.

Here you will find some tips and tricks that can help you to build a project that looks professional.

###**1. First considerations:**

There are four primary elements that need to be considered when designing the style of your project

**- Colors:**Define the primary and secondary [colors](https://colorhunt.co/palette/343a407952b3ffc107e1e8eb) that you will use in your background, titles, and components.

![colorhunt.co](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ue16xa5l9lrbkpt49lg.png)

**- Typography:** Choose a font that is easy to read. [This](https://www.websitebuilderexpert.com/designing-websites/pick-best-font-style-for-website/) post will show you some of the most popular fonts that web designers use.

![Post about the font style for website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bausksc57y9f7dh0sneo.jpg)

**- Grid:** determining the spacing of the elements, define where your images and components will be located.

**- Graphics:** Graphics and images add the chef's kiss to every design. Here are some great websites where you can find  [license-free photos](https://unsplash.com/) and [illustrations](https://www.freepik.com/illustrations). 
>One tip for using these images is to always credit the artist, and use should be limited to personal projects, not commercial works.

![www.freepik.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wtfhvfeaxv6hu1cjbcuy.png)
---

###**2. Use the React Styling Packages:**

When building an application in react, you can style everything in CSS, but styling your application that way can be tedious. Instead, consider using react packages for styling. Examples of great packages are:


![CSS meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oergsd9q6a3mz8d32mjd.jpg)

* Semantic UI - [click here](https://react.semantic-ui.com/)

![Semantic UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1iyimkdp5cyrpjiar5gz.png)
* Material UI - [click here](https://mui.com/material-ui/react-list/)

![Material UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0fskvl8t1drleae5fkg.png)
*Fluent UI - [click here](https://developer.microsoft.com/en-us/fluentui#/get-started)

![Fluent UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y14i0c4u91vz3weyy2gu.png)
* Tailwind UI - [click here](https://tailwindui.com/)

![Tailwind UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nx177ei9timg69vz5rdb.png)

Using React packages can be very useful but even by using then we cannot totally escape CSS: to make an stylish project we ultimatily need to combine both CSS and React packages.
Pretty RSS Feeds
Published: 2023-01-06 02:56:24

---
title: Pretty RSS Feeds
published: true
date: 2022-12-05 02:42:36 UTC
tags: 
canonical_url: https://brandonrozek.com/blog/pretty-rss-feeds/
---

Hi, I have a RSS feed. This allows you to subscribe to my words without me even knowing. How does it work? Well you need an RSS link, here’s mine:

[https://brandonrozek.com/blog/index.xml](https://brandonrozek.com/blog/index.xml)

Then you need to input this URL into a _newsreader_ application ([Feedly](https://feedly.com/), [Feedbin](https://feedbin.com), [NetNewsWire](https://netnewswire.com/), [many others](https://en.wikipedia.org/wiki/Comparison_of_feed_aggregators)) which checks to see if there are any changes in the XML file and presents it in a visually nice way.

In fact, many websites come with a RSS feed. You don’t even need to know the exact URL for it to work, if you type in `https://brandonrozek.com` into your newsreader, you’ll get options for my various different feeds.

How does that work? Well the website creator needs to include a tag in their website HTML.

```
<link rel="alternate" 
      type="application/rss+xml" 
      href="https://brandonrozek.com/blog/index.xml" 
      title="Brandon Rozek's Blog" />

```

Most RSS feeds don’t come styled. Therefore if you click on the RSS link you’ll see a bunch of XML formatted text. That can be confusing for people when they first visit, can we do better?

## About Feeds RSS Style

[Matt Webb](https://interconnected.org/) created [https://aboutfeeds.com](https://aboutfeeds.com) in order to provide a friendly overview into the world of RSS. As part of that he includes a style called [pretty-feed.xsl](https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl). The file comes with instructions built in, but it’s mostly as simple as adding a style tag in the beginning of the XML

```
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="https://brandonrozek.com/PATH-TO-YOUR-STYLES/pretty-feed-v3.xsl" type="text/xsl"?>

```

I hope more bloggers incorporate the style into their feed. I’m waiting for the day that the largest blogging platform Wordpress includes it by default.
Retesting vs Regression Testing : When We Do Retesting in Software Development?(With Example)
Tags: beginners, webdev, programming, tutorial
Published: 2022-12-05 02:07:30

In this video of Retesting vs Regression Testing, We are going to learn about the What is the main difference between two retesting and regression. 

What is Retesting?

In the retesting in software testing, It basically means testing a bug that has been fixed.
Most of the Time Tester finds a bug in the Application(Web or mobile), It logs it in the JIRA and Assign it to Dev, after dev fixes it, Dev assign back to Tester to verification.
Now Tester verify the bug, This is known the
Retesting.

{% embed https://youtu.be/PcDARwhFqb4 %}

Benefits of retesting
1. Test the cases that are failed only
2. Fast execution.
3. Only have to perform the important or failed cases

When, ReTesting is Done?
In retesting those test cases are included which were failed earlier.
Retesting ensures that the issue has been fixed and is working as expected.
Retesting is done by replicating the same scenario with same data in new build.
It is a planned testing with proper steps of verification
In some cases the entire module is required to be re-tested to ensure the quality of the module.

Example of Retesting
- Suppose Save button is not working
- Dev fixed it
- Now Tester have to Check the Functionality again. 
This is Retesting


I have added retesting testing example and please note that 
Defect verification is the part of re-testing
Re-testing is a planned testing
Retesting is done only for failed test cases
Re-testing makes sure that the original fault has been corrected

Retesting vs Regression

Retesting : 
To confirm the test cases that failed in the final execution are passing after the defects are fixed.
Retest are not automated.
Only bug fixes related test-cases are checked.

Regression : 
To confirm whether a recent program or code change has not adversely affected existing features.
Check the bug fixes.
Regression can be automated.
Nearly all the testcases are checked in Regression.
New code changes should not have any side effects to existing functionalities

retesting definition

🚀 Tools and services I recommend:
Some of the courses that I recommend to become better Automation Tester 🙌🙌

✅Selenium Training and Certification -
https://scrolltest.com/go/edureka


✅Learn Jenkins for QA -
https://bit.ly/learnjenkins-p1


✅Programming Java -
https://bit.ly/learnjava2020-p1


✅Test Automation - 
https://bit.ly/learnautomation2020


✅API Testing - 
https://www.learnapitesting.com


✅Cypress Tutorial with LIVE Projects -
http://cypresstutorial.com
Essential Productivity Tools For Software Development Team
Tags: frontend, productivity, programming, abotwrotethis
Published: 2022-12-05 01:11:48

## Why developers need productivity tools

When it comes to coding, code quality or productivity isn’t only about the speed or the number of code lines. Instead, team effort is the essence of productivity in software development. To enhance productivity with team effort, it’s important to find the tools that can assist the team with effortless communication, cooperation, and workflow.

### 1. Tabnine

An AI-based code completion tool, Tabnine, has a record of over 1 million downloads by developers in various languages including Python, PHP, Java, JavaScript, C++, Go, and Rust.

Reduce your mistakes and discover best practices while you code. The best part about Tabnine is that it plugs right into all the most popular IDEs such as Visual Studio Code, Atom, Sublime, IntelliJ’s suite, and even Vim.

Link: https://www.tabnine.com/

### 2. Lightrun

Lightrun helps gain the code-level ability to observe without the need to deploy. It lets you add metrics and logs, as well as track your code from your CLI or IDE in an on-demand environment in real-time.

This capability saves your team time and works on monolith microservices, Kubernetes, Docker Swarms, ECS, Big Data works, serverless, and more.

Link: https://lightrun.com/

### 3. Komodor

Komodor allows everyone to overlook everything and the status with such centralization. It can be connected to Slack for alerts and help development teams troubleshoot faster by providing you with the ability to track your system from end to end.

Link: https://komodor.com/

### 4. Tuple

A real-time collaborating app, Tuple, is a macOS app for integrated remote pair programming. It also allows you to have both a mouse and a keyboard. This means that you don’t have to wait for your coding partner to finish what they’re doing so you can begin. You can code, collaborate, and chat all at the same time.

Link: https://tuple.app/

### 5. SpectralOps

SpectralOPS is a security tool in code automation that provides checking and scanning in automation to alleviate security misconfigurations caused by malpractices or human error.

Link: https://spectralops.io/

---

Looking for a design-to-code, Figma-to-code tool? Visit [FUNCTION12](https://function12.io/?utm_source=dev.to&utm_medium=social&utm_content=devteamtools220930_221205) now and check out the latest code automation technology.

FUNCTION12 agrees to [dev.to's policy](https://dev.to/devteam/guidelines-for-ai-assisted-articles-on-dev-17n6) on posts assisted by artificial intelligence.
This article was created with the help of AI.