teleren/devto huggingface dataset:
Top VSCode Extensions for Web Development in 2023
Published: 2024-01-05 09:07:49

Visual Studio Code is hugely popular among web developers due to its great editing features, extensions ecosystem and cross-platform availability. Here are some of the best VSCode extensions that can enhance productivity for web development.

## Live Server

The Live Server extension launches a local development server with live reload capability. It updates code changes instantly without requiring a manual refresh. This is extremely useful when building web apps with HTML, CSS and JavaScript.

## ES7 React/Redux/React-Native Snippets

This extension provides shortcuts for React and Redux workflows like creating components, actions etc automatically. For example `rfc` creates a React functional component. The time saved from boilerplate code really adds up.

## Sass

This must-have extension brings support for Sass/SCSS syntax highlighting, autocompletion and linting directly within the editor. It compiles SCSS to CSS on the fly.

## Prettier & ESLint

Prettier auto-formats code to follow consistent styling rules. ESLint helps catch bugs and enforce code quality. These tools integrate seamlessly in VS Code to produce clean code.

## CSS Peek 

CSS Peek lets you trace CSS rules directly in the editor by clicking on a class/id in the HTML. This is useful for understanding cascading styles.

## Code Spell Checker

As the name suggests, this checks spelling within code comments and strings. It helps avoid silly typos.

## GitLens

GitLens supercharges VSCode's built-in Git features. It lets you view commits linked to lines of code, easily access Git commands, see code contributions, and more.

## Thunder Client 

This extension lets you make API calls right within VSCode through an intuitive GUI. It's great for testing web services without having to use tools like Postman.

There are many more great extensions, but these provide a terrific boost in productivity for common web development workflows. Try them out to level up your VSCode game!
Java Command Line Arguments
Tags: javascript, python, tutorial, beginners
Published: 2024-01-06 10:53:17

Imagine you're teaching your dog a new trick. You wouldn't just yell "Fetch!" and hope for the best, right? You'd give clear instructions, maybe even offer a treat for understanding. That's how you communicate with your Java program using command line arguments: you give it specific instructions at runtime to customize its behavior.

But let's ditch the dog analogy and dive into what command line arguments actually are. They're like whispers you tell your program before it starts running. You pass them as strings after the program name when you run it from the command prompt. These whispers can be anything from file names to specific actions, telling your program exactly what you want it to do.

Think of it like ordering a pizza. You wouldn't just say "Food!" You'd specify the size, crust, toppings, and maybe even a delivery time. Command line arguments are like your pizza order, giving your program all the details it needs to do its job well.

Why Use Command Line Arguments?

