teleren/devto huggingface dataset:
Form Validation: You're (likely) doing it wrong
Tags: javascript, webdev, ux
Published: 2019-01-23 18:13:57

---
title: Form Validation: You're (likely) doing it wrong
published: true
description: 
tags: javascript, webdev, ux
---

First of all, run, don't walk, and read the following about ["Usability Testing of Inline Form Validation"](https://baymard.com/blog/inline-form-validation), it goes into far more general detail, though I may follow up with a post about a morsel they don't cover.  The two main categories of issues the article is concerned with are:

1. "Premature Inline Validation", and
2. "Outdated Error Messages"

Here I am chiefly concerned with the first pitfall.  In fact if you look at some code I wrote, you will see I avoid the second, specifically the line setting the error message (back to) empty: `errEl.innerHTML = '';`

	let fnameEl = document.getElementById('fname');
	let lnameEl = document.getElementById('lname');
	
	function confirmEntry() {
		let errEl = document.getElementById('err4-' + this.id);
		
		if (this.value) {
			errEl.innerHTML = '';
		}
		else {
			errEl.innerHTML = 'The above field is required';
		}
	}
	
	fnameEl.focus();
	
	fnameEl.addEventListener('blur', function() {
		confirmEntry.call(this);
	});
	
	lnameEl.addEventListener('blur', function() {
		confirmEntry.call(this);
	});

Unfortunately though, as written, the above will correctly display an error if the first field is tabbed through, but then if trying to shift-tab back to correct that error, it will annoyingly display an error for the second field.  This sort of thing is covered in the above-referenced article.

