teleren/devto huggingface dataset:
Sitios útiles para trabajar con TailwindCSS
Tags: vue, javascript
Published: 2021-01-07 23:17:45

Aquí una lista de varios sitios de donde podemos tomar inspiración, para crear sitios usando componentes de TailwindCSS:

* [Tailblocks](https://tailblocks.cc/)
* [Meraki UI](https://merakiui.com/)
* [Wicked blocks](https://blocks.wickedtemplates.com/)
* [Tailwind components](https://tailwindcomponents.com/)
* [Tailwind toolbox](https://www.tailwindtoolbox.com/)
* [Tailzilla](https://tailzilla.app/)
* [Gust UI](https://www.gustui.com/)
* [Vue Tailwind](https://www.vue-tailwind.com/docs/modal)
* [Tailwind starter kit](https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation)
* [Tailzilla](https://tailzilla.app/)

En estos sitios podemos encontrar infinidad de ejemplos.

Espero te sean de utilidad y te animes a aprender TailwindCSS.
Configura hot reload en Laravel
Tags: laravel, php, webpack
Published: 2021-01-07 23:10:58

Laravel Mix nos provee una opción llamada "BrowserSync", aquí veremos como configurarla para que cuando hagamos cambios en nuestras plantillas blade, la pestaña del navegador con nuestra aplicación, recargue automáticamente.

### Modificar el archivo webpack.mix.js

Vamos a hacer uso de otra instancia de mix, abajo del codigo que ya esta presente:

```js
mix.browserSync({
    'proxy': 'tuapp.test',
})
```
Guardamos los cambios.

### Ejecutamos el comando en la terminal

```bash
npm run watch
```

Si no se ha realizado ningun comando previo como:

```bash
npm install
```

El proceso tardara un poco mas pero apenas unos 20 o 30 segundos.

### Nota

Si en este proyecto no se ha ejecutado el "watcher" con anterioridad, "npm" primero va a descargar todas las dependencias necesarias y nos solicitará que volvamos a ejecutar el mismo comando:

```bash
npm run watch
```

Con esto podremos abrir nuestro proyecto y este recargara cada vez que realicemos algún cambio.

Espero les sea de utilidad el tip!
Unifye | A Simple Contact Consolidation Service | Easter egg
Tags: javascript, vue, react
Published: 2021-01-07 23:05:47

Hello!

Wanted to show you something me and the team over at https://flytlabs.dev created, thought this forum may be interested. It's currently in a 'demo' phase, so you can only create anonymous tags - but we'll be releasing accounts and all the features that come along with them within the next month. It's built with Vue and React.

Check it out at https://unifye.me, you can read how the service works at the about page!

Also - there's an easter egg on the site (try hovering, clicking things a few times, etc). People who find it will have to complete a simple minigame - and will then be rewarded with a discount code for a month of free premium, and a 30% discount off a year subscription after that. Premium will come with a physical card to link a tag to, allowing people to quickly scan it to bring up the exact contact information you prefer.

Thanks for your interest!
100 Days of Code ~ Day 8
Tags: 100daysofcode, javascript, webdev, challenge
Published: 2021-01-07 23:05:08

Completed activity 9 of [JavaScript30](https://javascript30.com) which covered various console methods that can be used, most of which I'd never even heard of, which was cool. I particularly liked console.group and console.time interesting and may to try to using them in my development stages.

Finished off by completing the current section I was working on for the [Udemy course](https://www.udemy.com/share/101ZdQA0oddV9QR3Q=/) I'm taking about TDD With React in which I finished up testing on the first connected component with out any Redux middleware and the next section covers testing with Redux Thunk which I'll start tomorrow.
Day 283 : King
Tags: hiphop, code, coding, lifelongdev
Published: 2021-01-07 22:56:33

_liner notes_:
- Professional : Had a few meetings throughout the day. Other than that, I was working on updating some documentation. I have a sample app that I build on to test what's in the documentation to make sure everything still works as it should. There are some parts that don't have example code, so I fill that in. Pretty productive day.

- Personal : Last night, pretty much watched the insanity in the Capitol. What surprised me was that people were surprised. You have this idiot acting like he's King for 4 years and then wonder why he's willing to incite violence when it's time for him to leave. Definitely will be talking about this on the radio show this week. Got tired of that and went to sleep.

![Bandon Beach, Oregon, USA with large land masses coming out of the water at sunset.](https://dev-to-uploads.s3.amazonaws.com/i/x8cmhqx9x6cc89ienq1j.jpg)

Noticed that my website stopped showing the latest blog post. Wonder if Dev.to has changed anything. I'll look into that later. Going to finish up what I was working on earlier since I'm on a hot streak so I don't have to do it tomorrow. Probably end the night watching the new BBC show I recorded on Sunday.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube R41Bw_wlQ9w %}
Monkey ASCII
Tags: dohackathon, html, javascript
Published: 2021-01-07 22:53:37

## What I've built

A joke-POC to celebrate the DigitalOcean App Platform Hackathon on DEV.

It takes any img and converts it to ASCII. It's like going back to school to make doodles. 

### Category Submission: 

Random Roulette for obvious reasons ^^.

### App Link

The "Ocean app" is here :

https://monkey-ascii-wcs8f.ondigitalocean.app/

### Screenshots

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ckdg76lhdsb47pzog5tc.jpg)

### Link to Source Code

[deleted repo]

### Permissive License

MIT

## Background

I'm quite fascinated by the ASCII format and I wanted to test the Digital Ocean platform, especially pipes and builds.

The UI is amazing. They automatically detect what I'm using like yarn, node, and they set the `yarn build` command for me.

Very smooth and straightforward. I don't have to set many rules and commands, the build is automatic, every time I push something to the GitHub repo.

Indeed, my code is pretty basic, but their UI seems robust anyway.

What impresses me the most is how smart is the automatic deployment configuration. Nice feature.

### How I built it 

With JavaScript, TailwindCSS and [this library](https://github.com/victorqribeiro/imgToAscii).
Rust - my dumbness with grokking impl<T>
Published: 2021-01-07 22:49:22

The first time I came across code like this 
```rust
impl<T> MyTrait for MyStruct<T> {...}
``` 
I had wondered why must the generic type `T` show up next to both the `impl` as well as `MyStruct`. Wasn't `MyStruct<T>` enough to convey the intent?

I had my aha! moment today while working on a program that looked something similar to this:
```rust
struct MyStruct<T> {
    x: T    
}

trait Bogus {
    fn do_nothing(&self);
}

// missed the `impl<T>`
impl Bogus for MyStruct<T> {
    fn do_nothing(&self) {
        println!("do nothing")
    }
}

// somewhere way down in the code
type T = i32;

```
Out of habit, I had missed the type parameter `T` next to the `impl` keyword. The code still managed to compile. 

Later, I noticed what had happened. So, did I end up implementing the `Bogus` trait for the generic `MyStruct<T>` or was it for `MyStruct<i32>`? As you might have already guessed, it's the latter.

It was now so obvious that the `T` next to `impl` serves the purpose of disambiguation. The compiler can't just assume it's a generic type just because the type declaration isn't immediately in our focus.

```rust
// implement Bogus Trait for MyStruct<T> where T could be any type
impl<T> Bogus for MyStruct<T> {
    fn do_nothing(&self) {
        println!("do nothing")
    }
}

// implement Bogus Trait for MyStruct<T> where T is a type declared somewhere
impl Bogus for MyStruct<T> {
    fn do_nothing(&self) {
        println!("do nothing")
    }
}

```
I feel so dumb that it took me so long to grok something so obvious!
Cómo crear tu perfil de Github con README.md
Tags: github, portfolio, marcapersonal
Published: 2021-01-07 22:08:59

En el 2020, Github lanzó una nueva característica a su sitio, que te permite crear un repositorio que luego puede ser desde una carta de presentación hasta tu propio portafolio. En este post quiero enseñarte cómo puedes crear tu perfil en Github.

Aquí te dejo mi [perfil](https://github.com/erivera23), si quieres darme feedback lo puedes comentar aquí o a mi perfil de [Twitter](https://twitter.com/efrainriivera). Me encantaría.

Pero bueno, vamos a lo que venimos.
#Pasos para crear tu perfil de Github
1. Accedemos a este [link](https://github.com/new)
2. El nombre de nuestro repositorio debe ser igual a nuestro usuario de Github.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ubujokpzf9mdrxhg9cw0.png)
*Me aparece ese mensaje donde advierte que ya tengo un repositorio con ese nombre, pero es porque yo ya realicé mi perfil, a ti no debería de aparecerte.*
3. Nos aseguramos de hacer el repositorio publico.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bpbh4xajzhshesknccec.png)
4. Marcamos la opción de iniciar el repositorio con README.md
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/nzsepf8i7avuz6skbt3y.png)
*Esta parte es muy importante, puesto que luego vamos a editar este archivo para diseñar nuestro perfil y agregar todo lo que queramos: texto, imágenes, emojis y también gif's (¿por qué no?)*
5. Hacemos clic en el botón "Crear repositorio"

Y listo, ahora solamente debes proceder a editar y darle el diseño que gustes. Have fun!

**Te dejo un enlace como recurso en caso que no tengas experiencia con markdown** [Haz clic aquí](https://rahuldkjain.github.io/gh-profile-readme-generator/)
Using matches & regex in Twig! 
Tags: twig, php, regex, matches
Published: 2021-01-07 21:58:11

---
title: Using matches & regex in Twig! 
published: true
description: matching in twig is weird.
tags: twig, php, regex, matches
---
## Problem
You may be having trouble with using regex and links in twig/php!

## Typical Solution
Generally, You'd want to escape a slash!
*Example:*
`/path/to/resouces/`
would look something like this in js:
`/\/path\/to\/resources\//`
`/` === delimiter
`\/` === escaped slash

This doesn't play nicely with twig!
I figure twig is trying to be smart and escape things for you. 
_but I'm not *really* sure whats going on._

## Real Solution
(Thankfully, php provides a way to work around this issue.)[https://www.php.net/manual/en/regexp.reference.delimiters.php]

*Alternate delimiters:*
`/foo/` | `#foo#` | `+foo+` | `%foo%` | `<foo>` | `(foo)` | `{foo}` | `[foo]`
All of the above delimiters are valid! 

## Applied Solution
This means, if we take our URL:
`/path/to/resouces/ `
We just need to wrap it with a delimiter which isn't used in the string.
*Example:*
`{/path/to/resouces/}`
That's it! The regex should work how you'd like it to.

## Wrap Up
Regex is weird.
Twigs undocumented behavior is weird.
together they're an afternoon of frustration.
Explain git rebase to me like I'm five
Tags: explainlikeimfive, git
Published: 2021-01-07 21:14:40

<span>Photo by <a href="https://unsplash.com/@officestock?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Sebastian Herrmann</a> on <a href="https://unsplash.com/s/photos/learning-and-development?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

How does this work?
What obstacles are you facing with your Open Source project? 🥵
Tags: discuss, opensource, npm, github
Published: 2021-01-07 20:39:42

I’ve tried launching a couple *small* open source projects in my time and it has been tough. 😞 

Hard to gain an audience. Hard to build a community. And many more.

## Why is this?

Well, I’m not sure. There is obviously something in a developer’s path that blocks them from achieving their goals. 😒 

Is there something that would make **building/launching/growing** your open-source project easier?

Let us know in the comments below so we can help you out! 😃
📈 The Evolution of CIAM
Tags: ciam, security, customers, identity
Published: 2021-01-07 20:35:08

👥 Auth0 Co-Founder and CEO Eugenio Pace on why Customer Identity Access Management (CIAM) was a solved problem that got unsolved again as our context evolved.
[Read more](https://auth0.com/blog/the-evolution-of-ciam/?utm_source=content_synd&utm_medium=sc&utm_campaign=ciam)
Python utility belt: unpacking tuples
Tags: python, programming
Published: 2021-01-07 20:20:48

Hi devs,
![hi](https://media.giphy.com/media/xUySTQZfdpSkIIg88M/giphy.gif)

Today I would like to show you something interesting that you can use. Take a look at this code:
```python
things = [('teen', '10'), ('twenty', '20')]
```
How do you print this? You've probably already thought of some ways to do this and now I'm going to show you some::
```python
for index, (word, number) in enumerate(numbers):
    print(index, word, number)
```
When you run this code, you'll receive it:
```
0 teen 10
1 twenty 20
```
It is simple and useful, is it?
![easy](https://media.giphy.com/media/WUay9BLLngVU3zs95c/giphy.gif)
Hope you enjoy it, have a great day and an AWESOME year.
What are the types of module in JavaScript?
Published: 2021-01-07 20:14:29



### Why
allow code of different authors to work well together

### Main goal
- Encapsulation
- Hiding private details from global scope

### Methods
- DIY by using closure, object, class
- Node.js using require()
- ES6 using import and export


### Using DIY Closure
usually by IIFE, so that everything is inside of that function scope

### Using Node.js require()

To export

```
    exports.foo = …
```
or to export a single item
```
    modules.exports = …
```

To import

```
const http = require("http");
const stats = require("./stats.js");
```

webpack can use this format too… although, it might be better just to use the ES6 import and export

### ES6 import export

- each file is a module
- all things private to the module unless explicitly exported

#### Export
all over the code, or at the end using one export keyword for things to export

```
export foo = 123;
export function bar() { … }
export class Wah…
```
Or, at the very end, 

```
export { foo, bar, Wah };
```

#### Export Default
This is so that other modules can easily import it using 
```
import Foo from "...";
```
and it was exported by
```
export default Foo;
```

#### Import
Import the default by
```
import Foo from "./Foo.js";
```
Import multiple exports by
```
import { foo, bar } from "./Foo.js"
```
Possible but a little uncommon to import both
```
import Foo, { bar, wah } from "./Foo.js"
```
Import renaming
```
import Foo as Bar from "./Foo.js"
```

It is possible to re-export too.

For more info, can refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
5 extensiones de VS Code para frontend
Tags: vscode, webdev, javascript, spanish
Published: 2021-01-07 20:02:18

Durante los últimos 3 años, estuve probando extensiones de VS code para poder facilitar el día a día, y estas son mi top 5 para desarrollo frontend:

#### Turbo Console Log

Esta extensión te permite generar solo con un shortcut "ctrl + alt + L" un `console.log` con información importante para ser identificados rápidamente en el explorador.

Ejemplo:
```js
console.log("🚀 ~ file: example.tsx ~ line 97 ~ handleExample ~ valueExample", valueExample)
```

La estructura es bastante simple, primero el archivo donde está el console.log, la linea del archivo, la función en donde está el archivo y la variable que se asigna al `console.log`.

[Descargar](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log)

#### Auto Close Tag
Muchas veces cuando inicias en el desarrollo de frontend (y aun después de varios años) puedes cometer el error de omitir la etiqueta de cierre de un div o algún párrafo, o escribir mal el nombre de la etiqueta de cierre, estos errores al ser tan pequeños son difíciles de encontrar entre tantas lineas de código, Auto Close tag es la solución.

Ejemplo:
```html
// Sin Auto Close Tag
<div>
  <p>Auto Close Tag</o>
</dib>

// Con Auto Close Tag
<div>
  <p>Auto Close Tag</p>
</div>
```

[Descargar](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

#### Auto Rename Tag
Algunas veces necesitamos cambiar etiquetas, por alguna otra, como párrafos por span, o por un, Auto Rename Tag nos ayuda a hacer esto bastante rápido y con muy poco margen de error.

Ejemplo:
```html
// Sin Auto Rename Tag
<div>
  <p>Auto Close Tag</p>
</dib>

// Con Auto Rename Tag
<div>
  <h2>Auto Close Tag</h2>
</div>
```

[Descargar](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

#### Import Cost
Cuando trabajas con algún framework de Javascript, siempre es bueno saber cuando pesa alguna dependencia que estas usando para saber si es la mejor opción, Import Cost te muestra el peso de cada import que tienes en tus archivos.

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

[Descargar](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

#### GitLens — Git supercharged
La ultima y muy útil al trabajar en un equipo de desarrollo es GitLens, te da información sobre la línea de código en que estes situado, como quien la modifico, cuando, el commit en el que se modifico, y link directo a ese commit.

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

[Descargar](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
Creating an Animated Accordion List Component in VueJS
Tags: vue, javascript, ionic, tutorial
Published: 2021-01-07 19:32:33

####[See My Upcoming Book On Ionic & Vue JS](http://bit.ly/ionicvuebook)
---
## Creating an Animated Accordion List Component in VueJS

Using vue animations, vue slots & HTML data attributes I walk through how to create a component that you can pass a list of data and it will create a list with a header and a body that can be expanded and collapsed.

This video is not heavy on the ionic framework as most of my other videos are, but this component that is built here can be used in ionic or a plain vuejs application

{% youtube 40W4ojKlSYE %}

### Source Code

{% gist https://gist.github.com/aaronksaunders/8590316dabb7dba3f1acd15af0068977 file=acc.vue %}

### Links and References Used
- Data Attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- Vue Animations: https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components
- Vue Slots: https://v3.vuejs.org/guide/component-slots.html#scoped-slots

### Get Information On Upcoming Ionic VueJS eBook
- https://leanpub.com/ionic-vue-sqlite-crud/
Connect to react-native server using ADB reverse.
Tags: reactnative
Published: 2021-01-07 19:21:30

---
title: Connect to react-native server using ADB reverse.
published: true
description: 
tags: ReactNative
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/drx3axkj6sqqxgulw9up.png
---
Add this connect script to your ` package.json`.
```json
{
...
"scripts": {
   ...
    "connect": "adb reverse tcp:8081 tcp:8081 && adb reverse tcp:8097 tcp:8097"
  }
}

```
When you connect your physical device while developing a react native app, sometimes you might remove the USB to use your phone.

Now to connect it back you would generally run `npm run android` which might take some time. 

Instead, you could run `npm run connect` which would reverse the ports 8081 and 8087. This would take far less time when compared to `npm run android`.

And you can continue your development. 🙂
How to host your static site for free with DigitalOcean App Platform
Tags: digitalocean, github, codenewbie, aws
Published: 2021-01-07 19:21:24

Hi everyone,
In this guide I will show you how you can host your static site for free with DigitalOcean App Platform and integrate git repo with DigitalOcean. Hope you like it.

Check out my video guide here:
{% youtube VtiiReW_QHA %}
Beautify docker container output
Tags: todayilearned, docker, bash
Published: 2021-01-07 19:15:16

Sometimes as a developer you have to manage some containers.
To check container infos you type `docker container ls` and you get this ugly output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hysgpwildfrs2qsfu8bq.jpg)

It is not very legible but there is a solution to this, and it is easier than you think.

First create a variable and store it via
`export DOCKER_FORMAT="ID\t{{.ID}}\nName\t{{.Names}}\nImage\t{{.Image}}\nPorts\t{{.Ports}}\nCommand\t{{.Command}}\nCreated\t{{.CreatedAt}}\nStatus\t{{.Status}}\n"
`
Then you can use it via `docker ps --format=$DOCKER_FORMAT` and you get this beautiful output

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jllobicuny53xd3rsjny.jpg)

Another way to solve this is to write a config file. I will write another post for this issue.
Product Owner 101
Tags: agile, scrum, watercooler, management
Published: 2021-01-07 19:14:20

The Agile trend is here to stay with the buzz words of project management like  **Scrum**, **Agile**, **Scrum Master**, and the **Product Owner**. Around 97% of all the organizations have been applying Agile practices with roles like the *Product Owner*, *Development Team*, and the *servant leader – The Scrum Master*.

*Let’s look into the product owner’s role and expectations at a high level:*

1.	**Individual or Individuals?**
The Product Owner is an Individual probably an SME who knows what is being built and what the customer’s needs are. Product owners are the voice of the customer. There can’t be multiple product owners for a development team.
2.	**Pseudo Stakeholder / Business**
Many times, Product Owners are the pseudo stakeholders who are there to guide the team to understand the business need, hence their understanding of process/work flow needs to be impeccable. 
3.	**Contributes to Vision and Strategy**
Product Owner borrows the vision and strategy from the senior leadership and contributes by working with the team to achieve the vision, strategy can be modified based on the need. 
4.	**Assist the team**
A Product Owner is expected to add value in user journey mapping, create process and work flow charts, epics, and user stories to aid the development team. They also help the team to prioritize the work. 
e.g. Adding a screen print or wireframe always helps !

Please let me know if I missed anything.

Video by Henrik Kniberg [PO in a nutshell](https://www.youtube.com/watch?v=502ILHjX9EE)
Pdf Converter
Tags: dotnet, csharp
Published: 2021-01-07 19:08:36

If you need a nice pdf convertor NuGet packages here is the good one. You can use with .net framework and .net core

[Select.HtmlToPdf.NetCore](https://www.nuget.org/packages/Select.HtmlToPdf.NetCore/)

Sample code:

```
HtmlToPdf converter = new HtmlToPdf();
PdfDocument doc = converter.ConvertUrl(url);
doc.Save("Book" + "_" + page + ".pdf");
doc.Close();
```

Happy coding days
What do you predict for 2021?
Tags: discuss, future, watercooler
Published: 2021-01-07 19:05:11

---
title: What do you predict for 2021?
published: true
description: Let's ask what the future holds for microservices
tags: discuss, future, watercooler
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/mcza6araxhaay8dngrld.jpg
---

*cover image by [Amir Pashaei](https://commons.wikimedia.org/w/index.php?curid=82983065)*

I was recently asked to [predict what I thought would happen to microservices in the new year](https://www.devopsdigest.com/2021-container-and-microservices-predictions). It was a tough question and I couldn't help but predict a backlash against microservice architecture.

What do you think will happen to microservices in 2021?
#Day 23: Made a Contact Form page using Html and CSS
Tags: 100daysofcode, html, css, codepen
Published: 2021-01-07 18:56:58

<!--My submit button is not working. Can anyone help me please?-->
There was a typo in the form name. I have corrected it now and it works fine.
{% codepen https://codepen.io/_mahimasingh_/pen/PoGaymE %}