There are many reasons to use [command line arguments](https://www.javatpoint.com/command-line-argument). Here are a few:

Make your program flexible: Instead of hardcoding everything into the program itself, you can let users adjust settings or input data through arguments. This makes your program more versatile and adaptable.
Automate tasks: You can use arguments to automate repetitive tasks, like processing multiple files or running your program with different configurations. No more clicking and typing!
Simplify testing: Different arguments can trigger different program behaviors, making it easier to test various scenarios and functionalities. Debugging becomes a breeze.
Getting Started with Arguments:

Now, let's get your hands dirty with some actual code. We'll write a simple program that takes a file name as an argument and prints its contents. Here's the basic structure:
Day 7: Unleashing Functions in Rust 🚀
Tags: rust, 100daysofcode, programming, self
Published: 2024-01-07 14:46:58

> Greetings, code enthusiasts! On Day 7 of my #100DaysOfCode journey with Rust, let's dive into the world of functions - the building blocks of any great code composition.


## Declaring Functions: The Rustic Way 🛠️

In Rust, functions start with the `fn` keyword, followed by a name, parentheses, and curly braces. You've already met the star of the show, the **main** function - the entry point of every Rust program:

```rust
fn main() {
    greet();
}

fn greet() {
    println!("Greetings, Rustacean!");
}
```

---

### Quick Notes on Rustic Etiquette 📜

- Function names in Rust embrace `snake_case`: all lowercase with underscores between words.

- Choose names that are both descriptive and expressive to convey the function's purpose clearly.

- Avoid starting function names with numbers for the sake of readability.

---

## Adding Flavor: Functions with Parameters 🌶️

Let's spice things up with functions that take parameters:

```rust
fn main() {
    greet("John Doe");
}

fn greet(name: &str) {
    println!("Greetings, {name}!!");
}

```

> **Note:** Explicitly mention the parameter type for a dash of clarity.

---

## Return of the Function: Functions with Return Values 🔄

Witness the grand return of functions with values:

```rust
fn main() {
    let result = add(10, 20);
    println!("The sum is {}", result);
}

fn add(a: i32, b: i32) -> i32 {
    a + b
}
```

> **Note:** Indicate the return type after an arrow `->` for a spectacular finale.


As the symphony of functions continues to play in Rust, I find joy in crafting code with clarity and purpose. Join me on [Github](https://github.com/Aniket200-ind/100dayscoding) for more updates! 💻🌐✨

#RustLang #Programming #LearningToCode #CodeNewbie #TechJourney #Day7
A 504 Gateway Time-out error in Laravel
Published: 2024-01-07 20:18:47

**A 504 Gateway Time-out error in Laravel web app which is running on Kubernetes **

A 504 Gateway Time-out error usually occurs when a server acting as a gateway or proxy does not receive a timely response from an upstream server it needs to access to complete the request. In the context of your Laravel web app running on Kubernetes, there could be several reasons causing this issue:

**Resource allocation:** Ensure that your Kubernetes cluster has enough resources (CPU, memory) allocated to handle the incoming requests. Monitor resource usage metrics in Kubernetes to check if there are any bottlenecks.

**Networking:** Kubernetes networking configuration might be causing delays or timeouts. Check the network policies, service configurations, and DNS settings in your Kubernetes cluster. Sometimes issues with DNS resolution can lead to timeouts.

**Load balancing:** If you're using Kubernetes Services with load balancing, it might be misconfigured. Verify your Service configuration to ensure it's distributing the traffic evenly among the pods.

**Health checks:** Check if your Kubernetes readiness and liveness probes are configured correctly. If a pod is not ready to accept traffic, it won't receive requests, potentially leading to timeouts.

**Application code:** It's also possible that your Laravel application might have code or database queries causing delays. Ensure your application code is optimized, and database queries are efficient.

**External dependencies:** If your application relies on external services (database, APIs, etc.), issues with connectivity or slow responses from these services could cause delays.

**Here are some steps you can take to troubleshoot:**

Check the logs of your Laravel application pods in Kubernetes for any errors or warnings that might provide insight into the cause of the timeouts.

Use monitoring tools within Kubernetes to track resource usage, pod health, and network activity.

Review your Kubernetes configurations, including Service configurations, Ingress, Network Policies, etc.

Use tools like kubectl exec to access the pods and run diagnostic commands (such as curl or traceroute) to test connectivity and response times from within the cluster.

You might need to use various diagnostic tools to pinpoint the exact cause of the issue. It's essential to analyze logs, metrics, and configurations thoroughly to identify and resolve the problem.

Thanks for reading,
DGI Host.com
Simplified: Create Custom Beating Heart Emojis Online with our Emoji Maker
Published: 2024-01-08 05:01:47

**[Express your emotions with beating heart emojis using Simplified](https://simplified.com/ai-emoji-maker/beating-heart
)** online emoji maker. Create emojis that represent a beating heart and make your conversations more expressive. Our easy-to-use tool allows you to design and generate beating heart emojis for online messaging.
Conan Zero to Hero: A Beginner’s Guide with a Practical Project Example Using gtest
Tags: beginners, cpp, conan, gtest
Published: 2024-01-08 06:43:22

Conan is an open-source, cross-platform package manager designed to simplify the process of managing and distributing C and C++ libraries. It helps developers handle dependencies efficiently by providing a centralized system to package, share, and reuse code. Conan is particularly useful for managing dependencies in C and C++ projects, where manual management can become complex.

let us use conan to write an actual gtest project.

https://levelup.gitconnected.com/conan-zero-to-hero-a-beginners-guide-with-a-practical-project-example-using-gtest-1299baac970e
Arrow Function in JavaScript - Helps you make your code short video out now
Published: 2024-01-08 09:18:30

[](https://youtu.be/i0HX_D269gY)
Once upon a time, in the land of JavaScriptia, there lived a group of functions. These functions were well-known for their traditional style and syntax. They had been the backbone of the kingdom's code for many years, but change was on the horizon.

One sunny day, a new function named Arrow appeared in JavaScriptia. Arrow was different from the others. It was sleek, concise, and had a unique way of expressing itself. Arrow had a symbol that set it apart - an arrow (=>) - which gave it a distinct identity.

The other functions were intrigued by Arrow's arrival. They gathered around, curious to learn more about this newcomer. Arrow explained that it was an arrow function, a modern way of writing functions in JavaScript that offered a shorter syntax and lexically scoped this keyword.

At first, the traditional functions were hesitant to accept Arrow into their circle. They were used to their familiar ways and were wary of change. But as Arrow demonstrated its abilities and showcased its efficiency, the functions began to see the value it brought to the kingdom.

Arrow's concise syntax made it perfect for shorter tasks. It didn't require the function keyword or the return keyword for simple operations. Its implicit return and ability to maintain the context of this within its scope made it a favorite among developers for handling callbacks and array methods.

Gradually, the functions started adopting Arrow's style. They realized that both the traditional functions and Arrow could coexist harmoniously in JavaScriptia. Some tasks were better suited for the familiar functions, while others were more efficiently handled by Arrow.

Over time, Arrow became an integral part of the kingdom's codebase, working alongside the traditional functions to create powerful and versatile programs.

And so, in the land of JavaScriptia, the arrival of Arrow marked a shift towards modernity while honoring the traditions of the past, creating a balanced and diverse coding landscape for all its inhabitants.
Love at First Compile
Tags: java, beginners, terminal, nostalgia
Published: 2024-01-08 15:51:44

Not only with women have I fallen in love,
but with programming languages too.
Embarrassing to look back now
and admit I was in love with Java.
It started with a flirt in the office.

We were a Microsoft shop, 
dedicated to everything Windows and Visual Basic,
everything click and drag-and-drop.
Maybe this is why I got excited
when I heard a lecture about Java at the university.
White code written in chalk on the blackboard.
Almost like typing in a terminal.
Background color should not play a role
when choosing between programming languages.
The logos of the companies behind them should be irrelevant.
But Sun, the creator of Java, designed a magical logo
that read Sun from all four directions.
A sexy logo in the finest shade of purple.
Besides personality, we fall in love
with brown eyes, with blue eyes.

It was half past five, the office
was empty, except for me and my friend.
I entered sun.com/java in the browser,
an easy to remember URL.
The link to the installer sat on the top of the page,
no need to scroll down, just click and wait.
Modern technology always takes long to download.
The proverbial fifteen minutes of
"make a coffee, smoke a cigarette, and it will be ready."
Downloading was not enough, you had to install it.
Answer questions that should not be asked.
I did not know yet how many times
I would answer these same questions
and accept the default in every case.

We used an integrated environment to write BASIC code,
the keywords were displayed
in bold and in a darker shade of carmine.
Here is how you count to ten without using your fingers:
`FOR I = 1 TO 10`
And imagine the colors.
You click on the yellow arrow icon to run the program.
We had no editor for Java.
It probably didn't even exist yet, the language was so new.
We used what we had.
Our BASIC editor automatically checked our Java code
and highlighted all the errors.
Imagine writing in German
and running it through an English spell checker.
I knew the code was correct,
I just copied it from the notes I had taken at the class.

Clicking the yellow arrow wouldn't make sense either.
I had to leave our integrated environment behind
and open a terminal.
Type `javac Counter.java`.
The whole world was black and white now,
the whole screen.
The command I typed and the error message
I received a few seconds later.
A semicolon is missing on line 8.
Go back to the editor and fix it.

It took us more than half an hour to make our first Java program work
and do some very basic stuff.
Count to ten and print the numbers.
This doesn't sound like the beginning of a love story.
But what is love if not sweat and tears?
I may tell you later about the tears.
Disable any animations in Angular by prefers-reduced-motion
Tags: angular, css, ui, tutorial
Published: 2024-01-08 11:12:11

## Introduction

Animations today are an integral part of modern web applications. Animations help us to improve the perception of our application to the users by giving them feedback about their actions, which helps to make the user experience pleasant and memorable.

But there are cases when we should not use animations:

* **Users with restrictions**. For them, animation is not an embellishment, but a distracting part that may be less accessible and interfere with the perception

* **E2E tests**. It takes time to wait for each animation and transition. The more tests there are, the more time is spent waiting for them to be completed

For these 2 cases, you can’t build a separate application without animations, you need to have an opportunity to disable animations.
> *And there is an easy way to do this.*

## Prefers-reduced-motion
>  The **prefers-reduced-motion** CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that **removes, reduces, or replaces** motion-based animations. ( You can find ways to activate it [here](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion#user_preferences) )

Since this is an `@media` setting, all code can be handled in the `@media` block
```css
@media (prefers-reduced-motion) {
  transition: all 0 linear;
  /* others styles */
}
```
Knowing about this customization, we just need to learn how to handle it properly in the Angular application [read more...](https://maks-dolgikh.medium.com/advanced-animation-in-angular-part-2-disable-any-animations-by-prefers-reduced-motion-8f9af185cd5d)
Week 1: The Meet and Greet
Tags: outreachy, opensource, teamwork, developers
Published: 2024-01-08 15:37:22

After the results announced for the December - March 2024 Cohort we head on to a week of discussion around with the other community members.

## The community
![community picture](https://img.freepik.com/free-vector/multicultural-people-standing-together_74855-6583.jpg)
The Unstructured studio community is a worldwide community aimed at empowering children from different underrepresented communities with several creative learning experiences. They work on several projects such as Zubhub to achieve their goal. Unstructured Studio has already put some footprints in countries like Nigeria and India.
## The Vision
![the community vision](https://www.shutterstock.com/image-photo/support-community-peace-sign-hands-600nw-2212936995.jpg)
The vision of Unstructured Studio is to engage children from underserved communities in creative learning experiences. They aim to achieve this through a variety of tools, activities, and resources, focusing on accessible, hands-on, and innovative educational methods. Their approach emphasizes empowering both children and educators, fostering creativity, collaboration, and practical skills in a supportive, resourceful environment
## The Project
![Zubhub](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pn3m7nsrnlcz1iqvc4tc.png)
ZubHub, developed by Unstructured Studio, is a dynamic, open-source platform designed to enhance creative education for children and educators. It stands as a collaborative and documentation tool for activity-based learning, easily adaptable for schools, libraries, and educational organizations. Developed by educators and technologists, ZubHub aims to democratize access to low-cost creative learning opportunities. This innovative platform is part of Unstructured Studio's mission to bring creative education to under-resourced communities globally, fostering essential skills like creativity, critical thinking, and collaboration. ZubHub serves as a hub for creative, hands-on projects, encouraging children to engage with low-cost materials and an engaging community of learners and educators
## The Mentors
![The mentors](https://miro.medium.com/v2/resize:fit:1138/1*xRwC2n_zU_Xlz_oYVknRNQ.png)
To work on the Zubhub project I was assigned several mentors, each with much a lot of experience and diverse into different tech domains.
- [Srishti Sethi](https://twitter.com/Srish_Aka_Tux)
- [Suchakra Sharma](https://twitter.com/tuxology)
- [Ndibe Raymond Olisaemeka](https://twitter.com/CodeBlooded_JS)
## My Point of View
![POV](https://t3.ftcdn.net/jpg/04/49/05/84/360_F_449058404_AM5m5halaz4UumGzS3rcrkPVnrFLmJjw.jpg)
Unstructured Studio is a great way to have a positive impact in the young child education and helping the next generation grow.
## Conclusion
More to the above content, working for opensource, education and working for the next generation is a great footprint made in the world. Looking forward for more.
Lazy Load Fonts in Next.js with Web Components
Published: 2024-01-08 20:56:05

As a developer and co-founder of [Postnitro.ai](https://postnitro.ai), I've tackled numerous performance hurdles. 

One solution I'm really proud of is the creation of a custom web component `<font-previewer>`. 

Learn how I revolutionized font-loading in Next.js in my latest blog post!

{% embed https://www.seeratawan.me/blog/lazy-load-fonts-in-nextjs-with-web-components/ %}
About well designed REST APIs
Tags: backend, api, webdev
Published: 2024-01-08 23:49:21

We all have struggled at least once with a poorly designed API and I am pretty sure that it is really hard to forget how frustrating it was as a partner that wanted just to integrate it or even just a developer that had to maintain that living hell.

## Basics

APIs were created to make easier for other developers to consume and use online content from its direct source. So, the motivation of its creation directly implies on our major concern -- or the thing that we must be concerned at most -- when developing an API: <b>developer-friendly processes</b>.

## Endpoints

I have seen all sorts of really messy endpoints, but let us use this article to talk about the good ones.

### Good practices while establishing endpoints

I am using express (node.js) to exemplify my point on this section.


![wrong endpoint design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/stlhazmaa2e6niir63ld.png)

You may be used to see endpoints like this one above. They look OK, since its composition exposes its purpose: a `/all` endpoint should return all of the objects from that collection, right?

<b>Yes, but it will create a much more verbose API while it is scaling</b>. I am not saying it does not work, and it would make no sense if it does not, but, you really don't need to add those suffixes.


![correct endpoint design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9hyz6zp85omuljl19mf.png)

The approach below delivers the same result, and at the same time, it makes your endpoints more succinct so their requisitions will be of a easier understanding.

## About the requisition methods

The more usual mistakes while choosing the correct requisition method:
- POST for delete ❌
- GET to perform create actions ❌
- PATCH for create actions ❌

Now that you know what not to do, there is an example of how things should look like:

![list of crud actions with correct endpoint designs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cduub7ac104svc8kspxt.png)

- GET is used to return a list or an unique record ✅
- POST is used to create (insert or upsert) a record ✅
- PATCH is used to update a record ✅
- DELETE is used to delete a record ✅
- PUT is used to upsert a record ✅ 

Observation: while performing massive actions, those methods will serve at the same way, the only difference will be on their payloads.

## Final considerations

It is really important for a developer to understand how his APIs and endpoints should be designed in order to make it easier for other developers for have a good use of his own work.

Choosing the right endpoint names, methods, authorizations, contracts, authentications is a real concern and it should be the way to create a really good or a real bad API.

------- 

Photo by <a href="https://unsplash.com/@wilhelmgunkel?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Wilhelm Gunkel</a> on <a href="https://unsplash.com/photos/grey-metal-gear-6kfQvW5eync?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>