teleren/devto huggingface dataset:
Create a React project from scratch
Tags: webdev, javascript, react, programming
Published: 2024-05-25 08:07:24

I want to share the steps I do when I create a new React project from scratch.

First, I choose Next js as React framework because nowadays is the best practice recommended by React team in the new documentation released recently. Moreover, it is better than starting a new React project with Create React App because Next js provides you with many tools and features integrated out of the box, and it is the best approach if you want good SEO for your website.

We will cover the steps for creating a Next js project on the local machine and uploading the project to GitHub.

## Steps

Placed in the folder where you want to create the project, execute the following command:

npx create-next-app@latest --typescript

I like adding 'typescript' in my projects because of better bug detection prematurely and self-code documentation.

I like to make a file named '.npmrc' in the root of the project with the following content:

save-exact=true

It helps install packages in the future with a specific version set in the package.json. Thanks to that, we control the versions we install on our project.

If you are using the src folder and you want to use Tailwind CSS for styles (per default with Next.js installation), you must put this on the 'tailwind.config.js' file for proper installation of Tailwind CSS:

content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],

You can add the '.npmrc' file and 'tailwind.config.js' file with the modification to the git stage and do a git commit on the main branch to save these initial configurations.

Go to https://github.com/new. We log in to GitHub.

Fill the Repository name with the same word we have named the project in our local machine to keep consistency.

If you want to create a project without sharing the code online, mark the 'Private' option.

Click 'Create repository'

We come back to the project on the local machine and run the following command:

git remote add origin https://github.com/github_username/project_name

We execute this command to upload our main git branch to GitHub remote repository:

git push -u origin main

Following these steps, we get a React project initial setup ready to build excellent applications.

I hope you enjoyed the article.

Join my weekly newsletter, where I share articles to help you become a better front-end developer. You'll receive them directly to your inbox.



See you in the next post.

Have a great day!
Function Composition in JavaScript! 🛠️
Tags: javascript
Published: 2024-05-25 07:59:50

Function composition is a powerful technique to build clean, readable code by combining simple functions. Here’s a practical example:

1. Trim whitespace from a username
2. Convert the name to uppercase
3. Generate a greeting message
4. Check out this code snippet:

```jsx
let username = "  Harley  ";
const trim = (name) => name.trim();
const convertToUpper = (name) => name.toUpperCase();
const generateMessage = (name) => `Hello ${name}, Good Morning!`;

const result = generateMessage(convertToUpper(trim(username))); // it goes right to left
console.log(result); // "Hello HARLEY, Good Morning!"

```

By composing these functions, you can transform data step-by-step in a clear and efficient manner. This approach is not only elegant but also helps in maintaining and scaling your code.

Try it out and let me know what you think! 😊👇
TIL: What is a Balint group?
Tags: downleft, psychology, todayilearned, tech
Published: 2024-05-25 07:49:10

Yesterday, my wife casually mentioned a term I wasn't familiar with - [_Balint group_](https://www.americanbalintsociety.org/what_is_a_balint_group.php). A Balint group is a method of clinical supervision for doctors, started by the psychoanalysts Michael and Enid Balint in the 1950s in London. The aim is to help doctors better understand the psychological and emotional aspects of the doctor-patient relationship. In a Balint group session, a doctor presents a case involving a challenging patient. The group discusses the emotional dynamics and tries to understand the patient's inner experience and motivations, rather than focusing just on medical solutions.

It wouldn't be the first time I learned something new from my wife. What was surprising to me was that, without really knowing, I had participated in a form of a Balint group for two years and led one myself for the past year as part of an initiative called Downleft. I just never realized there was a professional term for what we were doing.

In Downleft, we form peer groups (e.g., tech leads) from different tech companies that meet on a monthly basis and share dilemmas from their work. Each session, a different participant presents a dilemma or a challenge they have, and a lot of what's happening next is not discussing solutions (which is something tech people love to do), but rather surfacing the organizational and personal dynamics that underpin the situation.

The meeting format is as follows: the presenter gives a 5-10 minute overview of their dilemma, then we go around the table and do a "questions round". During this round, participants are allowed only to ask questions and not give any other input. Once the round is over, we do another round where participants can give their input, share their experiences, or offer tips.

I've noticed two kinds of dynamics that are super interesting to see. Firstly, the questions round is no less useful than the second round. I've seen presenters starting to deeply reflect on their situation and come up with meaningful insights only by answering questions. Secondly, other members of the group often share their own similar dilemmas, validating many of the feelings and frustrations the presenter is having. I'm always amazed by how powerful this peer-validation process is.

