teleren/devto huggingface dataset:
Searchable Select 🤔
Tags: html, web, form, validation
Published: 2019-01-12 13:04:57

---
title: Searchable Select 🤔
published: true
description: Let's build a searchable select with native HTML
tags: html,web,form,validation
---

##The Select
The HTML *select* element is super useful, but sometime we need somthing more powerful, when we have hundreds of options (eg. a list of all the world's countries) it would be nice to let the user to be able to filter the elements, unluckily we don't have a *searchable* or *filterable* attribute for it
```html
<label for="country">Please select your country</label>
<select id="country" name="country" required>
  <option value="it">Italy<option>
  <option value="fr">France<option>
  ... and so many other options ...
<select>
```

##The Input
A way to search elements inside a list with native HTML elements is with an *input* plus *datalist*
```html
<label for="country">Please select your country</label>
<input id="country" name="country" required list="country-list" />
<datalist id="country-list">
  <option value="Italy">
  <option value="France">
  ...
</datalist>
```

In this way we have an input with hints, but the user can still write anything he want.
So we need to validate it!

##The Validation
Let's use the *pattern* attribute to validate the input
```html
<label for="country">Please select your country</label>
<input id="country" name="country" required list="country-list"
  pattern="Italy|France" title="Please select a country" />
<datalist id="country-list">
  <option value="Italy">
  <option value="France">
  ...
</datalist>
```

Cool, now we have an Input with searchable options, and only the defined ones are allowed!

#The problem
The only problem I see here is that it is not very clear at first glance that it is not a normal text input, but a (let me say it) *searchable select*.

Only after a user interaction the dropdown will be shown.

#Conclusions
HTML give us many tools, let's see if we can use and combine them before build our own solutions 😃

Let me know what do you think about this approach!
Why was this bug introduced? 
Tags: git
Published: 2019-01-11 15:30:00

---
title: Why was this bug introduced? 
published: true
description: 
tags: git 
series: Git Communication
---

In the previous posts I established what can be communicated when changing code. Now we come to weeks or years later and have a question, Why was this bug introduced?

Generally this happens by the PM or client when the bug was found, there is also a similar question which places the blame squarely on the tester, Why didn't you catch this? But let's talk about why as a developer you would ask yourself the first question.

This question would be asked once you find where the bug is. Since that is 80-90%of the battle you've got only a little bit to read the code and adjust to avoid the situation you're in.

Now did you read the comment on that line, the one explaining why it was put there? What if your change just reverted a commit for a different bug? With good communications through commits every line of code has the answer to this question and it is pulled up using git blame.

Git blame annotates every line of code with the commit which added/modified it. You can jump back through history to see how the file/line has changed over time and most importantly view the commit and message of that change.

Fore help with the other 80% there is git bisect.

https://git-scm.com/book/en/v2/Git-Tools-Debugging-with-Git

{% link https://dev.to/eamodio/its-not-just-about-theblame-32a2 %}
Developed Flutter Grocery Shopping App (On GitHub)
Tags: flutter, fluttermaterial, flutterapp, ecommerceapp
Published: 2019-01-12 11:39:48

---
title: Developed Flutter Grocery Shopping App (On GitHub)
published: True
description: Grocery Shopping Flutter app is created as a wonderful solution for any food shop Flutter App UI template. It is a template for a Flutter developer that want to create grocery application with a clean design. The template is only lay outing without data flow and communication with the backend system. This Flutter UI Template can reduce your development time and will be loved by the developer that hate lay outing design! You can use this Flutter app as one big supermarket app to sell the product of your store. This app makes easy for the user to buy a product from the store with easy steps and store can get easy order.

cover_image: https://thepracticaldev.s3.amazonaws.com/i/lqdmapb04kqykah3pm8w.gif

tags: Flutter, Flutter-Material, Flutter-App, E-Commerce-App
---
Spot a leaky abstraction
Tags: programming, beginners, discuss
Published: 2019-01-12 11:35:18

---
title: Spot a leaky abstraction
published: true
description: Let's play a game. Who will find more leaky abstractions? 
tags: [programming, beginners, discuss]
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xotckgy92blcv3el4dk4.jpg
---

Let's play a game. Who will find more leaky abstractions? [I wrote about abstractions recently](https://dev.to/stereobooster/abstraction-1987). To recap leaky abstraction is the one which exposes implementation details.

I will start - indexes in relational databases. The abstraction consists of relational algebra (in form of SQL), entity relational diagrams (as a way to model), normal forms, right? You modeled your database, got it to 3rd normal form, you wrote some queries - everything works ok; then it appears that some queries are slow, and you need to use EXPLAIN. It can happen that the implementation of query analyzer not ideal and you need to tweak your query a bit to make it happy, or you need to add indexes (anв you can do it without understanding what is it and how it works - some magic which makes your selects faster and inserts slower). Ok. Then you need to implement text search and you have indexes and you use `LIKE "abc%"` and it works fast, but `LIKE "%abc%"` is slow? And your reaction WTF. You start to read and it appears that indexes are BTrees data structure (typically for string columns), so you can traverse tree fast from top to bottom e.g. optimize text searches "starts with", but not "contains". At this point implementation is exposed, I need to understand how it is implemented to understand why it works the way it works. Luckily I don't need to understand how it handles concurrency or works with the file system, so it's not that bad.

Don't confuse leaky abstractions with the wrong abstraction. To recap the wrong abstraction, when you can't precisely state your problem in terms of abstraction, it means that abstraction doesn't fit, it was written with different use cases in mind or it is outdated, or requirements changed etc. For example, SQL is not suitable to store graphs (doable) and traverse graphs (really bad idea), SQL is simply the wrong abstraction for this task. Use graph database, like Neo4j; use Gremlin or Graphit instead of SQL.

It's your turn. One example per comment. Use open source projects or publicly available things as examples.

> Photo by Nine Köpfer on Unsplash
Viewing WebPack On Mobile
Tags: webpack, webpackdevserver, webdev
Published: 2019-01-11 15:18:00

---
title: Viewing WebPack On Mobile
published: true
description: A look in to how you can get WebPack-Dev-Server to 
tags: webpack, webpackdevserver, webdev
---
So, hello world, or hello DEV - I wanted an excuse to make my first post on here, so I'm just going to quickly explain my latest little joy in development from this morning. I hope it can be of use to someone!

I've been using [WebPack](https://www.npmjs.com/package/webpack) with a fair amount of success over the last month or so, to the point where I don't really think about it all that much any more, it just works. If you've yet to find success with WebPack, I highly recommend [this YouTube series on it from Academind](https://www.youtube.com/watch?v=GU-2T7k9NfI&list=PL55RiY5tL51rcCnrOrZixuOsZhAHHy6os) which taught me everything I needed, with a little help from the comments section (yes, sometimes it's actually useful rather than infuriating)

If you do already use WebPack, then chances are you also use it's buddy, [Webpack-Dev-Server](https://www.npmjs.com/package/webpack-dev-server), which operates like an always-on build and lets you see live changes in your source files as if they had been built. This has been working fantastically for me so far, however I've only been developing with desktop in mind until yesterday where I was asked to make sure everything works on mobile.

I had a little experience with this kind of thing in the past - I've made nodemon and express expose files on LAN. As it turns out, you can do the exact same thing here. Some googling lead me to [this closed issue on the WebPack-Dev-Server GitHub repository](https://github.com/webpack/webpack-dev-server/issues/147) which divulged the required magic spell to be input into your command line or package.json start script...

```bash
$ webpack-dev-server --port 8080 --hot --host 0.0.0.0
```
By setting the IP to 0.0.0.0 you are targeting your machine and revealing your server to the local network. You can then view your site via any device on your local network by navigating to your computer's local IP (howto: [windows](https://www.techwalla.com/articles/how-to-find-a-lan-ip)/[mac](http://osxdaily.com/2010/08/08/lan-ip-address-mac/)) followed by `:8080` or whatever you chose to set the port to above. In my case it was `http://192.168.1.51:8080`

You'll also notice the `--hot` option being used above. This means that as you make updates on your machine, it will trigger a refresh on the device you're monitoring from - or at least that's what it's supposed to do in theory, I found it was a bit patchy meaning I have to either restart the server or tap refresh on my iPad like a peasant.

Let me know if you have any other webpack related tips, I'm new to this and am really interested to hear of any other cool features I might not yet have explored.
How do YOU deal with burnout?
Tags: discuss, career
Published: 2019-01-12 07:09:22

---
title: How do YOU deal with burnout?
published: true
description: I am burnt out. Are you? 
tags: discuss,career
---
Early 2018 I launched what I considered to be the largest project I had ever worked on. It involved many late nights over the course of 20 months and a painful amount of dev work. I had been the lead front-end developer, the solution architect, a client manager and a project manager. Filling all of these roles was not easy and we would often joke about how empty our lives would be once we launched. 

I had no idea.

After an opportunity to reflect in December I realised that eight months later, I had still not recovered from this project. 

I am burnt out.

My questions to the community, as I'm sure you've had similar experiences: 
- Are you burnt out right now?
- How do you deal with your burnout? 
- How do you carry on working when the deadlines keep coming? 
- How do you recover when you need to pay the bills? 
- How long did it take you to recover?
- How do you keep up with new tech if your day job seems overwhelming as it is?
- How do you deal with the depression?

As developers we put unnecessary pressure on ourselves. Pressure to keep learning, to innovate, to keep going. We never stop to talk about the hard things and I don't think there is enough awareness for how badly developers are affected by burnout. 

Let's discuss.
When query db should I check if data exists first then select it ?
Tags: discuss, sql, bestpractice
Published: 2019-01-12 02:32:36

---
title: When query db should I check if data exists first then select it ?
published: true
description: 
tags: discuss,sql,best practice
---
I always just select data then check if returned data is null or not, but I wonder if that is a good way.
But if I check for data exists then that will make 2 call to db, 1 for check and 1 for select, is this good ?
Or maybe I just overthinking it :).
What are your though about this ?

