teleren/devto huggingface dataset:
Day-90 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-05-18 16:27:13

Date:18/05/2022
Day:Wednesday

today, I started at about 10:30 am and as I was in progress to complate java script course and the bidding project so, today I started with the left over task so, today I started with the project so, I wrote the necessary code for the node mailer and also specified the email as we have to send the email and configured it all but only thing left is to check that if email is send successfully or not and it would be done tomorrow after this I started with left over cource so, I started with object oriented in java script  An Object is a unique entity that contains property and methods. For example “car” is a real life Object, which has some characteristics like color, type, model, horsepower and performs certain action like drive. The characteristics of an Object are called as Property, in Object-Oriented Programming and the actions are called methods. An Object is an instance of a class.after this I did A constructor is a special function that creates and initializes an object instance of a class. In JavaScript, a constructor gets called when an object is created using the new keyword.so, this way my day ended up and get to learn many new things.
3 Resources I Used for Learning Bootstrap - Fast.
Published: 2022-05-18 16:17:43

Starting on a javascript/HTML project for school was daunting for someone like me who hadn't spent much time working with CSS. I, of course, knew my primary goal was to make sure my website ran with the required functionality. However, I also have this perfectionist desire that it also needed to look good as well. If you too have this need to make sure your work looks good, but on a tight schedule, bootstrap is definitely for you.

Bootstrap is a front-end CSS framework that takes a lot of stress out of formatting a good looking website and making it responsive. It will take into account window size and it is mobile friendly!

Through my classes, I could see what bootstrap could accomplish but didn't know how to achieve those things on my own. These are some fun ways I found that helped me learn fast:

1. First is starting with the most obvious but the main bootstrap webpage! There's a quickstart guide that's incredibly simple to follow: https://getbootstrap.com/docs/5.2/getting-started/introduction/. However, after getting set up using the guide I was a little lost. "Now what?"

This documentation is great and goes over a lot. However, if you want to get started right away and start playing with the code, using the examples page is a great help. https://getbootstrap.com/docs/5.2/examples/

Using this page you can see what is possible with bootstrap and even modify code to see what happens as a result. This is how you can also see what code is used most often to achieve a look you might be going for. This is how I learned about containers and cards. This is listed in the documentation but the example page showed how these can be utilized.

2. Next is W3 Schools: https://www.w3schools.com/whatis/whatis_bootstrap.asp. They have a whole section for bootstrap with examples. Their built in examples let you modify the code to see the outcomes right away. This is super helpful for learning how small changes to the code can make or break things.

3. Udemy has great courses for bootstrap! 
https://www.udemy.com/courses/search/?src=ukw&q=bootstrap They range from beginner level to more advanced instruction. Catching a sale and following some videos is a great way to learn this framework. After watching a beginner video, I realized there were some better ways to use the elements I had already put into my project!

Learning basics of CSS can help with modifying parts of bootstrap that you want to overwrite. Working on a project with a goal in mind, or trying to recreate and existing website could be fun ways to learn and to get you learning fast.

The best way to learn is by doing - so let's get started!
React Interview Challenge: Create a Star Rating Component
Tags: react, webdev, design, interview
Published: 2022-05-18 16:07:38

## This example challenge is something you could expect if you are applying for frontend engineer positions.

You are tasked with creating a star rating component and given a list of functional requirements. Give this a go on your own and if you get stuck reference my example demo and code. Links at bottom of post. To simulate an actual interview situation, set yourself a timer for 45 minutes and practice explaining your thought process out loud as you go.

You are free to use any star icons you want or you can copy and paste these ascii star characters to use in your component:
Filled Star: `★`
Unfilled Star: `☆`

## Instructions:

- Create a star rating component.
- onClick, stars should fill up to the star clicked.
- Stars should change from unfilled to filled onHover and set to unfilled on mouse leave. Star rating should remain as it was when no stars are being hovered.
- The star rating should reset if the current star rating is filled and is clicked.
- The component should allow a default initial star rating and total number of stars to be set.
- Extra Credit:
  - Add a section to show the current star rating percentage to two decimal places.
  - Add an input to control the total number of stars.
  - Add an input to control the star rating.

