teleren/devto huggingface dataset:
Herramientas y recursos INCREIBLES para desarrollo web frontend
Tags: ux, frontend, ui, tools
Published: 2021-05-30 20:31:27

Si prefieres puedes ver directamente mi video sobre estas herramientas y saltarte la lectura: [Youtube Video](https://youtu.be/FjrHwxC9470)

## Comencemos
Es excelente contar con herramientas y recursos que nos ayuden con un diseño y desarrollo del frontend de un proyecto web de forma rápida, intuitiva, moderna y eficaz. Por lo que les comparto estas 5 herramientas que me han ayudado mucho para un desarrollo mas ágil y estético

1. **[ManyPixels](https://www.manypixels.co/gallery):** nos brinda un montón de ilustraciones totalmente gratuitas. Lo que mas me gusta de este sitio es que nos permite cambiar el color principal de las ilustraciones para que coincidan con nuestro proyecto además de permitir descargar en png o svg gratis y sin necesidad de registrarse en el sitio ni nada parecido. Tenemos todo tipo de ilustraciones a disposición, con diferentes categorías o temáticas.

2. **[Indian doodle. Illustration pack](https://iconscout.com/illustration-pack/indian-doodle):** Este pack de ilustraciones es increíblemente estético y moderno, con unas ilustraciones adecuadas para cualquier tipo de proyecto, además de que nos permite descargar cada ilustración de manera gratuita. Super recomendadisimo.

3. **[Boxicons](https://boxicons.com):** Es mi fuente de iconos preferido y que uso en todos mis proyectos, me gusta mucho porque brinda mas de 1000 iconos (1500 exactamente) y es muy fácil de implementar en un proyecto, hay muchas maneras de implementarlo pero mi favorita es para usar los iconos como fuentes ya que me permite con css manipular los iconos con font size, font weight color etc. Nos deja descargarlo en png, svg html, cambiar el tamaño, usarlo como web component o como yo lo uso: como fuente. Hay de todo tipo y categorías para usar.

4. **[AOS Library](https://michalsnik.github.io/aos/):** Nos permite crear animaciones al scrollear la pagina web de una manera extremadamente fácil, simplemente siguiendo la documentación. Tiene muchos tipos de animaciones y nos permite manipular la duración de cada animación, además es extremadamente fácil de instalar y de utilizar. Tengo un video en el que enseño como instalarlo  en un proyecto angular: [Aquí](https://www.youtube.com/watch?v=IjggpwE0wew&t=2s)

5. **[Responsively](https://responsively.app):** Es un navegador web que nos permite visualizar nuestro proyecto en varias pantallas de diferentes dispositivos, esto nos ayuda a desarrollar proyectos mas adaptables pensando en todas las situaciones posibles, hay resoluciones desde iphones hasta androids y laptops. Nos permite también manipular que dispositivos mostrar y algunas configuraciones mas. Excelente herramienta para el desarrollo mobile first / responsive.

Eso es todo, ¿Qué tal te han parecido estas recomendaciones? ¿Las encontraste útiles?
My Dev Journey: Week 4
Tags: javascript, codenewbie, beginners, bootcamp
Published: 2021-05-30 20:05:38

Week 4 marks the end of the JavaScript Fundamentals block! Wow this has been a big challenge but I feel so happy looking back at what I can do now as opposed to just three weeks ago. This (along with a three day bank-holiday weekend 🍻) have spurred me on to be even more excited to move onto the next three block of the course, all about Backend development!

Thanks for checking out this blog entry, and consider following me on [GitHub](https://github.com/fearneyork) to see when I post more updates, and keep track of how I find the Backend block of the course. 

## What I've learnt this week

### Revision

We started the week off with solo sprint of recapping a lot of the content we have covered in the previous two weeks, this was so welcomed! It feels like we've been going a mile a minute over the past two weeks, so to have to reflective time where everyone can take stock of where they're at in the course and to brush up on some of the fundamental concepts has been wonderful.

Our recap covered topics like array methods, closures, Object-Orient Programming, and recursion.

### Async

We dedicated two whole days to Async, and it was great to get familiar with a concept I'd heard a lot about, but never seen implemented into code. I have to say that this is something that puzzled me, but I couldn't stop thinking about. Several times over the two days I found myself zoned out in the middle of a task like washing the dishes, eating tea, or showering, and then snapping too realising that I had spaced out. Perhaps I was starting to live asynchronously 🤔

### API's and Promises

The final two days covered working with dummy API requests as well as getting data from API's like the [Star Wars API](https://swapi.dev/), and the [Pokémon API](https://pokeapi.co/). As well as using amazing tools like [fs](https://nodejs.org/api/fs.html), [axios](https://www.npmjs.com/package/axios), and [inquirer](https://www.npmjs.com/package/inquirer). And this was a whole lot of fun, especially using inquirer to provide an input to the code rather than taking it as a hard coded input.

## Resources I've found useful this week

- [fs](https://nodejs.org/api/fs.html), [axios](https://www.npmjs.com/package/axios), and [inquirer](https://www.npmjs.com/package/inquirer) documentation, went I'm picking things up for the first time well-written documentation full of examples is really useful to me
- Fun API's to practice with! We've been using the [Star Wars API](https://swapi.dev/) and  [Pokémon API](https://pokeapi.co/) so far and I'm excited to find more
- And as always the Northcoders notes!
Count Down Timer hooks in react hooks
Published: 2021-05-30 19:59:09

```javascript
import React,{useState, useEffect} from 'react';
function Timer({Min, Sec, onTimeout}) {
  const [seconds, setSeconds] = useState(Sec);
  const [minutes, setMinutes] = useState(Min);

  function updateTime() {
    if (minutes === 0 && seconds === 0) {
      onTimeout(true);
    } else {
      if (seconds === 0) {
        setMinutes((minutes) => minutes - 1);
        setSeconds(59);
      } else {
        setSeconds((seconds) => seconds - 1);
      }
    }
  }
  useEffect(() => {
    const token = setTimeout(updateTime, 1000);
    return function cleanUp() {
      clearTimeout(token);
    };
  });
  return (
    <div>
      {minutes === 0 && seconds === 0 ? null : (
        <h6>
          {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
        </h6>
      )}
    </div>
  );
}

export default Timer;
```
Dockerizing Phoenix Development (6) Installing Phoenix
Tags: docker, postgres, phoenix, postgis
Published: 2021-05-30 18:51:43

The database is on tap, the elixir image is ready and sharp observers, _on their third espresso_, will notice: **Phoenix is still not present!**

To get Phoenix installed we need to:
- have the containers running
- sign in to the **web** container as **devuser**
- install the Erlang and Elixir package managers
- install the Phoenix package (and dependencies).

These things go into hidden folders within the (container) **/apps** folder because it is the home folder for the **devuser** account used for development.
* After this, the standard **mix** commands can be used to initiate projects, run migrations, run the web servers and so on.
* From this point, the standard text books for Phoenix 1.5 (e.g. McCord, Tate & Valim) can be followed without problems.

## Installing 

### Start the containers:

From the command line:
```
docker-compose  up  -d
```

### Connect to the **web** container shell

From the command line:
```
docker exec  -u devuser  -ti  myp_dev_web_1  /bin/ash
```

### Install Erlang package manager called Rebar
```
mix local.rebar --force
```

### Install Elixir package manager called Hex
```
mix local.hex --force
```

### Install Phoenix tool packages
```
mix archive.install hex phx_new 1.6.10 --force
```
* _By the time you read this: version 1.6.10 may no longer be ideal so review what is the latest stable edition: [https://hexdocs.pm/phoenix/Phoenix.html](https://hexdocs.pm/phoenix/Phoenix.html)_.

## Run up a fresh Phoenix project

```
mix phx.new myp
```
All being well, your project is now rolling and you will need to adjust the database configuration for the project.

- The database configuration should reflect the database user (myp_user) and database instance (myp_dev) created earlier.
- The database configuration should also reflect that the database host should be **db** _(the service name from the **docker-compose.yml** file) rather than **localhost**!_

The Elixir driver for PostgreSQL is postgrex and there are some relevant extensions to consider at this point: 
- [geo_postgis](https://github.com/bryanjos/geo_postgis)
- [geo](https://github.com/bryanjos/geo)
- [topo](https://github.com/pkinney/topo)
- [open_location_code](https://github.com/bryanjos/open_location_code)

## Remarks

- This tutorial has been run through to test that it works.  Any problems, leave a comment and I will respond.
- This tutorial works through a few awkward challenges; these solutions may have saved you some time.  If you are feeling generous, you could **[buy me a coffee](https://buymeacoffee.com/alastairm)!**
Dockerizing Phoenix Development (5) Scripting the images
Tags: docker, postgis, phoenix, postgres
Published: 2021-05-30 18:50:07

This extends the **docker-compose.yml** that appeared in step 3.

## The Dockerfile (./myp_dev/docker-compose.yml)
```
version: "3"

volumes:
  postgis13_data:

networks:
  myp_net:

services:

  db:
    image: postgis/postgis:13-3.1-alpine
    networks:
      - myp_net
    environment:
#     - POSTGRES_USER=postgres
      - POSTGRES_PASSWORD=postgres
#     - POSTGRES_DB=postgres
    ports:
      - 5432:5432
    volumes:
      - postgis13_data:/var/lib/postgresql/data/

  web: 
    build:
      context: .
      dockerfile: Dockerfile.alpine
    networks:
      - myp_net
    ports:
      - 4000:4000
    depends_on: 
      - db
    volumes:
      - ./source:/apps

# end
```

As docker-compose scripts go: this is about as simple as it gets. Even someone with a passing awareness of docker should be able to read this.

## Build image from Dockerfile(s)

```
docker-compose --build
```

## Remarks

* The system defined by this script is unlikely to conflict with other running systems; other than where it offers service on ports exposed onto the **localhost**.
Dockerizing Phoenix Development (2) Folders & Files
Tags: docker, elixir, phoenix, postgres
Published: 2021-05-30 18:45:42

The overall objective is to construct a development environment within Docker for a website based on [Phoenix](https://www.phoenixframework.org/) and [Elixir](https://elixir-lang.org/) backed by [PostgreSQL](https://www.postgresql.org/) with [PostGIS](https://www.postgis.net/).

We are working through **'docker-compose'**, with project parameters in an explicit, indented YAML file rather than a bash script.

This step is intended to set out the organisation of files and folders being used, and explain each.

## Hierarchy 

 * ./base_folder/ _(folder - might be $HOME)_
    * /myp_dev/ _(folder of entire project)_
      * /docker-compose.yml _(text file scripting images to run together)_
      * /Dockerfile.alpine _(text file defining image for web server)_
      * /source/ _(folder where your Elixir code goes)_

### ./myp_dev

* This is a folder that encapsulates our whole exercise.  The docker-compose commands should be issued from this folder.

* _Note: when docker-compose starts our collection of containers: it names them  including this folder name as a prefix.  This feature is helpful and makes it easier to run, say, a beta version alongside a development version for comparison purposes._

### ./myp_dev/docker-compose.yml

* This is a text file; which scripts the necessary images required to bring up a group of containers as a system.

### ./myp_dev/Dockerfile.alpine

* This is a text file, we use to build an image for Elixir and Phoenix.

### ./myp_dev/source

* This folder will contain all our Elixir and Phoenix coding. This folder will be mounted as a volume into the container. In this way we can run our web server inside the container, and, at the same time, use editors and IDE software on the host system (from outside the container).

## Remarks

* _By default: the user inside the container is **'root'** (*for that container*) and will not let you edit files created if you are anything less!_

* _To make this work smoothly, the **'user id'** and **'group id'** used for development within the container **will need** to match those of the development user on the host machine._ 

* _This exercise has been assembled under Linux and will very  probably work hosted on a Mac.  Windows, however, formats   text files differently and trying to use the same folders   from a container (Linux) and the host (Windows) is likely   to give you gremlins!  (End of line and end of file are coded differently).  Some IDE software such as [KomodoIDE](https://www.activestate.com/products/komodo-ide/) may have preference settings that help, however it remains a courageous practice._
CSS-Only Direction-Aware Cube Links
Tags: html, css, webdev, showdev
Published: 2021-05-30 18:40:12

Hello Guys,

Today I created a Amazing css  Only Direction-Aware Cube LinksHover Effect Using HTML & CSS. this hover effect is simple but it looks amazing. I hope you like this also comments about your thoughts.
{% codepen https://codepen.io/elghezzaz/pen/GRWOQZJ %}
Design real-time Stock Price Feed
Tags: tutorial, systemdesign
Published: 2021-05-30 18:24:16

Want to design your own trading platform? 📈📊
This could be your first step towards building your own trading platform by building a low latency price feed!!

https://harshsavasil.medium.com/design-real-time-stock-price-feed-9e1fba0a1c4e
How to use MJS files in Node.js?
Tags: node, beginners, javascript, webdev
Published: 2021-05-30 18:23:55

---
title: How to use MJS files in Node.js?
published: true
description: Learn how to import and export from MJS files in Node.js applications
tags: nodejs, beginners, javascript, webdev
cover_image: https://images.unsplash.com/photo-1566241440091-ec10de8db2e1
---

Today I want to show you how to import functions from \*.mjs files. You can think of MJS as JavaScript code that is exported in a standardized module format. It's basically (M)odular (J)ava(S)cript. The standardization itself is called ECMAScript Modules (ESM).

By default, the Node.js platform doesn't use ES modules but CommonJS, which is a different module formatting system. Fortunately, the Node.js team introduced the concept of ES modules back in 2017 with Node v8.9.0. At that time, you could run Node.js with an additional flag (`--experimental-modules`) to make use of it.

Since Node v13.2.0 the experimental flag is no longer required. It only takes a few steps now to use an ECMAScript module. Let me show you how to do it.

## 1. Create a ES Module / MJS File

Setting up an ES module is simple: Just create a file with the \*.mjs extension and export your code using the `export` keyword:

**myFunction.mjs**

```javascript
export function myFunction(a, b) {
  return `${a} ${b}`;
}
```

## 2. Import your code

You can import an ES module with the `import` keyword. If you work with TypeScript, you are probably already familiar with this syntax. You can import MJS files into ordinary JavaScript (JS) files:

**start.js**

```javascript
import { myFunction } from "./myFunction.mjs";

const text = myFunction("Hello", "World");
console.log(text);
```

Tip: Don't forget to add the \*.mjs extension to you import statement. If you omit the file extension, Node.js will look for a \.js file and report the following error:

> node:internal/process/esm_loader: internalBinding('errors').triggerUncaughtException
> Error [ERR_MODULE_NOT_FOUND]: Cannot find module

## 3. Set your package type to "module"

That's probably the biggest change: You have to create a property with the name `type` in your `package.json` file. To use ES modules, it has to bet set to `module`.

**package.json**

```json
{
  "name": "my-package",
  "scripts": {
    "start": "node src/start.js"
  },
  "type": "module",
  "version": "0.0.0"
}
```

If you forgot to set the `type` property, or if you set it to `commonjs`, you will run into the following error:

> (node:2346) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
> SyntaxError: Cannot use import statement outside a module

## Closing

Now you know the basics of using MJS files. I tested my code listings with Node v15.14.0. I wish you good luck when trying it yourself! 🍀

## Get connected 🔗

Please [follow me on Twitter](https://twitter.com/bennycode) or [subscribe to my YouTube channel](https://www.youtube.com/c/typescripttv) if you liked this post. I would love to hear from you what you are building. 🙂 Best, Benny
How To Quickly Add Jest To Your Next.js App
Tags: nextjs, react, beginners, javascript
Published: 2021-05-30 18:22:05

Pssst.. you might also like this guide on adding Cypress to your Next.js App. Combined with Jest, it's a great setup! 

{% link https://dev.to/ashconnolly/how-to-add-jest-to-your-next-js-app-2a3p %}

# Adding Jest

Add the jest dependency:

- yarn: `yarn add jest --dev`
- npm: `npm install jest --save-dev`

Add a `jest` script to your package.json so that we can run jest against our test files:

```json
"scripts": {
    "jest": "jest"
  }
```

Add a test file anywhere in your app. For now lets call it `example.test.js` :

```jsx
const sum = (a, b) => a + b

describe('sum()', () => {
  it('should return 5 if given 2 and 3 ', () => {
    expect(sum(2, 3)).toBe(5)
  })
})
```

Now if we run `yarn jest` or `npm run jest` we'll see the test is found, it runs, and passes! ✅

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

## Jest with Cypress

If you're using Cypress, we need to add our own `jest.config.js` file to tell Cypress to ignore our cypress tests. Otherwise Jest will pick them up and try to run jest on the files and cause an error. This is because Jest is set up to run tests on files that end in `spec.js` or `test.js` and Cypress tests end in `spec.js`.

```jsx
module.exports = {
  // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader
  modulePathIgnorePatterns: ['./cypress'],
}
```

- You can also setup a jest config file using `npx jest --init`

## Done! 

And that's it! We have added Jest to our Next.js app! 🎉 😃 

Now we can unit test all of our JS logic / helper functions! For more details on how to write tests, be sure to check the [Jest Docs](https://jestjs.io/docs/using-matchers).

If you're interested in hearing more tips about React, Next.js, and JavaScript, feel free to [follow me on twitter](http://ashconnolly.com/twitter)!😃

Epic cover photo by [Ken Smith on Unsplash!](https://unsplash.com/@kensmithdesign?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Programmatically output lyrics on a tee-shirt
Tags: showdev, javascript, cpp
Published: 2021-05-30 18:21:42

Some years ago I re-wrote the lyrics of a song as a JS script. I ordered a tee-shirt with this "art" of mine (I actually find it quite beautiful 😅).

But everytime someone looked at my tee-shirt, they would ask me if it really means or does something. I would answer "no, it doesn't work, it's just a representation".

![My tee-shirt with source code art](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5rl53jyb1bh2gagluard.png)

But now, I've implemented it!

I chose C++ to be able to overload operators exactly as I wanted... My goal was to not change anything about this source code, which I designed without knowing I would implement it.

So in the `main.cpp` file, all I have is the following:

```cpp
#include "logic.cpp"

int main()
{
	/**
	 * Guess the song... 😌 😎
	 */

	imagine(!heaven) == "easy";
	us.below = !hell;
	us.above = sky;
	imagineAll("living for today");

	imagine(!countries) != "hard";
	(kill || die).reasons.length == 0;
	religion = undefined;
	imagineAll("living life in peace");

	chorus(); //🎵🎶

	imagine(!possessions) ? "😀" : "😥";
	need(greed || hunger) == false;
	men.reduce([]() { return "brothers"; });
	imagineAll("sharing all the world");

	chorus(); //🎵🎶
}
```

All the logic is included in another file.

As you can see, the only differences are the double quotes for the string literals and the syntax of the lambda expression. Apart from that, it's the exact same thing as my tee-shirt.

Here's the output of the program, without any hardcoding:

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

Here's the repo: https://github.com/Drarig29/tee-shirt-song

So, did you guess the song?
Introducing JellyFish - Theme your vscode will love
Tags: javascript, programming, webdev, vscode
Published: 2021-05-30 18:14:47

From the day one of using visual studio code I always had a thought of designing my own theme one day. I wanted to customize each bit of its visuals but never had that much time to do so. A week earlier I started working on it as my side project and here I am writing this blog about its initial release. <br>
<br>

*JellyFish Installation Page*
![JellyPage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou812zizcq07vzuwh04y.png)

*Link:* https://marketplace.visualstudio.com/items?itemName=PawelBorkar.jellyfish
<br>
If you're a much into the design as like me you probably thought of designing your own custom vscode theme for yourself as well as for the other developers it feels great when someone likes and uses your work and on top of that offers suggestions, corrections, fixes and improvements that's the beauty of open source and I love it.  <br>
<br>

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ma8zwwx89wczkfi1sxod.PNG)  <br>

*Using Multiple columns in vscode with the JellyFish Theme* <br>

![Multiple Columns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w00r1oxtyibjfn84rejl.PNG)

*Terminal Accent*

![Terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2y1a1mzu08ggzu4gzvel.PNG)

*Repository Link (GitHub)* : [JellyFish](https://github.com/pawelborkar/vscode-jellyfish#jellyfish)  <br> <br>

### Vote of Thanks
*Thank you so much for reading this post and feel free to use the source code for your own projects and to publish your own theme. Create a PR suggesting any changes/improvements I would love to merge them.* <br><br>

> If you like my work then connect with me on [Linkedin](https://linkedin.com/in/pawelborkar) and follow me [Twitter](https://twitter.com/paweldiaries)