teleren/devto huggingface dataset:
Tech Horizons: Ajidev's Inception into the Coding Space
Tags: programming, beginners
Published: 2024-01-01 15:37:36


Hey Guys,

As part of my New Year's resolution, I decided to start writing and posting content.
I'm Ajidagba Ayobami, an intermediate developer with 3 years of experience, and I welcome you to my tech journey and how I was able to overcome some hurdles. My tech stack is Laravel, PHP, JavaScript, Vue, Node.js, and perhaps a sprinkle of React. Join me as I share the highs, the challenges, and the crescendos of my coding adventure.

**PHP**
Learning PHP took me over 2 months, and I watched a free PHP tutorial on Net Ninja. I learned the basics of PHP, the concept of programming, MySQL and SQL commands. I made an invoicing application; You can check my [repository](https://github.com/ajidev89/salebus) 


**Laravel**
After learning PHP, I got curious and started asking questions One of my senior colleagues suggested Laravel. I picked up Net Ninja tutorials on Laravel. I built a mini-commerce site; it only had product management, order management, and authentication.
You can check my [repository](https://github.com/ajidev89/miniecommerce) 


**Vue.js**
I got an intern role, and a project commenced. Vue.js was a requirement, and I already knew the ES6 javascript, so I learned Vue.js on the job. It was a good experience going through their documentation and Net Ninja videos. I created a seamless user interface and interactive experience. Vue.js emerged as my go-to front-end framework because its simplicity, reactivity, and vibrant community made it a natural choice.


**Other Tech Stacks**
Tech stacks like Nodejs, Typescript, and React were easier to learn because of my strong foundation in JavaScript (ES6).

**Special Appreciation**
I would gladly thank [Net Ninja](https://www.youtube.com/@NetNinja) for taking the time to post free video content and help self-taught programmers like me all over the world.

**Tip**
If you want to learn a programming language, build something small and then expand your scope on the language or framework

So, fasten your seatbelts as I take you through the behind-the-scenes of my coding adventures, share insights, and perhaps inspire fellow developers.

Happy New Year!

Ajidagba Ayobami
Awesome React Button Hover
Tags: freecodez, react, html, blog
Published: 2024-01-01 15:19:32

Hey there, You are most welcome to this article.

**Awesome React Button Hover**

![Awesome React Button Hover](https://res.cloudinary.com/freecodez/image/upload/v1704122364/images/mycapul8w6ems6g8xqtt.webp)

For full source code visit : [https://freecodez.com/post/yit9k3c](https://freecodez.com/post/yit9k3c)


```html
// https://freecodez.com
const Hello = (props) => {
	return (
		<div>
			<button class="button">
				{props.txt}
			</button>
		</div>
	);
};

```

Source Code : [https://freecodez.com/post/yit9k3c](https://freecodez.com/post/yit9k3c)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Join Virtual Coffee in New Year, New Goals!
Tags: webdev, codenewbie, community, devresolutions2024
Published: 2024-01-01 15:11:57

Happy New Year, everyone! 🎉

At Virtual Coffee this month, we start with a new challenge: **New Year, New Goals**! Let's start the new year with a new spirit and new goals.

Whether you want to learn dev-related things, prepare yourself to get a new job, make new habits to be a better developer, achieve personal goals, or anything you work towards this year.

During this month, we encourage you to set goals for the year and break them into achievable monthly goals.

## The Goal for the Year

You can begin by defining your goals and the plan for the year. Take a moment to ask yourself:

- What do you want to achieve by the end of the year?
- Why do you want to achieve these goals?
- What steps do you need to take to achieve the goals?

Knowing the answers to these questions will help you stay motivated and on track to achieving your goals.

After you know your goals and plan for the year, break them into achievable goals each month to reach your big goals.

## Monthly Goals

Using the SMART method is one of the ways to provide directions that allow you to take concrete actions toward your goals.

**S**pecific: Set a specific goal.

**M**easurable: Establish criteria to measure your progress in accomplishing the goals.

**A**chievable: Ensure that your goals are attainable with your current skills and resources.

**R**ealistic: Your goals are possible within the time frame and with the available resources.

**T**ime-Bound: The deadline to accomplish the goals.

Setting SMART goals gives you a higher chance of success to achieve them because they are clear and within your control.

## Write Your Goals

There are many apps or free goal templates that you can find online to help you set your goals.

You can also use note tools like [Google Docs](https://docs.google.com/) or [Notion](https://www.notion.so/) or write them down on physical notebooks.

## How to Participate in the Challenge

This month, at Virtual Coffee, we are teaming up with our [Coffee Table Groups](https://virtualcoffee.io/resources/virtual-coffee-handbook/guides-to-virtual-coffee/coffee-table-groups) to support our members in setting their goals and keeping them accountable.

But we also encourage you to do it with us here on DEV! Let's start with the big goals.

DEV's [New Year, New Code: #DEVResolutions2024](https://dev.to/devteam/new-year-new-code-devresolutions2024-2e5h) is a perfect place to set up your resolution for the year. You can use the provided template and drop them in the comments.

Then, you can break your big goals into monthly goals and share them with us here. Let's support each other in setting those small goals toward your big dreams! 🙌
Cloud Native: The Rocket Fuel for Business Agility and Innovation
Tags: cloudnative, consulting
Published: 2024-01-01 15:08:12

### The Digital Imperative for Cloud Native Adoption

The digital landscape is a volatile ecosystem, demanding constant adaptation and evolution. Businesses that cling to outdated practices face the risk of being left behind by nimble competitors riding the cloud native wave. In this context, migrating to cloud native technologies isn't merely a trend, it's a strategic imperative for achieving sustainable growth and market leadership.

### What is Cloud Native?

It's not just about moving your applications to the cloud. It's a paradigm shift in how you design, build, and operate software. It's about embracing a set of tools and principles that empower you to build resilient, scalable, and flexible applications that thrive in the dynamic on-demand world.

### Benefits of Cloud Native Adoption

#### Unlocking Agility and Speed:

**Microservices architecture**: Break down your monolithic applications into small, independent services that can be developed, deployed, and scaled independently.
**Containers**: Package your applications and their dependencies into standardized units that run on any infrastructure.
**Kubernetes**: Orchestrate your containerized applications with a powerful platform that automates deployments, scaling, and service discovery.

#### Boosting Operational Efficiency:

CI/CD: Automate the software development lifecycle, from code commit to production deployment.
IaC: Manage your infrastructure declaratively, using code to define and provision resources.
Service meshes: Manage communication and security between microservices with a dedicated network layer.
#### Enhancing Scalability and Resilience:

Auto-scaling: Automatically adjust your application resources based on real-time demand.
Fault tolerance: Build applications that can gracefully handle failures and automatically recover.
Observability: Gain deep insights into your applications' health and performance with comprehensive monitoring tools.
### The Cloud Native Toolbelt:

**Container registries**: Securely store and distribute your container images (e.g., Docker Hub, Harbor).
**Configuration management tools**: Manage application configurations across environments (e.g., Ansible, Chef).
**API gateways**: Simplify API management and improve developer experience (e.g., Kong, Tyk).
**Logging and tracing tools**: Gain detailed insights into application behavior (e.g., ELK Stack, Jaeger).
**Security tools**: Secure your applications and infrastructure (e.g., Istio, Vault).

### Navigating the Migration Journey with Tasrie IT Services

#### Our Cloud Native Consulting Services:

Cloud native strategy and assessment
Modernization and migration
DevOps transformation
Managed cloud services

### The Time to Act is Now:

Partner with [Tasrie IT Services](https://tasrieit.com/), and let our expert guidance propel you towards a successful cloud native future. Contact us today for a free consultation and discover how Tasrie can help you unlock the full potential of [cloud native](https://tasrieit.com/cloudnativeconsulting) technologies.
Beginner's TypeScript #13
Tags: programming, beginners, typescript
Published: 2024-01-01 15:00:00

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

⭐ **Typing Errors in a Try-Catch** ⭐

Take a look at this try-catch demo:

```ts
const tryCatchDemo = (state: "fail" | "succeed") => {
  try {
    if (state === "fail") {
      throw new Error("Failure!");
    }
  } catch (e) {
    return e.message;
  }
};
```

TypeScript gives us an error on **e.message** that the object is of type **unknown**.

We will figure out how to coerce the **unknown** type into one where we know what it is.

🌟 **Solutions:**

We have several ways to solve this problem.

1️⃣ **Use Any Type:**

One way to solve this challenge is to type **e** in the **catch** as **any**:

```ts
} catch (e: any) {
  return e.message;
}
```

We can use **any** because we are pretty confident that the error will be an error.

What makes this solution not ideal is that we lose autocomplete on the **e**. This makes it easy to end up with typos that can cause issues later.

This is not a good solution.

2️⃣ **Coerce as Error:**

A slightly better solution would be to coerce e to be an **Error**, and return the message:

```ts
} catch (e) {
  return (e as Error).message;
}
```

Here **e** is still **unknown** when we enter the **catch**, but using **as** coerces it to an **Error**, and we get our autocomplete as expected.

This solution is about as unsafe as the one above - we are not checking if **e** is an **Error**. We are casting it as an error.

3️⃣ **Check with instanceof:**

This solution is pretty similar to the last, except this time we'll use **instanceof** to see if **e** is an **Error**:

```ts
} catch (e) {
  if (e instanceof Error) {
    return e.message;
  }
}
```

Unlike previous solutions. This time we are checking **e** at runtime to whittle down what it could be.

We are not blanketing it with the **any** type, and we are also not casting it to something else either.

This is the best solution because it is the safest.

---

I hope you found it useful. Thanks for reading. 🙏

Let's get connected! You can find me on:
- **Medium:** https://medium.com/@nhannguyendevjs/
- **Dev**: https://dev.to/nhannguyendevjs/
- **Hashnode**: [https://nhannguyen.hashnode.dev](https://nhannguyen.hashnode.dev/)/
- **Linkedin:** https://www.linkedin.com/in/nhannguyendevjs/
- **X (formerly Twitter)**: https://twitter.com/nhannguyendevjs/
🚀 Dive into Depth First Search (DFS): Unraveling the Depths and Tree Traversal with Stacks! 🎥
Tags: beginners, tutorial, programming, algorithms
Published: 2024-01-01 14:48:04

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

Greetings, coding enthusiasts! Join me in my latest video as we unravel the intricacies of the Depth First Search (DFS) algorithm, exploring its implementation with stacks. Together, we'll navigate through the depth of graphs, understanding the nuances of DFS and witnessing its power in traversing complex structures.

🎥 Watch the video here: https://youtu.be/dXYsXgf9Em8?si=lPrywBPj-2cSq7Y6
🔗 Access the code on GitHub: https://github.com/Vinay352/Leetcode_Complete_Solution/blob/main/CreateBinaryTree_DFS_BFS.java

Your questions and insights are essential, so please share your thoughts in the comments. Let's deepen our understanding of DFS together! 

Stay connected:
🎥 YouTube: https://www.youtube.com/@VinayJainDev3097
📚 Medium: https://medium.com/@vinay.j3097
📝 Dev.to: https://dev.to/vinay_jain_dev
🔗 GitHub: https://github.com/Vinay352
🐦 Twitter: https://twitter.com/vinayj3097
📸 Instagram: https://www.instagram.com/vinay_jain_dev/
📘 Facebook: https://www.facebook.com/vinayj3097/
Travel Agency Landing Page
Tags: webdev, design, beginners, productivity
Published: 2024-01-01 14:44:44

[Traveling](https://www.figma.com/@codingcss ) is probably in a lot of yearly to-do lists and most of us are probably in the midst of planning our next big trip of the season.

One thing we’d probably appreciate is an application that is both appealing and simple to use, giving you all the detailed and specific information of a travel destination alongside stunning photos that make you want to be there already. It would be even better if said app also lets you find hotels, plan accommodations and set itineraries all inside the app on a good-looking interface.

On the other side of the fence, creating such apps might be challenging though not impossible. Many designers have attempted to create the idea of a travel app. And some of them are really good.

App design making use of more widely-known UX patterns to produce smoother user flow between core functions of the application in the order they’re most often utilized.

Redesign the visual appearance of the interface brings it in-line with modern smartphone applications.

Implement additional features that provide the user with useful information. Also, it assists in planning their movements and keeping the user informed during them.

This [web template](https://www.figma.com/@codingcss) is simple and clean but has all you need. Color palette is set in bright colors and white. The pack includes Slider, some type of blog pages, Maps, Events list, Calendar, Timeline list and Mansory gallery. Everything is editable.


![Travel Agency Landing Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grxzdpa5qj1dhkige24g.jpg) 

---


## Travel Agency Landing Page

---


### Designed by : [https://www.figma.com/@codingcss](https://www.figma.com/community/file/1323645036412828053/travel-agency-landing-page)

### Check out their incredible work ☝🏻

---


### Additional, If you are looking for a professional website service, I’m here to bring your vision to life.

---


### We offer in our service :

#### 1. Custom Web Design
#### 2. Responsive Design
#### 3. E-commerce Solutions

---


### Subscribe My YouTube Channel: [LearnWithDanial](https://www.youtube.com/channel/UC2ePmMbkHo_xi7RWmWmvdVA) to improve your Web Development skills and for useful tips and tutorials.

{% embed https://www.youtube.com/channel/UC2ePmMbkHo_xi7RWmWmvdVA %}
React Multi-language feature using i18n or internationalization
Tags: javascript, react, learning, frontend
Published: 2024-01-01 14:39:43

ReactJS doesn't have built-in features to finish your Multilanguage Feature on your website. But there have an amazing NPM package called react-i18next is based on i18next. So let's get started.

## Step 1: install the packages
`npm install react-i18next i18next`

## Step 2: Create the file structure

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

I hope you will write text/data in the translations.js like this
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t6jurwl21rnj8rdss1wg.png)




The config.js file contains the set up for the i18n instance. The two JSON files will hold the text that goes in the app. en for English and es for Spanish. If you are following along, create the file structure in the boilerplate.

## Step 3: Configure the i18n instance
The i18n instance will hold all of your translations, the current language, and other info and methods needed. You can configure it in the config.js file like this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzc85vpf0w8t8fm81usv.png)
At the top, import the necessary dependencies. Next, the use(initReactI18next) will bind react-i18next to the i18n instance.

The first two properties of the init object parameter are a fallback language (fallbackLng) and default language (lng). I set both of these to English (en).

The resources are the JSON files with the translations that you created in the last step. The namespaces (ns) and default namespace (defaultNS) are the keys from the resources object.

You can split your translations into multiple files (namespaces) if you have a large app to simplify the files. In which case, you would add more than just the one file in the resources object and add it to the namespaces array. This app is small, so all the translations can go in one file.

## Step 4: Add the i18n instance to your app
In the index.js file of the boilerplate, which contains the entire app, import the i18n instance you created like this: 

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


## Step 5: Change language function

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




## Last Step : Now let's use them

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



I hope everything is working
Thank you
apply a openstreetmap- request to different areas of a country
Tags: webdev, beginners, tutorial, python
Published: 2024-01-01 14:37:01


hello dear experts,

i want to apply the following request to the area of a country - let us say


a. to switzerland or

b. Luxembourg


```
[out:csv(::id,::type,::lon,::lat,amenity,name,"addr:postcode","addr:city","addr:street","addr:housenumber","contact:website",website,"contact:email")]
[timeout:600];
rel[boundary=administrative][admin_level=6][name="München"] -> .city;
(nwr[amenity=hospital][name](around.city:2000);
nwr[amenity=school][name](around.city:2000);
nwr[amenity=church][name](around.city:2000);
nwr[amenity=childcare][name](around.city:2000);
nwr[amenity=nursing_home][name](around.city:2000););
out center;
```

want to apply the Overpass-Turbo-request on different goals - destinations - areas

think that the admin-level is a important "category " here - that makes the difference. 

but i am not very sure about this


how to change this!?
RE/MAX Belize
Published: 2024-01-01 14:31:00

RE/MAX is not only the largest real estate company in the world, it is also the largest network of offices and agents in Belize. With offices in every corner of Belize, RE/MAX has the largest market share. This network is important when looking at Belize real estate as we do not have a standard MLS. 

[Belize Land For Sale](https://remaxbelizerealestate.com/belize-land)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2t1iv1jrb8j8wqu3hwa.png)
Book On "Enhanced Test Automation with WebdriverIO"
Published: 2024-01-01 14:11:17

Book on "Enhanced Test Automation with WebdriverIO: Unlock the superpowers of hybrid testing frameworks" book published by Packt **From Paul Grossman ,Larry G.**

✨The clarity of explanations and the step-by-step approach taken by the authors make even complex concepts easily understandable.

✨The authors leave no stone unturned, providing crystal-clear guidance on :

- Installing,Setting up WebdriverIO, Config and Debug Tips and about various Wrappers
- Writing Robust Selectors and Reducing Maintenance,
- Cross-Browser Testing and Cross-Environment Testing,
- Building the Page Object Model and Running Tests in a CI/CD Pipeline with Jenkins and LambdaTest and more.

You can buy the book from below link from ⬇ 
[Click on The link To buy](http://tiny.cc/48crvz)

**"I strongly recommend this book"** to anyone serious about mastering test automation. It serves as a reliable companion, offering not only theoretical knowledge but also practical wisdom that can be immediately applied in real-world scenarios.
Happy New Year! 🎉 As we welcome 2024
Tags: webdev, javascript, beginners, programming
Published: 2024-01-01 14:10:14

Happy New Year! 🎉 As we welcome 2024, I'd like to thank everyone who has been part of my journey as a developer. This year promises to be an exciting chapter of innovation and growth. Let's continue to create and learn together! #Development #Innovation #NewYear2024
World Population Online Counter
Tags: codepen, javascript, webdev
Published: 2024-01-01 13:57:02

A world population online counter that counts: the total number of people at the moment, the number of births and deaths. The counter is based on UN forecast data. 

{% codepen https://codepen.io/dmtlo/pen/MWxamve %}

[Easily embed Pen in your WordPress site using WPCoder!](https://wordpress.org/plugins/wp-coder/)
My data safari (journey) as a woman in Tech from Kenya with opinions from my perspective.
Tags: data, datajourney, womenintech
Published: 2024-01-01 13:54:21

## **My background**
I am Sharon Sinei. I pursued my bachelors in Applied Statistics purely because I liked working with numbers and solving problems. I’m ashamed to admit that I initially didn’t think of the practical ways I would apply my degree. Fast-forward to four-years later, I have skills in Math, Statistics and Programming but not entirely sure how to apply them together to solve problems. So I did what any other sane person would do, I looked for a job. I leaned more towards data-related roles but I also have interest in research.

![A picture of a girl in a graduation gown with a quote written on it](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgfx3oxlfhtxkdreinj2.jpg)

## **The Kenyan data job market**
It is like any other job market, very competitive. I did terribly in one of my first interviews for a Data Analysis role. I noticed there was a gap between being fresh out of university and being employable that has required me to be very aggressive to overcome.
Data roles, especially in the more rural parts of the country are also not well defined or exist only in some capacity. I have held different roles, not necessarily in data analysis, but I have kept my data passion alive by writing, constantly upskilling and generally being proactive.

## **Challenges I’ve faced**
● Getting lost in the noise of the industry where there's always something new happening
● Properly managing burnout
● Imposter syndrome; feeling like I don’t belong or my skills are not good enough

## **Current interests**
The impact Artificial Intelligence(AI) is having, the conversations it is causing and ways to apply AI to make my work more productive.

## **Advice to those getting into/already in data analytics**
● Get a mentor
● A data-driven mindset is important to spot challenges in your surrounding that need data analysis skills to solve
● Find your tribe; join communities online and follow people who are where you want to be
● Enjoy the journey
Edtech Trends That Will Define 2024
Published: 2024-01-01 13:53:43

Explore the future of education in our latest blog, 'Edtech Trends: Educational Technology that Will Dominate 2024.' Discover the cutting-edge tools and trends shaping learning in the coming year. Stay ahead with our insights!

Read the full blog at: https://www.technbrains.com/blog/edtech-trends-in-2024/