teleren/devto huggingface dataset:
Small bits of web UX
Tags: ux, web, discuss
Published: 2018-09-09 15:41:42

---
title: Small bits of web UX
published: true
description: I'm not sure how to call those. This good tone for web experience
tags: [ux, web, discuss]
---

I'm not sure how to call those. This good tone for web experience. This is not a11y. This is rather what people expect from the good website.

## Use GET redirect after successful POST submit

To make sure user will not submit the form twice, do a GET redirect after successful submit, this way if the user will refresh after submit second submit won't happen

## GET request for searches

If your website has search functionality use GET request for it. This way the user can bookmark search or send a link to a friend.

## Block submit button while doing AJAX request

If you use AJAX for submitting form instead of classical POST don't forget to set `disabled` attribute for submit button to prevent double submit.

## Use spinner while doing AJAX request

The user should be aware something is happening in the background and not broken.

## Use `a` tag for navigation

Don't use `div` or `span` as clickable targets for navigation. `a` tags support focusing, shows visited links in different color, crawlable by search engines, they show proper pointy cursor on hover, they support Ctrl-click (Cmd).

## Respect Ctrl-click (Cmd) on `a` tag

If you use JS to catch clicks on links to do internal navigation, make sure you pass through click event with Ctrl (Cmd) button pressed, it will open link in new tab.

## Don't use `a` or `div` or `span` tags for buttons

Use `button` instead. Buttons are focusable (in some platforms), but don't have visited state or Ctrl-click (Cmd).

## Use underline style for `a` tag

This is a soft requirement, but you have to admit sometimes it is hard to tell if given text is a link or not. Bonus point for having a different color for visited links.

## Make 404 page  clear

It is a favorite thing of fake websites to response with search results page instead of 404. 404 page should be clear, minimal information should be there, the user needs to clearly understand this is not the page they looking for.
Don't ask the user to submit a report about missing page, you have web server logs.

## Use deep-linking for SPA

URL is one of the core values of the Web. You can bookmark it, you can send it, you can open a similar state of the application in a new tab.

## Don't use anchors for deep-linking

We need to admit there were dark times in the web development when the anchor was the only choice for deep-linking (`http://example.com/#/navigation`), but now we have history API. The server can't get information about the anchor part of URL when the user reloads the page.


**What your favorite small things for web UX?**

