teleren/devto huggingface dataset:
Alacritty: El terminal perfecto
Tags: alacritty, terminal, linux, dotfiles
Published: 2021-02-21 23:52:41

Alacritty es un emulador de terminal que tiene una característica poco común para las terminales, usa el GPU para para mejorar el rendimiento. De todas las terminales que he probado, esta tiene un equilibro entre minimalismo y facilidad de configurar que ha hecho que se haya vuelto mi favorita ente todas las que he probado.

### Instalación
#### Debian/Ubuntu
En la mayoría de los casos es probable que lo quiera instalar en una distribución basada en Debian, para instalarlo sin necesidad de compilarlo, podemos agregar un repositorio donde se encuentra el paquete.

```sudo add-apt-repository ppa:aslatter/ppa```

Ya de ahí lo podemos instalar sin problemas.

```sudo apt install alacritty```

#### Arch Linux/Manjaro
En mi caso que uso Arch Linux, el paquete está en el repositorio oficial, por lo que solo se necesito instalarlo con pacman.

```sudo pacman -S alacritty```

### Configuración
Para hacer cualquier configuración como la fuente o los colores, lo podemos hacer creando el archivo en la siguiente dirección: 

*$HOME/.config/alacritty/alacritty.yml*

Con su editor de preferencia, puede configurar como desee, el mismo Alacritty da un archivo de [ejemplo](https://github.com/alacritty/alacritty/blob/master/alacritty.yml)

Yo tengo el mío que usa los colores del tema Nord con la fuente de Fira Code, también está incluído la transparecia para que se pueda ver el fondo de mi escritorio. Lo puedes encontrar [aquí](https://github.com/michaelray27/Dotfiles/blob/master/config/alacritty.yml)

Sin necesidad de una compleja configuración se puede ver muy bien:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e04stfsiy38zc3gj9pto.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqze5pkjkeqnrkjzbe8h.png)
Build a custom React countdown timer component
Tags: react, javascript, tutorial, webdev
Published: 2021-02-21 23:27:45

In this tutorial we’ll be building a custom countdown timer component in React. This type of component can be used to display the time remaining until a big event, festival or special occasion. In this instance we’ll be building a countdown timer for the New Year.

Let’s get started by setting up a new project using [Create React App](https://w3collective.com/create-react-app/):

```
npx create-react-app countdown-timer
```

Next create a new file called `CountdownTimer.js` with the imports and primary function:

```javascript
import React, { useState, useEffect } from "react";

const CountdownTimer = () => {  
  //..
};

export default CountdownTimer;
```

First up in the `CountdownTimer` function we need to define the end of the countdown. With this defined we then calculate the time remaining using the JavaScript `Date()` object:

```javascript
const getCountdown = () => {
  const year = new Date().getFullYear() + 1;
  const timeRemaining = new Date(`${year}-1-1`) - new Date();
  let countdown = {};
  if (timeRemaining > 0) {
    countdown = {
      Days: Math.floor(timeRemaining / (1000 * 60 * 60 * 24)),
      Hours: Math.floor((timeRemaining / (1000 * 60 * 60)) % 24),
      Minutes: Math.floor((timeRemaining / 1000 / 60) % 60),
      Seconds: Math.floor((timeRemaining / 1000) % 60),
    };
  }
  return countdown;
};
const [countdown, setCountdown] = useState(getCountdown());
```

Note – this countdown will automatically reset each year. To have the countdown end and not repeat you can declare a fixed year in the end date as follows:

```javascript
//const year = new Date().getFullYear() + 1;
//const timeRemaining = new Date(`${year}-1-1`) - new Date();
const timeRemaining = new Date(`2022-1-1`) - new Date();
```

We’ll use a `setTimeout` to update the countdown at 1000 millisecond intervals:

```javascript
useEffect(() => {
  setTimeout(() => {
    setCountdown(getCountdown());
  }, 1000);
});
```

We’ll then format the countdown data with some HTML markup:

```javascript
const data = [];
Object.entries(countdown).forEach(([unit, value]) => {
  data.push(
    <li key={Math.random().toString(16)}>
      <strong>{value}</strong> {unit}
    </li>
  );
});
```

To complete the `CountdownTimer` component we just need to return the data:

```javascript
return (
  <>
    <h1>New Year Countdown</h1>
    <ul>{data}</ul>
  </>
);
```

With the component complete we can load it into `App.js` as follows:

```javascript
import CountdownTimer from "./CountdownTimer";

function App() {
  return (
    <div className="countdown">
      <CountdownTimer />
    </div>
  );
}

export default App;
```

That’s all for this tutorial. You should now have a functioning custom countdown timer component that you can drop into a React application. Thanks for reading, while you’re here why not check out some of my other practical [React tutorials](https://w3collective.com/tag/react/).
Gitting The Inside Scoop On GitHub
Tags: github, git, devops, commit
Published: 2021-02-21 23:20:21

#What is a git?
So who exactly uses GitHub?  Well everyone, but no one at the same time.  If you don't have a GitHub account, are you good bro?  Stop reading this and go create an account now!

Anyway, GitHub has become a hub (yes pun intended) of sharing code.  GitHub is an online tool that help you enhance your online profile while working creatively with a team.  Creating repositories, forking, and commits are the backbone of GitHub.

So what is a Git?  A git is a command line version control system.  Version control systems are an important tool of the future.  You don't want someone to go in and change your code and then have no clue what's going on.

#Where to start
Once your account is made, go create a new repository.  After this is created, go play around with all the tools.  To get started, go to add a file, and create a new file.  This is where the fun begins.  Your adventure starts there.  You can go in and start adding whatever code you desire.  This can then be added to your main if wanted, or continue to be in a different branch.

Now if you wanted to add this branch to your main code, then you create a pull request.  This will then send a notification to the admin.  If the code lines up and there are no conflicts, the admin can accept the changes.  This will then add the new changes to the main source.

#Commits?
After you finish making a change in one of the branches, you normally create a commit.  A commit is used to mark a point of time for the code.  This then ends up being submitted with a a message of the changes.

This is especially important if you're working as a team.  You need to communicate with each other so everyone is on the same page.  This keeps the overall code change in sync.  The admin can see the commits when accepting the pull request also.  This just keeps everyone in the loop.

If you want to learn more about GitHub, check out this video below.
[Git the inside scoop on GitHub](https://www.youtube.com/watch?v=nQUWmlU1Bsk)

Check out my channel for more tech topics!
[My Channel](https://www.youtube.com/channel/UCHTG-beR7gAzIzg4brepNtQ)
Hellping Hops Hazy IPA
Published: 2021-02-21 22:30:32

Imagine one transaction where you can buy a beer, drink it and donate to the Westmoreland and Washington Counties Pennslyvania food banks. 

For a limited time (now until we run out of the 30-barrel batch, buy the Hellping Hops hazy New England India pale ale from one of the Helltown taprooms, and Helltown will donate $1.50 each draft, $1 from each four-pack or $6 per case.

Every $1 can be turned into as many as five meals, notes Greater Washington County Food Bank marketing director Justin McAtee, who says the food bank “is excited and thankful for the unique opportunity to be one of the beneficiaries of Helltown Brewing and Helping Hops' collaboration. In a way, everyone involved shares a mission of community and bringing people together." 

For more information, go to helpinghops.org or www.helltownbrewing.com.
Error: CocoaPods's specs repository is too out-of-date to satisfy dependencies.
Published: 2021-02-21 22:07:34

1. Go to /ios folder inside your Project.

2. Delete Podfile.lock

3. Run `pod install --repo-update ` (Make sure your cd into the iOS directory of the flutter app)

4. Run ` flutter clean `
    
5. Once complete, rebuild your Flutter application: 
`flutter run`
Ask DEV: What are the best things to do when starting a job at a new company?
Tags: discuss, newjob, career
Published: 2021-02-21 22:06:10

---
title: Ask DEV: What are the best things to do when starting a job at a new company?
published: true
description: What are the best things to do when starting a job at a new company?
tags: discuss, newjob, career
//cover_image: https://direct_url_to_image.jpg
---

Hi All,

I thought I'd start a neat discussion for today. Following on from [Day 8 of #BytesOfWisdom](https://dev.to/samjarman/100-bytes-of-wisdom-day-8-1775). I think getting up to speed quickly and adding value quickly is a great way to prove yourself at a new company.

What do you think are some other things that are great to do when starting a new job?

Discuss! :)
100 Bytes Of Wisdom: Day 8
Tags: career, journey, advice
Published: 2021-02-21 22:02:36

---
title: 100 Bytes Of Wisdom: Day 8
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxsr7i5a7a3yen219dl.png
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqxsr7i5a7a3yen219dl.png)

Starting at a new company? The best way to prove yourself is not (just) with your current knowledge, but your ability to learn new things and quickly start adding value. Listening, learning, reading and practising what is helpful for that company will set you on the right path to be a respected software developer.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
11 podcasts for the frontend developer
Tags: education
Published: 2021-02-21 20:53:46

I'm a huge fan of continuing education, and one of the ways I binge on information is through podcasts. Here's a list of 11 podcasts that I find not only educational but entertaining as well.

- [JS Party](https://changelog.com/jsparty) - From the folks at Changelog, this weekly, hour-ish podcast focusing on JavaScript features a rotating panel and format.
- [Front End Happy Hour](https://frontendhappyhour.com) - A bunch of developers drinking and talking about development. What could go wrong?
- [Developer Tea](https://spec.fm/podcasts/developer-tea) - This podcast is more about the human element of development. I recommend this to developers of all levels, but especially beginners.
- [FSJam Podcast](https://fsjam.org) - Fullstack Jamstack conversations with developers, library maintainers, and industry thought leaders.
- [99% Invisible](https://99percentinvisible.org) - It's not all dev-centric podcasts here. *99% Invisible* peels back the curtain on the design of everyday things. [The flag episode](https://99percentinvisible.org/episode/episode-06-99-symbolic/) is a classic.
- [Full Stack Radio](https://fullstackradio.com) - Adam Wathan, creator of (among other things) Tailwind, hosts this podcast with a focus on all the things happening on the front end.
- [Hidden Brain](https://hiddenbrain.org) - This fascinating podcast delves into why we do the things we do and how we can learn from that. It's honestly one of my favs.
- [React Podcast](https://reactpodcast.com) - It's about React. So...
- [ShopTalk Show](https://shoptalkshow.com) - Chris Coyier ([CSS-Tricks](https://css-tricks.com)) and Dave Rupert ([Paravel](https://paravelinc.com)) host this quirky podcast (mostly) about frontend. This podcast was my first developer podcast ever and still one of my favorites.
- [Syntax](https://syntax.fm) - Hosted by Wes Bos and Scott Tolinski, I highly recommend this podcast if you are new to JavaScript. It's chock-full of tips and sick picks.
- [Freakonomics Radio](https://freakonomics.com/archive/) - Again, a podcast about humans for humans. This one has a strong focus on Behavioral Economics, the cross-section of psychology and econ.

Don't see your favorite here? [Let me know on Twitter](https://twitter.com/therealboone). And if you found this post helpful, please let me know by liking it on DEV Community.

Until next time!
Daily Developer Jokes - Sunday, Feb 21, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-02-21 21:53:48

---
title: "Daily Developer Jokes - Sunday, Feb 21, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Feb%2021%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258c20b362.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the computer keep sneezing?

___A:___ It had a virus!
 -->
How do programmers love to code?
Tags: healthydebate, career, beginners, discuss
Published: 2021-02-21 21:16:09

`Hello World!` [My first #healthydebate about windows vs mac vs linux](https://dev.to/devlorenzo/windows-or-mac-4f8k) generated more than 2500 views and 60 comments! So I decided to create another debate, it feels so good to have interactions with other programmers! 
I'm relatively new to programming (started around 1 year ago) and just was interested about the story's of other developers. I'm interested in how do you love to code. Personally, I love it with a high-volume rock song, using atom or visual studio code, in python or javascript, and responding badly to all those who talk to me 😊. 
So, How do you love to code? Do you listen to music while coding? What IDE (code editor) do you use? When do you like to code? What is your favorite programming languages? Why and how do you started programming? What are you working on? Questions can be infinite, so just talk a bit about yourself! 

---

I'm very interested in creating a conversation / a debate thinking about how different peoples love to code. I also have in mind to write an article on that, maybe using quotes from this post. So I need you to tell us all the funniest things!

---

Remember the comment!

Check these articles about [how programmers love to code](https://dev.to/devlorenzo/how-do-you-love-to-code-2l29) / [best operating system for dev](https://dev.to/devlorenzo/windows-or-mac-4f8k)

{% link https://dev.to/devlorenzo/how-do-you-love-to-code-2l29 %}

{% link https://dev.to/devlorenzo/windows-or-mac-4f8k %}

{% link https://dev.to/devlorenzo/why-do-you-love-programming-o4h %}

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
When was JS Array.Map() first included? ES5? ES6?
Tags: javascript, html
Published: 2021-02-21 21:12:11

## Wikipedia Versus W3Schools Throw-down!
![wikipedia versus w3schools throwdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51tacelaaxkfps61w9ps.png)
I am attempting to discover when Array.Map() function was originally included in JavaScript.

[wikipedia says](https://en.wikipedia.org/wiki/ECMAScript#6th_Edition_–_ECMAScript_2015) it was ES6 (6th Edition – ECMAScript 2015)  Read the paragraph the link takes you to and you will see it mentions... "new collections (maps, sets and WeakMap)..."

However, [W3Schools says it](https://www.w3schools.com/Js/js_es5.asp) was first included in ES5 (2009).

The link displays numerous items include Array.Map().

Do you know when it was first added?  
Thanks

#############################
## Answer My Own Question
Very interesting because I thought it was first added to ES6, however, I [found the official ES5 (2009) Spec PDF](https://www.ecma-international.org/wp-content/uploads/ECMA-262_5th_edition_december_2009.pdf) and found the following:

![es5 spec shows Array.map()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2iqb7uhpm7hegwsb7a5e.png)

Of course, it is also [defined in the ES6 Spec](https://262.ecma-international.org/6.0/)...

![ES6 spec Array.map()](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qunwitnp1kuxp8nfqfaz.png)

## Was Just Wondering How Long It's Been Around
I had been under the impression it wasn't available until 2015, but it looks as if some browsers as far back as 2010 or so may have included it.
Clearing Systemd Logs
Tags: linux
Published: 2023-01-06 01:11:01

---
title: Clearing Systemd Logs
published: true
date: 2021-02-21 21:08:51 UTC
tags: Linux
canonical_url: https://brandonrozek.com/blog/clearingsystemdlogs/
---

Short post today. I wanted to clear out some disk space usage on one of my servers and noticed that the systemd logs were taking up a decent bit. Here are two options to clear out old logs.

Here is an example to do it by time, let’s say 15 days:

```
journalctl --vacuum-time=15d

```

An example to clear it by total disk usage, let’s say 10Gb:

```
journalctl --vacuum-size=10G

```
How to not write a blog
Published: 2021-02-21 21:08:31

The past week I was talking with my pattern about of the management a team. He explained to me how works Kaisen and Flow framework and I wrote all the keywords to create this blog. Now, I am trying the understand what means all this word without sense. Well, this fact doesn't mean that I don't gonna finish this blog here. I go to explain the concepts that I mean before. 
Kaisen is a culture for personal improvement, the people every two weeks the people write goals and improvements that they need necessary for them, review the current state and develop a plan for improvements and apply implement improvements. Finally, they report results and determine any follow-up items.
The other concept is flow framework. This is a program that allows displaying a different part of the project and the current providing a view that all the people can understand. No matter if the person is a developer or IT user.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu7tyb0d9toq6byfgenp.jpg)
Informações do repositório Git com Onefetch
Tags: linux, git, github, braziliandevs
Published: 2021-02-21 21:06:41

Olá pessoal, hoje iremos aprender sobre o programa **onefetch**, que mostra um resumo do seu repositório **GIT**, trazendo muitas informações e estatísticas de código. Neste tutorial estarei utilizando o sistema operacional **Xubuntu 18.04**.

Vamos realizar a instalação do **onefetch** utilizando o **Snap** , caso não tenha o **Snap** instalado acesse este [link](https://franciscochaves.com.br/blog/instale-o-snap-no-xubuntu).

Instale o programa **onefetch** com comando a seguir:

```bash
sudo snap install onefetch
```

Verifique se a instalação foi realizada com sucesso, observando o resultado da versão instalada:

```bash
onefetch --version
```

Agora vamos testar o programa, para isso realizar o _download_ de algum repositório, no caso deste tutorial será utilizado o repositório do **onefetch** , se não houver o **Git** instalado em sua máquina acesse este [link](https://franciscochaves.com.br/blog/instale-o-git-no-xubuntu).

```bash
git clone https://github.com/o2sh/onefetch.git
```

Acesse o diretório:

```bash
cd onefetch/
```

Execute o comando abaixo:

```bash
onefetch
```

![Informações do repositório onefetch](https://franciscochaves.com.br/assets/img/blog/2021/jan/info-repo-onefetch.png)

Valeu pessoal 😎✌!

## Referências

INSTALL ONEFETCH FOR LINUX USING THE SNAP STORE | SNAPCRAFT. **Snapcraft**. Disponível em: https://snapcraft.io/onefetch. Acesso em: 14 jan. 2021.

O2SH/ONEFETCH. **GitHub**. Disponível em: https://github.com/o2sh/onefetch/. Acesso em: 14 jan. 2021.
How to avoid overflow behavior on translated elements
Tags: beginners, css, transform, overflow
Published: 2021-02-21 20:22:59

Have you ever experienced that a CSS rule behaved differently than you would have expected it to? 

Last week one of my students had such a mind-twisting CSS rule! This rule translated an element, but the rendered element behaved differently than expected. It was overflowing the parent. 

He asked me why the element behaved like this after being translated and told me that the remaining space was defined to be distributed between the two elements by setting `justify-content: space-between;` which worked perfectly fine before the translation. 

First, let's look at the transform property I said.
By using this property, elements can be translated: rotated, scaled, and skewed. But this effect will change the visual formatting model, which means that the position and shape of the affected content change. In other words, this affects the visual rendering of elements – but without disrupting the normal document flow.

Let's have a look at this overflowing behavior in your project, and see if we can help get your heads around what this behavior is caused by, and then understand how to solve it. 

As mention earlier, everything worked as expected before translation. Rendering result before translated:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o5si8didhrqor4xg3j1r.jpg)

But when the elements are translated, they begin to overflow:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhu9k98kak4wszswrp50.jpg)

The transformation origin(Illustrated by the orange circles) is the point around which a transformation is applied. By default, the origin is center, but we can use the transform-origin CSS property to change the position of the origin. 

When trying to skew the justified elements, they are forced to overflow because i.e. the visual rendering of the translated element does not affect the normal document flow. 

Let us fix this by adjusting the origin of the left element to the upper left corner instead. For the element to the right, we change the position to the bottom right corner. 

This will cause the element to use these new points of the elements as the origins and therefore rotation points:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogjt1h35zwh67xshlg2g.jpg)

And there you have it, a translated element without any overflow!

Happy Hacking
Troels Agergaard
About me!
Published: 2021-02-21 20:18:19

A Software Engineer with a knack for entrepreneurship; proponent of privacy and freedom of speech. I created this site to write about topics ranging from software development and entrepreneurship to lifestyle, travel blogs, world affairs and fiction. Feel free to message me on twitter or comment on my posts for any feedback. Cheers!

https://sauravprasain.com/

https://saurav.dev

https://github.com/sauravprasains

https://hashnode.com/@sauravprasain

https://twitter.com/prasain_saurav

https://dev.to/sauravprasain

https://medium.com/@sauravprasain

https://sauravprasain.medium.com/

https://engr.nmsu.edu/files/2014/08/dean-list.pdf

https://angel.co/u/sauravprasain