teleren/devto huggingface dataset:
Seeking Guidance on the Path to Web Development: My Journey So Far and Next Steps
Tags: beginners, learning, discuss, career
Published: 2024-03-30 12:17:25

I'm taking my first steps into the world of web development and could use some guidance from those who've traveled this path before. If you're an experienced developer, I'd love to hear about your journey into web development. How did you get started? Which resources or learning methods did you find most effective in your early days? Looking back, what advice would you give to someone just starting out?

As I navigate through this journey, I find myself faced with a plethora of learning resources, both free and paid. Recently, my trial version on Codecademy came to an end, prompting me to explore various beginner courses and e-learning platforms. However, I discovered that while the content was similar, the certificates lacked recognition from employers. Determined to proceed without breaking the bank, I decided to pivot towards free resources.

The abundance of free resources, though, left me overwhelmed. Hours slipped away as I scrolled through countless platforms, trying to find the best starting point. Despite the daunting task, I remained committed to my goal of acquiring valuable skills and knowledge in web development.

In my pursuit of structured learning, I narrowed down my focus to a few key resources:

**Free Learning Platforms:**

1. [freeCodeCamp:](https://www.freecodecamp.org) Offering a comprehensive curriculum covering HTML, CSS, JavaScript, and beyond.

2. [The Odin Project](https://www.theodinproject.com): With its hands-on approach, The Odin Project guids through everything from basic HTML and CSS to full-stack development.
 
3. [Mozilla Developer Network (MDN) Web Docs](https://developer.mozilla.org/en-US/docs/Web): MDN offer reliable documentation and tutorials on web development technologies, supporting my learning journey with extensive resources.

**Exploring Free Tutorials and Guides:**

1. YouTube Tutorials: Channels like Traversy Media and The Net Ninja. I’ve settled on them for now, but I’m looking forward to hearing your recommendations

2. [W3Schools](https://www.w3schools.com): As a trusted source of tutorials and references, W3Schools helps me to understand more in HTML, CSS, and JavaScript.

I am just on my initial steps in this journey, but already want to understand waht is the best way to continue growing and learning in the field of web development. But I could use some advice on what the next steps should be. What resourses is better to use? How to built the portfolio? What is the best platform to take? Or areas of focus should I prioritize as I progress further?

Your insights and advice would mean a lot to me and other beginners embarking on this thrilling adventure. Thank you for sharing your wisdom and experiences.
Frontend Challenge Camp Activities Inquiry
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-30 12:04:10

_This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities_

## What I Built
<!-- Tell us what you built and what you were looking to achieve. -->

Nice to meet you all! 
I am **Ayu** from Jakarta, Indonesia.

I challenged myself to make the form template more interactive and personalized to my style. It's a form for Camp Activities Inquiry with three questions:

- Which camp activities are you most looking forward to?
- Food Allergies (if any)
- Additional things the counselor should know

I utilized vanilla CSS and JavaScript along with assets that I created from Canva, including GIFs from emojis. Every time a user changes their activities from the select option, the background image (.gif) also changes.


## Demo
I create this for a day (less than 12 hours).  
It was a fun project to do. Here is the result [link](https://ayusudi.github.io/glam-up-my-markup/)  
_Yup I hosted it to Github Pages._

Here is the repository : [https://github.com/ayusudi/glam-up-my-markup](https://github.com/ayusudi/glam-up-my-markup)

Demo Video [video mp4](https://github.com/ayusudi/glam-up-my-markup/raw/main/demo/video.mp4)

![Image description](https://github.com/ayusudi/glam-up-my-markup/raw/main/demo/video.gif)

```

```
<!-- Show us your project! You can directly embed an editor into this post (see the FAQ section from the challenge page) or you can share an image of your project and share a public link to the code. -->

## Journey
<!-- Tell us about your process, what you learned, anything you are particularly proud of, what you hope to do next, etc. -->

The journey is to make it a simple and productive day by the end of March 2024. I tried to compress the video but ended up using a GIF because the video compression resulted in a watermark, it is for a demo. Additionally, I turned to minimalist design using Canva and styled it with emojis.

My obstacle is realizing that my IP is not able to sign in to Codepen, so I tried using a VPN instead.

{% codepen https://codepen.io/ayusudi/pen/abxVbZP %}

[![Edit ayusudi/glam-up-my-markup/main](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/github/ayusudi/glam-up-my-markup/main?embed=1&file=%2Findex.html&import=true)

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

I am a solo player creating this short challenge. **@ayusudi**.


<!-- We encourage you to consider adding a license for your code. -->
MIT License 2024 by Ayu Sudi Dwijayanti (@ayusudi)

<!-- Don't forget to add a cover image to your post (if you want). -->



<!-- Thanks for participating! -->
Javascript History API
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-30 11:22:43

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer

<!-- Explain a browser API or feature in 256 characters or less. -->

Want to mess with history?

Well, you can, at least in JavaScript. Check out the History API, to go front and back the browser page
`history.forward()` - for next page
`history.back()` - for previous page 

You can try it in the browser console as well.

## Additional Context

I recently found it while exploring Web APIs in MDN docs, it is quite handy if you are working with vanilla HTML, and want to go back and forth in browser sessions.

Full document - [History API MDN](https://developer.mozilla.org/en-US/docs/Web/API/History_API)

<!-- Please share any additional context you think the judges should take into consideration as it relates to your One Byte Explainer. -->

<!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->

<!-- Don't forget to add a cover image to your post (if you want). -->

Thank you for reading!

**Deveesh Shetty**
[Github](https://github.com/dev-shetty) | [Twitter](https://twitter.com/shettydeveesh)



<!-- Thanks for participating! -->
Retro Days - Golden Age of Coding
Tags: programming, watercooler, software, engineering
Published: 2024-03-30 11:05:41

Back to the future where all discoveries were made. To think that it all began with machine languages, mathematical science breakthrough with first computer, human language to computer language. It sounds so fun 🎉!

**Test you retro skils**

If you know this code, you are from the Retro days, or adapted the skills of the Retro days:

```
PROGRAM RainReadPrint;
USES Crt, Printer;
VAR
  RainFall : ARRAY[1..5] OF REAL;
  A        : INTEGER;
BEGIN
Clrscr;
FOR A:=1 TO 5 DO
 BEGIN
   Writeln('Enter Day', A, 's rainfall');
   Readln(RainFall[A]);
 END;
 Writeln(Lst, 'DAY RAINFALL');
 FOR A:=1 TO 5 DO
  Writeln(Lst,'Day ',A, '':2,RainFall[A]:5:2);
END;
```

Sometimes, it doesn't make sense how the world got so smart, to go from static screen to silent screens. Remember when you lit the white computer box, you knew it was about to be an electromagnetic time.

The **Retro Days** when writing code was limited to at least 128kb because performance was justified or else you have a blue screen.

Everything worked on machine and engineering calculations to make what now there exists the internet, 🕸️ collosum, and many interesting things to learn and grow into.

I bet in the future world, some people will be the museum of the golden age. Holding what's called treasure times.

_I guess now, it will the best time for you learn broadly and in future, to be sharing how much you had acquired now._

1000 more to drop, 1000 more to establish.

Likewise, Do the basics.

🌪️
The Benefits of Learning Machine Learning at Brolly AI
Published: 2024-03-30 11:00:14

At Brolly AI, we take pride in offering an exceptional learning experience tailored to unlock your full potential in the dynamic field of artificial intelligence. Here are some compelling reasons why enrolling in our [machine learning]) program can propel your career to new heights:

Hands-On Experience: We believe in learning by doing. Our curriculum is meticulously crafted to provide you with hands-on experience using state-of-the-art tools and technologies. From the very beginning, you'll immerse yourself in practical exercises and real-world projects that simulate industry scenarios, allowing you to build confidence and proficiency.

Expert Guidance: Our team of experienced instructors and mentors are dedicated to your success. Whether you're grappling with complex concepts or seeking advice on your projects, our experts are here to provide guidance and support every step of the way. With personalized mentorship, you'll receive invaluable insights and feedback to accelerate your learning journey.

Cutting-Edge Curriculum: Stay ahead of the curve with our cutting-edge curriculum designed to cover the latest advancements and best practices in machine learning. From foundational concepts to advanced techniques, you'll gain a comprehensive understanding of algorithms, models, and methodologies essential for tackling real-world challenges.

Practical Application: At Brolly AI, theory meets practice. We emphasize practical application, ensuring that you not only grasp theoretical concepts but also develop the skills to implement them effectively. Through hands-on projects and case studies, you'll have the opportunity to showcase your abilities and build a robust portfolio that resonates with potential employers.

Community and Networking: Join a vibrant community of like-minded learners and professionals passionate about machine learning. Through collaborative projects, peer-to-peer learning, and networking events, you'll expand your horizons, forge valuable connections, and stay abreast of industry trends.

Career Opportunities: Machine learning expertise is in high demand across various industries, and Brolly AI equips you with the tools and knowledge to capitalize on these opportunities. Whether you're looking to advance in your current role, transition to a new career, or launch your startup, our program empowers you to chart a path to success in the rapidly evolving world of AI.
<a href="https://brollyai.com/machine-learning-classes-in-hyderabad/">machine learning classes in hyderabad </a>
What’s the best haircut for a 10-year-old?
Tags: hair, style, hairlook, boyshairstyle
Published: 2024-03-30 10:58:48

[Choosing the best haircut for a 10-year-old boy ](https://cheapbuyertoday.com/trending-short-hairstyle-look/)involves considering his style, hair type, and preferences. However, several versatile options are popular among boys of this age group.

One timeless choice is the classic crew cut, characterized by short hair all around the head, making it easy to maintain and suitable for active lifestyles. The crew cut offers a neat and tidy appearance while allowing for flexibility in styling.
FlashFetch: Concurrent, Multi-part file downloader
Tags: java, opensource, systemdesign, discuss
Published: 2024-03-30 10:58:02

Greetings everyone,

I'm thrilled to share with you my latest project, **FlashFetch - A Concurrent, Multi-part file downloader**.
It's a Java package designed for efficient and concurrent file downloading. It provides a simple and intuitive API for managing download tasks, allowing you to add, pause, resume, and cancel downloads with ease.
Github: [flashfetch](https://github.com/anurag1004/flashfetch)
JAR: [flashfetchv2.jar](https://github.com/anurag1004/flashfetch/releases/tag/v2)
**Features**

- **Concurrent Downloads**: FlashFetch supports concurrent downloading of multiple files, maximizing the utilization of available network resources.
- **Multi-part Downloading**: Files can be downloaded in multiple parts, improving download speed and reliability, especially for larger files.
- **Non-blocking Operations**: The download tasks run asynchronously, allowing you to continue working with your application while files are being downloaded in the background.
- **Download Queue Management**: Easily add, pause, resume, and cancel download tasks in the queue.
- **Intuitive API**: The package provides a straightforward and user-friendly API for managing downloads.

If anyone tries it out, please leave feedback in the comments. Your input is highly appreciated! 😄

Below is the architecture of my design.
![Architecture Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwb7lgt746ku1egmduz8.png)
PS- Obviously no design is perfect but if engagement is promising, I'm willing to dive into a detailed blog post on its architecture.

Cheers ✌🏻
Views on Open Source Projects
Published: 2024-03-30 10:53:53

FOUND THOUGHTS ON CONTRIBUTION TO OPEN SOURCE PROJECTS ON GITHUB. FEEL FREE TO CONTRIBUTE YOUR THOUGHTS 

"reality is that you need both :
open source project will give
you the community eyes and
point of view of other more
advandce and recognize dev
around the world on your way to
code. So you can improve your
code habit, so here you build
your colaborating knowledge,
networking, and clean code
habit, eyes for details
- build your own project will
make you learn concept, learn
stack (even if you do it coding
badly to learn stack faster), you will accumulute knowledge,
showcasing concept
understanding, skill, and build
your stack
you need your stack and you
need to have a great eyes for
details and habit of clean code
Nith best practice if you want to
really be a good dev.
The main difference beetween
Oy dev inside company and 5y or 10y dev inside company is that
the 5 or 10y level learn more
stack but mostly they already
have them own sensibility for
clean code, detail in code and
habit that make them better.
This habit etc... they got it from
work experience for year inside
company. You can take the same
and even better habit faster
with open source project simply
because you will be review by
more dev than what you can be
review if you do that only at work.
l'm junior dev for the moment
from what Isee around me
most of dev are not working in
open source project, or outside
work hour much. Simply by
doing project at your own you
are already showing many good
habit with act such as: learning
consistently + improving consistently + way to work more
than expectation + consistently
watching new techno... Showing
that point with consistency will
already put your profile better
than 60-70% of developper, if
you had the open source
contribution in top of that you
are showing your collaborating
skill (this is mostly skill where
HR people consider us like trash) you are improving that,
showcasing that and build your
clean code habit with the advise
of community and this will push
you to next level 80%-90%
better than other dev with same
experience as you make yourself
as a skyrocket profile and
valuable profile for most of the
company. Even if you are only 1y
or 2y company know that this
kind of profile will reach level of 10y more dev experience in 5y
and quickly be dev that can be
referenced as tech lead etc..
Honestly for most dev reaching
80-90% of dev is enough, for
more that's will certainly ask
you to do programming
competition, and this is not
something that every one can do, some people have enough
talent to beat all your effort
doing nothing so there is a
limitation on what we could
reach but to be recognise like a
tech lead, or a great teamate
etc... every people could do it
with some effort. And with side
project + work + contributing to
open source you will go to this point faster than if you don't do
all of that."
short hairstyles for boys
Tags: hairstyles, shorthairstyle, besthairstyle
Published: 2024-03-30 10:42:59

Are you seeking trendy and practical [short hairstyles for boys?](https://cheapbuyertoday.com/trending-short-hairstyle-look/) Look no further! Our curated collection of short hairstyle ideas for boys features a diverse range of options suitable for every young gent’s taste and lifestyle. Whether your little one prefers a classic crew cut, a stylish fade, or a trendy textured crop, we’ve got plenty of inspiration to help him look and feel his best. Short hairstyles for boys are not only easy to maintain but also exude confidence and charm. Explore our gallery of trending short hairstyle looks and discover the perfect haircut to suit your boy’s personality and preferences!
Angular Material Update Guide
Tags: angular, materialdesign, webdev
Published: 2024-03-30 10:34:49

---
title: Angular Material Update Guide
published: true
description: Updating old project to latest version of Angular Material
tags: angular,materialdesign,webdevelopment
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7on823xvy7jst9daob4w.png
canonical_url: https://angular-material.dev/courses/m2-ng-components/m2-ng-components/update-guide
---

🚀New Chapter Added!

## A complete update guide for Angular Material from v10 to v17

Are you struggling with updating Angular Material to latest version?

Then this chapter is just for you.

If your current project uses Angular Material version older than 17 and wants to update to version 17, then follow this chapter.

In this chapter, I will provide step-by-step guide to update Angular Material library to latest version.

Not just the CLI commands, but also fixes to some issues which you would face when making the upgrade.

Read it at https://angular-material.dev/courses/m2-ng-components/m2-ng-components/update-guide

[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3m4rcz9hvj3qmnzrss82.png)](https://angular-material.dev/courses/m2-ng-components/m2-ng-components/update-guide)
Implementing Image Carousel in NextJS
Tags: nextjs, carousel, react
Published: 2024-03-30 10:33:41


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

File: page.tsx

```
import React from "react";
import FeaturedScreen from "./components/FeaturedScreen/FeaturedScreen";
import Header from "./components/Header/Header";

export default function Home() {
  return (
    <main>
      <Header />
      <FeaturedScreen />
    </main>
  );
}

```

File: FeaturedContent.js

```
const ImageDetails = [
  {
    id: 1,
    movieName: "KAHAANI",
    language: "Hindi",
    img: "/IC-1.jpg",
  },
  {
    id: 2,
    movieName: "URI",
    language: "Hindi",
    img: "/IC-2.jpg",
  },
  {
    id: 3,
    movieName: "SPIDERMAN - NO WAY HOME",
    language: "English",
    img: "/IC-3.jpg",
  },
];

export { ImageDetails };

```

File: FeaturedScreen.tsx

```
import { Carousel } from "react-responsive-carousel";
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { ImageDetails } from "../../../public/FeaturedContent.js";
// Source for Image and its information

export default function FeaturedScreen() {
  return (
    <div>
      <Carousel autoPlay>
        {ImageDetails.map((movie) => (
          <div key={movie.id}>
            <img src={movie.img} alt="carouselImage-1" />
          </div>
        ))}
      </Carousel>
    </div>
  );
}

```
I am trying to implement a image carousel. but i am getting this error.
can anyone help me with this?
best short haircuts for ladies
Tags: short, haircuts, trendyshorthairstyles, hairstylelooks
Published: 2024-03-30 10:26:53

Are you on the hunt for chic [short haircuts for ladies](https://cheapbuyertoday.com/trending-short-hairstyle-look/)? Your search ends here! Our collection of trendy short hairstyles offers a plethora of options to suit every taste and preference. Whether you’re craving a bold pixie cut, a sleek bob, or a playful asymmetrical style, we’ve got you covered. Short haircuts are not only fashionable but also incredibly versatile, allowing you to express your individuality with ease. Explore our gallery of trending short 
uploads.s3.amazonaws.com/uploads/articles/s6awjkc7fv126pgpcpui.jpg) and find the perfect haircut to refresh your look and boost your confidence!

Discover the latest short hairstyle trends here
best short hairstyles for men
Tags: hair, trendinghairstyle, style, men
Published: 2024-03-30 10:14:15

Are you in search of the trendiest short hairstyles for men? Look no further! Our curated collection of the latest short hairstyle looks is here to inspire your next grooming adventure. From timeless classics to modern twists, we've got you covered with styles that suit every personality and occasion. Whether you prefer a sleek and sophisticated look or a more rugged and edgy vibe, our comprehensive guide has something for everyone. Explore our gallery of trending short hairstyle looks and discover the perfect style to elevate your appearance today!
Check out our trending short hairstyle looks here
Flutterflow desktop app available on Windows.💻
Published: 2024-03-30 10:07:09



🎉The FlutterFlow team is on  🔥 🔥 🔥 .

Flutterflow rolled out some fantastic updates that will make your development experience better! 💻

👉 Now you can leverage Flutterflow's robust performance and speed on your Windows machine to build your FlutterFlow apps. ⚡️

👉 Introducing API Interceptors, a brand new feature that gives you ultimate control over your app's communication with external services.   This ensures that your app functions securely and efficiently.🛡️

👉 exporting your FlutterFlow project to your local device even easier! No more manually copying and pasting your project ID. Simply click the </> icon, copy the provided code snippet using the FlutterFlow CLI, and paste it into your terminal. 📥

It's truly exciting to see FlutterFlow advancing and introducing so many new features for Flutterflow users, whether they're on Mac or Windows. The FlutterFlow team is really making it easier and more convenient to build amazing apps. With each update, they're enhancing the development experience and empowering developers to create even better applications. 💪