teleren/devto huggingface dataset:
Flutter Dismissible example – Swipe to dismiss/remove Item in ListView

Tags: flutter, listview
Published: 2021-05-18 16:10:13

https://ozenero.com/flutter-dismissible-example-swipe-to-dismiss-remove-item-in-listview

Flutter Dismissible example – Swipe to dismiss/remove Item in ListView

In previous <a href="https://ozenero.com/android/flutter-listview-example-listview-builder">post</a>, we had created and shown a <code>ListView</code> with <code>ListView.builder()</code> constructor method. Today, we're gonna add a function that allows us swipe to remove Item in the list using <code>Dismissible</code>.

Related Post: <a href="https://ozenero.com/android/flutter-listview-example-listview-builder">Flutter ListView example with ListView.builder</a>

<!--more-->
<h2>Example Overview</h2>
<img src="https://ozenero.com/wp-content/uploads/2018/08/flutter-dismissible-example-listview-swipe-dismiss-item-overview.png" alt="flutter-dismissible-example-listview-swipe-dismiss-item-overview" width="572" height="468" class="alignnone size-full wp-image-14038" />
<h2>Flutter Dismissible Widget</h2>
<h3>Create List of Items</h3>
<pre><code class="language-javascript">
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(...items[index]...);
  },
);</code></pre>
<h3>Wrap in a Dismissible Widget</h3>
Update <code>itemBuilder()</code> function to return a <code>Dismissible</code> Widget:
<pre><code class="language-javascript">
ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return Dismissible(
      key: Key('itemKey'), // Each Dismissible must contain a Key
      background: Container(color: Colors.red), // red background behind the item
      onDismissed: (direction) { // Each Dismissible must contain a Key
        setState(() {
          items.removeAt(index);
        });
      },
      ListTile(...items[index]...),
    );
  },
);</code></pre>
<h2>Complete Code</h2>
<em>lib/post.dart</em>

More at:

https://ozenero.com/flutter-dismissible-example-swipe-to-dismiss-remove-item-in-listview

Flutter Dismissible example – Swipe to dismiss/remove Item in ListView
How to Connect to the Remote Environment by Using SSH
Tags: ssh
Published: 2021-05-18 16:03:55

SSH is an abbreviation for Secure Shell. SSH is a protocol for communicate with a remote computer securely by using cryptography and the technology of authentication.

SSH is a mechanism that only specific users can access the remote environment. Authenticate using public-key and private key. RSA(Rivest Shamir Admin = One of the famous public-key cryptography) is often used.

To connect to a remote environment using SSH, you need to have a private-key in the local environment and a public-key in the remote environment.

GO to the local console.
-ssh username@IPaddress -i file_pass of private-key
Then you can use a designated remote environment.

It is necessary to specify the user name because it may be used by multiple users. IP address is like a network address of a remote. The file_pass of private-key is often been "home/.ssh
Imposter
Published: 2021-05-18 15:42:03

---
title: Imposter
published: true
description: Imposter Syndrome discussion
tags: 
//cover_image: https://direct_url_to_image.jpg
---

