teleren/devto huggingface dataset:
create a fake webmail with roundcube like mailtrap
Tags: php, productivity, debug
Published: 2021-08-24 16:23:24


you can use a fake webmail for catch your emails from 
a smtp docker server. Like [mailtrap.io](mailtrap.io)

first of all, you need use the image:eaudeweb/mailtrap
in your docker-compose file.

Then you can config the mapping of ports and the enviroments
variables for access.

As follow:

```php
 mail:
    container_name: sys_mail
    restart: unless-stopped
    image: eaudeweb/mailtrap
    ports:
      - "8125:80"
      - "2525:25"
    environment:
      - MT_USER=mailtrap
      - MT_PASSWD=mailtrap
      - MT_MAILBOX_LIMIT=512000001
      - MT_MESSAGE_LIMIT=102400001
    networks:
      orion-office-network:
        ipv4_address: 172.16.4.3
```

Very important your address network! because
your enviroment variable for you should be the address of your container address: 

this
```
###> symfony/mailer ###
MAILER_DSN=smtp://172.16.4.3:25?verify_peer=0
###< symfony/mailer ###
```

you can acces to the admin-panel in :
```
172.16.4.3:80

user:mailtrap # MT_USER enviroment variables
pass:mailtrap # MT_PASSWD enviroment variables
```

Other important thing is the **?verify_peer** parameter
by default with value true.