Follow me on [twitter](https://twitter.com/stereobooster) and [github](https://github.com/stereobooster).
Embed YouTube Video in React Native Android Using WebView Component
Tags: reactnative, react, mobile, android
Published: 2018-09-09 12:57:39

---
title: Embed YouTube Video in React Native Android Using WebView Component
published: true
description: Embed YouTube Video in React Native Android Using WebView Component
tags: #reactnative #react #mobile #android
---

Post Link : <a href="https://www.skptricks.com/2018/09/embed-youtube-video-in-react-native.html" > Embed YouTube Video in React Native Android Using WebView Component </a>

In this tutorial we are going to explain how to integrate or embed Youtube videos in react native application with the help of Webview component. Youtube API has provide free facility to integrate videos in desktop and mobile based application with the help of simple embed link. Now question is how user can generate embed link for any specific Youtube video link.

<a href="https://www.skptricks.com/2018/09/embed-youtube-video-in-react-native.html" > Embed YouTube Video in React Native Android Using WebView Component </a>

<img src="https://2.bp.blogspot.com/-LcoVtAwsgzM/W5UTmdqcUSI/AAAAAAAAB4U/msIatFzROWoTZYQa_5NIayfYBCAUTCeIACLcBGAs/s400/we.png" />

<a href="https://www.skptricks.com/2018/09/embed-youtube-video-in-react-native.html" > Read More... </a>
Practical guide to Dagger 2
Tags: android, dagger, java
Published: 2018-09-09 12:52:41

---
title: Practical guide to Dagger 2
published: true
description: Practical guide to using Dagger 2 with rule-set for using it.
tags: android, dagger, java
---

The post was published at my [blog](https://gaurav.chaddha.me/dagger2). If you don't have any idea about dependency injection or dagger, head over to the article link above. 

Keep reading if you have an idea about dagger annotations like @Inject, @Module, @Provides and @Component. These rules are for simple use-cases of dependency injection.

### Rule-set:

1. Use @Inject on constructors wherever you can (To declare dependencies).

2. Make modules for stuff you can’t instantiate directly (e.g. Retrofit client as it’s built by it’s builder) or for stuff you can’t create like Context.

3. Also make ‘provides’ method in modules if you want to inject interfaces instead of implementations.

4. Use @Singleton if you want the dependencies to remain a Singleton.

5. Include all the required modules in the component and define where that component will inject dependencies to.

6. Use @Inject to ask dagger to inject dependencies you have declared.
What the hell is a PWA? Part 1
Tags: webdev, javascript, html
Published: 2018-09-06 07:44:39

---
title: What the hell is a PWA? Part 1
published: true
description: Beginning of the journey in your understanding of PWA
tags: webdev, javascript, html
---

So you keep hearing about PWA's. Or progressive web apps. But what the hell is it? What does it even mean? SPA's are clear, a single page application, the term defines what it is very clearly. But it's not that easy with PWA's.

You do what every sane person does when they don't know something. You google it. And the first result is from google itself. Now you will know for sure what it is. You click it, and you start reading it.

>A new way to deliver amazing user experiences on the web.

Ok, sounds promising... ?

>Progressive Web Apps are user experiences that have the reach of the web, and are: 

User experiences that have the reach of the web. I don't think anyone knows what that actually means. 😵

>Reliable - Load instantly and never show the downasaur, even in uncertain network conditions. 

Ok, now we are getting somewhere. So we got new capabilities to react to changing network conditions. That's good. Maybe this will be more clear than I thought, just a bad name and a bad intro?

>Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling. 

🤪🤪🤪 I have spoken too soon. Again, what does it mean? We always did this. We always aimed for fast responsive UI, and I would say we have been doing it pretty well. If you are not on a bloated website like facebook, you can see beautiful stuff. How is any of this new?

>Engaging - Feel like a natural app on the device, with an immersive user experience. 

... If we judged this like code, by WTF's per minute, this PWA's intro wouldn't pass a review. That's what we always aimed for. This is not new. This is not groundbreaking. Why people don't shut up about it. 


In the end, the best explanation of PWA is the P letter. Progressive is defined as:

>favoring or advocating progress, change, improvement, or reform, as opposed to wishing to maintain things as they are.

Essentially, it's just using a bunch of new native web capabilities in combination, to achieve vaguely defined goals. To muddy it a bit, some of the things are not that new, some actually new things are not needed for the defined goals. There's no one thing that makes your app a PWA. Or one thing that makes your app not a PWA. Just a bunch of ambiguity.

And with this series I plan to make it clear and go in depth with every single thing that lets you achieve the PWA goals.
BxJS Weekly Episode 27 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-09-09 09:35:33

---
title: BxJS Weekly Episode 27 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 27 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-27-2018-09-08.md).

You can also watch or listen to this episode on:
- [YouTube](https://youtu.be/EDaibhm9lLA)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-27-Sept-8%2C-2018-(javascript-news-podcast)-id1378315-id91439479?country=us)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉
8 Steps to run Data Science project
Tags: python, datascience, machinelearning
Published: 2018-09-09 09:23:43

---
title: 8 Steps to run Data Science project
published: true
description: 8 Steps to run Data Science project
tags: #python, #DataScience, #MachineLearning
---

> We will follow the general machine learning workflow step-by-step:

* Problem Definition
* Data cleaning and formatting
* Exploratory data analysis
* Feature engineering and selection
* Compare several machine learning models on a performance metric
* Perform hyperparameter tuning on the best model
* Evaluate the best model on the testing set
* Interpret the model results
* Draw conclusions and document work
correct way to request user permissions in browser?
Tags: discuss, help, web
Published: 2018-09-09 07:04:35

---
title: correct way to request user permissions in browser?
published: true
description: 
tags: #discuss, #help, #web
---

This is what happens when I navigate to any website these days.

I open the website. 
boom we use cookies is that ok.
me: yes (as if I have a choice)
do you want to enable push notifications.
me: no
add to home scre...

me: close the browser. 

any ideas/suggestions how to request permissions without annoying the user?
🔥 🔥 My Favorite Packages on Atom editor for PHP Development
Tags: webdev, texteditor, atom, ubuntu
Published: 2018-09-08 22:30:54

---
title: 🔥 🔥 My Favorite Packages on Atom editor for PHP Development
published: true
description: These are the list of my favorite atom packages for web development.
tags: web_development,text-editor,atom,ubuntu
---
Hello guys, this is my first post on **dev.to** and today, I'll be sharing with you the list of packages, how to install them on your atom text editor giving it a new look and making your coding moment more fascinating and enjoyable. 

###LET'S GET STARTED 🔥🔥🔥

#1. Atom-beautify 😍

Guess what it's one of its kind. Wait are you worried about indentations? 😥 this will save you and make your codes more clean and organized.

*to install,* press **ctrl + alt + T** this will open your terminal on ubuntu and probably on Mac Os too, then type or copy the following command **apm install atom-beautify** to the terminal


#2. linter 👌

This provide you with option to view errors in your codes without stress. To install, copy or type **apm install linter**.

*Note* You might want to install specific linter for different work and languages you're using


#3. Autocomplete-paths

Just as it sounds, it'll autocomplete the missing path. I love this package with my 💕 heart and I can't live without it. funny! 😁

By now, you should know how to install this package **apm install autocomplete-paths** so simple right??😘

Let's test this out by typing fun (function) and we see this

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/94k17rmn1nr20z2oqig8.png)

Hold on, now press enter. You should see the autocomplete working now.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/9omffxi2mwod2x1drm1v.png)


