teleren/devto huggingface dataset:
Timer Feature in Browsers: One Byte Explainer
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-28 21:20:32

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

## Explainer
The timer feature in web browsers enables users to set timers directly within their browser interface, serving various purposes such as setting reminders, initiating countdowns, or effectively managing time dedicated to specific tasks.

Web browsers have a built-in timer feature that allows developers to execute code at specified intervals or after a certain delay.

## Additional Context
JavaScript provides several built-in methods to interact with these browser timers. Two common ones are:

- **setTimeout:** This method executes a specified function or code snippet once after a specified delay.
- **setInterval:** This method repeatedly executes a specified function or code snippet at set intervals.

JavaScript offers various other time-related methods for tasks such as getting the current date and time, measuring elapsed time, or converting time formats.
【Next.js, React.js】Making Image with Loading component.
Tags: nextjs, react, image, typescript
Published: 2024-03-28 21:15:36

In this post, I'll share a simple technique to create a reusable image component in Next.js that displays a loading indicator until the image has fully loaded. This is achieved using the onLoad event handler provided by Next.js's Image component.

## ImageWithLoading component

```javascript

import Image from 'next/image';
import React from 'react';
import cn from 'classnames';
import Loading from '@/components/elements/message/Loading';

type ImageProps = {
  id: string;
  url: string;
  alt: string;
};

const ImageWithLoading: React.FC<ImageProps> = ({ url, alt }) => {
  const [imageLoaded, setImageLoaded] = React.useState<boolean>(false);

  return (
    <>
      {!imageLoaded && <Loading size="large" />}
      <Image
        src={url}
        alt={alt}
        fill={true}
        style={{ objectFit: 'cover' }}
        className={cn('rounded-md', { 'opacity-0': !imageLoaded })}
        onLoad={() => setImageLoaded(true)}
      />
    </>
  );
};

export default ImageWithLoading;
```
In this component:

- The `imageLoaded` state is initially set to false, indicating that the image has not yet loaded.

- The `Loading` component is displayed while imageLoaded is false.

- The Image component's className uses the classnames (imported as cn) library to conditionally apply the 'opacity-0' class when imageLoaded is false, making the image transparent.

- The onLoad event handler sets imageLoaded to true once the image has finished loading, which removes the 'opacity-0' class and hides the Loading component.

Using the classnames library instead of template literals for conditional class names enhances the reusability of the component. It provides a standardized and efficient way to handle dynamic class names, improving code readability and maintainability.

## Use case
```javascript
 <div htmlFor={piece.id} 
className="flex relative h-[200px] w-[150px] bg-white rounded-md"> 
   <ImageWithLoading id={piece.id} url={piece.imageUrl} alt={piece.title} />
</div>
```

Note:
When using the `fill` prop in Next.js Image, it's important to note that the **image will be positioned relative to the nearest ancestor element with a position: relative;** style, or it will be positioned relative to the root of the document if no such ancestor is found. Therefore, to ensure that the image is positioned and sized correctly, you should add the relative class to a parent element or suitable ancestor element.


Photo credit:
from <a href="https://unsplash.com/ja/%E5%86%99%E7%9C%9F/%E6%96%87%E7%AB%A0-jf1EomjlQi0?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
by <a href="https://unsplash.com/ja/@mike_van_den_bos?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Mike van den Bos</a>
CSS Art:Watermelon
Tags: frontendchallenge, devchallenge, css, cssart
Published: 2024-03-28 21:14:24

_This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack._

## Inspiration 
I had to learn CSS for my job as a frontend developer but started liking it. I love being artistic with it but I am still at my beginners state.   

## Demo
https://codepen.io/kejriwaldivya/pen/mdgBbNV


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


## Journey
I have been obsessed with watermelon these days, thats how I tried drawing it.I started off thinking its easy but I wont deny, I struggled a bit. I have been practicing border-radius recently, so it helped me alot to get through this challenge.Although I am still figuring out how to draw the outer watermelon shades(dark green section and light green section)
Some of the properties widly used:

`border-radius`:was very helpful making the shapes
`box-shadow`,`radial-gradient`: to give the shadow effect
leaks for shadow secret
Published: 2024-03-28 21:04:54


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tporhq7s37v7zlzs4kma.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m0e4dvrmpyjcenyhr88.jpg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sbgmtfebe6jlfmq1aii.jpg)
Mastering JavaScript Strings: Unravel the Power of Text Manipulation!
Tags: javascript, beginners, programming, tutorial
Published: 2024-03-28 21:00:11

String operations are the cornerstone of any JavaScript developer's toolkit. From improving form inputs to data formatting, mastering JavaScript string methods is a game-changer. That's why I'm excited to share my latest video with you all:

## Mastering JavaScript String Methods: Unravel the Power of Text Manipulation!

In this video, I break down key string methods with clear, actionable coding examples. You'll walk away with the skills to slice, search, and capitalize your way through any string-related challenge. Perfect for beginners and a great refresher for veterans!

Check out the video and upgrade your coding expertise. Your feedback is the wind beneath my wings, so let me know your thoughts, questions, or just say "Hi" in the comments!

[Link of video](https://youtu.be/UkFZYoTcmh4?si=yw4gHvqp6BP7dd3v)

Remember, coding is not just about solving problems, it's about creating art with your keyboard.

#JavaScript #WebDevelopment #StringManipulation #LearnToCode #Programming #CodingTutorial #DeveloperCommunity #FrontEndDevelopment #TechSkills #JavaScriptTips

👉 Don't forget to like, share, and follow for more updates!
MY NEW ANIME SERIES
Published: 2024-03-28 20:56:20

hi there my name is Jayden McLean and I am 13 years old and I love to watch anime movies and series. my favorite anime series is dragon ball z and one piece and I need your guys help I am making a anime series it is called shadow secrets and I finish with the storyline it is just the character and i finish with the series.so it is inspired me to make my own anime series these are the characters name.1:pablo2: Percy and there is more character in the series but when the first season is publish so if anyone see this message please write back to me
Match Case Super Powers - Python
Tags: python, beginners, programming
Published: 2024-03-28 20:36:16

## HOLA

### Welcome to Python Unleash'd 03

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

This is same as Switch Case, just Switch is replaced with Match, but with new super powers added. 

It was  introduced in Python 3.10.

It is similar to if-else block. When you do not want to extend if-else in multiple chain, use MATCH CASE

### IMPORTANT POINTS TO REMEMBER

- MATCH case differs from our classic switch not just because python and C++ are two programming langs but in python it has got some new powers as mentioned above

- We do not have 'default' instead we have '_' for default case in the end

- cases need not to be same data type, this is possible in C++ too btw, in the code below, we are able to implement OR in C++ switch statement indirectly, we are not actually using OR keyword but bringing its implementation. Also we are changing the type of case statement here. We can do same in python also.

We can ofcourse not put array here in cases since it already convert string/char to int when we give char/string value to menuChoice. I am figuring out how it will look if I have to work with array in switch statement, lets see this first.

```

   int menuChoice = 1;
   switch(menuChoice) {
    case 'q':
    case 'Q':
        //Some code
        break;
    case 1:
    case 'S':
        cout<<"s for snake";
        break;
    default:
          cout<<"invalid";
 }

```

[Found this link interesting for arrays in C++](https://cplusplus.com/forum/beginner/81629/)

## BASIC MATCH CASE EXAMPLE PYTHON

```
sample_var = "string"

match sample_var:
      case "string":
          print("string here")
        
      case 5:
          print("five")
      
      case _:
          print("default")
```

### I am missing chatgpt here

## Switch case with OR in PYTHON

'|' is used for OR

```
sample_var = "string_second"

match sample_var:
      case "string":
          print("string here")
        
      case 5 | "string_second":  
          print("five")
      
      case _:
          print("default")
          
          
```

NOW I AM JUST PLAYING WITH THIS CODE AND EXPLORING NEW THINGS

So here is another example, we are using if with MATCH CASE

```
sample_var = "lara"
list1 = ["ramesh", "suresh"]
name = "ramesh"

match sample_var:

      case "lara" if name in list1:
          print("lara has access to DB")
          
      case "string":
          print("string here")
        
      case 5 | "string_second":
          print("five")
      
      case _:
          print("default")
          
```

Looks interesting! right?

We can match dictionary, class even patterns, find more about this [here](https://www.geeksforgeeks.org/python-match-case-statement/)


Thanks for reading!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpk0h9gip1qi08u868ut.gif)
The Versatile 'this' keyword
Tags: javascript
Published: 2024-03-28 20:36:00

Many developers find the 'this' keyword confusing, but with a bit of practice, you can grasp its concept easily.

The 'this' keyword is specially made to point to objects, the value of the 'this' keyword is determined by how a function is called. as example if a function is called in the global context or the global scope it will point to the window object, if it is called inside an object (object's context) as a method it will point to that object.

To understand this, let's start with its behavior in the global scope:

`console.log(this); // Prints the global object (window in browsers)`

In the global scope, the value of the 'this' will be the global object, which makes sense because it's the surrounding context.

Now, let's consider an example where we define a global-scoped function:

```
const sayHello = function(name) {
  console.log(this);
};

sayHello('John'); 
```

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

Since the function is called in the global scope it will point to the window object.

Let's attach the same function to an object, so instead of calling it globally, let's call it with our object and see how the 'this' keyword will behave: 

```
const person = {
  firstName: "John",
  lastName: "Doe",
  sayHello: sayHello
};

console.log("----Function called with object----");
person.sayHello('Ehab');
console.log("----Function called globally----");
sayHello();
```

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

As we said, the 'this' keyword for function 'sayHello' will look for its context. is the function called inside a context like the object literal or it is called in the global scope? and then 'this' will be assigned to the object of a context.


But not with arrow functions, since arrow functions do not have the 'this' keyword, they inherit it from the parent scope.

```
const person = {
  firstName: "John",
  lastName: "Doe",
  fullName: () => {
    console.log(this); // Prints the window object
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(person.fullName()); // Prints "undefined undefined"
```
In the previous example, it prints the window object because the arrow function inherited the 'this' keyword from its parent scope which is the global scope. so if you need to use the 'this' keyword do not define arrow functions, just use regular functions
Camp Activity Form Markup With Glam
Tags: frontendchallenge, devchallenge, css, javascript
Published: 2024-03-28 20:29:38

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

## What I Built
I built a camp activity inquiries form to get feedback from campers.

## Demo

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

- [Live Demo](https://camp-activities.netlify.app/)

- [Source code](https://github.com/dev-lawrence/dev-challenge)

## Journey
The experience was both enjoyable and slightly stressful as I had to return to using vanilla JavaScript, which I haven't utilized for some time. Nevertheless, it proved to be a valuable learning journey. I'm proud of how the website turned out, especially considering the minimal planning I invested in it and the need to reacquaint myself with certain JavaScript concepts. I will try to create a better version if there is time.
Keep your face fresh
Tags: skin, beauty, face, fashion
Published: 2024-03-28 20:25:35

Beauty is more than skin deep; it's about embracing your unique essence and radiating confidence. With Nikol Beauty, every product is a testament to celebrating your individuality and enhancing your natural allure.Discover the magic of beauty with [Nikol Cosmetics](https://nikolbeauty.com/). Elevate your look with our luxurious range, designed to enhance your unique charm and empower your confidence.
Learning rust and python to study, math,economy an blockchian
Published: 2024-03-28 20:12:38

 Building a Strong Foundation in Computer Science with Python, Rust, and Economics

Welcome to my journey into the exciting world of computer science! This blog will be a chronicle of my experiences as I leverage the power of Python, Rust, and economics to gain a deep understanding of both technical concepts and the real-world applications of computing.

Why Python and Rust?

Python is known for its beginner-friendly syntax and vast ecosystem of libraries. It will be my springboard, allowing me to explore various branches of computer science with ease. On the other hand, Rust's focus on performance and memory safety will equip me for more complex projects down the line.

Economics and Computing: A Powerful Blend

By studying economics alongside computer science, I aim to bridge the gap between theory and practice. Understanding economic principles will allow me to create applications that not only function well but also have a significant impact on the world.

A Commitment to Continuous Learning

This blog isn't just about showcasing successes; it's about embracing the entire learning process. I'll be sharing my struggles, roadblocks, and "aha!" moments in the hopes of creating a space for open discussion and growth.

This is a serious commitment, and I believe this time will be different. I'm dedicated to continuous improvement, pushing myself to learn more every single day.

Join Me on This Adventure!

Whether you're a seasoned programmer or just starting your journey, I invite you to join me on this adventure. Let's explore the beauty of computer science together, one line of code at a time!
Lançamento do App Edudu
Tags: app, ios, android, professores
Published: 2024-03-28 20:11:25

É com muito prazer que anuncio o lançamento do App Edudu [para iOS](https://apps.apple.com/br/app/edudu/id6477551944) e [para Android](https://play.google.com/store/apps/details?id=tech.segunda.edudu)!

Neste artigo apresento o App e discorro um pouco sobre as tecnologias que escolhi para desenvolver este projeto.

## O que é o Edudu?

Se você é um professor ou professora em busca de uma maneira mais eficiente de gerenciar suas turmas, alunos e registros de presença, o Edudu é o aplicativo que você estava esperando!

### Principais recursos do App:

- **Cadastro de Turmas, Alunos e Aulas**: Crie e gerencie múltiplas turmas, mantendo todas as informações importantes organizadas em um só lugar. Cadastre seus alunos de forma rápida e fácil.
- **Diário de Classe**: Registre todas as suas aulas e mantenha o controle das presenças dos seus alunos de forma simples e eficaz.
- **Armazenamento na Nuvem**: Todos os dados são armazenados de forma segura na nuvem, garantindo acesso fácil e proteção contra perda de informações.
- **Interface intuitiva e fácil de usar**: O Edudu foi desenvolvido pensando na facilidade de uso, proporcionando uma experiência intuitiva para os usuários.

## Tecnologias utilizadas

Para implementar este produto, optei por usar:

- Dart/Flutter: escolhi a [linguagem Dart](https://dart.dev) e o [framework Flutter](https://flutter.dev) pois já tenho experiência com estas tecnologias e buscava uma solução que permitisse a criação de um App para iOS e para Android sem a necessidade de criar 2 códigos separados.

- [Firebase Authentication](https://firebase.google.com/docs/auth?hl=pt-br): toda pessoa que possui um _smartphone_ tem uma conta da Google ou da Apple. Para facilitar o login, utilizo o _Firebase Authentication_ para fazer a autenticação do usuário.

- [Cloud Firestore](https://firebase.google.com/docs/firestore?hl=pt-br): queria que os dados fossem mantidos em uma nuvem (e não apenas localmente no dispositivo da pessoa). O banco de dados _Firestore_ foi quase uma opção natural. É fácil de integrar com o _Firebase Authentication_, seguro, rápido e não exige grandes manutenções.

- [Firebase Crashlytics](https://firebase.google.com/products/crashlytics?hl=pt-br): todo App precisa de algum mecanismo de monitoração de falhas. O _Crashlytics_ cumpre esta função muito bem.

O principal obstáculo que me levou a escolher estas tecnologias foi o fato de estar desenvolvendo este App sozinho. Buscava soluções que permitissem a construção de um produto com um esforço reduzido, mas com uma fundação forte que permita uma evolução à longo prazo. Flutter + Firebase se mostrou uma dupla muito boa para este cenário!

Nos próximos meses pretendo escrever alguns artigos contando um pouco mais sobre esta jornada.

## Onde baixar??

O App é gratuito e encontra-se disponível na [Apple Store](https://apps.apple.com/br/app/edudu/id6477551944) e na [Google Play](https://play.google.com/store/apps/details?id=tech.segunda.edudu).
She Coded, He Coded, We Coded - Celebrating Diversity in Tech!
Tags: wecoded, womenintech, stem
Published: 2024-03-28 20:03:01


## How can we actively embrace equality in the tech industry?

To make the tech industry fairer, companies should welcome everyone and celebrate differences. They should have fair rules and include people from all backgrounds, genders, and age groups. Offering good policies, being open to diverse ideas, and making sure everyone is represented properly can help a lot. Also, teaching people about equality, hosting events, and being careful not to let biases affect hiring can make a big difference. By doing these things, the tech world can become a better place for everyone.

## What do you perceive as the primary obstacles to achieving gender equity in tech?

Gender equality in tech is hindered by biases in hiring and promotions, male-dominated cultures, and few women in leadership roles. Women, especially mothers, struggle to balance work and family due to societal expectations and stereotypes. Society often undervalues working mothers and wives, viewing them as less committed to family. Even if they work, they're still expected to manage household chores. To address these issues, we must challenge societal norms, support working mothers, promote shared responsibilities at home, and create work environments that accommodate family needs. This will help create a more equitable and supportive tech industry for all genders.
## Reflect on a moment at work that affirmed the importance of gender equity to you.

## Looking ahead, what are your hopes and aspirations for gender equity in tech?

I hope that the future of tech will be better for women. They're getting stronger and speaking up against unfair treatment. More women are joining the industry, which is great. We need to stop discrimination and harassment. Everyone should have the chance to do well in tech, no matter their gender. My dream is for tech to be a place where everyone feels welcome and respected, and where we can all work together to make cool stuff for the world.

## What effective strategies do you employ to advocate for gender equity and diversity in your workplace or community?

In advocating for gender equity and diversity, I support more female representation by mentoring and uplifting women in my workplace and community. I believe empathy goes a long way in understanding others' experiences and fostering inclusivity. Always encourage others to never stay silent against harassment or discrimination, speaking up for fairness and respect. 

## Have you faced instances of bias or discrimination at work? If so, what was the experience like?

Yes, I've faced bias at work. Women still get paid less than men for the same job. Some people say things that make women feel like they're only good at certain jobs, like designing or managing, not developing. They also make jokes that are mean and make the workplace uncomfortable. When hiring, questions are asked like if you're married or planning to have kids, which can be hard to answer sometimes. These experiences can make you feel bad and affect how you feel about your job.
Configuring/ fixing absolute path in a react, typescript and vite project.
Tags: react, vite, typescript
Published: 2024-03-28 19:57:58

If you are someone trying to configure absolute import in a react, ts and vite project or facing issue with resolving absolute paths in same, this post is for you.

Recently I tried to make my hands dirty by building something in react and decided to use typescript and vite in the project.

I didn’t want to use the relative import (import Sidebar from “../components/Sidebar”;) as it leads to longer and less readable import paths as well as it will be difficult to manage when the project grows.

So I decided to use the absolute import (import { Sidebar } from ‘@components/Sidebar’;)

In order to configure absolute import in this project there are few things we have to add in tsconfig.json and vite.config.ts file.

In the tsconfig.json file add the baseUrl and paths, example code is given below

`{
  "compilerOptions": {
    ... 
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@constants/*": ["constants/*"],
      "@pages/*": ["pages/*"]
    }
  },
  ...
}`

The above code tells typescript how to resolve import paths.

But that is not enough, we have to tell vite on how to build import path. For this you can use this plugin https://www.npmjs.com/package/vite-tsconfig-paths.

After installing vite-tsconfig-paths plugin, import tsconfigPaths from it and add it to the plugins array in vite.config.ts file as below

`
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
});
`

With this configurations we will be able to setup absolute import in a react, ts and vite project.