teleren/devto huggingface dataset:
Flutter: Input & Form
Tags: flutter, darklang, ios, android
Published: 2021-05-04 03:15:14

###Agenda
* Flutter Input Types
* Using Flutter Widgets for Input
* Building a Form with Flutter
* Validating Form Fields
* Creating Custom Fields

####ติดตามผลงานได้ที่
* **Page:** [https://fb.com/CodeBangkok​](https://fb.com/CodeBangkok​)
* **Group:** [https://fb.com/groups/msdevth​](https://fb.com/groups/msdevth​)
* **Blog:** [https://dev.to/codebangkok](https://dev.to/codebangkok)
* **YouTube:** [https://youtube.com/CodeBangkok](https://youtube.com/CodeBangkok)
My Very First Post
Tags: codenewbie, coderdads, python
Published: 2021-05-04 03:09:05

Hi everyone! I have been programming now for about 6 months and I recently took some time away to prepare for camping season :). I'm ready to get back to it and have a friend inspiring me to start writing about my journey into tech. I figured, why not get my first post out there so I have a starting point to look back on. So here it is... My first post... My first intro. I now have my starting point. 

Talk to you all soon!
Project 67 of 100 - Like Images with Context
Tags: 100daysofcode, javascript, react
Published: 2021-05-04 02:58:55

*Hey! I'm on a mission to make 100 React.js projects ending May 31st. Please follow my dev.to profile or my [twitter](https://www.twitter.com/jwhubert91) for updates and feel free to reach out if you have questions. Thanks for your support!*

Link to today's deployed app: [Link](https://100-react-projects-day-67-image-shopper.netlify.app/)
Link to the repo: [github](https://github.com/jwhubert91/100daysofreact/tree/master/day-67-image-favorites-and-cart)

No huge blog post today.

Just using the Context API heavily to export fancy Javascript array functions. There are so many Javascript ES6 array methods that I often forget about them. Today I forgot about the filter() method. I also haven't used PropTypes in a while.

I'll post more tomorrow since it's a completion of the second part of this project.

**If you like projects like this and want to stay up to date with more, check out my Twitter [@jwhubert91](https://twitter.com/jwhubert91), I follow back! See you tomorrow for another project.**
What I've learned today - 2 - Walrus Operator (:=) in Python
Tags: python, programming
Published: 2021-05-04 02:40:18

## What is?

The new operator allows variable assignments within expressions (also called Walrus Operator). It started as a proposal in [PEP572](https://www.python.org/dev/peps/pep-0572/) and became available in Python 3.8.

## Benefits

- Make things more compact.
- Compress code when using regular expressions.
- Speed up the processing of large data.
- Code more readable.

## Examples

A good example can be found in [PEP572](https://www.python.org/dev/peps/pep-0572/) documentation:

- Current:

    ```
    reductor = dispatch_table.get(cls)
    if reductor:
        rv = reductor(x)
    else:
        reductor = getattr(x, "__reduce_ex__", None)
        if reductor:
            rv = reductor(4)
        else:
            reductor = getattr(x, "__reduce__", None)
            if reductor:
                rv = reductor()
            else:
                raise Error(
                    "un(deep)copyable object of type %s" % cls)

    ```

- Improved:

    ```
    if reductor := dispatch_table.get(cls):
        rv = reductor(x)
    elif reductor := getattr(x, "__reduce_ex__", None):
        rv = reductor(4)
    elif reductor := getattr(x, "__reduce__", None):
        rv = reductor()
    else:
        raise Error("un(deep)copyable object of type %s" % cls)
    ```

This code is from python's core, and is a improved version of [copy.py](https://www.python.org/dev/peps/pep-0572/#id20)

We can use in any condition structure:

```
# While loop
while (command := input("> ")) != "quit":
    print("You entered:", command)
```

```
# Any
if any((comment := line).startswith('#') for line in lines):
    print("First comment:", comment)
else:
    print("There are no comments")

```

```
# List comprehenssion
stuff = [[(f(x) as .y), x/.y] for x in range(5)] # with "as"
```

## Observations

The operator cannot be used for everything, in some cases he won't work:

```
a := 1 #INVALID must be done with a=1.
a = b := 2 #INVALID must be done with a=b=2
```

I appreciate everyone who has read through here, if you guys have anything to add, please leave a comment.
I Upgraded to Ubuntu 21.04 and Now my Mac Won't Boot black screen
Published: 2021-05-04 02:29:25

---
title: I Upgraded to Ubuntu 21.04 and Now my Mac Won't Boot black screen
published: true
description: How to go down the rabbit hole with google to debug
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6l8g108nf8m4o9ibzfz.jpg
---

I have a 2015 MacNook Pro and I love it, but around Sierra OSX it became unusably slow. So I decided to bet on Ubuntu. There are a few quirks with this like the webcam won't work without compiling some drivers, the wifi neither.

I've learned to deal with these quirks, I even accept every ubuntu base update I lose my wifi driver and its a pain to get it back without internet. Hot tip if you face this issue share your network over bluetooth from an android.

So I decided to upgrade to 21.04 why not? I've upgraded the distro versions before no problemo.
It worked, no bugs, no weirdness.. hooray.

5 days later... I turn on my machine and nothing... literally nothing just a black screen. So I start googling, a few posts are saying its just a display issue use a few keys to fix it. It made sense as 21.04 was supposed to use Wayland instead of X11. No luck.

Now I'm trying to get into safe mode to get a cli and try bootrepair, nadda. I burn a usb and manage to boot bootrepair, still no fix.

This is days of hair pulling debugging. I finally find one obscure post, apparently this version of Ubuntu just writes over your efi launch settings... I was at a loss of what to do. I tried my luck and installed reFind a boot loader, boom fixed.
The first of many HAX projects
Tags: webcomponents, webdev, github, javascript
Published: 2021-05-04 02:03:35

If you have been following my content, you know that I have been slowly working on contributing to open source. I am by no means an expert, but I am getting better and learning a lot as I go. A few weeks ago, I took on a project to create my own web component. 

#The Element
The first step of the process is to define the problem you are solving in order to plan what you are creating. You cannot create a solution without a clear problem. I knew that we needed an element to show a star rating. I had to answer questions in order to clarify what that meant. Did I want it to be interactive? How many stars should there be? 

#The Creation
These questions led me to a figure out what the design should look like. I then jumped in with LitElement and started building. This is not an easy process and I needed guidance and help throughout it all. The questions changed as well as the answers, but I worked around it. The hardest part of this for me was importing and using other components well in my element. I had to learn how to utilize other code in order to bring my workload down.

#The Finished Product
This element is far from perfect, but its mine. I'm proud of the work that I have put in. HAX will soon be offering a way to include ratings into your page, and that is really exciting to me. 
https://github.com/hvk5388/lrnwebcomponents/tree/master/elements/star-rating

Keep coding everyone and I'll see you in the fall!
AES/CBC/PKCS5Padding Encryption
Tags: encryption, aes, cbc, pkcs5
Published: 2021-05-04 01:45:02

I'm trying to create an encryption functionality using AES/CBC/PKCS5Padding, but unfortunately after hours of research it seems that there's no PKCS5 in C# (PKCS7 instead). Most of code snippets are built in Java. Also found something on .Net documentation that PKCS5 is same with PKCS7 but I haven't tried it yet.

Can you direct me to a resource where I can use as reference to create Encryption with AES/CBC/PKCS5Padding in Java and C#? Also if there are sample code using Bouncy Castle provider. Thanks in advance!

Here's the sample Code I've created
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxgxo06hvzss9cy0zk2r.png)
How to contribute to open source
Tags: opensource
Published: 2021-05-04 01:07:10

A while back I wrote my first blog post on how to contribute to open-source https://scottistern.com/how-to-make-your-First-contribution-to-open-source/

Today, I made a video walking through the steps on setting up your environment to start contributing!

https://www.youtube.com/watch?v=m1kWc3J6QXI

Hope you enjoy!

Scott
Backend web developer survey - how do we develop web apps & services?
Tags: backend, survey, webdev
Published: 2021-05-04 01:03:00

Okay, so how do we develop web apps & services? That was a question I asked myself few weeks ago, and since then, I couldn't get my answer. I was looking around the internet for surveys - there are plenty of them, some of them excellent (such as [Stack Overflow developer survey](https://insights.stackoverflow.com/survey/2020)), but none of them gives in-depth answers about backend development I was looking for.

And therefore, I decided to start my own one.

# What are you surveying for? ⁉

I want to know what are our habits when working on applications. How popular are ORMs? Are smaller projects more likely to use state-of-the-art technologies than larger projects? Are some new technologies such as GraphQL taking over?  How many projects are still rendering views on backend? There's certainly a lot to be learned.

I could simply ask those questions, but I felt that it would make more sense to collect a list of habits and analyze it for conclusions later. And so, after filling in (anonymous) developer profile, you will be asked questions about APIs & presentation layer, controllers & middlewares, security, service layer, persistence, testing and developer tools. I hope that if enough people will participate from many different backgrounds, it will give us a clear picture on the current state of backend web development across platforms, frameworks, small and large projects!

# What results are you hoping for? 🤔

As I already outlined above, I'm interested in finding out what is the current state of backend web development and what different habits people have depending on their background and platform. I'm very well aware that I can't judge it just based of my own working environment, or by few other working environments of my friends, and that's why I'd to know from many different people. I intent to use this information during research and development of my own web framework, that I [talked about in this article](https://dev.to/matusmak/0-creating-a-web-framework-from-scratch-the-motivation-51m9).

I also believe that data collected in this survey can be helpful to framework and library developers, or maybe even some researches. That's why I'm indenting to open source raw dataset, most probably via GitHub.

# Cool, I'm interested! 🤩 How can I participate?

[This link will take you to the Google Form of this survey.](https://forms.gle/QothJrESXjmwXSzr5) You will need approx. 15-20 minutes to fill it. All questions are either single or multichoice, so no need to write in answers! In case you are working on two or more projects that are fundamentally different (think PHP Laravel vs Java Spring Boot), feel free to fill in survey for each project separately 🙂. For each participation I'm very grateful 🙏.
Drag and Drop to item select in React
Tags: react
Published: 2021-05-04 00:33:10

I need to drag some items containing data to a specific box. By dropping their I will get the data related to the dragged item. It's not for file upload it's for item selection in react app.

![Need to achive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whe8ytylxa4lhd033plw.jpg)
"Web Developer Basics"
Tags: webdev, html, css, javascript
Published: 2021-05-04 00:17:48

# Web Developers ABC 👶🏻

Every single developer in the world or at least every developer I've met on my journey, when you ask them "Where should I start if I want to become a web developer?" They all will tell you "HTML, CSS and JavaScript". So, let's break it down! 

## HTML 1️⃣ 🧡
First, our dear friend HTML. Most people say HTML is the "skeleton" of your website and I agree. HTML allows you to structure and give a shape to your page, like the skeleton of your body. It is really important to learn and absorb it completely, you must be able to understand how it works and how to manipulate it for sure.

## CSS 2️⃣ 💙

Beautiful and stylish CSS, the perfect words to define CSS. If you have a skeleton, so, you need a skin on it, a tool to beautify this hollow and empty skeleton. Once you master it, once you are able to apply content box, animations, flexbox, grid, etc. Probably, you think you're a master of CSS, let me broke your little heart and tell you that there's a wonderful world beyond CSS, from preprocessors such as sass, stylus and less to frameworks such as bootstrap, materialize, tailwind and so much more to learn. Don't worry, I promise you it's really cool.

## JavaScript 3️⃣ 💛
Last but not least, JavaScript. If HTML is the skeleton and CSS the skin, what is JavaScript? JavaScript my friend is the essence of the body for me. It's what brings life to your static and boring website. JavaScript has the power of adding more fun and dynamism to any website. Simply beautiful.
After a while using JavaScript and doing some dynamic pages, you'll ask yourself if there's a way to create more complex websites such as Facebook, YouTube, Netflix and even Only Fans 🙀 Just kidding, but yes. Here's where frameworks come out! React, Angular and Vue are the most popular and probably one of the frameworks you'll use sooner than later. Front-end frameworks are a really helpful and valuable tool for web developers and I'm pretty sure I'll be writing a post about in the future. For now, JavaScript is more than enough and a MUST for you.

### That's it, is it? 🤔
To sum up, do not be scared of technologies, love them indeed. Doing your own research and find out what's your favorite and what you'll be using to grow as a web developer. Master the basics and go further. 🚀

What about you? Do you start learning HTML, CSS and JavaScript? 👀

Your buddy,
Cale ⌨🖱
Continued Regular Expressions(4)
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-04 00:16:27

#### Match Whitespace
* The challenges so far have covered matching letters of the alphabet and numbers. You can also match the whitespace or spaces between letters.
* You can search for whitespace using `\s`, which is a lowercase `s`. This pattern not only matches whitespace, but also carriage return, tab, form feed, and new line characters. You can think of it as similar to the character class `[ \r\t\f\n\v]`.
* Ex:
```
let sample = "Whitespace is important in separating words";
let countWhiteSpace = /\s/; 
let result = sample.match(countWhiteSpace);

console.log(result); will display [ ' ', ' ', ' ', ' ', ' ' ]
```


#### Match Non-Whitespace Characters
* You learned about searching for whitespace using `\s`, with a lowercase `s`. You can also search for everything except whitespace. Search for non-whitespace using `\S`, which is an uppercase `s`. This pattern will not match whitespace, carriage return, tab, form feed, and new line characters.
* Ex:
```
let sample = "Whitespace is important in separating words";
let countNonWhiteSpace = /\S/g; // 
let result = sample.match(countNonWhiteSpace);
```
```
console.log(result); will display
[ 'W',
  'h',
  'i',
  't',
  'e',
  's',
  'p',
  'a',
  'c',
  'e',
  'i',
  's',
  'i',
  'm',
  'p',
  'o',
  'r',
  't',
  'a',
  'n',
  't',
  'i',
  'n',
  's',
  'e',
  'p',
  'a',
  'r',
  'a',
  't',
  'i',
  'n',
  'g',
  'w',
  'o',
  'r',
  'd',
  's' ]
```


#### Specify Upper and Lower Number of Matches
* Recall that you use the plus sign `+` to look for one or more characters and the asterisk `*` to look for zero or more characters. These are convenient but sometimes you want to match a certain range of patterns.
* You can specify the lower and upper number of patterns with quantity specifiers. Quantity specifiers are used with curly brackets (`{` and `}`). You put two numbers between the curly brackets - for the lower and upper number of patterns.
* For example, here we changed the regex ohRegex to match the entire phrase Oh no only when it has 3 to 6 letter h's.
```
let ohStr = "Ohhh no";
let ohRegex = /Oh{3,6}\sno/;
let result = ohRegex.test(ohStr);
console.log(result); will display true
```

#### Specify Only the Lower Number of Matches
* To only specify the lower number of patterns, keep the first number followed by a comma.
* For example, here we changed the regex `haRegex` to match the word `Hazzah` only when it has four or more letter `z`'s.
```
let haStr = "Hazzzzzah";
let haRegex = /Haz{4,}ah/;
let result = haRegex.test(haStr)

console.log(result); will display true
```

#### Specify Exact Number of Matches
* To specify a certain number of patterns, just have that one number between the curly brackets.
* For example, here we changed the regex `timRegex` to match the word `Timber` only when it has four letter `m`'s. 
```
let timStr = "Timmmmber";
let timRegex = /Tim{4}ber/; 
let result = timRegex.test(timStr);

console.log(result); will display true
```
How to reduce DNS query response time ?
Tags: aws, webdev, api, cloud
Published: 2021-05-04 00:15:25

Hi, I am facing a kind of weird issue with my backend api, all the query i send to it with a tool like Insomnia REST client or raw python code using `requests` lib take ~77sec to reach the server and return a response, but it is fast when i do the same query from the frontend app (via API Calls). 

I tried this command from a forum, it seem related to the DNS.

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

My API is hosted on AWS (ECS) and everything is behind an Application Load Balancer, when i check the stat (Target Response Time, etc) everything is normal, i mean response are in average 400ms, that makes me think the issue is with the DNS system.

Thanks
How to edit stuff that you've already commited to git? (And squash as a bonus)
Published: 2021-05-06 14:25:13

---
title: How to edit stuff that you've already commited to git? (And squash as a bonus)
published: true
date: 2021-05-04 00:00:00 UTC
tags: 
canonical_url: https://foursixnine.io/blog/tech/linux/git/2021/05/04/How-to-edit-stuff-that-you've-already-commited-to-git.html
---

So, you’re in the middle of a review, and have couple of commits but one of the comments is asking you to modify a line that belongs to second to last, or even the first commit in your list, and you’re not willing to do:

`git commit -m "Add fixes from the review" $file`

Or you simply don’t know, and have no idea what `squash` or `rebase` means?, well I won’t explain rebase today, but I will explain `rebase`

![DON'T PANIC](https://media.giphy.com/media/O8FdP4NKLFKcU/giphy.gif)

See how I do it, and also how do I screw up!

[![asciicast](https://asciinema.org/a/bUdcrFZRRAzCHQk2EyG7ru9mA.svg)](https://asciinema.org/a/bUdcrFZRRAzCHQk2EyG7ru9mA)

It all boils down to making sure that you **trust** git, and hope that things are small enough so that if you lose the stash, you can always rewrite it.

So in the end, for me it was:

```
git fetch origin
git rebase -i origin/master # if your branch is not clean, git will complain and stop
git stash # because my branch was not clean, and my desired change was already done
git rebase -i origin/master # now, let's do a rebase
# edit desired commits, for this add the edit (or an e) before the commit
# save and quit vim ([esc]+[:][x] or [esc]+[:][w][q], or your editor, if you're using something else
git stash pop # because I already had my change
$HACK # if you get conflicts or if you want to modify more
      # be careful here, if you rewrite history too much
      # you will end up in Back to the Future II
      # Luckly you can do git rebase --abort
git commit --amend $files #(alternatively, git add $files first then git commit --amend
git rebase --continue
git push -f # I think you will need to add remote+branch, git will remind you
# go on with your life

```

(Note: A squash is gonna put all of the commits together, just make sure that there’s an order:

- pick COMMIT1
- pick COMMIT2
- squash COMMIT3 # (Git will combine this commit, with the one above iir, so COMMIT2+COMMIT3 and git will ask you for a new commit message)
How to disable text selection on double-click using CSS?
Tags: css
Published: 2021-05-04 00:00:00

---
  title: How to disable text selection on double-click using CSS?
  published: true
  tags: CSS
  date: Tue May 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/disable-double-click-text-selection-css
  cover_image: https://melvingeorge.me/_next/static/images/main-98129cedf13d1a30a97a23fd73ae5c8a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/disable-double-click-text-selection-css)
  
To disable the text selection when the user double clicks on the HTML element, you can use the `user-select` property and set its value to `none` in CSS.

### TL;DR

```css
/* Disable text selection  */
.paragraph {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
```

For example, let's say we have the text of `Hello World!` inside a paragraph `<p>` tag like this,

```html
<p>Hello World!</p>
```

Now if the user tries to double click on it, it will show the selection color over the text. Our goal is to remove that.

So let's attach a `class` with the name of `paragraph` to it so that we can reference it in the CSS file like this,

```html
<p class="paragraph">Hello World!</p>
```

Now in the CSS file we can add the `user-select` property and set the value to `none` like this,

```css
/* Disable text selection  */
.paragraph {
  user-select: none;
}
```

That's it! To complete support this feature on all browsers we add the browser prefixes also like this,

```css
/* Disable text selection with support on major browsers */
.paragraph {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
```

Now if the user tries to select it using double-click, it won't show the selection color over it.

See the above code live in [JSBin](https://jsbin.com/moviwasovu/2/edit?html,css,output)

### Feel free to share if you found this useful 😃.

---