15 minutes ago I finished a panel session at [Techorama](https://techorama.be/) about women in tech.

One of the questions that we were asked was about imposter syndrome. Is it something that we suffer from, and what can we do to overcome it.

We... As to the do I suffer from it. Well, this is my unpublished list.

![List of unpublished blog posts](https://raw.githubusercontent.com/StacyCash/blog-posts/main/general/imposter-syndrome/images/unfinished.png)

So, yeah. A little. A lot.

In a professional environment I can push it down and try to fake my confidence. Most of the time. Including being very depreciative of myself. If I am looking for feedback on an idea and I'm **convinced** that I'm wrong I won't ask "What do you think?", rather I'll say "Tell me why I'm being stupid". My base position.

Outside of work, well - there I don't have to fake it and so I don't. Instead I write blog posts get it to an almost done state and then get terrified that this is where people see how awful I am and stop.

Well... Both of these have to change. So here goes.

I'm publishing this. (17:30 18/05/2021)

Let's count the time to actual published time 😅
Encontrando errores en el código con git bisect
Tags: git, tip
Published: 2021-05-18 12:29:17

Cuando se usa `git` en un equipo de trabajo a veces alguien del grupo puede introducir un error en el código que no fue descubierto por los tests ni en la revisión de usuario, y se publica el error al sistema de producción. El momento que se recibe el reporte del error en producción generalmente desde el último despliegue hay varios commits hechos por varios desarrolladores, para encontrar dónde se introdujo el error podemos usar `git bisect`.

[`git bisect`](https://git-scm.com/docs/git-bisect) de acuerdo a su documentación nos indica que realiza una búsqueda binaria para encontrar el commit que introdujo un bug. Una búsqueda binaria es un algoritmo en el que se va reduciendo la búsqueda de un commit eliminando posibles commits "buenos" o "malos".

La búsqueda de nuestro bug de ejemplo puede comenzar de la siguiente manera:

```bash
git bisect start # Permite iniciar la búsqueda
git bisect bad   # Indica que la versión actual es la incorrecta
git bisect good 4f0dfa72bcdc2ba489629949883392aaa3a4e43b   # Es la referencia al último commit correcto puede ser un tag on un branch
```

Una vez que tenemos al menos un commit bueno y uno malo, git bisect seleccionara un commit en el medio del rango para verificación. Nos mostrará un mensaje que indica el commit que está en el área de trabajo cuantas revisiones quedan por hacer y un estimado de pasos hasta encontrar el error.

Cuando estemos en este paso tenemos que verificar el error existe en ese commit, si no existe, ejecutamos `git bisect good` y git bisect nos dará un nuevo commit para probar. En este paso podemos ejecutar tests, probar manualmente, ejecutar algún proceso que verifique si hay no error o simplemente ver el código. Si es un commit malo se ejecuta `git bisect bad` hasta que git bisect indique el mensaje que un commit es el primer bad commit (`first bad commit`).

Al final de la sesión de trabajo se ejecuta `git bisect reset` para volver al branch que estuvimos inicialmente.

Hay también una forma automática de verificar si un commit es válido, usando `git bisect run your_script arguments`. El script denominado your_script debe retornar un código de salida 0 para marcar un commit como bueno, y un código entre 1 y 127 (exceptuando 125) cuando el commit es malo. El 125 se usa para cuando no se puede probar y lo marca como skipped.

Si hay alguna duda, por favor no duden en suscribirse y responder directamente a mis emails.
Zelda Breath of the Wild - Parallax Effect
Tags: javascript
Published: 2021-05-18 15:23:10

---
title: Zelda Breath of the Wild - Parallax Effect
published: true
description: How to convert a plain image into a parallax effect.
tags: javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdezf6em5nqu7zoio148.png
---

Hi there!

My name is Miquel Camps, I'm a web developer based in Spain, you can find me on [twitter](https://twitter.com/vivirenremoto) and [linkedin](https://www.linkedin.com/in/miquelcamps/).

**TLDR: You can visit the demo here**
[https://vivirenremoto.github.io/zelda_parallax/](https://vivirenremoto.github.io/zelda_parallax/)

**First of all**

A few days ago I saw [this video by Dylan Greene](https://www.instagram.com/p/CO-p04Cpy4b/)

I thought it's Awesome but it would be great to see this as a interactive web page.

**Steps I took to create this effect**

1- I used photoshop to separate the image into layers, this was the most painful part for me, all the layers must be the same dimensions.

To get a decent parallax effect I had to fill the empty spaces of each layer, maybe this is not perfect, anyway I like the final result.

I used 7 layers in total, 5 layers for the landscape and 2 additional layers to give some special effects the grass at the bottom and a the Sun flare.

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

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

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

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

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

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

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

2- To merge all the layers and put the parallax effect I used this javascript library [parallax.js](https://github.com/wagerfield/parallax).

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

3- I put all the layers inside a HTML tag (DIV) to hide the edges with the attribute overflow=hidden:

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

4- Finally I wrote some media queries to center the character (Link) on a mobile screen.

I hope you like it!
How to create Custom Validation in Spring
Tags: spring
Published: 2021-05-18 15:23:10

https://grokonez.com/spring-framework/create-custom-validation-spring

How to create Custom Validation in Spring

In the post <a href="https://grokonez.com/spring-framework/spring-boot/perform-form-validation-spring-boot">How to perform Form Validation with Spring Boot</a>, we have already made a form validation. Today we're gonna look at a way to create <strong>Custom Validation</strong> with that Form in Spring.

<!--more-->
<div id="tuttoc" class="jsa-toc"></div>

<div id="tutcontents">
<h2>I. Technology</h2>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.1.RELEASE
- Spring Boot: 1.5.1.RELEASE
<h2>II. Overview</h2>
<h3>1. Goal</h3>
Create a Custom Validation Annotation <code>@ValidEmail</code> that helps to validate field String email on server-side:
<pre class="lang:java">
	@ValidEmail(min = 10, message = "Please enter a valid email.")
	private String email;
</pre>
<h3>2. Project Structure</h3>
<img src="https://grokonez.com/wp-content/uploads/2017/02/customvalidation-structure.png" alt="" width="700" height="398" class="alignnone size-full wp-image-3404" />
- <strong>WebController</strong> is a Controller which has request mapping methods to display our page.
- <strong>RequestInfo</strong> is a Data Model Class with annotation for validation.
- <strong>ValidEmail</strong> is an Annotation Class refers to <strong>ValidEmailValidator</strong> class.
- <strong>ValidEmailValidator</strong> is a Constraint Class which implements <strong>ConstraintValidator</strong> interface.
- <strong>webapp</strong> folder contains all necessary <strong>JSP</strong> file and static resource.
- <strong>application.properties</strong> contains settings for prefix and suffix for JSP files.
- <strong>Dependencies</strong> for <strong>Spring Boot</strong>, <strong>Tomcat Embed Jasper</strong> and <strong>Common Validator</strong> in <strong>pom.xml</strong>.
<h3>3. Step to do</h3>
- Create Spring Boot project &amp; add Dependencies
- Create jsp file and static resource
- Set prefix and suffix resolution
- Create @ValidEmail Annotation
- Create Constraint Class
- Create Data Model Class
- Create Web Controller
- Run Spring Boot Application &amp; Enjoy Result
<h2>III. Practice</h2>
<h3>1. Create Spring Boot project &amp; add Dependencies</h3>
Open <strong>Spring Tool Suite</strong>, on <strong>Menu</strong>, choose <strong>File</strong> -&gt; <strong>New </strong>-&gt; Spring Starter Project, then fill each fields. Remember that we will the <strong>Packaging</strong> is <strong>War</strong>.
<img src="https://grokonez.com/wp-content/uploads/2017/02/customvalidation-start.png" alt="" width="507" height="421" class="alignnone size-full wp-image-3405" />
Click <strong>Next</strong>, then click <strong>Finish</strong>.

Open <strong>pom.xml</strong> and add Dependencies:

https://grokonez.com/spring-framework/create-custom-validation-spring

How to create Custom Validation in Spring
Best resources for #developers
Tags: illustration, colors, icons, developer
Published: 2021-05-18 15:13:29

For #illustrations   
1. Sketchvalley 
2. Wham 
3. Craftwork 
4. Blush 
5. Ouch 
6. Open Doodle 
7. Isometric Love 
8. Drawkit  

For #colors  
1. coolors.co 
2. colormind.io 
3. colorhunt.co 
4. khroma.co 
5. curls.com  
6. colors.lol 
7. color.adobe.com 
8. pigment.shapefactory.co  

For #icons   
1. Material Icons 
2. Flaticon 
3. Eva Icons 
4. Noun Project 
5. Iconscout 
6. Icons8 
7. Iconset 
8. Remix Icon
Day 86
Tags: 100daysofcode, programming
Published: 2021-05-18 15:02:27

Day 86 of #100DaysOfCode 
 
- Solved three problems on Codewars.

1 -> [Remove the time](https://www.codewars.com/kata/56b0ff16d4aa33e5bb00008e) (8kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/8%20kyu/RemoveTheTime.js)
2 -> [The Coupon Code](https://www.codewars.com/kata/539de388a540db7fec000642) (7kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/7%20kyu/TheCouponCode.js)

3 -> [Find Your Villain Name](https://www.codewars.com/kata/536c00e21da4dc0a0700128b) (7kyu) || [MySolution](https://github.com/Rb-wahid/My-Coding-Experience/blob/master/src/Codewars/7%20kyu/FindYourVillainName.js)


[Become Code Warriors](www.codewars.com/r/YECsUA)
Integrate ESLint with your React project step by step (javascript)
Tags: webdev, react, eslint, programming
Published: 2021-05-18 15:00:15

First of all, we need to install ESLint

```
npm i eslint --save-dev
```

Install ESLint plugins

```
npx install-peerdeps --dev eslint-config-airbnb
```

Note: with a single command will install 6 plugins: `eslint-config-airbnb`, `eslint-plugin-import`, `eslint-plugin-react`, `eslint-plugin-react-hooks`, and `eslint-plugin-jsx-a11y`. You can also install these plugins individually.

Install babel eslint

```
npm i --save-dev babel-eslint
```

Your "devDependencies" should look something similar to this

```
"devDependencies": {
    "babel-eslint": "^10.1.0",
    "eslint": "^7.2.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-react": "^7.20.6",
    "eslint-plugin-react-hooks": "^4.0.0"
}
```
Now, create the file `.eslintrc.json` at the root of the project. Paste below config:

```
{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
    },
    "parser": "babel-eslint",
    "extends": [
        "eslint:recommended",
        "airbnb",
        "airbnb/hooks",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 11,
        "sourceType": "module"
    },
    "settings": {
        "react": {
            "version": "detect"
        }
    },
    "plugins": [
        "react",
        "react-hooks"
    ],
    "rules": {
        "react/react-in-jsx-scope": "off",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [
                    ".js",
                    ".jsx"
                ]
            }
        ],
        "react/display-name": 1
    }
}
```
Also, install [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) for VSCode, After that need to reload the VSCode window once to get proper linting.*

ESLint will automatically start detecting errors/warnings in `.js` and `.jsx` files. If that's not the case then either your project has no linting errors or ESLint is not properly set up. To test if linting works run eslint command in the terminal with folder path i.e. `eslint src/**` and notice output.

To disable the linting of some files/folders you can create a `.eslintignore` at the root of the project.

`.eslintignore`

```
node_modules
dist
coverage
```

Finally, you can also add linting to `scripts` in `package.json` as a part of your pipeline process

```
"scripts": {
    "lint": "eslint . --ext js,jsx",
    "lint:fix": "eslint . --ext js,jsx --fix"
}
```

Let me know in the comments recommendations or something else that can be added, I will update the post based on that thanks! 👍
✅ How Brick-And-Mortar Approaches Improve Digital Experience
Tags: security
Published: 2021-05-18 14:52:05

#### 🦠 COVID-19 accelerated digital transformations in retail, finserv, and healthcare. What this means for bridging the gap between digital and real-world experiences as the world opens up. 

### <br>
You successfully responded to the pandemic by speeding your digital transformation by six, maybe even 10, years ahead of your road map. After achieving overnight agility, what’s next? 

Across sectors, we’ve seen a [rise in digital adoption](https://www2.deloitte.com/content/dam/Deloitte/global/Documents/Financial-Services/gx-fsi-realizing-the-digital-promise-covid-19-catalyzes-and-accelerates-transformation.pdf), including in demographics that have previously been slow to reach for apps, like Boomers and seniors. Lockdowns drove the discovery of digital solutions to daily needs, resulting in an uptick in [online grocery sales](https://techcrunch.com/2020/07/06/u-s-online-grocery-shopping-hits-record-7-2-billion-in-june/) and an increase in curbside pickup. 

A [McKinsey survey](https://www.mckinsey.com/business-functions/mckinsey-digital/our-insights/europes-digital-migration-during-covid-19-getting-past-the-broad-trends-and-averages#) of 20,000 European consumers in the spring of 2020 found that on average, 70% of consumers across sectors said they intended to continue using digital services after COVID-19 as much as they did during the pandemic. “There’s no going back,” notes McKinsey. “Bold vision and disciplined execution on a set of key imperatives will ultimately differentiate the leaders from the laggards as this crisis abates.”

**In other words, a decent digital experience is now table stakes.** 

Fine-tuning work that might have been rushed during the pandemic and checking for security and compliance issues will be covered in a future series. Right now, let’s take a look at why your brand experience needs to be seamless, whether your consumer finds you in the digital world or the real one. 

![Retail: Craft New Buying Experiences](https://images.ctfassets.net/23aumh6u8s0i/1CnIZP0jw9xwsq99pE9JP7/d32690c1c3a8a3b3f3bce18f9df2020c/38_Three_Ways_Retailers_Can_Harmonize_1-2.jpg)

[Read more...](https://auth0.com/blog/how-brick-and-mortar-approaches-improve-digital-experiences/?utm_source=content_synd&utm_medium=sc&utm_campaign=security)
Linux Terminal: A Beginner’s Guide
Tags: linux, beginners
Published: 2021-05-18 14:50:13

So you want to learn Linux command line? This guide will hopefully get you started.

Linux is one of the most widely used open source operating systems. It's now used, not only in computer systems administration tasks, but by web servers, network equipment, as well as in software development and more.

Some of its uses include developing new software, managing network infrastructure, automating repetitive tasks, data mining, data processing, and scientific computing.

## Command line? 

A lot of people think of the command line as a scary and intimidating place that they don’t want to go. But I am here to tell you that it is actually very easy.

Bash shell is the default command line interpreter. Linux bash (variant) or BASH for short is a command interpreter for Unix-like operating systems and also for Linux, Android and Apple's macOS.

If you are new to command line, try [these exercises](https://shortcut.so/) to memorize all the commands quickly.

![command line](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv8zhh7w8xxu3uli9lf3.gif)

## List of Linux commands

This is a list of basic Linux commands that you need to know when you start to use Linux, most of the commands have their description and examples, but for more info you can read the bash manual pages with "man "

These commands should work on any Linux system.


`cal`   : Displays the calendar of the current month
`date`  : displays the current date and time
`~`       : home of the current user
`pwd`    : present working directory
`mkdir` : make directory
`mv`    : move/rename
`cp`    : copy
`rmdir` : remove directory
`ls` : list files
`cd` : change directory
`rm` : remove file

Linux has hundreds of [commands](https://bsdnerds.org/what-is-linux-shell/) that you can use to browse your file system, to configure your network, do programming and a lot more.

You could also learn [vim](https://vim.is/) which is a powerful text editor and sometimes even used as IDE. It can be used from the command line directly and is one of the most widely used Linux tools.
Random Art Generator: Dots & Rings
Tags: codepen, javascript, showdev, webdev
Published: 2021-05-18 14:41:42

If you like random art, I've just released a new tool for generating random rings and dots (in `<svg>`).

With the editor, you can tweak a lot of parameters (Click the “Random!”-button to get started):

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

And render art like these examples: 

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

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

![image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9tdje0g3b1y9pzeayrv.png)
 
![image4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp52mx2n159j7vatx2rk.png)

When you've made a piece you'd like to save, click on “Export", chose a file format, then click on “Save to Image”.

It's on Codepen (open fullscreen for best experience):

{% codepen https://codepen.io/stoumann/pen/dyvprJM %}

Thanks for reading!
미국내 자바스크립트와 PHP개발자 연봉 비교
Published: 2021-05-18 14:40:53

미국내 프로그래밍 개발자 연봉을 비교해 보면 현재 어떤 프로그래밍이 대세이고  유망한 지 짐작할 수 있다.

## 기준 : 2021년 5월

| 구분 | Javascript | PHP |
|:-----:| -----:| -----:|
|평균연봉| $112,312| $88,865|
|한화기준| 126,800,248원| 100,328,585원|
(1$ = 1,120원 기준)

***

## 출처

* [Javascript 연봉 자료](https://www.indeed.com/career/javascript-developer/salaries)
* [PHP 연봉 자료](https://www.indeed.com/career/php-developer/salaries)

***

[프로그래밍동영상강좌](https://365ok.co.kr/)