teleren/devto huggingface dataset:
IBUSY
Tags: npm, productivity, tooling, webdev
Published: 2022-01-07 18:16:04


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

IBusy tool can help you to create and enhance your time management tools and make them better and easier to make them because IBusy has great features that can help you in that.

1 - By IBusy you can get the free period between multiple periods Ex.. likes if you have a person and he is working in specifics times also he has holidays and absences and times he isn't available into so you can get only the times he available into between these periods.

2 - By IBusy you can filter and sort the duplication between multiple periods Ex.. if you have many dates and periods into an array and you need to remove the duplications and nested array and get only the unique periods like that

[Demo](https://mahmoudshahin1111.github.io/ibusy/)
Install 

> npm i ibusy

```typescript
[
   { start: "2021-12-29T10:00:00.000Z", end: "2021-12-29T15:00:00.000Z" }
   { start: "2021-12-29T14:00:00.000Z", end: "2021-12-29T16:00:00.000Z" }
   { start: "2021-12-29T16:00:00.000Z", end: "2021-12-29T20:00:00.000Z" }
   { start: "2021-12-29T19:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }
   { start: "2021-12-29T21:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }
]
```
You will get the unique period only

[{ start: "2021-12-29T10:00:00.000Z", end: "2021-12-29T23:00:00.000Z" }];
Tecnology and Dependances:

## let's know how we can do that

Just simple to get the free periods.

1 - enter the allowed periods. 2 - ender the disallowed periods. 3 - get the free or available periods by calling `getAllowedPeriodsBetween` function just simple 😉.

```typescript
const ibusy = new IBusy();
const periods = ibusy.getAllowedPeriodsBetween(
  [{ start: "2021-12-29T05:00:00.000Z", end: "2021-12-29T22:00:00.000Z" }],
  [
    { start: "2021-12-29T06:00:00.000Z", end: "2021-12-29T12:00:00.000Z" },
    { start: "2021-12-29T13:00:00.000Z", end: "2021-12-29T21:00:00.000Z" }
  ]
);
```
Balance
Tags: discuss, improvement, productivity, growth
Published: 2022-01-07 18:07:07

---
title: Balance
published: true
description: There's no such thing as balance in the moment
tags: discuss, improvement, productivity, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyfzgkyywuu2byw4svkw.jpg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/balance/)._

> There's no such thing as x-y balance in one particular moment. You can focus, truly focus, on one thing at a time. Balance is achieved on a longer time scale.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these "daily thoughts" posts.
Learn to make and sell
Tags: career
Published: 2022-01-07 18:06:24

Making and selling are the two most valuable skills you can master this year.

And I mean making and selling in the broadest terms.

As a developer, making comes naturally to you. But in addition to making software, I also mean making other things - music, stories, furniture, paintings.

As a developer, you might not be keen on selling. But I'm not talking about the cliched image of a used car salesman.

By selling, I mean presenting yourself well and convincing others to use your services or products.

For example, if you're looking for a new job this year. Or starting out as a freelancer. You will need to learn to sell yourself.