#4. File-icons

File icons is a lovely package every atom user must have (sorry not a must but choice)

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/35radqirm4d8gryq1rtx.png)

#5. php-cs-fixer

No 1 package. I can't explain why I kept it as the *5th*. This is PHP Coding Standards Fixer.

The installation is quiet different from the rest of the package. We need to meet the requirement by making the package available on our path. Sorry for the long story

The following steps will solve it.
1. Navigate to your terminal
2. Check if composer is installed by executing **composer -v**. This will check the version of composer. However, you can follow this link to install [composer](https://getcomposer.org/download/)

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/ippadl0jrvjxhw8qdpya.png)

You should see the above output if composer is installed

3. Next, copy and paste **$ composer global require friendsofphp/php-cs-fixer** to your terminal

4. Lastly, copy **$ export PATH="$PATH:$HOME/.composer/vendor/bin"**

#Bonus:

##### Figlet

With figlet, you can convert a selection into ascii-art which  is sometimes useful when documentin g.

##### language-blade

Must have for every Laravel developer

##### highlight-selected

THE END

Something missing? leave a comment, I can't wait to see other amazing packages
I'm running dev.to source code on Windows
Tags: windows, opensource, devto
Published: 2018-09-09 06:06:31

---
title: I'm running dev.to source code on Windows
published: true
description: The same as the title 🤓 
tags: windows, open source, dev.to
---

Hello everyone, 

My name is Nathan and I'm currently looking to contribute to interesting OSS. Since I have windows machine for development with WSL installed, I think I'll start with helping Windows documentation.

I've followed the documentation and gorails tutorials, right now the site is running fine on my localhost. For more details, you can see my comment on the issue {% github https://github.com/thepracticaldev/dev.to/issues/306#issuecomment-419692198 %}

This is also my first post, so nice to meet you all 😀
Entry? Junior? Mid? Senior?
Tags: level, senior, mid, junior
Published: 2018-09-09 01:29:51

---
title: Entry? Junior? Mid? Senior?
published: true
description: What’s the difference between levels of developers?
tags: level, senior, mid, junior
---

What level of engineer are you? And who’s to say you aren’t more than that? 

It can be really hard to gauge what level of software developer you are. Especially if our job doesn’t really have that hierarchy. There are many jobs that have levels of software engineers and they will determine your level. This is where things can get tricky. I always find it difficult to say that I am a Junior level when sometimes I don’t feel that way or I am only a Junior in THAT company because I’ve been there for {X} amount of years. So going to a new job would render me an entry level to that company. At least that’s how I think about it sometimes. 