![](https://thepracticaldev.s3.amazonaws.com/i/8o4yk12z98mtwfgl32t0.PNG)

A solution seems to be to add some "state", the following is quick and dirty and probably not perfect, but should be less annoying for users:

    let lastError;	
		
	function confirmEntry() {
		let errEl = document.getElementById('err4-' + this.id);
		
		if (this.value) {
			errEl.innerHTML = '';
			lastError = '';
		}
		else if (lastError) {
			lastError.focus();
		}
		else {
			lastError = this;
			errEl.innerHTML = 'The above field is required';
		}
	}

I've created a Gist containing the above code, [both revisions being available here](https://gist.github.com/dexygen/3edb947c8ef30e3f4faa25969ba03e4a/revisions).  And here is [the follow-up post](https://dev.to/dexygen/form-validation-youre-doing-it-wrong-part-two-5545) mentioned above.
4 stages of developer output quality
Tags: android, kotlin, fore, mvo
Published: 2019-01-23 18:03:18

---
title: 4 stages of developer output quality
published: true
tags: Android, Kotlin, fore, MVO
---

![progress graph showing a developer moving through simple & stupid, complicated & stupid, complicated & smart, to smart & simple over a 10 year period](https://thepracticaldev.s3.amazonaws.com/i/oxch4pr2w21n5pq8s5dx.jpg)
<figcaption>4 stages, roughly 10 years (for me at least)</figcaption>
Tips to Surviving a 48 Hour Game Jam
Tags: gamedev, tips, gamejam, discuss
Published: 2019-01-23 17:53:10

**Game Jams** are a fun way to get together with other people while strapping together the best game you can make in such a short amount of time.

Last year, I participated in the [Global Game Jam](https://globalgamejam.org/), made a [game](https://globalgamejam.org/2018/games/blind-justice), and [won a nomination](https://ggda.org/blog/best-in-georgia-competition-returns-for-2018/) for the Best in Georgia Competition.

This year, I wanted make myself a list of things I could have done better and thought I might as well share it!

---

#### 1. Have fun
This is the most important thing.
The rest of these tips are all about ensuring that you are!

#### 2. Bring a pillow and something to sleep on*
***\*If you are going to a hosted location.***
Sleeping on the floor is rough, though having a backpack for a pillow helps.
Sleep is important, especially when you're working under pressure.

#### 3. Scope your project
This all depends on how many people are working on the game and their skill set!
Have a good idea of what you are capable of.
Start small than work your way up if you have time.

#### 4. Don't stress over not finishing
Worrying about getting done can detract from the experience being fun.
There are always ways to take what you have and turning it into something presentable.
Reduce. Reuse. Recycle.

#### 5. Talk with people
Everyone else participating is going through the same thing as you are.
Bounce ideas off them, form teams, get critiques, connect!

---

This year's Global Game Jam is this weekend, January 25 - 27, 2019.

Have any tips on surviving game jams and hackathons yourself?
Let me and everyone else know!


Cover image from [Georgia State University Technology Services](https://technology.gsu.edu/technology-services/services-for-you/it-services-for-students/global-game-jam/)
JSNews
Tags: javascript, react, vue, angular
Published: 2019-01-23 17:26:09

---
title: JSNews
published: true
description: Get latest JavaScript news and articles from top JavaScript developers and blogs.
tags: javascript, reactjs, vue, angular
cover_image: 
---

JSNews is app for JavaScript programming language that keeps you updated with latest JavaScript news, articles and updates from top JavaScript developers and blogs. Being up-to-date with your language of choice is crucial to become a better developer by learning what is hot, trending and best practices.

[Checkout JSNews](https://play.google.com/store/apps/details?id=io.codeinphp.jsnews)
What are some of your favorite live coders?
Tags: discuss
Published: 2019-01-23 17:02:07

---
title: What are some of your favorite live coders?
published: True
description: Share your favorite livestreamers that focus on coding
tags: discussion
---
Hey all,

I am always looking for people to watch that code live. I love to see other people as they think through their problems and fix issues. Who are some of your favorite people to watch live code?
Code Tip: Avoid unnecessary else statements
Tags: tips
Published: 2019-01-23 16:21:27

When writing code it is easy to think in a logical way. With conditionals, people often write it as they would think it. If this condition is true then return this value, otherwise return a different value.

However there is a trap that people often fall into and one simple refactor can make the code more readable. If you have this conditional within a method or function that is returning a value, you can often just remove the else condition because if the condition is true it would never hit it in the first place.

Consider the following code:

```php
public function getName()
{
    if ($this->firstName && $this->lastName) {
        return $this->firstName.' '.$this->lastName;
    } else {
        return $this->firstName;
    }
}
```

This is a perfect example for refactoring.

You will notice that if the user has a first and last name, we return it. Otherwise we just return their first name.

However the else condition is redundant because we are already returning a value if the condition evaluates to true.

Therefore we can refactor this method to remove the else statement.

```php
public function getName()
{
    if ($this->firstName && $this->lastName) {
        return $this->firstName.' '.$this->lastName;
    }
    
    return $this->firstName;
}
```

By doing this, it removes a level of indentation which makes the code more readable. It's a useful tip to remember and one that I find applying all over the place.

Originally Posted on [George Hanson](https://www.georgehanson.co.uk/code-tips/code-tip-avoid-unnecessary-else-statements)
STO Launching - How to Run the Process
Tags: sto, tokens, blockchain
Published: 2019-01-23 16:12:57

---
title: STO Launching - How to Run the Process
published: true
description: STO launching process needs start-up documentation and SEC registration at the very beginning. The registration with SEC is necessary, because before making it the seller couldn’t sell tokens legally due to US laws.
tags: STO, tokens, blockchain
---
![Blockchain platform](https://thepracticaldev.s3.amazonaws.com/i/pr6kfescxp0q05egfobp.jpg)
STO launching process needs start-up documentation and SEC registration at the very beginning. The registration with SEC is necessary, because before making it the seller couldn’t sell tokens legally due to US laws. Those who’re running new digital economy should consider the laws that protect investors. But this is only the first step. Besides managing these formalities the seller should manage lots of other things.
Choosing blockchain platform is also an important thing without which there will be no need in registration this business, because, it wouldn’t be successful. If you’d like to know how to launch STO open this site: http://merehead.com/blog/how-to-launch-security-token-offering-sto/.  Besides blockchain platform one need a proper project team. It should consist of professional management, developers, advisors, marketers. Key-players are very important for the project, because investors pay attention to them firstly.
Then you’re to choose the type of the tokens. Clarify for youeself the functions of the tokens, it is also very important. The calculation of the expenses is needful step. Do it at the very beginning, because firstly to start you are to think over whether you have enough money for this. If you have lack of money you’d fail and waste that amount of funds you’ve already invested.
How do you teach coding for complete beginners especially kids?
Tags: discuss, teachkids, codingforkids
Published: 2019-01-23 16:09:57

---
title: How do you teach coding for complete beginners especially kids?
published: true
description: I want to see different techniques used to teach a group of kids and make them get interested in programming. Let's say kids are in their early teenage
tags: #discuss #teachKids #codingForKids
---

- What will be your technique to teach complete beginners?
- How do you introduce programming to them without overwhelming with information?
- Show any examples of teaching to kids if you know it already?
Idea feedback Poll: ReactJS application component kit
Tags: discuss, react
Published: 2019-01-23 15:36:25

---
title:  Idea feedback Poll: ReactJS application component kit
published: true
description: 
tags: discuss, reactjs
---

Hey everyone. 

I'm thinking about building a re-usable set of application specific React components since I've discovered that I really dislike working based of many existing HTML templates as they're found on ThemeForest and other similar sites and translate those into React components.

Basically components such as ProductItem, CartOverlay, FAQ, OurTeam, Testimonials, LoginForm, RegisterForm, BlogPost etc that people can download, combine, customize as needed and connect them to their data source( APIs etc).

The key difference is that I'm talking about application specific components catering to different domains as opposed to general components such as field inputs, buttons etc that you would typically find in frameworks such as Bootstrap, Material UI etc.

Do you think it's something that you would use or be interested in ? Would it be something you would pay for having someone develop them for you ?

Appreciate any feedback.
I can't make up my mind about Twitter lately
Tags: discuss, productivity, showdev, aws
Published: 2019-01-23 15:05:34

---
title: I can't make up my mind about Twitter lately
published: true
description: Searching for a balance between engagement, detachment, and robots.
tags: ["discuss","productivity","showdev","aws"]
---

Or so it would seem.

Some time ago I created [ephemeral](https://github.com/vickylai/ephemeral), an AWS Lambda function that deletes tweets past a certain age from my timeline. I wrote [this article](https://dev.to/victoria/why-im-automatically-deleting-my-old-tweets-using-aws-lambda-1b81) about it and spent less and less time on Twitter.

Meanwhile, I ran another Lambda function that posts links from my blogs to my timeline, hoping I could drive some engagement and not look dead. I generally get good results from this (no one thinks I'm dead yet), with new and interesting people finding and following me, commenting, and giving me a chance to follow them in return.

Recently I received some feedback that, well, a timeline consisting solely of links to my blog posts was getting a bit boring. Of course, due to the finite nature of my time and number of posts thus far, there was beginning to be some repetition. Frankly, I agree with the assessment - I'm just not sure what to do about it.

I continue to attract new and interesting comments and followers, so I didn't want to kill the function completely. Of course, I don't want to bore the nice people who are already following me for updates, either.

So I started hanging out more on Twitter, collectively spending about 3 hours more on it over the week, which is normal for some but a lot for me.

I wondered if there was a programmatic way I could make my tweets more useful, interesting, or otherwise less boring, while still sharing my links. I thought of including useful information like the weather or how many socks are in my laundry hamper so far, or even experimenting with a language generator that tried to sound like me.

I don't have a good answer yet.

As a jumping off point, [here is the Lambda function](https://github.com/victoriadotdev/author-afk) that I use to post RSS links to my Twitter feed. Maybe opening it up to the creative and funny people on dev.to and open source GitHub 'verse can help to generate some ideas.

If you're reading this because you're one of my followers, thanks for sticking around! You guys say such interesting things.

If you're not yet one of my followers, you're welcome to jump on board. The fun is about to begin! I think.

And in any case, as always, contributions welcome.
Learn to code like a pro in 30 days
Tags: webdev, motivation
Published: 2019-01-23 14:16:48

---
title: Learn to code like a pro in 30 days
published: true
description: There are no hacks, only deliberate continuous improvement
tags: #webdev #meta #motivation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hr825ufkoe5dlmmw833y.jpg
---

There are no shortcuts. Next time you see an article like this - skip it!

But while I have you fooled, let's talk about patience and deliberate improvement.

Coding, like any other skill, takes time to learn and a lifetime to master. The bad news is that time alone is not going to cut it. If you keep writing `for` loops for 12 months, you will become really good at writing `for` loops but not much else. So how do you become a "pro"? You develop a plan.

## Plan

Your plan must be designed to stretch your understanding to the very cusp where familiar turns into scary. That is where the learning happens. In the simplest example it goes like this: A) Learn to change the color of a button B) Introduce pseudo-class to make button really pop on hover C) Animate the transitions so it looks amazing

**Aim -** Incremental addition to complexity building upon base understanding

**Avoid -** Building the same (in terms of complexity) thing over and over again.

As far as actual plan goes for your goal - there are many to choose from depending on what you are after. First understand your goals, then pick a plan and **stick to it**.

## Patience

So you've got a plan and some time set aside to execute it. Now what?

Keep at it. This is the hardest part, it is inevitable that distraction will creep in. After the first few days or weeks (if you are lucky) doubts, insecurities and distractions will start seeping into your conscience.

- What if I drop React and start learning Vue instead? I heard Vue is cool on a podcast.
- Maybe I should play with Golang, everybody is talking about it.
- Is development even for me? I may be too (dumb, old, marginalized, busy, lazy ⇒ insert your self-sabotage go-to reason here) for it.

These thoughts are very dangerous, I think that is where 90% of good intentions and project ideas and self-improvement goals fail. You have to be pushing through this noise and executing on your plan no matter what. Ignore the distractions and doubts, drown those pesky thoughts with the noise of your fingers hitting the keyboard.

Success will come. But not in 30 days. Be patient.
Most Popular Development Posts Of The Week (23 January 2019)
Tags: vscode, frontend, javascript, webdev
Published: 2019-01-25 11:07:58

---
title: Most Popular Development Posts Of The Week (23 January 2019)
published: true
tags: vscode,front-end,javascript,webdev
canonical_url: https://medium.com/daily-now/most-popular-development-posts-of-the-week-23-january-2019-e2b521a8db45
cover_image: https://cdn-images-1.medium.com/max/1024/1*Wlxjbx7XmB51oW27xykIPQ.jpeg
---

> Risk more than others think is safe. Dream more than others think is practical

- [Top 10 JavaScript Trends to Watch in 2019](https://app.dailynow.co/r/fdae3a1e961af0059feffadcb9d20857) by [Ryan Chartrand](https://medium.com/u/d45681792412)
- [Top 5 Frontend Development Topics To Learn in 2019](https://app.dailynow.co/r/41e3181f29768c127cc1018b7d83d787) by [Kevin Ball](https://medium.com/u/af637b4461bb)
- [My smart home](https://app.dailynow.co/r/9bd88ac942548984eedb51a094f899df) by [Madalin Valceleanu](https://medium.com/u/9786dbb71ef9)
- [6 Awesome CSS Extensions for VS Code](https://app.dailynow.co/r/7962de2e192fe87c104dbc8dcbe32b4c)
- [How to limit front-end bugs](https://app.dailynow.co/r/2c15daee71ba3a0ae457fd1b314d37b9) by [Carl Rippon](https://medium.com/u/2e87612f5884)
- [These Work Habits Will Make You a Successful Programmer.](https://app.dailynow.co/r/75ebab709ef6e41ee75a605ef159bb87) by [Ravi Shankar Rajan](https://medium.com/u/e373e0ecf6a3)
- [I tracked my happiness each day of 2018](https://app.dailynow.co/r/d18a93440d8384fc80c0e45cad5dfeaf) by [Nhan Thanh Vu](https://medium.com/u/faca320a2ce2)
- [Developer Spotlight: Emma Wedekind](https://app.dailynow.co/r/3828106d5bc7e8e0b3abf782ef948426)
- [The Best GitHub Feature You Never Knew Existed](https://app.dailynow.co/r/68fb6cacd524c6101c7908e9c5ffbbbe)
- [The Path to Becoming a Front End Developer in 2019](https://app.dailynow.co/r/1f739b12c7d3ac7fd63603b6a726b763)

* * *

[_Thanks to Daily_](https://www.dailynow.co/) _developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

![](https://cdn-images-1.medium.com/max/1024/1*m8Uf-6F4Q5AOp_wW6tbKSQ.jpeg)
Generated Social Images
Tags: gatsby
Published: 2019-02-11 15:08:23

---
title: Generated Social Images
published: true
tags: Gatsby
canonical_url: https://arcath.net/2019/01/generated-social-images 
---

I follow [dev.to](https://dev.to) who have some great images on their tweets that are bascially just the post title and author. I really like the way it looks and want to try something here.

<picture>
        <source srcset="/static/c42e951fbe37ecb63a80c9c5841f30fe/1034d/dev.to.webp 448w" sizes="(max-width: 448px) 100vw, 448px" type="image/webp"></source>
        <source srcset="/static/c42e951fbe37ecb63a80c9c5841f30fe/a7edf/dev.to.png 448w" sizes="(max-width: 448px) 100vw, 448px" type="image/png"></source>
        <img style="width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;box-shadow:inset 0px 0px 0px 400px white;" src="https://arcath.net/static/c42e951fbe37ecb63a80c9c5841f30fe/a7edf/dev.to.png" alt="dev.to example" title="">
      </picture>

I’m not a fan of manual labour and that includes using photoshop to create an image for each post so that only leaves generating the images with [Gatsby](https://www.gatsbyjs.org/).

# JIMP

I wanted to keep the image generation entirely in Gatsby to keep things easier. This meant I needed a JS only image creation library which is where I found [JIMP](https://www.npmjs.com/package/jimp).

I fire my `createImage` function for nodes that I might share like posts, notes and books during the `on-create-node` hook.

This function creates an image for both Facebook and Twitter that I link to through the open graph tags in the templates `Helmet`.

The images themselves are nothing special just the content background colour, the sites icon, the post date, and the title. Take the one for this post:

![This posts image](https://arcath.net/static/e7761fdc1eeb7ad94ab422a50838e4d2/12106/social-image.png)

The code to do this is pretty simple and can be found in the sites source [here](https://github.com/Arcath/arcath.net-gatsby/blob/master/gatsby/create-page-image.js). I was surprised how easy this turned out to be.

Having gatsby generate the images instead is pretty handy. I can keep the images out of the git repository which is already pretty big and I wont have to remember to make sure they commit.

This is a small feature that most users of the site wont even see but its a nice one to have. I’ve been more and more impressed with Gatsby as I’ve been using it to the point that I now think along with Netlify CMS it can be a complete replacement for WordPress for the School websites I build.
Useful List of Angular 7 Event Types for Event Binding
Tags: angular, angular987, softwaredevelopment, angular7eventtype
Published: 2020-01-31 20:50:23

---
title: Useful List of Angular 7 Event Types for Event Binding
published: true
tags: Angular ,Angular 9|8|7,Software Development ,Angular 7 Event Type
canonical_url: https://www.positronx.io/useful-list-of-angular-7-event-types-for-event-binding/
---

The post [Useful List of Angular 7 Event Types for Event Binding](https://www.positronx.io/useful-list-of-angular-7-event-types-for-event-binding/) appeared first on [positronX.io](https://www.positronx.io).

I am going to share with you a useful list of Angular 7 Event Types for Event Binding. Angular offers plenty of event types to communicate with your app. Events in Angular 7 helps you to trigger an action on specific condition like click, scroll, hover, focus, submit etc.

[Click here to read more](https://www.positronx.io/useful-list-of-angular-7-event-types-for-event-binding/)