teleren/devto huggingface dataset:
Linux aliases set up simple!
Tags: linux, bash, tutorial, ubuntu
Published: 2022-01-14 10:12:34


    
 
Hi guys, today I will show how easy it is to set up aliases in almost any Linux distro. Before we begin let's clarify what are aliases in the bash.

Alias is a command that enables replacing a word or set of letters with a bash command. Often it is used for simplifying the workflow in the command line, for example, we can come up with an abbreviation that is going to equal multiply commands. Without further due let's hop into the setup process.

To create an alias there are 3 easy steps:
## 1. Navigate to your home directory.
To navigate to your home directory using the cd command.
```Bash
cd /home/your_username
```

## 2. Add your alias to the .bashrc file.
After you have navigated to your home directory, open the **.bashrc** file with **nano**.
```Bash
sudo nano .bashrc
```
Now go to the bottom of the file and type **alias**, then the **name of the custom command** and the **Linux commmand/s** it represents. Take in mind that there are no spaces between the equal sign, otherwise it is not going to work.


![.bashrc file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr9zdkrfcqayvqjtgwrl.png)

You can add as many custom commands as you want. Every command should be on a new line. After you are done, save the file and exit.

## 3. Activate the custom commands you've added.
Probably you have noticed after saving the file when you try to run a custom command it doesn't work that is because we have not activated them yet. To activate just type in the command line **source** and **.bashrc**.

```Bash
source .bashrc
```
And you are ready! Now you can run any of the custom commands you have created
If you have any questions, comment them down I will answer them as soon as possible.
Generating Random Whole numbers in JavaScript in a specific range
Tags: javascript, webdev, tutorial, tips
Published: 2022-01-14 10:01:21


Video Documentation :- https://youtu.be/xz3VbIaEG8o