Of course there is a certain level of knowledge and competency that an engineer has at certain levels but it’s important to not get caught up in what level or are. It takes away from your work and how you can progress. 

What are your opinions on this?
password checker
Tags: javascript, showdev
Published: 2018-09-09 00:57:10

---
title: password checker
published: true
description: Simple password checker for your website
tags: javascript,showdev
---

A friend of mine wanted a password checker for his website.

So I wrote this and figured I'd post it here, what do you think?

https://github.com/nateous/passwordchecker

Looking for a great regular expression testing site?
Try out https://regex101.com/ !
How to start coding in GitHub ?
Tags: discuss, opensource
Published: 2018-09-08 22:13:42

---
title: How to start coding in GitHub ?
published: true
description: Diffrent strategies to start coding in a project on GitHub
tags: discuss, opensource
---
I have written [an article on Medium](https://medium.com/@nazimboudeffa/par-ou-commencer-sur-github-e6238a38c97c) (in french) to explain what is the way to start coding on GitHub when someone just connect to the site, so I have proposed three diffrent strategies :

- My Star of all repos, 
    it means, choose the most starred repo on github.com/k0kubun/gitstar-ranking

- Who answers my needs
    it means, take a look at the awsome badge on github.com/sindresorhus

- My preferred company
    it means, go ahead and type the name of your preferred company after the slash in github.com

Then I've proposed to discuss other strategies.
I'm a full stack web developer. Ask Me Anything!
Tags: ama
Published: 2018-09-08 21:41:13

---
title: I'm a full stack web developer. Ask Me Anything!
published: true
tags: ama
---

I'm a full stack web developer, specialising in the following technologies:

## Back-End
- MySQL/MariaDB
- NodeJS
- Redis
- PHP
- Laravel
- Sysadmin
- nGinx

## Front-end
- HTML/CSS etc.
- Javascript
- VueJs
- TypeScript
- Single Page Applications

Ask me anything!
JavaScript Performance using console.time() & console.timeEnd()
Tags: javascript, performance, console, executiontime
Published: 2018-09-08 19:21:28

---
title: JavaScript Performance using console.time() & console.timeEnd()
published: true
description: Javascript console object has built-in functions of time() and timeEnd() to measure the elapsed time.
tags: javascript, performance, console, execution time
---

Many a times it's necessary to check the time your code is taking to execute. JavaScript runs on the client's local machine and we don't want our application to be sluggish even in the devices with lesser hardware configurations.

Previously, I was using the method of printing current timestamps to manually check how much time it took. Let's jump right into code:

```javascript
let startTime = new Date().getTime();

console.log("started");

setTimeout(() => {
  console.log(
    "ended in " + (new Date().getTime() - startTime) + " milliseconds"
  );
}, 3000);
```

Output will be :

> "started"
> "ended in 3001 milliseconds"

But then I found that there are built-in methods that can help to accomplish the same. They are `console.time('some text')` and `console.timeEnd('some text')`. These can make our life so much easier to see elapsed times. A refactored version of the code sample above would be;

```javascript
console.time("timer");

setTimeout(() => {
  console.timeEnd("timer");
}, 3000);
```

Output will be:

> "timer: 3001.4951171875ms"

This is pretty clean and kind of a non-hacky way to test our code's execution time.

Hope you find it useful. Happy coding!



Thanks [Ronak Baldha](https://dev.to/ron4ex) for reviewing the post.
Introducing Go Mod
Tags: go
Published: 2018-09-01 17:44:11

---
title: Introducing Go Mod
published: true
description: Go 1.11 introduced a new tool called mod. What is it?
tags: go
---

# Introduction

In Go 1.11, a new tool has arrived. It's called `go mod`. For those who don't know what is that, I'll tell you about it.

One of the purposes of this tool is to get rid of `$GOPATH`, so you can `git clone` a Golang repository anywhere and work on it without worrying about `$GOPATH` at all. There are other purposes of course, such as simpler versioning and usage, but I think the RIP `$GOPATH` is the most notable.

If the repository is a `mod`, all the tools you use regularly (`go get`, `go build`, etc.) will handle it nicely without changing anything.

# Usage

`go mod init`. Yep, that's all you have to do. If you're trying to `go mod`-ify an existing project that uses `$GOPATH`, you should export the `GO111MODULE=on` variable (`go mod` will tell you that as well).

There is a recommendation before creating a production tag: run `go mod tidy`. This will update your `go.mod` so every dependency (internal and which are used by dependencies)will be locked.

If you're interested, you can read [the official wiki][0]. It provides much more information about `go mod`, I just gave you the basics that should set you up.

# IDE Support

Goto definition and auto-completion works fine even without vendoring your dependencies in VS Code. I assume other editors that support Golang as good as Microsoft will handle `go mod` nicely.

# Community

@rhymes wrote an article about `go mod` as well and covered what he loves about it. I recommend to read it as well!

{% link https://dev.to/rhymes/go-gets-modules-12ei %}

[0]: https://github.com/golang/go/wiki/Modules
Improve your reds
Tags: tdd, tips
Published: 2018-09-08 16:44:58

---
title: "Improve your reds"
published: true
description: Improve your TDD with this tip. 
tags: 
  - tdd
  - tips
canonical_url: https://www.codesai.com/2018/06/improving-your-reds
cover_image: https://thepracticaldev.s3.amazonaws.com/i/bi1qz9fhp2oqvp602tjo.jpeg
---

Improving your reds is a simple tip that is described by [Steve Freeman](http://hol.gandi.ws/) and [Nat Pryce](http://www.natpryce.com/) in their wonderful book [Growing Object-Oriented Software, Guided by Tests](https://www.goodreads.com/book/show/4268826-growing-object-oriented-software-guided-by-tests).

It consists in a small variation to the TDD cycle in which you watch the error message of your failing test and ask yourself if the information it gives you would make it easier to diagnose the origin of the problem in case this error appears as a regression in the future. If the answer is no, you improve the error message before going on to make the test pass.


![alt text](https://thepracticaldev.s3.amazonaws.com/i/pauiz0b08pbfn0p9tcr7.png "Variation to TDD cycle: feedback on diagnostics (from Growing Object-Oriented Software by Nat Pryce and Steve Freeman)")

Investing time in improving your reds will prove very useful for your colleagues and yourself because the clearer the error message, the better the context to fix the regression error effectively. Most of the times, applying this small variation to the TDD cycle only requires a small effort. 

As a simple example, have a look at the following assertion and how it fails

```java
assertThat(new Fraction(1,2).add(1), is(new Fraction(3,2)));
```

```text
java.lang.AssertionError:
Expected: is <Fraction@2d8e8c3a>
     but: was <Fraction@2d8e84b8>
```

Why is it failing? Will this error message help us know what's happening if we see it in the future? 

The answer is clearly *no*, but with little effort, we can add a bit of code to make the error message clearer (implementing the `toString()` method).

```java
@Override
public String toString() {
  return "Fraction{" +
    "numerator=" + numerator +
    ", denominator=" + denominator +
    '}';
}
```

```text
java.lang.AssertionError:
Expected: is <Fraction{numerator=3, denominator=2}>
     but: was <Fraction{numerator=1, denominator=2}>
```

This error message is much clearer that the previous one and will help us to be more effective both while test-driving the code and if/when a regression error happens in the future, and we got this just by adding an implementation of `toString()` generated by our IDE.

Take that low hanging fruit. Start improving your reds!
Extensions/preferences/settings to clean up the Visual Studio Code UI?
Tags: visualcodestudio, sublimetext, texteditor, discuss
Published: 2018-09-08 16:37:17

---
title: "Extensions/preferences/settings to clean up the Visual Studio Code UI?"
published: true
description: "What are some ways to extensions/preferences to clean up the Visual Studio Code UI?"
tags: visual code studio, sublime text, text editor, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/h9iss0eqq1d5a7kkf8i2.png
---
I've recently switched from Sublime Text to Visual Studio Code and while it's a net-positive, I do tend to find myself overwhelmed by all the icons/button VSC shows. 

I'd much prefer to access necessary in-app tools with keyboard shortcuts versus always showing me all the things.

So, what are some preferences/settings/extensions I should look in to for making the VSC UI less-overwhelming?