Thank you
Around the Web – 20190111
Tags: blog
Published: 2019-01-28 22:14:45

---
title: Around the Web – 20190111
published: true
tags: Blog
canonical_url: https://wipdeveloper.com/around-the-web-20190111/
cover_image: https://wipdeveloper.com/wp-content/uploads/2017/07/WIPDeveloper.com-logo-black-with-white-background.png
series: Around the Web
---

And now for somethings to read (or watch) over the weekend, if you have some spare time that is.

## [201: My Annual Shower](https://www.gooddaysirpodcast.com/podcast/2019/1/9/201-my-annual-shower)

**Good Day, Sir! Show – Salesforce Podcast**  – / John De Santiago – Jan 9 – In this episode, we discuss lightning development, dev console, TIOBE Index, review our 2018 predictions, and give our 2019 predictions.

## [New year, new GitHub: Announcing unlimited free private repos and unified Enterprise offering](https://blog.github.com/2019-01-07-new-year-new-github/)

**GitHub**  – nat – Jan 7, 10:15 AM – Today we’re announcing two major updates to make GitHub more accessible to developers: unlimited free private repositories, and a simpler, unified Enterprise offering. We’re excited about these updates to our Free and Enterprise offerings: GitHub…

## [Baby steps in Continuous Delivery for Salesforce – Slalom Technology – Medium](https://medium.com/slalom-technology/baby-steps-in-continuous-delivery-for-salesforce-1973fc651803)