I'm pretty sure that when Downleft was conceptualized by [Oren Ellenbogen](https://www.linkedin.com/in/orenellenbogen/), he was not aware of Balint groups, but the similarity is so striking that I would have to ask him if he was inspired by it. Surprisingly, Downleft is pretty unique in the tech industry. One would expect that such a simple and powerful format would be more widely adopted, but I'm pretty sure that is not the case. If you're reading this and familiar with similar types of groups, please leave a comment!
Figma Designs into Web & Mobile Apps
Tags: figma, webdev, figmatomobailapp
Published: 2024-05-25 07:31:42

For front-end developers, streamlining the process from design to deployment is crucial. If you use Figma for your UI designs, DronaHQ can take your designs and convert them into functional web and mobile apps seamlessly. Here’s how you can leverage DronaHQ to enhance your workflow.

**Step 1: Designing in Figma**
Figma is ideal for creating detailed UI designs, including cards, buttons, calendars, and more. It offers an intuitive interface for creating these elements without worrying about the underlying code. Once your design is complete, you’re ready to move to the next step.

**Step 2: Exporting with Anima**
Traditionally, converting designs into functional web apps required manual coding, which can be tedious and error-prone. Anima simplifies this process. By installing the Anima plugin in Figma, you can export your designs directly into clean HTML and CSS code with a few clicks. This eliminates the need for manual coding, saving you time and reducing the risk of errors.