{% youtube https://youtu.be/xz3VbIaEG8o %}

Mozilla Developer Network page on this JavaScript Math Object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random



```javascript
/**
 * Returns a random number between min (inclusive) and max (exclusive)
 */
function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

/**
 * Returns a random integer between min (inclusive) and max (inclusive).
 * The value is no lower than min (or the next integer greater than min
 * if min isn't an integer) and no greater than max (or the next integer
 * lower than max if max isn't an integer).
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
```

Credit & Logic Behind it :- https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range

## At Last here is the concluded function

```javascript
function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
```
## And the minified form of the function

```javascript
const getRandomInt = (min, max)=>~~(Math.random()*(max-min+1)+min)
```
Tutorials :- https://tutorials.sh20raj.repl.co/js/generating-random-whole-numbers-in-javascript-in-a-specific-range-jeo/


> Checkout Instagram :-
> {% instagram CYKELXKPJ_r %}
Code Review
Tags: opensource
Published: 2021-11-18 13:29:45

### Introduction

In the previous weeks, I had change to contribute internal Seneca opensource projects: [fix the bug on Telescope](https://dev.to/mkim219/fix-the-bug-on-telescope-2d4i) and [IPC144 course note renewal](https://dev.to/mkim219/ipc144-course-curriculum-renewal-5d0p). The last piece of task is code reviewing on other student's PR. The code reviews that I have done are [PR1](https://github.com/Seneca-ICTOER/IPC144/pull/80) and [PR2](https://github.com/Seneca-ICTOER/IPC144/pull/76)


### PR1 Code Review [[Link](https://github.com/Seneca-ICTOER/IPC144/pull/80)]

The first code review is "ASCII Collating Sequence image converted into Table" which is very similar with my IPC144 course note renewal. The reason why I had code review on this PR is that I want to know and compare how he resolved the issue. 

![PR1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/duds1i6khujx87nsv4ug.PNG)

This is Markdown code what he has done. He has smart idea to add one more column to improve readability on Docusarus. However, not only improving readability but also it helps developers to edit code for maintenance. He used `prettier` to align all the content in right position. I had fixed my code after I have reviewed his code. 

### PR2 Code Review [[Link](https://github.com/Seneca-ICTOER/IPC144/pull/76)]
The second code review is "Audit and Fix arrays.md". The comment that I left for the code review is that there is a picture for explaining the concept of array. However, the picture did not have proper `alt` tag in `<img>` tag. 

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

The `alt` tag provides context of image that display and inform for search engine crawler which is important for SEO. Also `alt` tag is important for accessibility perceptive 

### PR3 Code Review [[Link](https://github.com/Seneca-CDOT/telescope/pull/2468)]
The third code review is "Fix escape character". This PR is about resolving the issue that `highlight.js` showed bizarre behavior that the code `&&` converted into `&amp;&amp;`. The most parts are well organized and fixed. The one thing I concerned is that he deleted the code that prevent the error when no language detection. Therefore,  I left a comment about this concern. He is well explained my concern. So the PR successfully merged. 

### Conclusion
The code review is not only helpful for the author of the code but also it is helpful to remind me the right knowledge and provide me better idea to solve the issue.
New Things Added - Laravel 8.79 Released
Tags: php, laravel, programming, beginners
Published: 2022-01-14 09:50:27

Let's get started quickly I found new things in Laravel 8.79 Released I wanted to share with you.
- Paginator onLastPage() Method
```php
@if ($paginator->onFirstPage())
    {{-- ... --}}
@endif
 
{{-- Before --}}
@if (!$paginator->hasMorePages())
    {{-- ... --}}
@endif
 
{{-- After --}}
@if ($paginator->onLastPage())
    {{-- ... --}}
@endif
```
- Implement Full-Text Search for MySQL and PostgreSQL
```php
Schema::create('articles', function (Blueprint $table) {
    $table->id('id');
    $table->string('title', 200);
    $table->text('body');
    $table->fulltext(['title', 'body']);
});
 
// Search for "databases" in the title and body fulltext index...
$articles = DB::table('articles')
    ->whereFulltext(['title', 'body'], 'database')
    ->get();
 
// Search for "databases" in the title and body fulltext index with boolean mode...
$articles = DB::table('articles')
    ->whereFulltext(['title', 'body'], 'database', ['mode' => 'boolean'])->get();
 
// Search for "databases" in the title and body fulltext index with an expanded query...
$articles = DB::table('articles')
    ->whereFulltext(['title', 'body'], 'database', ['expanded' => true])->get();

```
- New Stringable Methods whenContains() and whenContainsAll()
```php
// Before
$stringable = Str::of('some important announcement');
 
if ($stringable->contains(['important', 'emergency'])) {
    $stringable->upper();
}
 
return (string) $stringable;
 
// After
return (string) Str::of('some important announcement')
    ->whenContains(
        ['important', 'emergency'],
        fn (Stringable $stringable) => $stringable->upper(),
    );
```
I hope you enjoyed with me and to learn more about this release visit the sources and search more. I adore you who search for everything new.
Source :- https://laravel-news.com/laravel-8-79-0
Having a great developer onboarding
Tags: onboarding, developer, job
Published: 2022-01-14 09:44:51

---
title: Having a great developer onboarding
published: true
description: How to have a great developer onboarding
tags: onboarding, developer, job
cover_image: https://images.pexels.com/photos/1181275/pexels-photo-1181275.jpeg?cs=srgb&dl=pexels-christina-morillo-1181275.jpg&fm=jpg
---

Great onboarding for developers can have a big impact on a new member joining the team.

A well-documented, well-planned onboarding with various meetings and slow challenges or achievements is far better than just bringing someone in and figuring everything out on the fly. Such planning shows that your team cares about people and values their time.

What you need to have a great onboarding:

- An intro with the team.
- Intro to all communication channels.
- Several 1:1 meetings (including functional and technical explanations, intro to other teams...)
- How to set up a local dev environment.
- Useful links to different environments, and other useful links.
- Technical guidelines
- Technical processes.
- Previous video explanations if you have them (if not, record them this time)
- Goals for your first 3-4 weeks.

If you don't have a prepared document, it's time to create one.

The next person who joins your team will thank you A LOT.

What else is part of your onboarding process?
How to create Advanced Button hover effect in HTML and CSS
Tags: html, css, webdev
Published: 2022-01-14 09:35:40

Here is code for creating advanced button hover effect

See demo:- (https://codepen.io/iammanojrathod/pen/vYevVap)

HTML code:-

```
<header>
 <button class="btn1">Button1</button>
  <button class="btn2">Button2</button>
</header>
```

CSS code:- 

```
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: black;
}
button{
  margin-right: 20px;
}
.btn1{
  color: #fff;
}
.btn2{
  color: #000;
}
.btn1, .btn2{
  position: relative;
  background: transparent;
  padding: 20px 30px;
  font-size: 30px;
  border: 2px solid #fff;
  cursor: pointer;
  z-index: 10;
  trasition: all 0.5s ease;
}
.btn1:before,
.btn1:after,
.btn2:before,
.btn2:after{
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: #fff;
  z-index: -1;
} 
.btn1:before {
  left: 0;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn1:hover:before{
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn1:after {
  right: 0;
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn1:hover::after{
 transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn2:before {
  left: 0;
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn2:hover:before{
  transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn2:after {
  right: 0;
  transform: scaleX(1);
  transition: transform 0.5s;
  transform-origin: right;
}
.btn2:hover::after{
 transform: scaleX(0);
  transition: transform 0.5s;
  transform-origin: left;
}
.btn1:hover{
  color: #000;
}
.btn2:hover{
  color: #fff;
}
```

Thanks You ❤
Framer motion - simple menu animation
Tags: react, framermotion, animation, tailwindcss
Published: 2022-01-14 09:32:27

Let's see how to create a simple menu animation.
For the style, we will use tailwindcss.

we will have a container that contains the flex layout and background color. 
For animate layout change across multi-component, we will need to use **AnimateSharedLayout**.
inside we have a wrapper that will control the on-click selection and have a nice animation opacity effect.
inside will contain text and a condition on when an item is selected then framer motion layout animation will give is power for a nice underline animation,

full code & example - 

{% codesandbox react-tailwind-starter-forked-tirmr %}
REASONS TO LEARN PYTHON WITH DJANGO IN 2022
Tags: python, django, technologies, 2022
Published: 2022-01-14 09:31:39

It is that time of the year – the beginning- where everyone is giving their opinion on the booming tech stack. This year, I have resolved to focus on Python as my core language and sticking with that. When it comes to Python for web development, Django and Flask are the two go-to web frameworks. While Flask is an equally good framework, I am going with Django. I will be sharing my journey and the insights gotten thereof. 
This piece will discuss some of the golden reasons why you should start learning Django in 2022.

The video version of this tutorial is available on [Youtube](https://www.youtube.com/watch?v=Rv2S_nej2oc)

YouTube: {% youtube Rv2S_nej2oc %}

#1 Open-Source Python Web Framework 
Django is a high-level open-source python framework that has neem escalating demands in the market ever since with assured growth.

#2 Increasing Demand
The demand for Django professional is increasing every single day with high demanding salary and career launches. 
The average salary of a Django developer is $120,000 per year. 

#3 New Interview Opportunities
Getting a job is nice but getting an interview might change your life. This is because an interview offers you the opportunity to promote yourself and negotiate. Django Framework is used by most big tech companies, including Instagram, National Geographic, Mozilla, Spotify, Pinterest, Disqus, Bitbucket, Eventbrite, and Prezi.
 
#4 High Job Market Share 
The market share and demand for Django developers is high, with over 70,000 vacancies and a market share of over 28% since 2021.
#5 Industry Opportunities
Learning Django will provide you a huge advantage in the industry, opening you new doors and allowing you to develop a variety of skills. This ensures that Django professionals will have plenty of career opportunities.

YouTube: {% youtube Rv2S_nej2oc %}


#Conclusion
With so many new languages, frameworks, and technologies being released on a regular basis, deciding which stack to use is a personal choice. The above discussion, on the other hand, is a guidance for individuals who are unsure about their path in Python, Django, and even Flask.
8 JAVASCRIPT ARRAY Methods for Beginner
Tags: javascript, webdev, tutorial, beginners
Published: 2022-01-14 09:20:24

1. PUSH 
  The push() method adds new elements to the end of an array and 
  returns the new length.

```Javascript 
const arr = ["The", "coding"];
arr.push("Master");//["The", "Coding", "Master"]
```

2. SLICE 
 The slice() method selects a part of an array and returns the new 
 array.

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.slice(1,2);//["Coding", "Master"]
```

3. TOSTRING
  The toString() method converts an array to a string and returns 
  the result.

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.tostring();//"The, Coding, Master"
```

4. SHIFT
   The shift() method removes the first element of the array and returns that element.

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.shift();//["Coding", "Master"]
```

5. MAP 
 The map() method creates a new array with the result of calling a function of every array element.

```Javascript 
const arr = [1, 4, 9, 16];
arr.map( x => x * 2);//[2, 8, 16, 32]
```

6. POP 
 The pop() method removes the last element of an array and returns that element.

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.pop();///["The", "Coding"]
```
7. FILTER 
 The filter() method creates an array filled with all array elements that pass a test (provided as a function).

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.filter(word => word.length > 3);//["Coding", "Master"]
```


8. INCLUDES 
   The includes() determines whether an array contains s specified 
   element.

```Javascript 
const arr = ["The", "Coding", "Master"];
arr.includes("Coding");//true

```
Meteor: a better way to use meteor npm command
Tags: node, npm, meteor
Published: 2022-01-14 09:00:56

---
title: "Meteor: a better way to use meteor npm command"
published: true
description: Did you forget to add meteor command before npm? Try adding a bash script that will make sure you always run it correctly.
tags:
  - node
  - npm
  - meteor
  - meteorjs
cover_image: https://strdr4605.com/meteor-a-better-way-to-use-meteor-npm-command.jpg
canonical_url: https://strdr4605.com/meteor-a-better-way-to-use-meteor-npm-command
---

Meteor advice to run [`meteor npm ...`](https://docs.meteor.com/commandline.html#meteornpm) instead of `npm ...`.

> Using the `meteor npm ...` commands in place of traditional `npm ...` commands is particularly important when using Node.js modules that have binary dependencies that make native C calls (like `bcrypt`) because doing so ensures that they are built using the same libaries.

But if you are switching constantly between node projects (with/without meteor) sometimes you may forget to use `meteor npm ...` or use it in the wrong place.

## Solution

We can create a bash function that will replace `npm` and run `meteor npm ...` if we have a `.meteor` folder in the project.

> as [all Meteor apps have a .meteor directory](https://zodern.me/posts/meteor-local-folder/)

Edit your shell config file with **vim**, **nano**, or **vscode**. Add this function at the end of the file.

```bash
# Add me to shell config file. ~/.zshrc or ~/.bashrc
ORIGINAL_NPM=$(which npm)
npm() {
  RED='\033[0;31m'
  GREEN='\033[0;92m'
  NC='\033[0m' # No Color
  if [[ -d .meteor ]]
  then
    echo "${RED}Meteor project${NC}\nRunning:\n\n\t${GREEN}meteor npm $@${NC}\n";
    meteor npm $@
  else
    eval $ORIGINAL_NPM $@
  fi
}
```

If needed we can also add another function for `meteor node`.

> See more posts on https://strdr4605.com/
8 JAVASCRIPT ARRAY Methods for Beginner
Published: 2022-01-14 08:59:07

1. PUSH
 The push() method adds new elements to the end of an array and returns the new 
 length.

```
const arr = ["The", "coding"];
arr.push("Master");

//["The", "Coding", "Master"]
``` 

2. SLICE 
    The slice() method selects a part of an array and returns the new array.

```
const arr = ["The", "Coding", "Master"];
arr.slice(1,2);

//["Coding", "Master"]
``` 

3. TOSTRING 
    The toString() methods converts an array to a string, and returns the result.

```
const arr = ["The", "Coding", "Master"];
arr.tostring();

//"The, Coding, Master"
``` 

4.  SHIFT 
    The shift() method removes the first element of the array and returns that element.

```
const arr = ["The", "Coding", "Master"];
arr.shift();

//["Coding", "Master"]
``` 

5. MAP 
   The map() method creates a new array with the result of calling a function of every array element.

```
const arr = [1, 4, 9, 16];
arr.map( x => x * 2);

//[2, 8, 16, 32]
``` 
6. POP
     The pop() method removes the last element of an array and returns that element.

```
const arr = ["The", "Coding", "Master"];
arr.pop();

///["The", "Coding"]
``` 
7. FILTER
    The filter() method creates an array filled with all array elements that pass a test (provided as a function).

```
const arr = ["The", "Coding", "Master"];
arr.filter(word =>word.length > 3);

//["Coding", "Master"]
``` 
8. INCLUDES 
   The includes() determines whether an array contains s specified element.

```
const arr = ["The", "Coding", "Master"];
arr.includes("Coding");

//true
```
My personal package bundler odyssey
Tags: javascript, webpack, productivity, webdev
Published: 2022-01-14 08:56:34

## From parcel
For my project I used [parcel bundler](https://parceljs.org) version 1.x from the beginning and was quite happy with it.
Zero configuration was great and I'm a supporter of smaller more innovative projects that do something different than the big players (e.g. trello > jira, pixelmator > photoshop).

## To rollup
One day I've got an issue that a react file couldn't get loaded because of an svg that was imported. So as usual I want to dig into the manual to solve the problem. Thing was that the manual wasn't there anymore and replaced with parcel v2.
Well ok I thought when they ditch the old version and manual v2 must be stable enough. So I did the switch and discovered that at this time peerDependencies couldn't get resolved.

Being kind of a burned child with webpack spending to many hours in configuration I still wasn't ready for it. So I switched to rollup and had some nice rollup config.

{% gist https://gist.github.com/flodev/37755d05b7d6cb7f393e889c36f352f1 %}

[original repo file](https://github.com/flodev/remotify/blob/5355e32b5860cb1594b41d672232a39c8a492ff5/packages/app/rollup.config.js)

Not quite zero configuration but I rather read code than configuration options. The build worked. Problem was that it took ages to build :(

## To webpack
Long story short I've ended up using webpack and it wasn't so worse how I imagined in the first place.
I used create-react-app to setup an empty project. Then I did eject (of course). Afterwards I've copied package.json typescript config and all other relevant config files into my project. It works flawlessly and I had zero configuration (by not looking at it :).

Checkout [remotify](https://github.com/flodev/remotify) to see how it works.

## Fazit
I wouldn't got that far to recommend a solution that works for everything. There are use cases for all bundlers and I still love the zero configuration approach (who doesn't?).
But for my project webpack currently works best.
Math.floor() to get difference between two timestamps
Tags: javascript, math, floor, timestamps
Published: 2022-01-14 08:54:12

**Math** is a placeholder object that contains mathematical functions and constants of which floor() is one of these functions.
**floor()** function returns the largest integer value that is less than or equal to a number.
```
roundBody.endTime = Sat Dec 18 2021 15:00:00 GMT+0530 (India Standard Time) {}
roundBody.startTime = Sat Dec 18 2021 14:00:00 GMT+0530 (India Standard Time) {}
 var timeDifference = roundBody.endTime.getTime() - roundBody.startTime.getTime();
    var minutesDifference = Math.floor(timeDifference/1000/60);
    var hoursDifference = Math.floor(timeDifference/1000/60/60);
    var daysDifference = Math.floor(timeDifference/1000/60/60/24);
    console.log("timeDifference in ms", timeDifference)
    console.log("minutesDifference", minutesDifference)
    console.log("hoursDifference", hoursDifference)
    console.log("daysDifference", daysDifference)
```

```
output
timeDifference in ms 3600000
minutesDifference 60
hoursDifference 1
daysDifference 0
```