So, the new theme for my startup [Learnetto](https://learnetto.com/?utm_source=DEV&utm_medium=repost&utm_campaign=makeandsell) this year is to help you learn to make and sell.

Look out for lots of great new content on both those topics.

Make sure you [sign up to our newsletter](https://learnetto.com/newsletter?utm_source=DEV&utm_medium=repost&utm_campaign=makeandsell) to get the latest content first.

Happy new year!

PS Btw, are you interested in teaching? I'm looking for people to help me create new educational content (tutorials, videos, workshops) on Learnetto. Email me at hrishi@learnetto.com and tell me what you can teach. If you have any examples, then please include some links to your work.
Date Format In Mysql
Tags: php, laravel, javascript, mysql
Published: 2022-01-07 18:04:05

## **Mysql Query 1:**
This is query like this type of date format “Y-m-d“

`SELECT DATE_FORMAT("2022-01-08", "%Y");`

Output:

> "2022"

Mysql Query 2:
`SELECT DATE_FORMAT("2022-01-08", "%Y %M %d");`

Output:

> "2022 January 08"


People Know this ?
–> What is format of date in MySQL?

–> How can get date in dd mm yyyy format in MySQL?

–> How do I change the date format in MySQL?

–> How do I change the date format in SQL?

–> What is T and Z in timestamp?

–> Is timestamp or datetime better?

–> What is date function SQL?

–> How do I insert date in mm/dd/yyyy format in SQL?

–> How many date formats are there?

–> How do you create a date table in SQL?
Latent Cycles
Tags: codepen
Published: 2022-01-07 17:53:20

<p>Generate a latent space of melodic loops using the Google Magenta MusicVAE model (and the ImprovRNN model), and then play the loops against each other exploring the latent harmonic possibilities.</p>

<p>Powered by
Magenta.js <a href="https://goo.gl/magenta/js" target="_blank">https://goo.gl/magenta/js</a>
TensorFlow.js <a href="https://js.tensorflow.org/" target="_blank">https://js.tensorflow.org/</a>
Tone.js <a href="https://tonejs.github.io/" target="_blank">https://tonejs.github.io/</a></p>

{% codepen https://codepen.io/harunpehlivan/pen/PXQBOd %}
What is TypeScript?
Tags: javascript, typescript, react
Published: 2022-01-07 17:29:29

### An introduction to the strongly-typed language TypeScript and why you might want to learn it.

#### _TypeScript: A JavaScript superset_

When it comes to programming tools, Javascript is a beast of a language with a vast array of viciously competing libraries and frameworks. If you're like me and find yourself getting frustrated reading documentation and annoyed with all the changes the API makes in a blink of an eye, then you are not alone.

TypeScript was introduced as a JavaScript superset and was created released by Microsoft in 2012. TypeScript is JavaScript with syntax for types. What are types? Types give you the authority to describe your data. Types allow you to describe the shape of objects and functions in your code. Type checkers are type police built into JavaScript to enforce the type laws (for example, it's against the rules to multiply a string with an array). Type checking is the process where type checkers verify that your code follows all of the rules of the language.

JavaScript is a dynamically typed language, meaning, a variable declared as a number can be turned into a string. Comparatively, TypeScipt is a statically typed language, meaning you declare beforehand what type of value the variable will hold and it doesn't change. Think of TypeScript as your code's enforcer on rules. TypeScript adds additional syntax to JavaScript to support a tighter integration with your editor. Catch errors early in your editor.

The beauty of TypeScript is that it makes it possible to see documentation and issues directly in your editor, no more waiting until runtime to know something in your code broke. TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale. As your codebase continues to grow, so does your enforcement of rules.

In dynamically-typed languages like JavaScript, type checking occurs during runtime. TypeScript is so sweet that it will help developers identify errors before runtime. The browser can't actually execute typescript, so your `.ts` file or `.tsx` file is compiled to Javascript at runtime. TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js or Deno, and in your apps. Statically-typed languages like TypeScript check types during compile time - right in your text editor!

## Basic Type Definitions:
```
let id: number = 5
let company: string = 'Ghameerah'
let isPublished: boolean = true
let x: any = 'Hello'
let ids: number[] = [1,2,4,7,8]
```
## Summary of Benefits of TypeScript:
- Similar to static languages such as Java or C#
- Extra error checking
- Runtime errors caught early during development
- Avoid unwanted behavior at runtime
- Mitigation Strategies
- TypeScripts helps developers write better code
- Make sure type conversion doesn't happen
- Add static types
- Explicitly naming types in your code
- Explicitly assign types to variables
- Helps with predictability

### Other Resources
React TypeScript Cheatsheet
https://react-typescript-cheatsheet.netlify.app/
Music Space
Tags: atlashackathon
Published: 2022-01-07 17:23:29


### Overview of My Submission
A platform to connect music bands and artist to show their skills.
A user can perform CRUD functionality on band
A user can rate,review and hire a band
User Authentication
Cloudinary is used for cloud storage.
Mapbox is used for geolocation identification.
MongoDB Atlas is used for Database.
Website link = https://quiet-depths-68319.herokuapp.com/


### Submission Category: 

 Your Own Adventure


### Link to Code

{% github https://github.com/raunak222/MusicSpace %}


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

# raunak222
CINERANT - A movie rant WebSite Project. 
Tags: html, css, javascript, beginners
Published: 2022-01-07 17:13:53

##As i keep learning the basics of HTML5, CSS3 and JavaScript, i had an ideia of creating a 'movie rant' site alike, and this is how it's going so far.

**_UPDATE 09.01.2022_**

I've started to make progress on coding the website, for anyone interested here's the GitHub: https://github.com/imnotgon/CINERANT
Feel free to talk to me on my e-mail: rodrigoc__dias@outlook.com

---


![The logo of the 'Cinerant' WebPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fqqpoagqszja52uhr04.jpg)

First of all, let me introduce myself. I'm Rodrigo, a Computer Engineering Student from Brazil and i'm pretty much just starting to code, been learning Html/css/JavaScript to find interships as a Front-End, so i've developed little projects (as this one) to learn  and also see how far i can go on practice, as some people say: 

> The more you practice, the better you get.

This will be my diary on how the CINERANT is going. Feel free to comment and share you ideas. On the next post i'll put the GitHub link of the project so anyone can see all the code. Thank you for reading!

---



My initial plan is to make a concept of how the website should look, getting a first insight if the concept can eventually come true. So, after scrapping some ideas on Photoshop, this was the very first design i made for the 'index': 
![The first Concept idea, with a lot of blank space as you can see.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nunw15f6a9ifm2fj59cr.jpg)

But still, i didn't know what to do with the lower part of the index page. And after many thoughts, i found that the most suitable to do was a News Bar, and also some other changes:

- New Header

- Login/Sign Up space (will code this on PhP)


![Page with the News Bar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8c0gr4tuml0m5evitdz.jpg)

But it still didn't look good enough, because there was too many things on the page, the page looks like a big mess. Then i´ve changed its size (instead of the original LxH (Large per Height) 1920x1080 to 1920x3240).

This increase in height can help me to put more content and also have more space inbetween those, but also it can turn out as a problem when the coding process begin, eventually will get a solution (hopefully).  

---

After countless hours, i finally had a full concept of the News Bar. Now completly divided in to 3 types of news

- Big News/ Headliners (First Row)

- Secondary News (Second Row)

- Small News (Third Row)
  

![FullPage with newsBar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n8nwjcqcwkmzs0wb2vl.jpg)

At this point of today, this is all i've done. On the next Post i will share the last part of the index page still empty and the beggining of the Code process, also sharing the GitHub page for anyone interested.

Thank you for reading!

Rodrigo Carvalho.
Terminal Setup - Make your Windows terminal awesome
Tags: terminal, ohmyposh, bash, dev
Published: 2022-01-07 16:48:25

---
title: Terminal Setup - Make your Windows terminal awesome
published: true
description: How to configure your Windows terminal as Developer
tags: terminal, ohmyposh, bash, dev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqj8jxmp7s8ldfd2fdf7.png
---

I recently discover Windows have an awesome fully customizable terminal even on Windows 10. Here I'll show you how to do the same for your computer.

## The final result
This is the end result based on the beautiful **Oh My Posh**. Easy to configure and modify. Optimized to work as a developer.
![windows terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3uimbltmcxz6g8fuxnlg.PNG)
 

### Prerequisites
Install [windows terminal](https://www.microsoft.com/en-us/p/windows-terminal/9n0dx20hk701?activetab=pivot:overviewtab)

Install [git bash](https://gitforwindows.org/)
![gitbash option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51da52khvqongneyb0yw.PNG)
Verify the option *Add Git Bash profile to Windows terminal* is selected 
 
### Oh My Posh

Install the **Meslo LGM NF** [fonts](https://github.com/ryanoasis/nerd-fonts/releases/download/v2.1.0/Meslo.zip)

In Windows Terminal open the configuration with `CTRL + SHIFT + ,`
Add the following conf to select font and adjust the transparency of the terminal
```json
{
    "profiles":
    {
        "defaults":
        {
            "font":
            {
                "face": "MesloLGM NF",
              	"fontSize": 10,
                "acrylicOpacity": 0.9,
                "useAcrylic": true
            }
        }
    }
}
```

Then Install **Oh My Posh** *(Personally I had to install the direct binary on my old Windows)*

Download the latest release of **ohmyposh** for your system (for me install-amd64.exe):
https://github.com/JanDeDobbeleer/oh-my-posh/releases/tag/v6.45.0

Define environment variables
![user env var](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e97bg3ycu846fhphwpqh.PNG)
 
In `~/.bashrc` select the theme to use:
```bash
eval "$(oh-my-posh --init --shell bash --config ~/AppData/Local/Programs/oh-my-posh/themes/jandedobbeleer.omp.json)"
```

In Windows terminal preferences, select Git Bash as default terminal
![Windows terminal pref](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a01xqy5gxbsl6kbyewxl.PNG)


This is my personal installation, I extracted the installation steps to show you how it is really simple. I recommend you to  read the [official documentation](https://ohmyposh.dev/docs/windows).

## And voilà
I hope this small tutorial will help you to improve your Windows setup.
Web Development 2022
Tags: webdev, javascript, beginners, programming
Published: 2022-01-07 16:48:10

Web development is demanding skill in market and you can start with web development by following roadmap in 2022.
####HTML
Hypertext Markup language (HTML) is basic of web development shortly it is overall structure of website.
####CSS
Cascading Style Sheet (CSS) is interactive section of website and creative work with website.
####CSS frameworks
CSS frameworks has huge growth in market you need learn one of following
1. Bootstrap
2. Tailwind CSS

####JS
JavaScript is essential part of web development 
js add functioning to your website.
####DOM
Document Object Model is connection between HTML and js with id and classes its important to learn DOM.

#### Git and Github
Its is version control system which is used to Collab to others developers.
####React/Angular/Vue
React is demanding skill in market for web development it is JavaScript frontend framework which is used to add more functionality and interactive part of websites.
Next.js Custom Link Attributes
Tags: webdev, nextjs, javascript, react
Published: 2022-01-07 16:35:47

---
title: Next.js Custom Link Attributes
published: true
date: 2022-01-07 16:35:00 UTC
tags: webdev, nextjs, javascript, react
canonical_url: https://blog.shanemitchell.dev/nextjs-custom-link-attributes/
---

[![Splash Image](https://blog.shanemitchell.dev/static/f6b6711cb0ece5b887102289901d89ed/f058b/splash.png "Splash Image")](/static/f6b6711cb0ece5b887102289901d89ed/6b95e/splash.png)

Next.js provides a nifty little `Link` component, which allows internal linking within your React application without causing a page refresh.

```jsx
<Link href="/">Home</Link>
```

While this works great, there are situations where you want to pass additional attributes to your anchor tag, such as `aria` attributes or custom `data` attributes.

Since `Link` is a React component and expects specific props to be passed, you can’t simply pass in the attributes as props to the `Link` component.

```jsx
// This doesn't work, the rendered anchor tag ignores
// the additional attribute
<Link href="/" data-name="custom">Home</Link>
```

Lucky for us, Next provides a simple solution to this:

```jsx
<Link href="/">
  <a data-name="custom">Home</a>
</Link>
```

Note: It's important that your `href` stay as a prop in `Link` rather than an attribute in the anchor tag.

This renders out to `<a href="/" data-name="custom">Home</a>` in the DOM and maintains the internal linking speediness we love about Next!
How to generate random color with JavaScript
Tags: beginners, javascript, tutorial, programming
Published: 2022-01-07 16:12:56

Today we gonna learn how to generate a random color using JavaScript with a few lines :

## 1-Generate random integer between 0 and 15

first we need to know how to get a random number 
```JavaScript
let randomNumber = Math.random();
//return random number between 0 and 1 (0.46578483)
```
but we don’t want this result, we need random number integer between 0 and 15
To have it we have use you Math.floor()
```JavaScript
let randomNumber = Math.floor(Math.random()*16);
//return random integer between 0 and 15
```

## 2-Why 0 and 15 ?

Well this is the length of an array that contains all alphanumeric of HEX code, and we want to select random index 6 times and join all in one string.
( In this example we will use the HEX code, 0 to 9 and a to f 
Ex: #E06910 , #02198C,  #BADA55)
```JavaScript
const hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
```

## 3-Get random HEX code

we need to loop 6 times and concatenate the result every time to the code string
```JavaScript
let code = "";
for(let i=0; i<6; i++){
 code += hexArray[Math.floor(Math.random()*16)];
}
//don' forget the code start with "#"
code = `#${code}`;
```

## 4-Make your code inside function

now we need to write our code in function to use it perfectly
```JavaScript
function generateColor(){
 const hexArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F'];
 let code = "";
 for(let i=0; i<6; i++){
  code += hexArray[Math.floor(Math.random()*16)];
 }
 return `#${code}`
}
```

In this example I use it in  the body background:
```JavaScript
document.body.style.backgroundColor = generateColor();
```
live demo :
{% codepen https://codepen.io/zougari47/pen/bGrrXmR %}


##Thanks for reading

I hope you find that useful, if you want to practice more you can create your own function to generate random RGB or HSL color .
Font Awesome- Explained
Tags: webdev, beginners, programming, tutorial
Published: 2022-01-07 16:03:04


![font awesome](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTg7UNPCpx9qWKcyluwEgSwfMB7uvgXw1Ydaw&usqp=CAU)
user experience is null without icons.

> In computing, an icon is a pictogram or ideogram displayed on a computer screen in order to help the user navigate a computer system. The icon itself is a quickly comprehensible symbol of a software tool, function, or a data file, accessible on the system and is more like a traffic sign than a detailed illustration of the actual entity it represents.

Icons are indicators about what the button, command or function or action actually does and helps in faster understanding of the interference. This, it's really important to know the correct icon for the specified place.

[font awesome](https://fontawesome.com/) is the amazing javascript Library for importing numerus fonts into your webpage. it's Incredible.
Let's dive right in it:

### installation
``` html
<script src="https://kit.fontawesome.com/85b07c1155.js" crossorigin="anonymous"></script>
```

The import might seem something like this if you have seen the link at the site.

### usage
Here's the interesting part.
[font awesome](https://fontawesome.com/) has four tones:
- solid
- regular (some are accessible to free users)
- light (pro)
- dual (pro)

![font awesome shades](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjO1Ek13SKgWvBgz9qdmniLmuJvmzQBoZtAw&usqp=CAU)

each one has a different class in the html tag (generally `<i>` is chosen)

So it goes like:
``` html
<i class="fas fa-rocket"></i>
<!-- fas = font awesome solid -->
<!-- fa = prefix -->
<!-- rocket = name -->
```
This one was for the solid one, now see the one with dual tone
``` html
<i class="fad fa-rocket"></i>
<!-- fad = font awesome dual -->
<!-- fa = prefix -->
<!-- rocket = name -->
```
See how only one class changes when you switch tones.

so you don't need to open [font awesome](https://fontawesome.com/) site evertime if you know the logic :))
![think about it](https://c.tenor.com/QaGZ50VlEPEAAAAC/think-about-it-use-your-brain.gif)

### wrapping up
[font awesome](https://fontawesome.com/) is really awesome for any site.

Fonts should be nice to see and you should respect accessibility practices though.

## originally published [here](https://atordvairn.netlify.app/font-awesome-explained) at my blog
Make sure you're subscribed to [the high dose javascript newsletter](https://www.getrevue.co/profile/atordvairn)

of course I can't _make_ you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!
A look into my project: KernelCI 
Tags: opensource, linux
Published: 2022-01-07 16:00:05

Hello everyone!

It has been five weeks now but it feels as if it all started a few days back only. 🙂

Today, I am going to explain my project i.e. KCIDB on which I am working on. This blog aims at helping newcomers to know more about KernelCI and how to get started. 

## What is KernelCI

> KernelCI is a community-led test system focused on the upstream Linux kernel. It follows the open testing philosophy to enable the same collaboration to happen with testing as open source does to the code itself.


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



[KernelCI](https://kernelci.org/) aims to ensure the quality, stability and long-term maintenance of the Linux kernel.

To achieve its aim KernelCI has a lot of modules,  which are broken down under different [repositories](https://github.com/orgs/kernelci/repositories) 

## What I am building
One of the major component of the KernelCI is the KCIDB. 

> KCIDB is a package to collect all Linux kernel test results.
> This includes tests run natively by KernelCI, Red Hat's CKI, Google's syzbot, ARM and many others.

One of the main tasks I’m working on, is to improve the notification flow. This enables submitters of test result to get their notification without failing, and enabling them set delayed notification for their submitted test data.

I’m also working on improving the CI/CD pipeline for the project, writing tests and providing support to make sure the flow for cloud deployment does not break.
  

## How can you contribute to KernelCI?
KernelCI source code is designed to be publicly accessible. 
If you want to start contributing to KernelCI you can easily find its project’s source code and issues on GitHub. Just choose a project of your interest and get started!!!

KernelCI projects on Github: https://github.com/kernelci