**Step 3: Customizing in DronaHQ**
With your HTML and CSS code ready, you can now use DronaHQ’s [Control Designer](https://docs.dronahq.com/control-designer/). This feature allows you to create and customize non-input controls without writing code. Copy and paste the HTML code from Anima into the Control Designer. Make any necessary adjustments to ensure your design functions as intended. Once everything is set, save and publish your component.

**Now what is DronaHQ?**
DronaHQ is a low-code app development platform to build comprehensive internal tools, admin panels, dashboards, customer portals, AI-enabled apps, public forms, or any custom business apps. With a user-friendly drag-and-drop interface, ready UI controls and a set of ready connectors teams can build both web and mobile (iOS & Android) apps.

You can sign up [here](https://www.dronahq.com/signup/)

**Key Features of DronaHQ**
Cross-Device Compatibility: DronaHQ ensures that your designs work seamlessly across both web and mobile devices. This allows you to create once and deploy anywhere without compatibility issues.

Extensive UI Control Marketplace: DronaHQ offers a marketplace with over 100 pre-built UI controls. This library can significantly speed up your development process, providing a variety of controls that are ready to integrate into your projects.

Data Integration: With DronaHQ, binding data to your UI controls is straightforward. You can use ready connectors and APIs to integrate data into your designs, ensuring your applications are dynamic and functional.

In summary, DronaHQ is a practical tool for front-end developers looking to streamline their workflow from Figma designs to functional web and mobile apps. By combining Figma’s design capabilities with DronaHQ’s development tools, you can eliminate the tedious steps of manual coding and focus on building effective, responsive applications. Try DronaHQ today to see how it can enhance your front-end development process.
Java Tidbits: Compare your Strings wisely!
Tags: java, coding, programming, cleancode
Published: 2024-05-25 07:29:54

Welcome to the first installment of **Java Tidbits**, a series where I share small and simple Java tips to help with day-to-day development and help developers avoid common mistakes.

### Let's begin

In Java, string comparison is a fundamental task, yet it often leads to subtle bugs if not done correctly. A common mistake among both new and experienced Java developers is using the `.equals()` method improperly during String comparisons.

In this blog, we'll explore why `"SOME_STRING".equals(someObj.getText())` is a safer and more reliable way of comparing strings than `someObj.getText().equals("SOME_STRING")`.

### Understanding `.equals()` in Java

The `equals()` method in Java is used to compare the content of two strings for equality. Unlike the `==` operator, which checks if two references point to the same object, `.equals()` compares the actual characters in the strings.

```java
String str1 = new String("hello");
String str2 = new String("hello");

System.out.println(str1 == str2); // false
System.out.println(str1.equals(str2)); // true
```

### The Common Pitfall

A common pattern you might see is:

```java
if (someObj.getText().equals("SOME_STRING")) {
    // do something
}
```

At first glance, this seems perfectly fine. However, this approach has a hidden danger: if `someObj.getText()` returns `null`, it will throw a `NullPointerException`!

To avoid the risk of a `NullPointerException`, it is better to write the comparison as:

```java
if ("SOME_STRING".equals(someObj.getText())) {
    // do something
}
```

Here's why this is better:

1. **Null Safety:** When `"SOME_STRING"` is a string literal, it is guaranteed to be non-null. Therefore, calling `.equals()` on it ensures that the method is always invoked on a valid object, even if `someObj.getText()` returns `null`. This prevents the dreaded `NullPointerException`.

2. **Readability and Intent:** Writing `"SOME_STRING".equals(someObj.getText())` makes it immediately clear that you are comparing a constant value against a variable value. This enhances readability and intent of the code.

3. **Consistency:** Adopting this pattern consistently across your codebase helps in maintaining uniformity and reduces the chances of null-related bugs.

### Conclusion

Both new and experienced developers can overlook this simple yet crucial detail. It's an easy mistake to make, especially when you're confident that the method (like `someObj.getText()`) won't return `null`.

Facing a `NullPointerException` because of this mistake can lead to the coding equivalent of slipping on a banana peel. It is an embarrassing stumble that can be easily avoided with a bit of defensive programming!

---

[![Support me if you liked this post](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy4jq995umabrwecxqrl.png)](https://buymeacoffee.com/abhinav_nath)
Are you still using getYear method in Javascript??
Tags: javascript, typescript
Published: 2024-05-25 07:25:59

I've worked as a frontend developer for 4 years.
I mean, I've used [`getYear`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getYear) method a lot.
But I have to say good bye to it. 😭
Because it's no longer recomended because of "year 2000 problem".
So let's use [`getFullYear`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear) method!!
Don't use Typescript if your project is small
Tags: typescript
Published: 2024-05-25 07:24:12

TypeScript is a super-charged version of JavaScript that adds static typing. This means you define what kind of data your variables can hold (like numbers or text) before you even write the code. While TypeScript is awesome for big projects, it can sometimes feel like overkill for smaller ones. Let's explore why you might be okay sticking with plain JavaScript for your next mini-project.

1. Speed and Simplicity:

For quick experiments or throwaway scripts, setting up TypeScript might add unnecessary steps. You can jump right into coding with JavaScript, whereas TypeScript needs configuration and compilation.

2. Less Code to Write:

TypeScript adds type annotations, which are basically labels for your variables. While helpful, they can add extra lines of code, especially for simple projects.

3. Debugging Might Feel Familiar:

If you're already comfortable with JavaScript errors, you might not need the extra help TypeScript provides in catching type mismatches.

But Here's the Catch:

Even small projects can benefit from some TypeScript love! Here's why you might reconsider ditching it entirely:

Early Bug Catching: TypeScript can identify errors during development, saving you debugging headaches later.
Improved Readability: Types make your code clearer, especially when working with others or coming back to your project later.
Future-Proofing: If your small project has the potential to grow bigger, having TypeScript from the start can make scaling smoother.
The Verdict?

There's no right or wrong answer.  If you're prioritizing speed and simplicity for a small, contained project, JavaScript might be perfect. But if you value catching errors early, improving code clarity, or building a project with potential to grow, TypeScript is still a great choice, even for small projects.
Reliable Coconut Meat Processing Solutions for Your Business
Tags: equipment
Published: 2024-05-25 07:16:59

Are you looking for a new and reliable way to process coconut meat for your business? Look no further than our coconut meat processing solutions!  


Features of Our Coconut Meat Processing Systems:  

Our solutions are innovative, safe, and an task like easy utilize, making them probably the most option like ideal any company that wants to create high-quality  items.  

With your solutions, it is possible to produce a deal like excellent of meat with just work like minimal freeing up time and resources for just about any the areas of one's internet business.  

Innovation and protection:  

All of us of specialists spent Coconut Meat Processing Equipment some time working difficult to produce meat like coconut solutions that are cutting-edge and safe.  

We make use of the technology like most like advanced ensure which our equipment is efficient and effective, while also taking measures to ensure that everyone else utilizing our gear stays safe.  

Use and Ways To Use Our Solutions:

Our coconut meat processing Crushing Series solutions are really easy to use, even for people who have never ever caused coconut meat before.  

Simply proceed with the directions supplied with our gear and you shall rapidly start processing your coconut meat for use in lots of products that are very different.  

Provider and Quality:

At our business, we believe in providing our clients with all the solution like most beneficial and quality feasible.  

This is exactly why we work hard to guarantee our equipment is often in top condition like working and that most of us is certainly available to answer any questions you've probably.  

Application of Our Solutions:  

Our coconut meat processing solutions are of help for a multitude of applications.  

Whether you need to create coconut oil, Coconut milk, or just prepare your coconut meat for use in cooking and baking, our gear is the solution like ideal.  



In conclusion, if you are in need of a reliable and efficient way to process coconut meat for your business, look no further than our coconut meat processing solutions. With our innovative equipment, easy-to-use process, and commitment to quality and safety, you can be sure that you are making the best choice for your business.


Source: https://www.enkeweijx.com/Coconut-meat-processing-equipment
AWESOME AI TOOLS YOU DID NOT KNOW EXIST 😲
Tags: javascript, webdev, beginners, tutorial
Published: 2024-05-25 07:07:08

Literally taking over the world. But let's just keep that traumatic chatGPT aside and talk about 3 awesome AI tools, you never heard. The last own is a BANGER ! keep reading to find out the awesome new cutting edge generative AI tools

## Pika

Ever, thought of making a movie completely by yourself. NO cameras or lighting just ACTION ! Well well, your dream just came true. PIKA allows you to generate videos from text or images. It starts completely free. However you will have to pay for tokens. To get started go to their official website and just enter the prompt or drag and drop the image. You will be good to go. It has advanced features like your video comes along with perfect sound effects. You can stylize your video an so on. It has enormous possibilities. I will give link to all website in the end. You can generate awesome movies when you combine Pika and other video generation tools like Haiper and RunwayML

## MusicFX

MusicFX is an AI experiment from google. It allows you to generate awesome music completely from text. I did not face any token issue with it so far. I guess It's completely free like gemini default version. I made thrilling music with it. However, there is training slope for MusicFX. The prompt should be really well formatted and explained in order to get the perfect music you are expecting to get. Sometimes you get really trash music, but come on you can make a music video in minutes when you combine both these tools. 

_MusicFX is not yet available in some countries_


## DEMO

Here is a short movie I made with the above mentioned. The music from MusicFX and videos from RunwayML, Haiper and PIKA

{% embed https://player.vimeo.com/video/950186184?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479 %}  

## LUMA LABS

The final thing I want to tell you about is LUMA LABS. this allows you to create 3D MODELS ! Yeah enter the prompt and you get a complete 3d model that can be downloaded. As of now, it's not that good but is improving. Then 3d model comes with a texture also


## END

Thank you guys for reading. Please do give a reaction and comment how the post was. Now the shoutout time:

SHOUTOUT TO:

@nikhivishwa 
@cyberbuck_07da329074be7ff 
@alrope
Fine Tune CodeT5+
Published: 2024-05-25 07:04:55

{'pass@1': 0.01798780487804878, 'pass@10': 0.0544369264353407}

Salesforce/codet5p-770m-py
{'pass@1': 0.10403963414634146, 'pass@10': 0.2681213603469701}
HOW TO MASTER PYTHON FOR DATA SCIENCE| INFOGRAPHIC
Tags: datascience, python
Published: 2024-05-25 07:03:46

Learning data science is easy, getting hands-on expertise in Python programming nuances takes skills. It is highly advised when thinking of a career in the data science industry, it is critical to master Python and other programming languages to facilitate in-time efficient [data-driven decision-making](https://www.usdsi.org/data-science-insights/resources/master-data-driven-decision-making-in-2024). 

Python is the most-loved programming language among developers worldwide, TIOBE has ranked it at No.1 in the race for becoming the best programming language in the world. Being a powerful programming language, it lends clarity and concise explanations; that are widely deployed in web development, machine learning, and data science.

PYPL also seconds TIOBE is ranking Python as the top-notch programming language of today. This makes learning Python an inevitable task. It offers a beginner-friendly gateway, massive versatility, extensive libraries, and an active community to grow with. However, as the technology ramps up, Python faces the drawbacks of poor speed and memory management in some cases. 

It is time you mastered most in-demand Python libraries such as NumPy, Scikit-Learn, Pandas, TensorFlow, and Matplotlib, among many others. data visualization and many other skills earned at the most trusted [data science certifications](https://www.usdsi.org/data-science-certifications) can take you a long way ahead in earning sky-high data scientist salaries worldwide. Landing your dream data science job is never far away, with the best data science courses.

Bring zeal and ever-strengthening skills to be a lifelong learner to evolve with the enhancing times. Across different states in the USA, the UK, France, Germany, Australia, India, and other countries are brimming with a staggering demand for data scientists. Become a specialized professional and make a positive impact in the multitudinous growth of the global marketplace. This representation shall take you up, close, and personal with Python programming and convenient ways to conquer the nuances with the best facilitators around the world.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3hgcbrwnp04fh68v4c1.png)
International Schools in Dubai
Published: 2024-05-25 06:58:01

 Regent International School is a International School n dubai from Early Years to Year 13, spanning 40 years of excellence. Their primary program focuses from Key Stage 1 to Key Stage 2 at our primary school in Dubai.Join us to empower your child's future. Inquire now for more details.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0xlz2isw02rnq7euyt7.jpg)