**Slalom Technology**  – Julien Ouellet – Jan 2, 1:19 PM – Of all the elements that every Salesforce project contains, the most underrated one has to be the deployment process. Sure, getting the work done in a timely and accurate way is the ultimate goal, but if you can’t get it into production, who cares?

## [Front-End Performance Checklist 2019 [PDF, Apple Pages, MS Word]](https://www.smashingmagazine.com/2019/01/front-end-performance-checklist-2019-pdf-pages/)

**Smashing Magazine**  – Jan 7 – 93 min read Share on Twitter or LinkedIn Upgrade your inbox and get our editors’ picks twice a month. With useful tips for web devs. Sent 2× a month. You can unsubscribe any time — obviously. Let’s make 2019… fast! An annual…

## [‘The Joy of Optimizing Images’ by Una Kravets – An Event Apart video](https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video)

**An Event Apart**  – Jan 8, 11:03 AM – Images are by far the greatest bottleneck to performance on the web, and with the average web page size now about 2.5MB large—images taking up 65% of that—we need to tame the beast. Running images through a compression program like…

## Till Next Week

Want to share something? Let me know by leaving a comment below or emailing [brett@wipdeveloper.com](mailto:brett@wipdeveloper.com)  or following and tell me on [Twitter/BrettMN](https://twitter.com/BrettMN).

Don’t forget to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)** to receive free the [WIP Developer.com](https://wipdeveloper.com/) weekly newsletter every Sunday!

The post [Around the Web – 20190111](https://wipdeveloper.com/around-the-web-20190111/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).
So you Programmed in a Regression
Tags: git, regression
Published: 2019-01-12 01:59:56

---
title: So you Programmed in a Regression
published: true
description: 
tags: git, regression
series: Git Communication
---

Did you have a feature which worked perfectly and now it is a piece of garbage, riddle in a hidden bug? OK that was harsh, the point is it would be nice to know what changes introduced the behavior difference.

Git bisect performs a binary search of your commit history. Start by finding a known working commit then use bisect to manage the code checkout to find the affending commit. 

By following a communicative commit history, each commit should compile, and you'll be told what was requested at the time.

See these tools aren't the first thing to reach for, but they can be an effective way to track things down when it the issue isn't directly pointed to. The D community put together an additional tool to track down compile regression by supplying a command which identified the failure. Git bisect was executed to automatically go through compiler builds (from Commits) to get to the introducing commit. 

{% link https://dev.to/easyaspython/hunt-bugs-with-git-bisect-l44 %}
Day 11: Making a swift macOS password manager for people who hate the cloud
Tags: macos, swift, passwordmanager, cloud
Published: 2019-01-11 23:58:10

---
title: Day 11: Making a swift macOS password manager for people who hate the cloud
published: true
description: Watch as I make a password manager for macOS this month
tags: macos, swift, password manager, cloud
series: Making a swift MacOS password manager for people who hate the cloud
cover_image: https://thepracticaldev.s3.amazonaws.com/i/q6r73zbfbm3mpfs98bu5.jpg
---

[<- For Day 10 go here](https://dev.to/swlkr/day-10-making-a-swift-macos-password-manager-for-people-who-hate-the-cloud-1edd)

📅 01/11/2019
🚀 19 days until launch
🔥 10 day streak
💰 $29 price
🤑 $0 USD
📈 0 customers
⌚️ 8.2 hours spent
💻 19 files changed, 1048 insertions(+), 170 deletions(-)
🏁 Today's goals: **Update existing logins, hopefully generate strong passwords, and some ui improvements**

I need to get better at story telling [so I can pitch media websites](https://campfirelabs.co/blog-1/2019/1/8/the-art-of-pitching-how-i-got-published-in-the-atlantic) to get clicks and sell this thing. Starting right now.

### Very short story mode
Over the course of 10 days, I've made huge strides on this password manager. My daily posts are fast becoming a go to staple in dev.to readers' streams, attracting less than 100 views per post! It may be shocking, but the daily grind of making small amounts of progress on a side project can really work! I think a lot more people (i.e. not just me) are looking forward to the release of this thing, which is a massive improvement from most of the projects I just dump on the world without talking about the development process from day 1.

Yeah that still wasn't very good, but you know, it's a start. Hard to tell a story about 10 mundane days.

### Timeline mode

**5:09 PM**
Started out strong, opened xcode, always a good step towards making some progress on a mac app.

**5:40 PM**
Noticed a bug when editing passwords and navigating back to the other view controller. This here

```swift
let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: Bundle.main)
        let vc = storyboard.instantiateController(withIdentifier: "AddLoginViewController") as! AddLoginViewController
        vc.row = login

        let parentVC = self.parent as! PasswordListViewController

        for sView in parentVC.containerView!.subviews {
            sView.removeFromSuperview()
        }

        addChild(vc)
        vc.view.frame = parentVC.containerView!.bounds
        parentVC.containerView!.addSubview(vc.view)
```

Is mostly right, except I'm setting the parent to the current view controller, so when I'm using a container view, I can't get back to the view controller with the container view in it. I have to do this instead:

```swift
parentVC.addChild(vc)
```

That's progress folks. Updating passwords is working! 🎉 See it in action below 👇
![](https://thepracticaldev.s3.amazonaws.com/i/3qvspyucj0cvrehjy59f.gif)

And no my password isn't password123
How weight lifting made me better at software projects. 
Tags: discuss, fitness, projects
Published: 2019-01-11 22:57:57

---
title: How weight lifting made me better at software projects. 
published: true
description: 
tags: #discuss #fitness  #projects
series: softwaremuscle
---

I've been lifting weight for longer than I have been a software engineer, and you wouldn't think that lifting weights would make me a better software engineer but I believe it has.

When I was young, I wanted to bench 100Kg (a good target for bench it's triple digits), I obviously didn't just get a gym membership, jump on a bench and try 100Kg. I would have failed and most likely hurt myself.

First I found out what I could bench, then I made a plan of what I would need to do between then and doing 100Kg on bench. I decided I would train three time a week, using the idea of progressive overload, each time lifting a bit more than the last till I got to 100Kg.

I got to 100Kg.

Projects in software are no different, you might have an amazing project idea, the wrong way is to jump into code and try to do it all.
The better way is to take a step back, plan, break it into chunks that can be achieved with regular consistent work.
I did this from the day I started in software and I can honestly say it's made me better and projects are far more achievable.

Does anyone else have any habits or ways of thinking from sports or hobbies that have carried over to Software Engineering ?
Inspiring UI Talks
Tags: ui, react, functional, elm
Published: 2019-01-11 21:50:04

---
title: Inspiring UI Talks
published: true
description: a small selection of inspiring talks
tags: UI, react, fp, elm
---

A small selection of interesting videos with a focus on modern UI development.


__Cleaning the Tar: Using React within the Firefox Developer Tools__

{% twitter 1083754252722466816 %}

{% youtube qUlRpybs7_c %}


__Immutability: Putting The Dream Machine To Work__

{% twitter 1083757304334503936 %}

{% youtube SiFwRtCnxv4 %}


__Literate Interactive Coding: Devcards__

{% twitter 1083764785152438272 %}

{% youtube G7Z_g2fnEDg %}


__Oh Composable World!__

{% twitter 1083766866194190336 %}

{% youtube SfWR3dKnFIo %}


__Building Composable Abstractions__

{% twitter 1083769031662993414 %}

{% youtube jJIUoaIvD20 %}


__Let's Be Mainstream! User Focused Design In Elm__

{% twitter 1083771191394009088 %}

{% youtube oYk8CKH7OhE %}


__Minimal API Surface Area__

{% twitter 1083799007028277250 %}

{% youtube 4anAwXYqLG8 %}


___What other interesting videos would you recommend?___
Flutter: Formatting TextField with TextInputFormatter
Tags: flutter, dart, android, ios
Published: 2019-01-11 20:27:04

---
title: Flutter: Formatting TextField with TextInputFormatter
published: true
description: Make easy to your user input data in form fields with formatters. 
tags: #flutter #dart #android #ios
---

A common task in mobile apps is formatting fields, like credit cards, phone numbers, zip code, etc. In Flutter, we achieve this using [TextInputFormatter](https://docs.flutter.io/flutter/services/TextInputFormatter-class.html).

In TextFormField and TextField, the property inputFormatters allows you to pass a list of TextInputFormatter to define how that field will behave.

There are 3 useful built-in implementations:

[LengthLimitingTextInputFormatter:](https://docs.flutter.io/flutter/services/LengthLimitingTextInputFormatter-class.html) prevents the insertion of more characters than a limit;

[WhitelistingTextInputFormatter:](https://docs.flutter.io/flutter/services/WhitelistingTextInputFormatter-class.html) allows only the insertion of whitelisted characters patterns;

[BlacklistingTextInputFormatter:](https://docs.flutter.io/flutter/services/BlacklistingTextInputFormatter-class.html) prevents the insertion of blacklisted characters patterns.

And they have some static properties to help us:

__WhitelistingTextInputFormatter__._digitsOnly_: takes in digits [0–9] only.

__BlacklistingTextInputFormatter__._singleLineFormatter_: forces input to be a single line;

You can combine formatters:

{% gist https://gist.github.com/rubensdemelo/9eda8dbcf119c3a7a82422343b7404fa %}

With RegExp, you can customize your formatters (as above properties does):

<code> WhitelistingTextInputFormatter(RegExp("[a-zA-Z]")) </code>

<code> BlacklistingTextInputFormatter(RegExp("[/\\\\]")) </code>

It is simple and easy to use, but some times you need create your own formatter. And it is easy too. Just extend TextInputFormatterand implement _formatEditUpdate_  method.

Take a look on the code bellow, from __flutter_gallery__ example app:
{% gist https://gist.github.com/rubensdemelo/23e8589868a604cf2dc644b8a5c6b48b %}

As we can see, there is no limit.

Flutter offers to developers excellent built-in formatters and makes easy to extend and create our own. Let’s use.

__Make easy to your user input data in form fields with formatters.__