if you have problems with the TLS Peers, you can
disabled only for debug . [TLS Peer verification](https://symfony.com/doc/current/mailer.html#tls-peer-verification)

![Round-Cube-Panel-Admin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dztmij9n3wdc2d73594d.png)



Thanks friends of [Eau de web](https://github.com/eaudeweb)
Resistor Color | #3 | Exercism.io | Learn JavaScript Through Test Driven Programming Challenges
Published: 2021-08-24 16:20:27


{% youtube ASSmCmQTS-o %}

Get started with the Exercism.io Programming challenge site https://exercism.io/my/tracks. Learn about Test Driven Development, JavaScript, Node/NPM, Conditionals, and Arrays.

Checkout this video on our player: https://play.codecast.io/NVlpReAx5ay7...

Watch more of Brooklin Myers videos here :https://www.codecast.io/users/brooklin
Not able to install Chaos experiments in my AWS EKS
Published: 2021-08-24 16:20:10

Hi, I have successfully installed litmus in my AWS EKS and related PODs/SVCs are running.

Now when I try to install the chaos experiments, I get the below error..

kubectl apply -f https://hub.litmuschaos.io/api/chaos/2.0.0?file=charts/kube-aws/experiments.yaml

unable to recognize "https://hub.litmuschaos.io/api/chaos/2.0.0?file=charts/kube-aws/experiments.yaml": no matches for kind "ChaosExperiment" in version "litmuschaos.io/v1alpha1"

Can you please help to resolve this ? Kindly refer to the attached screen shot.

Thanks...
Workspace recomendado para Testing en React 17 | Jest + Enzyme 🧪
Tags: react, jest, testing, spanish
Published: 2021-08-24 16:10:32

En este breve post ire directo al grano y describiré como configurar un proyecto de React 17 para realizar unit testing usando Jest. Ojo, es solo una recomendación, nada mas que eso.

## **Configuración básica**
* Creamos un proyecto con `create-react-app`
* Instalamos **Enzyme** una libreria que se ejecuta sobre **Jest** y que permite escribir pruebas mas simples. 
Se recomienda instalar la versión de Enzyme acorde a la versión de React del proyecto, ya que React va por la versión 17 entonces instalaremos [Enzyme 17](https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17)
Puedes ejecutar el siguiente comando el el root del proyecto:

```js
npm install --save-dev @wojtekmaj/enzyme-adapter-react-17
```
* Ya que Jest esta orientado a hacer pruebas usando snapshots una dependencia para poder ver dichos spanshots como strings en el proyecto es [enzyme-to-json](https://www.npmjs.com/package/enzyme-to-json)
Puedes instalarlo asi: 
```js
npm install --save-dev enzyme-to-json
```

* En el archivo `setupTest.js` pegamos la siguiente config:
```js
import {createSerializer} from 'enzyme-to-json';

import Enzyme from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17';

Enzyme.configure({ adapter: new Adapter() });
expect.addSnapshotSerializer(createSerializer({mode:'deep'}))

```

Para probar todo el entorno montado:
Creo un componente sencillo, por ejemplo `Header.js`

```js
import Header from './components/Header';

function App() {
  return (
    <div className="App">
      <Header titulo={'Buenos dias'} />
    </div>
  );
}

export default App;

```
Y ahora una prueba básica:
```js
import React from 'react';
import {shallow} from 'enzyme';
import '@testing-library/jest-dom'
import Header from '../components/Header';

describe('Pruebas en <Header />', () => {
    test('<Header /> se renderiza bien', () => {
        const titulo = 'Buenos días';
        const jsxHeader = shallow(<Header titulo={titulo}/>);
        expect(jsxHeader).toMatchSnapshot();
    })
    
});
```

Finalmente ejecuto las pruebas con `npm run test` y listo! 

Pasa la prueba, lo que significa que todo el workspace esta bien.
Terraform Associate Certification: Conditional Expression & Local values
Tags: terraform, cloud, aws, devops
Published: 2021-08-24 16:02:09

## Conditional Expression
If you have programmed in other languages such as C or Javascript you may know the *ternary operator*. Well, in Terraform you can use it as well and it is nothing but a conditional expression that uses the value of a bool expression to select one of two values.

The syntax of it is as follows:

`condition ? True_value : False_value`

If condition is true, then the returned value will be True_value, otherwise will be False_value.

Let's see an example of this:

![Screen Shot 2021-08-24 at 10.47.55](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfsoqyoxnyt1td4mao2i.png)
 
In this case, the amount of aws_instances will be created according to the value of the bool variable named *istest*. As you can see in the image, this value is set to false so only one *aws_instance.prod will be created* 😉.

## Local Values
A local value assigns a name to an expression, allowing it to be used multiple times within a module without repeating it.
Let's see an example to understand this better, in the next image you will see that I created a set of tags within a **locals block**. 

![Screen Shot 2021-08-24 at 10.57.19](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqiwjp9gw6zkwvulxibj.png)
 
I'm using these tags inside two different resource blocks but I'm not typing every tag on it, that's the advantage of the local values. 

### Local values support for expression
Local values can be used for multiple different use-cases like having a conditional expression.

![Screen Shot 2021-08-24 at 10.58.47](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eipg07kk3ipwy8f5t635.png)

*Use local values only in moderation, in situations where a single value or result is used in many places and that value is likely to be changed in future*.
How to Build a Scraper with Python and Scrapy
Published: 2021-08-24 15:31:10

Scrapy is an open-source Python framework designed for web scraping at scale. It gives us all the tools needed to extract, process, and store data from any website.

The beauty of this framework is how easy it is to build custom spiders at scale and collect specific elements using CSS or XPath selectors, manage files (JSON, CSV, etc.), and maintain our projects. If you’ve ever wanted to build a web scraper but wondered how to get started with Scrapy, you’re in the right place.

In this Scrapy tutorial, you’ll learn how to:

Install Scrapy on your machine
Create a new project
Use Scrapy Shell to test selectors
Build a custom spider
Extracting specific bits of data
Import your scraped data to a JSON or a CSV file

https://www.scraperapi.com/blog/scrapy-web-scraping/
When in doubt console.log it out
Published: 2021-08-24 15:20:25

I'm currently working on an app that requires me to fix a complex feature that allows the user to upload multiple images to Amazon s3 cloud storage and I'm completely lost as to where the problem is coming from. I first looked at the code with my front-end engineer and my data science engineer to get a better understanding of how the feature was originally implemented. I then start from the beginning which is the front-end code. While debugging I found a more efficient way of uploading multiple files so I implemented that and confirm from my back end that the file is being uploaded. I then check the back-end upload function to see if it has successfully uploaded the file to s3. While debugging the back end I decided to re-write the entire upload function keeping what is important and changing what needs to change. Along the way there were a lot of challenges, bugs popping up out of nowhere and happening at different time intervals. One thing that really helped me was console logging every part of the way to see where the function break and to navigate the file structure. And yes, I know that the debugger is way more efficient than putting in console.log but this title wouldn't rhyme and sound as cool.
TIL: How having Dark mode classes not removed for Tailwind prod
Tags: css, tailwindcss, todayilearned
Published: 2021-08-24 15:19:39

Recently I did some work on my website Stream Closed Captioner to incorporate a dark mode. Locally everything went smoothly but I came across an issue in the production build where all the dark mode styles weren't being added.

After much head scratching and changing random things here and there I finally discovered a solution. 

I needed to add the dark mode classes explicitly to the safe list of classes in my Tailwind config. Not sure why I had to since the official guide didn't mention it, but it sure did the trick. Here is my Tailwind config file for anyone looking to solve their issue,

```css
module.exports = {
  darkMode: 'class',
  purge: {
    enabled: process.env.MIX_ENV === 'prod',
    content: ['../lib/**/*.eex', '../lib/**/*.leex'],
    options: {
      safelist: ['dark'],
    },
  },
  plugins: [
    ...
  ],
};
```
I let this AI take over my twitter
Published: 2021-08-24 15:12:42

have you ever heard about "this person does not exist"? it is a really cool website only design to achieve one complex task - generating photorealistic photos of humans that just do not exist.  
![Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt97o0m1pwbxf8shuawt.jpg)


you can check it out at thispersondoesnotexist.com , and I can assure you, you will be surprised with how much realistic-looking are the factional characters it manages to produce.  

after "this person does not exist" showed up on the internet back in 2019 some new sites started to pop out all over the internet that used the same concept of "this person does not exist" - generating stunning fictional objects, such as humans, cats, art, websites and much more... there is actully a website called ["this x does not exist"](https://thisxdoesnotexist.com) that contains a list of most of them.

![this cat does not exist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7bcsy064eqqi74knt0a.png)

this concept aspired me to use the Twitter API alongside a few more APIs and a couple of hours from my time to transform my personal Twitter account into ["this twitter personality does not exist"](https://twitter.com/ShmuelHizmi), it is simple, every ten minutes my twitter's name, profile image, banner, and bio information change to present a different character, I went from being myself just this morning to being "Mitsuko Bongo", "Marcellus Prima" or "Carlo Behunin" and the race is still going, if you are interested in checking out the project you can find me on Twitter at [@ShmuelHizmi](https://twitter.com/ShmuelHizmi).  

here are a few examples -  

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

![my twitter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g06qbnz4d954lnr26lcg.png)
Python challenges_2
Tags: python, beginners, webdev, challenge
Published: 2021-08-24 15:10:14

##level of challenge = 2/10
###Middle letter

- Write a function named mid that takes a string as its parameter. 
- Your function should extract and return the middle letter. 
- If there is no middle letter, your function should return the empty string.
- For example, mid("abc") should return "b" and mid("aaaa") should return "".

Hint

- First check if the string's length is even, and if so, return "". 
- You can use the % (modulo) operator to check. 
- An even string's length modulo 2 is 0, while an odd string's length modulo 2 is 1. 
- You can google "python check if number is even or odd" for clarification.
- Also, note that in Python, an index must be an integer, not a floating-point number. So 2 is a valid index, but 2.0 is not. 
- Therefore use integer division // to calculate the index, or cast the float to an integer with int().

####My solution
```
def mid(my_string):
    length = len(my_string) % 2
    if length == 0:
        return ""
    elif length != 0:
        middle = len(my_string) // 2
        return my_string[middle]
print(mid("cars"))
```
####The another solution 

- this approach uses // which is integer division in Python 3
- alternatively, use / and int() in combination.
```
def middel(string):
    if len(string) % 2 == 0:
        return ""
    return string[len(string)//2]
print(middel("abc"))
```
Add your solution in the comment :)
Detectar campo modificado al guardar un modelo en Laravel
Tags: laravel, php
Published: 2021-08-24 15:07:32

Bienvenido a a tod@s!

Este es un post muy corto solo para dejaros este pequeño Snippet de Laravel.

Se trata de detectar cuando el campo de un modelo de Laravel ha sido modificado, en este caso el campo *email* de un usuario:

```php
// El evento se disparará cuando se haya actualizado un registro del modelo
static::updated(function ($userModel) {

    // Vemos si el campo email ha sido modificado con getDirty()
    if(isset($userModel->getDirty()['email'])) {
        // el campo "email" ha sido modificado
    }

});
```
Learn Matlab and Python
Tags: matlab
Published: 2021-08-24 15:02:48

Well learning Matlab and Python is an important aspect of your engineering journey. When I started to learn these languages, I was pretty sure that one day if I succeed in learning these, its gonna benefit me. 
I followed a lot of tutors but none of them were teaching step by step. I was pretty confused and thought that there is a great need for someone to explain these things step by step. 
A month later I came across a website which was teaching in the way I wanted it to be. I would reccommend you to start learning these languages, As its gonna benefit you some day.

<a href=”https://www.entechin.com”>Tutorials</a>
How to Implement Infinite Scroll with Vanilla JS
Tags: webdev, javascript, programming
Published: 2021-08-24 14:43:37

**Infinite scroll** is often used on social media sites such as Twitter or Pinterest. The feature allows users to load some pictures/contents on a website and then load more once reaching the end of the webpage. 

I used [Unsplash API](https://unsplash.com/documentation) to get random pictures. This article will focus on how to use JavaScript to make use of some properties to achieve infinite scroll. You can find other project files (HTML or CSS files) in this [repo](https://github.com/tingchun0113/infinite-scroll-unsplash-api).

---
##Four Properties to Achieve Infinite Scroll
A) `window.scrollY`: How far the document has been scrolled from the top
B) `window.innerHeight`: The visible part of the window
C) `document.body.offsetHeight`: The height of the entire document
D) `1000px (or any value)`: The distance from bottom of document

The diagram below better illustrates these properties:
![JavaScript Web Projects: 20 Projects to Build Your Portfolio](https://cdn-images-1.medium.com/max/800/1*N1F9eLg_q3-gGMv2cB-cMg.png)

---
Looking at the above, we can listen to the scroll event:
```
If A (scrollY) + B (innerHeight) >= C (document height) - D (1000px) 
-> load more photos
```
```
// Check to see if scrolling near bottom of page; load more photos
window.addEventListener('scroll', () => {
  if (
    window.scrollY + window.innerHeight >= document.body.offsetHeight - 1000
  ) {
    getPhotos();
  }
});
```
---
##Final Thoughts
There're other tools ([Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)) to implement infinite scroll. If you find this article useful or have any questions, connect me on [LinkedIn](https://www.linkedin.com/in/tingchunw/) or follow me on [Medium](https://tingchun0113.medium.com/) for more articles.
9 Amazing  open-source Storybooks
Tags: storybook, react, designsystems, docs
Published: 2021-08-24 14:19:19

If you are going to build a UI component library or a design system for your project, [Storybook](https://storybook.js.org/) is a great tool to document it beautifully and cleanly. 

But before you begin, you might need some inspiration as there are dozens of ways to do it, and everyone seems to take a slightly different approach. Gladly, there are hundreds of brilliant open-source projects that use Storybook.

Here's a list of some that I found the most inspiring and easy to understand:

---

### 1. [WFP](https://uikit.wfp.org)
![WFP storybook welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu3t2hni9d9igwxxrnbv.png)

⚙️ [Source code](https://github.com/wfp/ui)

---

### 2. [Clarity Core](https://clarity.design/storybook/core)

![Clarity storybook welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqxf0vjrkur9b6er975j.png)

⚙️ [Source code](https://github.com/vmware/clarity/tree/next/packages/core)

---

### 3. [Circuit](https://circuit.sumup.com)

![Circuit storybook welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ry9qvick3qw48mc41wec.png)

 ⚙️ [Source code](https://github.com/sumup-oss/circuit-ui/)

---

### 4. [Talend](https://design.talend.com/?path=/docs/welcome--page)
 
![Talend storybook welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf42et1eqhydxwejjo8t.png)

 ⚙️ [Source code](https://github.com/Talend/design-system)

---

### 5. [Carbon](https://carbon.sage.com/?path=/story/welcome--welcome-page)
 
![Carbon storybook welcome page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/to1db8cklgdocod9jiij.png)

 ⚙️ [Source code](https://github.com/Sage/carbon)

---

### 6. [Grafana](https://developers.grafana.com)
 
![Grafana storybook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yg25ftwxlj3l48n3sm9b.png)

 ⚙️ [Source code](https://github.com/grafana/grafana/tree/main/packages/grafana-ui)

---

### 7. [Qui](https://qvant-lab.github.io/qui-max/?path=/story/intro--page)
 

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

 ⚙️ [Source code](https://github.com/Qvant-lab/qui-max)

---

### 8. [Orbit](https://orbit.sharegate.design)

![Orbit storybook page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvgfkl643noio8kr3ton.png)

 ⚙️ [Source code](https://github.com/gsoft-inc/sg-orbit/tree/master/storybook)

---

### 9. [Chroma](https://lifeomic.github.io/chroma-react/?path=/story/form-components-textfield--all)
 
![Chroma storybook page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0yupl8ldi5sw1u3j6up.png)

 ⚙️ [Source code](https://github.com/lifeomic/chroma-react)


--- 

I am sure there are hundreds of nicely made Storybooks out there, and I would love to see them. Share your favorites in the comments section! 👏
Frenemies part 2: What a difference a (Perl) module makes
Tags: perl, rakulang, perl6, xml
Published: 2021-08-24 15:03:15

---
title: Frenemies part 2: What a difference a (Perl) module makes
published: true
date: 2021-08-24 14:00:00 UTC
tags: Perl,RakuLang,Perl6,XML
canonical_url: https://phoenixtrap.com/2021/08/24/frenemies-part-2-what-a-difference-a-perl-module-makes/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ph6o1xhdwmz7bbus6re.jpg
series: Perl and Raku
---

[Last week](https://phoenixtrap.com/2021/08/17/perl-raku-best-frenemies/) I explored using the [Inline::Perl5](https://modules.raku.org/dist/Inline::Perl5:cpan:NINE) module to port a short [Perl](https://www.perl.org/) script to [Raku](https://raku.org/) while still keeping its Perl dependencies. Over at the Dev.to community, [Dave Cross pointed out](https://dev.to/davorg/comment/1hd1d) that I could get a bit more bang for my buck by letting his [Feed::Find](https://metacpan.org/pod/Feed::Find) do the heavy lifting instead of [WWW::Mechanize](https://metacpan.org/pod/WWW::Mechanize)’s more general-purpose parsing.

A little more [MetaCPAN](https://metacpan.org/) investigation yielded [XML::Feed](https://metacpan.org/pod/XML::Feed), also maintained by Dave, and it had the added benefit of obviating my need of [XML::RSS](https://metacpan.org/pod/XML::RSS) by not only discovering feeds but also retrieving and parsing them. It also handles the [Atom syndication format](https://datatracker.ietf.org/doc/html/rfc4287) as well as RSS _(hi [daxim](https://www.reddit.com/u/daxim/)!)_. Putting it all together produces the following much shorter and clearer Perl:

{% gist https://gist.github.com/mjgardner/75ab37ff5c7da0b91784f05335a6c440 %}

And here’s the Raku version:

{% gist https://gist.github.com/mjgardner/9edadb77708908a4aae0d12de44b458d %}

It’s even closer to Perl now, though it’s using the [`first`](https://docs.raku.org/routine/first) routine rather than subscripting the `@feeds` array and [leaving off the the `$_`](https://docs.raku.org/language/variables#index-entry-topic_variable) variable name when calling methods on it—less punctuation noise often aids readability. I also took a [suggested `exit` idiom](https://www.reddit.com/r/perl/comments/p64ecr/perl_raku_best_frenemies/h9dzgih/) from Raku developer [Elizabeth Mattijsen](https://liz.nl/) on Reddit to simplify the contortions I was going through to `exit` with a simple message and error code.

There are a couple of lessons here:

- A little more effort in module shopping pays dividends in simpler code.
- Get feedback from far and wide to help improve your code. If it’s for work and you can’t release as open-source, make sure your [code review](https://en.wikipedia.org/wiki/Code_review) process covers readability and maintainability.

* * *

_Cover image: [“Frenemies”](https://www.flickr.com/photos/7471115@N08/6027731298) by [Mr. T in DC](https://www.flickr.com/photos/7471115@N08) is licensed under [CC BY-ND 2.0](https://creativecommons.org/licenses/by-nd/2.0/?ref=ccsearch&atype=rich)_
HighlightJS - How to show some code safely?
Published: 2021-08-24 11:06:36

In our job, it can be really useful to expose a bloc of code without execute it. Generally, we can use Markdown or some Wiki to do it. But sometimes, we want to use it on a website.

And in this case, **HighlightJS** is our savior!

---

## What is HighlightJS?
It's a JavaScript syntax highlighter with language auto-detection and zero dependencies.

And currently **192 languages** and **242 styles** are implemented!

*example*
{% codepen https://codepen.io/Tibixx/pen/NLpNar %}

---

## How to use it?
Once you've installed it *(with NodeJS or basic JavaScript import)*, put some **pre/code** *(Example just below)* blocks with our code to show and that's it!

```html
<pre>
  <code>
    ...
  </code>
</pre>
``` 

Otherwise, you can define which language to highlight 
```html
<pre><code class="language-html">...</code></pre>
```

or add a class to ignore some blocks.
```html
<pre><code class="nohighlight">...</code></pre>
```

Their [documentation](https://highlightjs.org/usage/) is quite complete, so go check it if you want more informations!

---

## Links
- HighlightJS website : https://highlightjs.org/

---

I hope it will help you ! 🍺