teleren/devto huggingface dataset:
Downloadable Codecademy CSS Lessons
Tags: html, css, tutorial, codenewbie
Published: 2021-02-26 18:50:05

If interested in learning **CSS** from **Codecademy** for free, download the resources below:

### CSS
1.  [CSS Setup and Selectors](https://drive.google.com/drive/folders/1rQGXIiqB0QIjY1spx2n7R6sVhRqAuqkG?usp=sharing) 
2.  [CSS Visual Rules](https://drive.google.com/drive/folders/1wEzI84IRGHisU-BTvXdRs673VTkGLp4r?usp=sharing) 
3.  [Box Model](https://drive.google.com/drive/folders/1B6JTaWINt3y9mJhjPZf1XtCrTqhJBHYs?usp=sharing) 
4.  [Change the Box Model](https://drive.google.com/drive/folders/1bH0ljGo7xP8h3Wi3QjcowDD15kM9_HO1?usp=sharing) 
5.  [CSS Display and Position](https://drive.google.com/drive/folders/110HEix6uPWo58sJnQdQTQ4qx3hMUiZaM?usp=sharing) 
6.  [Colors](https://drive.google.com/drive/folders/1j6nEGR2o1ALGg3kmaVDRUg5EX9BoqSlQ?usp=sharing) 
7.  [Typography](https://drive.google.com/drive/folders/1EjOlaRHppqR0lRl23mwAjSKgHHvWv36D?usp=sharing) 
8.  [Code Challenge CSS Design](https://drive.google.com/drive/folders/1R2Jl3PFsp-Q8rBjqOmXoMcPgcslQh5V4?usp=sharing) 
9.  [Sizing Elements](https://drive.google.com/drive/folders/1N5A_fPLgyqCCynl3Jj8SlJF9REecoCin?usp=sharing)
10.  [Responsive Design](https://drive.google.com/drive/folders/1vCjSt7t2tng1W4Yv5BSN6VTTVqpIimUv?usp=sharing) 
11.  [Layout with Flexbox](https://drive.google.com/drive/folders/1qKGXArtD-LeCxrKffrECtEMSR_ZfBpOA?usp=sharing)  
12.  [Introduction to Grid](https://drive.google.com/drive/folders/1yfdYAvfOrHPplcNODRdBZynNmoj5vguL?usp=sharing) 

If also interested in having a one-month Codecademy free subscription,  [click this link](https://t.co/QEJa7L36zk?amp=1).
Layering GraphQl over 3rd party API
Tags: graphql, api
Published: 2021-02-26 18:37:31

I am working on a project where I am creating a restful API. That endpoint consumes a 3rd party API which sends a lot of data that I don't require. Will graphql work on that 3rd party API to just fetch that data that I require? I am using nodejs for creating the API.
Vim Modular Com Java, Kotlin e Go
Tags: vim, go, java, kotlin
Published: 2021-02-26 18:32:00

Para quem curte usar VIM, deixei o meu mais modular e vem pre configurado para Golang, Kotlin e Java além de NERDTree e algumas coisinhas a mais.

https://github.com/alexandreliberato/vim-modular
Last Chance to Join the "Hack the Planet" Contest ⚠️
Tags: meta, hacktheplanet, newrelic
Published: 2021-02-26 18:30:24

---
title: Last Chance to Join the "Hack the Planet" Contest ⚠️
published: true
description: Don't miss your shot at using New Relic to build an amazing app and earn exciting prizes! 
tags: meta, hacktheplanet, newrelic
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2u637by7cl3icaru3w3u.png
---

#### **This is your final reminder that our "[Hack the Planet](https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d)" contest in partnership with New Relic closes on Sunday, February 28, 2021 @ 11:59 PM PT(8 AM UTC the following day)**

--- 

That's right — [Hack the Planet](https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d) is almost over! 😱 ⏰ 

Consider this your friendly and final reminder to build those apps using New Relic and write up your official entry post using [this template](https://www.therelicans.com/new/hacktheplanet). 

All of us at DEV are really excited to announce the winners for this special hackathon for a couple of reasons:

1) **Earth needs our help!** With climate change having a very real and immediate impact on the planet we share, it's crucial that talented people like you help build the solutions and innovations it takes to combat the problem.

2) **The prize package for this hackathon is massive.** Here's what you stand to win... 

> #### Grand Prize Winners (3 total):

> - **$5,000 USD gift card or equivalent**
> - $350 USD credit to the DEV Shop 

> #### Runner-Up Prizes (10 Total):

> - **$500 USD gift card or equivalent**
> - $150 USD credit to the DEV Shop

> #### Grand Prize Winners, Runners-Up, _and_ participants will also get:
> - Eco-friendly New Relic swag OR a donation to the Environmental Defense Fund
> - A tree planted in your name
> - A DEV sticker pack
> - Special DEV profile badges



### **Full details and participation rules here** 

{% link https://dev.to/devteam/announcing-the-new-relic-hack-the-planet-contest-on-dev-5d %}


* _FAQ for Hack the Planet [here](https://dev.to/devteam/hack-the-planet-reminder-faq-3ibi)._

* _Browse the projects others have already submitted on The Relicans community [here](https://www.therelicans.com/t/hacktheplanet)_

---

Good luck, everyone!
Promises don't hold up the event loop
Tags: node
Published: 2021-02-26 18:15:39

A fun thing I came across recently: a pending promise, by itself, won't stop a Node.js script from exiting.

Let's say we have a script that ends with something like this:

```js
someFunctionThatReturnsAPromise();
```

Note that we aren't `await`\-ing this promise or doing anything with its result. If we run this script, will the Node.js process wait for the promise to resolve before exiting?

Well, it depends \(🙄\). Promises by themselves don't hold up the event loop. This means that Node.js will not wait around for your promise to be fulfilled, unless...

Unless the promise does something that _does_ hold up the event loop, such as network \(calling an API\), I/O \(reading a file, querying a database\) or timers \(`setTimeout`, etc\). These are asynchronous operations that add callbacks to Node.js' [task queues](https://javascript.info/event-loop) \(the queues are lists of operations which tell Node.js the next thing to do\), and Node.js won't exit until the queues are empty.

So, it does depend. If the promise does some asynchronous operation, then likely, yes, Node.js will wait until it resolves \(or rejects\), even if that takes forever. Otherwise, it'll happily exit. You shouldn't need to worry about this, as most Promise\-based operations do async stuff, but occasionally it can come in handy \(for instance, if you're wrapping a sync operation with a Promise\).
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2021-02-26 18:02:22


This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag.


---



When asked what some [common misconceptions of being a software developer are] (https://dev.to/ben/what-is-the-biggest-misconception-about-being-a-software-developer-3pnd/comments), @codemouse92 knew exactly what to say! Do you have any grievances?
{% devcomment 1bmok %}

Thanks for the rec on [this] (https://dev.to/ratuloss/my-productivity-setup-vs-code-4o9d) thread, @lyrod. Good fonts should never be undervalued.  {% devcomment 1bkgg %}

Fantastic resource on the argument of using [Grid vs. Flexbox] (https://dev.to/nadayousry/grid-vs-flexbox-3fbh), @eric23! 
{% devcomment 1bkck %}

These are absolutely fantastic wins, and we can't wait to see your list of accomplishments grow, @tuliocalil.
{% devcomment 1bja4 %}

The work we do is so stellar, it can even land us on Mars. Thanks for reminding us just how far we can go, @eruizdechavez! 
{% devcomment 1blja %}



See you next week for more great comments ✌
What annoys you while coding?
Tags: discuss, programming
Published: 2021-02-26 17:34:40

Hi, Dev community. Do you want to discuss what or who annoys you while working? Maybe someone has some ideas on how to solve these problems.

Let me start. In the process of working, I am very annoyed by DM messages or numerous mentions in conversations along with notifications.

What about you? Don't be scared. I'm sure, it's a great theme for a conversation.
Alternative shortcuts to cut-copy-paste with Dvorak
Tags: productivity, tutorial, dvorak, keyboard
Published: 2021-02-26 17:28:58

If you are switching from `Querty` to `Dvorak`, surely found an annoying behavior trying to use the most common shortcut for cut, copy and paste. They aren't together anymore 💔.

![davorak-layout](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kl2iqf23k2jy8jwdpvxk.png)

Some people may not know that there are other key shortcuts used by the ancients. This dark age where black screens and green letters reign the world before the mouse was invented.

![old-computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sv72c6nkyk7vlpkpm7tj.jpg)

But now, Dvorak users can rescue them from the museums and use them as an alternative.

| Action | Shortcut | Alternative |
| --- | --- | --- |
| Cut   | <kbd>Ctrl</kbd>+<kbd>X</kbd> | <kbd>Shift</kbd>+<kbd>Del</kbd> |
| Copy  | <kbd>Ctrl</kbd>+<kbd>C</kbd> | <kbd>Ctrl</kbd>+<kbd>Insert</kbd> |
| Paste	| <kbd>Ctrl</kbd>+<kbd>V</kbd> | <kbd>Shift</kbd>+<kbd>Insert</kbd> |

It works on almost any software, but if you also are a Microsoft Word user, need to make an extra step, enabling the <kbd>Insert</kbd> key.

![msword](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8se2pn2zotfvhflbb01z.png)

---

**That’s All Folks!**
**Happy Coding** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
WPF User Control Injection
Published: 2021-02-26 17:16:43

Injecting small parts into a MainWindow is easy in WPF (once we know how).

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

We have to import the content of the folder first, in this case it's our 'usercontrols' folder which contains all our parts.

We give it a name of 'ucs' and the subsequent reference automatically present the user controls to select.

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

Here we see three tab items that came from our 'usercontrols' folder.

JWP2021 WPF UserControls
How to simulate the delay in a request with Cypress
Tags: cypress, testing, automtion, e2e
Published: 2021-02-26 17:15:21

## In today's “Pinch of Cypress”, learn how to simulate a delay in an HTTP request to test this intermediate state of the application

Imagine a search functionality. When such functionality is invoked, an HTTP request is triggered for an external API, and while the API does not answer, the text `Loading...` is displayed along with an icon.

Sometimes, the request's response is quick, and you can barely see the application's status while it is loading. However, in other cases, the response takes a while, and then you can see the status of `Loading...`

But what if I want to test exactly this intermediate state, that is, I want to test when the `Loading...` is being displayed?

In this case, I want to ensure that a certain delay occurs, so that [**Cypress**](https://cypress.io) always finds the element of `Loading...` and so I avoid flaky tests, meaning those tests that sometimes pass and sometimes fail, without any code changes.

Let's look at an example below.

```js
context('Delay simulation', () => {
  beforeEach(() => {
    cy.intercept(
      'GET',
      '**/search?query=cypress',
      {
        delay: 1000,
        fixture: 'stories'
      }
    ).as('getDelayedStories')
  })

  it('shows a loading state before showing the results', () => {
    cy.visit('https://example.com/search')

    cy.get('[data-cy="search-field"]')
      .should('be.visible')
      .type('cypress{enter}')

    cy.get('p:contains(Loading...)')
      .should('be.visible')
    cy.get('.loading-icon')
      .should('be.visible')

   cy.wait('@getDelayedStories')
  }) 
})
```

To simulate the request delay, I use the `cy.intercept()` functionality, where in addition to passing the `GET` method and the endpoint `**/search?query=cypress` as arguments, I also pass an object with the `delay` property with the value of `1000` milliseconds (1 second). I also pass a fixture to the same object, as I don't want to depend on the API since I'm testing the frontend's behavior only.

Then I search, and during this one-second delay, I test that a paragraph with the text `Loading...` and an element with the class `loading-icon` are displayed.

Finally, I wait for the request to end.

And this is how you can simulate the delay in a request with [**Cypress**](https://cypress.io). Cool huh?

I hope the post is useful if you need to deal with a situation like this.

_For more details on the `cy.intercept()` functionality, I recommend reading the [**official Cypress documentation**](https://docs.cypress.io/api/commands/intercept.html)._

___

Did you like it?

Leave a comment.
___

This post was originally published in Portuguese on the [**Talking About Testing**](https://talkingabouttesting.com/2021/02/26/como-simular-a-demora-em-uma-requisicao-com-cypress/) blog.
___


Would you like to learn about **test automation with Cypress**? Get to know my online courses on [**Udemy**](https://udemy.com/user/walmyr). Happy testing! 🎉
Chromebooks VS Dev I am asking for suggestions
Tags: chromebooks, explainlikeimfive, help
Published: 2021-02-26 17:14:38

Hello, I don't know but I hope my tags are correct. I found this community looking for an answer on Chromebooks for developing, but those don't seems to be good enough for me.
I know barely nothing about this world, I don't know which are the suggested hardware specifics to develop. If there's a best OS to have, but my big concern is that all the answers I found untill now are too expensive. I don't have 1000€ or more to spend, I barely could soon have 250/300€ to start my journey, so I was wondering if a Chromebook (surely cheaper than other laptops) could be good for this. Otherwise, Can you suggest some hardware specifics that could help me looking for a reconditioned desktop pc? Even if I am more for Chromebook because I portable and my back could thank me right now.
Thank you all! And sorry if I am a bit confused.

P.S. if you are going to talk to me about languages or technical language I can't understand you, I just began studying HTML and that's all I know.
JavaScript Interview Question #24: Adding new properties to JS strings
Tags: javascript, beginners, codenewbie, webdev
Published: 2021-02-26 17:06:58

![js-test-24](https://learn.coderslang.com/js-test-24.png)

Can you add a custom field to a regular JS string? What’s the output?

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

The answer to this problem will depend on whether you’ve added the `’use strict’` flag at the beginning of your script.

The result will be:

- `undefined` if `'use strict'` wasn’t specified
- an error will be thrown if you’re using the strict mode

So what’s the deal?

In the second line, when you try to access `s.user`, JS creates the wrapper object under the hood.

If you’re using the strict mode, any modification attempt will throw an error.

If you’re not using the strict mode, then the execution will continue and the new property `user` will be added to the wrapper object.

However, once we’re done with the second line of code, the wrapper object is disposed and the `user` property is gone, so `undefined` is logged to the console.

---

**ANSWER**: You can’t add properties to primitive values in JS. The result will depend on the presence of the `'use strict'` flag.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Clean and minimal Ubuntu system setup for developer productivity
Tags: watercooler, productivity, programming, webdev
Published: 2021-02-26 17:01:52

The system setup is an integral part of the day-to-day life of any developer. After all, we spend more than half of our wake-up time in front of the system.

So it is necessary to make sure that we have set up the system to be as productive and functional as possible. 

The choice of the operating system is not a concern as long as you are comfortable with the system and knows the tweaking for making it as much as yours. 

In the below video, I am showcasing my setup using the Ubuntu system running Gnome. The different Utilities, shortcuts, and developer workflow can be seen. 

{% youtube zIQXeEoFOME %}

Please note that I am not claiming that the above is the best setup for every developer. This is something that has worked for me well. 

You can also check out the dark mode version of the setup I used to have.

{% youtube bC_aKuhdYk4 %}

I switched from "cool" dark mode to a more "clean" light mode theme due to my own reasons which I will discuss in a different post. 

### About me
You can read my profile in the below link
https://www.microideation.com/mi-profile.html

I am currently working on a next-gen casual learning platform that presents the topics as simple 30 second read contents. 

You can read about that more on
https://www.microideation.com/
https://portal.microideation.com/about

If you are a developer trying to learn programming or want to refresh your memory of different topics, you can download and view the ideations for free. 
https://play.google.com/store/apps/details?id=com.microideation.app
'asdf para manejar varias versiones de tus 
Tags: tip, desarrollo
Published: 2021-02-26 16:48:35

---
title: 'asdf para manejar varias versiones de tus 
published: true
tags: ['tip', 'desarrollo']
canonical_url: https://marceloandrader.github.io/blog/2021/02/26/asdf-para-manejar-varias-versiones-de-tus-herramientas/
---

Cuando realizamos desarrollo en nuestra máquina local, es normal que trabajemos en varios proyectos, algunos proyectos más antiguos otros más nuevos, hay veces que tenemos que volver a proyectos antiguos a realizar alguna modificación, pero como ya actualizamos ciertas herramientas a las nuevas versiones, estos proyectos dejan de funcionar.

La solución para esto personalmente creo que es docker, pero si por algún motivo no es una opción para tí, otra solución que funciona bastante bien es [asdf](https://asdf-vm.com/) es un manejador de versiones de diferentes herramientas, ha habido muchos de este tipo de paquetes en el pasado para manejar herramientas específicas como rvm, rbenv y ruby-build para ruby, nvm o volta para nodejs.

La mejor parte de asdf es que es extendible, es decir que a través de plugins puede `aprender` como manejar varias versiones de diferentes paquetes. Aquí una lista de los plugins que tiene: [plugins asdf](https://asdf-vm.com/#/plugins-all?id=plugin-list)

La página de instalación indica como se puede [instalar](https://asdf-vm.com/#/core-manage-asdf?id=install) y agregarlo a tu shell.

Para agregar un plugin se usa:

`asdf plugin add nodejs`

Instalar la última versión:

`asdf install nodejs latest`

Instalar una versión específica:

`asdf install nodejs 14`

Mostrar versiones instaladas:

```
asdf list nodejs
  10.12.0
  10.13.0
  12.13.0
  14.2.0
```

Para usar una versión específica se puede usar asdf global, local o shell

`asdf global nodejs 14` crea el archivo $HOME/.tool-versions con ese valor y se usara esa como defecto

`asdf local nodejs 14` crea el archivo ./.tool-versions en el directorio donde lo llamaron con ese valor y se usará esa como defecto cuando se ingresa en ese directorio, esto es bueno para manejar distintos proyectos, la versión queda especificada en ese archivo.

`asdf shell nodejs 14` permite utilizar esa versión durante la sesión de shell activa en ese momento, el rato que cierres el terminal se pierde la configuración.

`asdf current` nos muestra las versiones seleccionadas en este momento.
WSL2 plus Virtual Machines on Windows 10
Tags: wsl, docker, virtualbox
Published: 2021-02-26 16:43:16

---
title: WSL2 plus Virtual Machines on Windows 10
published: true
description: 
tags: wsl, docker, virtualbox
//cover_image: https://direct_url_to_image.jpg
---

In this post I go over some of the issues you might be running into if you run WSL2 on windows and have used VirtualBox or VMWare for virtualization.

Plenty of people like WSL, you get a nice Linux layer inside windows and can get native linux tools and test code deployments all within one machine, it also blends nicely within windows explorer and the new windows terminal. However WSL2 uses some windows features which causes other third party virtualization programs to stop working I am talking mainly about Virtualbox and VMware.

Before you say anything about why use virtualization if you have WSL, these are really two different technologies. Personally I've built a few Windows VMs with simulators needed for my job, these are things that I can't run on linux containers. So yes, there is a need for all these technologies to coexist without having to run scripts or some cumbersome way of turning on/off one or the other.

For me the solution was to start using Hyper-V Manager for creating virtual machines.

Now if you're like me and have tons of already created virtual boxes, then you might want to look at conversion guides like this one https://www.groovypost.com/howto/migrate-virtual-box-vms-windows-10-hyper-v/. Please note migrations are always painful, now I had left my VM paused on vbox, and I don't know if that caused my failure when importing disk on hyper-v but I didn't feel like reverting the whole process to get vbox working and convert disk again. I instead just created a new Win7 VM which then I installed a few things needed for my simulator.

## Enabling all Hyper-V features

WSL uses hyper-v in the background, but the full features are not enabled by default, check all options under Hyper-V, and reboot machine. After reboot launch Hyper-V Manager and voila, try creating a quick VM with an iso, if you are running into issues on boot use Generation 1 option.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0we3f6cq56xukhq506gy.png)

## Everyone is happy

WLS2, Virtual Machines, and Docker also works. This way you don't sacrifice one or the other.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irxd1hmbylduk3ty0bfr.png)
how to search fetched date?
Tags: react
Published: 2021-02-26 16:39:08



Hi I build a single page app to search by name,while I input any character in search bar there appear to be type error,so I use FLOW to check and down below are two errors.I was toldincompatible-use,but what is right use,anyone could give me some document to read?
Error -------------------------------------------------------------------------------------- src/component/List.js:22:25
Cannot get `data.students` because property `students` is missing in undefined [1]. [incompatible-use]

   src/component/List.js:22:25
   22|     const newarr = data.students.map(student => {
                               ^^^^^^^^

References:
   src/component/List.js:10:27
   10|   const [data, setData] = useState();
                                 ^^^^^^^^^^ [1]


Error -------------------------------------------------------------------------------------- src/component/List.js:68:31
Cannot build a typed interface for this module. You should annotate the exports of this module with types. Missing type
annotation at function return: [signature-verification-failure] 

I also create in the link to help my helpers to test or play:https://codesandbox.io/s/ecstatic-cache-2swtl
Doodle TodoMVC
Tags: kotlin, webdev, javascript, opensource
Published: 2021-02-26 16:37:18

Check out Doodle [Todo](https://nacular.github.io/doodle-tutorials/#/todo), an implementation of the [TodoMVC](http://todomvc.com/) app. Doodle [tutorials](https://nacular.github.io/doodle-tutorials) is a good place to see in-depth examples of how to build apps.

[Doodle](https://github.com/nacular/doodle) is a pure Kotlin UI framework for the Web, that lets you create rich applications without worrying about Javascript, HTML or CSS. Check out the [documentation](https://nacular.github.io/doodle) to learn more.

Feedback is always appreciated.
Infinite News Ticker 🎉😍
Tags: 100daysofcode, javascript, html, css
Published: 2021-02-26 16:33:08

Today is the day 68 of #100DaysOfCode challenge

Infinite News Ticker Using HTML5, CSS3 & JS

Demo : https://news-ticker.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day68