[Live Demo](https://vp00l9.csb.app/)
[Code](https://codesandbox.io/s/star-rating-component-vp00l9)
Nodemon & Express
Tags: javascript, webdev, beginners, tutorial
Published: 2022-05-18 16:05:51

👋En este post te voy a mostrar como implementar [**nodemon**](https://nodemon.io/) a tu aplicación de [**express**](https://expressjs.com/), **nodemon** nos permite refrescar automáticamente nuestra aplicación de **express** al guardar nuestros cambios.

Si no sabes como crear una aplicación de **express** puedes ver mi articulo donde te enseño a crear una app de **express**.
[Crea Tu Primer App De Express](https://dev.to/rogerdimonte/tu-primer-app-de-express-4ecm)

## Pasos
- Primero debes iniciar un proyecto con `npm init -y`:
```js
{
  "name": "nodemon",
  "version": "1.0.0",
  "description": "Utilizar nodemon para actualizar nuestro proyecto",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Roger",
  "license": "ISC"
}
```
- Ahora debes instalar las siguientes dependencias.
```bash
npm i express
```
Y creamos una pequeña aplicación de **express**:
```js
const express = require('express')

const app = express()
const PORT = process.env.PORT || 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(PORT, () => {
  console.log('Server is running on port: ' + PORT)
})
```
- Seguido de esto debemos instalar la siguiente dependencia de desarrollo:
```bash
npm i -D nodemon
```
Despues de esto, dentro del **package.json**, debemos agregar la siguiente linea:
```json
"scripts": {
    "start": "nodemon index.js"
  },
```
Y en nuestra terminal escribimos:
```bash
npm run start
```
Y veremos algo como esto en nuestra terminal:
```bash
> nodemon@1.0.0 start
> nodemon index.js

[nodemon] 2.0.16
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node index.js`
Server is running on port: 3000
```
Esto quiere decir que todo esta bien.
Ahora abrimos nuestro proyecto en el navegador **http://localhost:3000/**, y veremos el mensaje de bienvenida Hello World!, ahora cambiaremos el mensaje de bienvenida a Nodemon is watching!.
```js
app.get('/', (req, res) => {
  res.send('Nodemon is watching!')
})
```
Guardamos nuestro proyecto, refrescamos la pagina, y veremos que cambio automáticamente el mensaje de bienvenida.
Y de esta forma es como puedes refrescar automáticamente tu aplicación de **express**.

###### Si quieres ver mas tutoriales como este puedes entrar a mi perfil y ahí encontraras una gran variedad de tips y tutoriales.👉[Roger](https://dev.to/rogerdimonte)
An introduction to PID control with DC motor
Tags: opensource, microservices, tutorial, luos
Published: 2022-05-18 15:57:18

Discover here an introduction to PID control with DC motor:

⏩ https://www.luos.io/blog/an-introduction-to-pid-control-with-dc-motor

This post will introduce the basics of PID control and why it comes in handy for robotic applications.
Creating glass cup with Blender
Published: 2022-05-18 15:54:05

In this video I have used blender version 2.79 which is older version. New version has lot of changes. 

Watch simple Blender object creation tutorial. This is for beginners and no complexity is involved in doing this.

Blender is a free and open-source 3D computer graphics software toolset used for creating animated films, visual effects, art, 3D-printed models, motion graphics, interactive 3D applications, virtual reality, and, formerly, video games. Blender's features include 3D modelling, UV mapping, texturing, digital drawing, raster graphics editing, rigging and skinning, fluid and smoke simulation, particle simulation, soft body simulation, sculpting, animation, match moving, rendering, motion graphics, video editing, and compositing.

For more info about blender and download:
[https://www.blender.org/](https://www.blender.org/)

```
                           😎Thank you
```
Shrink.media | Made with React JS
Published: 2022-05-18 15:48:28

![Shrink.media | Made with Javascript | React JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652723687/large_shrink_media_made_with_react_js_2ecdba62fe.jpg "Shrink.media | Made with Javascript | React JS")


### Reduce File Size for your Images for Free

> Reduce the file size of your images by smartly compressing & reducing dimensions. With Shrink. the media get
> 
> 💻 Faster Web Pages Loading
> 💻 Less Bandwidth Utilization
> 💻 Better User Experience

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Shrink.media on Twitter](https://twitter.com/withjavascript/status/1526949708194889730?s=20&t=lHn1NBHz-z1VwdP7hz7biA)
 |
| Medium | [Shrink.media on Medium](https://medium.com/@madewithjavascript/shrink-media-made-with-react-js-7e78a92a733d)
 |
| Facebook | [Shrink.media on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02jjFa7d8wm6GNktpsrBQhKrPaDoGqAdB3wQQ5s3nMmz13NaXoZWVeWGtZgj4fBmVdl)
 |
| Tumblr | [Shrink.media on Tumblr](https://madewithjavascript.tumblr.com/post/684602974422663168/shrinkmedia-made-with-react-js-reduce-file)
 |
| LinkedIn | [Shrink.media on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6932715642953355264)
 |


Filled Under:


 - [Made with Javascript](https://madewithjavascript.club)
    
 - [Made with React JS](https://madewithjavascript.club/categories/react-js)
    

`Make sure to give this post 50 hearts, click the unicorns and follow @madewithjavascript for more such awesome showcases. Show you love for the people who have worked so hard!`
My Portfolio
Tags: showdev, portfolio, react, tailwindcss
Published: 2022-05-18 15:44:10

:wave: Hey everyone, I've re-built my portfolio and would love to get feedback from you guys.


![portfolio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zqa09ohjvadchff2axat.png)

### What I've used:
- React.js
- TailwindCSS

Check out the live demo here :point_right: https://hanabelay.netlify.app/

Link to GitHub repo: https://github.com/earthcomfy/portfolio
Kotlin用のJavadoc(dokka)でドキュメント化する要素を可視性で制御する
Published: 2022-05-18 15:28:34

# はじめに
Kotlinではソースコードのドキュメント(Javadoc)化にdokkaを使用する事が多いと思います。
dokkaは、デフォルトでprivateも含めてすべての可視性の要素がドキュメントとして出力されてしまい、ライブラリを公開した際などに不要な要素などが混じってしまう可能性があります。
その際、ドキュメント化する要素を可視性修飾子により決定することで、publicな要素のみをドキュメントとして公開できてドキュメントの可読性が向上します。その方法について紹介します。

# (前提) Kotlinの可視性修飾子
https://dogwood008.github.io/kotlin-web-site-ja/docs/reference/visibility-modifiers.html
`private`, `protected`, `internal`, `public`の4つがあります。Javaでは`internal`という可視性は存在しません。これは同じモジュール内から参照可能となる可視性で、ライブラリを作成するときに非常に重宝しました(Javaの`package protect`とほぼ同等かと思います)

# (前提) dokkaの記述方法

`build.gradle.kts`
```kotlin
plugins {
    id("org.jetbrains.dokka") version "1.6.21"
}

apply(plugin="org.jetbrains.dokka")

buildscript {
    repositories {
        jcenter()
    }
    dependencies {
        classpath("org.jetbrains.dokka:dokka-gradle-plugin:1.6.21")
    }
}
```
以上を記述した上で、以下のコマンドを実行します
```
gradle dokkaHtml
```
すると`build/dokka/`配下に`index.html`などが作成されるかと思います。

# dokkaの出力を可視性修飾子により制御する方法

`build.gradle.kts`
```kotlin
import org.jetbrains.dokka.gradle.DokkaTask

tasks.withType<DokkaTask>().configureEach {
    dokkaSourceSets {
        configureEach {
          documentedVisibilities.set(listOf(
            org.jetbrains.dokka.DokkaConfiguration.Visibility.PUBLIC,
            org.jetbrains.dokka.DokkaConfiguration.Visibility.PROTECTED
          ))
        }
    }
}
```
上記の例では`DokkaTask`の`configureEach`で出力する可視性として(`Visibility.PUBLIC`, `Visibility.PROTECTED`)を設定しました。
あとは、先程と同じように
```
gradle dokkaHtml
```
でpublic及びprotectedのみの要素のドキュメントを生成することが可能です。

この`DokkaTask`の`configureEach`内には、他にもいろいろな項目が設定可能となっています。詳しくはこちらをご覧ください。
https://kotlin.github.io/dokka/1.6.21/user_guide/gradle/usage/
Responsive Navbar In Vue.js
Tags: vue, html, css, javascript
Published: 2022-05-18 15:15:24

Vuejs is a JavaScript framework and a progressive framework for JavaScript to build single-page web applications. So Here we made Responsive Navbar in the Vue.js framework with the help of HTML/CSS.

In this project, we used Vuejs methods and conditions for rendering functions. To make it responsive, we used CSS Media query. Also, we used font-awesome for toggle purposes on the mobile side, where users can click a navbar display in list format. Here we used vue-router for routing our components with proper names.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/responsive-navbar-in-vue-js/)
Paracetamol.js💊| #119: Explica este código JavaScript
Tags: javascript, spanish, webdev, discuss
Published: 2022-05-18 14:57:44

## **<center>¿Cuál es el orden de ejecución de este código JavaScript?</center>**
#### <center>**Dificultad:** <mark>Avanzado</mark></center>

```js
const tom = () => console.log('Tom');

const jerry = () => console.log('Jerry');

const cartoon = () => {
  console.log('Cartoon');

  setTimeout(tom, 5000);

  new Promise((resolve, reject) =>
    resolve('should it be right after Tom, before Jerry?')
  ).then(resolve => console.log(resolve))

  jerry();
}

cartoon();
```

A. `Cartoon`, `Jerry`, `should it be right after Tom, before Jerry?`, `Tom`
B. `Tom`, `Jerry`, `Cartoon`, `should it be right after Tom, before Jerry?`
C. `Cartoon`, `Jerry`, `Tom`, `should it be right after Tom, before Jerry?`
D. Ninguna de las anteriores. 

Respuesta en el primer comentario.

---
NEW HERE! Sharing developer opportunities. !LETS BUILD!
Published: 2022-05-18 14:49:34

Hi Everyone, 

I am very excited to be in this community with all of you talented folks!

I am a growth lead who helps coordinate our grants program which right now includes a developer application contest with 50K in rewards and our bug bounty that has tiered rewards for the magnitude of the submission.

I guess I am curious to know if this is a safe space to share some of our opportunities for developers?

Feel free to learn more here:
oak-network.notion.site/DApp-Conte...
MERN Stack Job Portal Template
Tags: javascript, mern, node, mongodb
Published: 2022-05-18 14:40:34


There are lot of WordPress job Portal themes but I did not found MERN Stack Job Portal Template. So I planned to develop MERN Stack theme. I beelive, with ready-made theme developer can create easily scaleable, secure and fasted website quickly. 

Here is our first template. We are coming with more templates. 

 **[metajobs- Job Portal Template](https://jstemplate.net/item/mern-stack-job-board-theme/)** 

[Live Preview](https://metajobs.vercel.app/)

**Tech Stack: **
Design tool: Figma
Frontend: Tailwind CSS, React.js, Next.js, SWR
Backend: Node.js, Express.js, Moongose, typescript

I am looking forward to your thought on it guys. 

Thanks
Bible Quiz!
Published: 2022-05-18 14:27:41

Try out my terminal game using python. Clone my project and run it to play my bible quiz! Like this`

```
git clone https://github.com/A-P28112005/Python_project.git
```
`
or copy the link below and select the clone function on Visual Studio and then run the program.
[](https://github.com/A-P28112005/Python_project.git) 

If you have any questions feel free to email me on aaronpaul28112005@gmail.com 

I made this program to test your knowledge and help you learn more about the bible. In doing this I have fun making the program and i spread the word of God. I appreciate your support and please check out my terminal game if you can. The quiz consists of a list of multiple choice questions that start off easy and get more trickier. A bible may be used to look up answers. I wish you lots of fun.

Aaron-Paul
graphQL: refetch vs update
Published: 2022-05-18 14:26:54

When To Use Refetch Queries in Apollo Client

https://www.apollographql.com/blog/apollo-client/caching/when-to-use-refetch-queries/


https://danreynolds.ca/tech/2020/05/04/Apollo-3-Client-Cache/

Fetch Policy:
https://medium.com/@galen.corey/understanding-apollo-fetch-policies-705b5ad71980


Use Apolloe Client 3 as a state management solution
https://www.apollographql.com/blog/apollo-client/caching/dispatch-this-using-apollo-client-3-as-a-state-management-solution/

Demystifying Cache Normalization
https://www.apollographql.com/blog/apollo-client/caching/demystifying-cache-normalization/
NoSuchFileException - How to avoid it when adding resources to a Spring Boot Application
Tags: java, spring, programming, tutorial
Published: 2022-05-18 14:21:17

Have you ever tried reading resources (json files, htm templates, text files etc) in your Spring Boot project, but got a java.nio.file.NoSuchFileException?
![confused](https://media.giphy.com/media/IejsMRUQLlphOfMmI1/giphy.gif) 
The _NoSuchFileException_ occurs if the file is not in the specified location. A similar exception that occurs is the _FileNotFoundException_.

### 1. Loading Files from a directory


A common approach developers use to add resources is to place the files in the _src/main/resources/_ directory, and then read the files from that path.
Although not the best practice, this approach works if the project is run locally. This is because the project directory is used as the current working directory during runtime.

For example, using the code below, I can read user data from a file and save the value in a string. 

_application.properties_
```properties
filePath=src/main/resources/filename.txt
```
_ReadUserDataFromFile.java_
```java
public class ReadUserDataFromFile {
   @Value("${filePath}")
   private String dataFilePath;

   public String readDataFile() throws IOException {
      String data = new String(Files.readAllBytes(Paths.get(filePath)));
     return data;
    }
}
```
The file is successfully read if it is in the _src/main/resources/_ directory.

Now, if the project is packaged as a JAR file, the _NoSuchFileException_ will be thrown when trying to read the file. This happens because _filename.txt_ is at the root folder of the JAR and it cannot be accessed using the file path. 


### 2. Creating a Resource object

A better approach and a solution to the _NoSuchFileException_ is to create a org.springframework.core.io.Resource object in your class and set the value to point to the file.
Example:

_ReadUserDataFromFile.java_
```java
public class ReadUserDataFromFile {
   @Value("classpath:filename.txt")
   private Resource dataFile;

   public String readDataFile() throws IOException {
      String data = new String(dataFile.getInputStream().readAllBytes());
      return data;
    }
}
```
With this approach, the file can be read both locally and from JAR file.
PixelSnap 2 for Mac | Made with Vue JS
Published: 2022-05-18 14:20:17

![PixelSnap 2 for Mac | Made with Javacript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1652677186/large_pixel_snap_2_for_mac_made_with_vue_js_014fc15ed5.png "PixelSnap 2 for Mac | Made with Javacript | Vue JS")


### PixelSnap - The fastest tool for measuring anything on your screen for macOS. Measure stuff like a PRO!

> PixelSnap is an app for macOS that makes it easier for designers and web-developers to measure anything on their screens by just clicking and dragging around the cursor.
> 
> The fastest tool for measuring anything on your screen
> 
> ### PixelSnap 2 is up to 2x faster
> Completely rewritten from scratch, the new version provides a truly magical experience. Measuring things has never been faster or more enjoyable!
> 
> ### Works everywhere. In every app.
> PixelSnap works on the whole screen, across all apps, and you can measure anything.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project



[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [PixelSnap 2 for Mac on Twitter](https://twitter.com/withjavascript/status/1526929466785685505?s=20&t=jzMjU1hEfDM2d9fip1xzKw)
 |
| Medium | [PixelSnap 2 for Mac on Medium](https://medium.com/@madewithjavascript/pixelsnap-2-for-mac-made-with-vue-js-88cb90bc1e4b)
 |
| Facebook | [PixelSnap 2 for Mac on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0SWxqNG1ExwfpP2U4YHmteXyQkUJGyUxFGYaLrqW8Tu3q6AptMxAqv2FrZU9XioNGl)
 |
| Pinterest | [PixelSnap 2 for Mac on Pinterest](https://ReplaceLink.com)
 |
| Tumblr | [PixelSnap 2 for Mac on Tumblr](https://madewithjavascript.tumblr.com/post/684597932950962176/pixelsnap-2-for-mac-made-with-vue-js-pixelsnap)
 |
| LinkedIn | [PixelSnap 2 for Mac on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6932695306404851712)
 |


Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Vue JS](https://madewithjavascript.club/categories/vue-js)

`Make sure to give this post 50 hearts, click the unicorns and follow 
@madewithjavascript 
 for more such awesome showcases. Show you love for the people who have worked so hard!`

Tag us in your showcase, for a chance to get showcased!
Fix Javascript Date Woes
Tags: javascript, typescript, webdev
Published: 2022-05-18 14:05:27


If you've ever worked with dates returned from an API in javascript/typescript, you've probably dealt with the "ugh, why did it convert to UTC _then_ add the timezone". I found this helpful function that will take any Date and apply the Timezone difference while retaining the original time.

For example, without this function if you give the Date class 1/1/2022 12:00AM, people in the EST Timezone will see 12/31/2021 6:00PM EST.

With this function, if you give the Date class if you give 1/1/2022 12:00AM, people in the EST Timezone will see  1/1/2022 12:00AM EST.

_[Code originally found from StackOverflow](https://stackoverflow.com/a/39209842/864596)_

```
const newDateInCurrentTimezone = (date: Date | string) => {
  const newDate = new Date(date);
  const userTimezoneOffset = newDate.getTimezoneOffset() * 60000;
  return new Date(newDate.getTime() + userTimezoneOffset);
};

export default newDateInCurrentTimezone;
```

Gist: https://gist.github.com/phil-the-dev/eba6cdbf170822fbdee637087080ce71