teleren/devto huggingface dataset:
Dev.to Messages Was Bad (Temporarily)
Tags: discuss, help, ui, meta
Published: 2019-07-26 22:36:29

---
title: Dev.to Messages Was Bad (Temporarily)
published: true
description: 
tags: discuss, help, ui, meta
---

# NEVERMIND #

This was maybe a temporary outage causing temporary outrage. It works now so please disregard the original post

# The Original Post #

Today I got my first message from a Dev.to user. I didn't even know that was a feature! 

![](https://thepracticaldev.s3.amazonaws.com/i/6sfytkxbewu6pshm9o30.png)

Cool, lets go check it out. I never click links in emails, so I navigate in my browser to `dev.to`. I have 3 notifications but no little icon on the paper airplane which I assume means messages because paper airplanes are a common form of communication. Envelopes, which everyone else uses to represent mail, are simply handmade toys to entertain children. 

I click the paper plane and am greeted with an empty inbox

![](https://thepracticaldev.s3.amazonaws.com/i/y7hxnmp1ttlyqk0dlmna.png)

No messages here? So the icon was correct! But then my email was the liar. 

I refresh the page. Still nothing. Did he delete the message? Can they be redacted once sent? Who knows!

I click `all` which was already highlighted, and finally I can see my new message. My day is no longer ruined.

![](https://thepracticaldev.s3.amazonaws.com/i/b3qw3ssli7h4ar7v6swj.png)

Perfect, time to reply. I type a response, hit send, annnndddd—nothing happens!

![](https://thepracticaldev.s3.amazonaws.com/i/tuih6j6grgq39s4aln8j.png)

I click send a dozen times. I tab to the input, and then to the button, and hit Enter on either. Still nothing. But maybe it's just a UI updating issue and it was just sending behind the scenes. I refresh the page to check.

![](https://thepracticaldev.s3.amazonaws.com/i/t82z9cyz7wwy67ukaoa1.png)

Screw it, I'm outta here

# PS: #

Tagging @lostdesign because it's his message that inspired this post and his typo will be immortalized forever

{% user lostdesign %}

While writing this post I needed to embed several images, so I used Dev.to's handy image upload feature. I uploaded an image, and was greeted with two nice links so I could embed it in the post.

I click on one, and it tells me it copies to the clipboard. You know, like a liar.

![](https://thepracticaldev.s3.amazonaws.com/i/tt7tk70vkkq7v9g6b3pf.png)

After I tried pasting the link, I had to go back and upload a second copy of the same image just to get a new link. From then on out, after it highlighted the link and told me it was copied, I copied it myself. 

As they say: If you want something done right, do it yourself.
4 easy ways to help your QA
Published: 2019-07-29 04:59:34

---
title: 4 easy ways to help your QA
published: true
description: 
tags: 
---

You are a good developer, and you understand that your quality assurance team wants to help you find issues in the code. Help your friend out by doing a few simple things.

## Involve QA early.
Your QA have experience understanding how systems behave and misbehave. They also have the skills to make the applications break. Use these skills and ask them to review designs before much coding work is done. I guarantee you they will be receptive, and you will get some valuable feedback on the code. The earlier you catch an issue, the easier it will be to resolve.

## Be there to answer questions.
Your QA has one primary responsibility, to make sure the program does what it's supposed to do. Sounds simple, but how can the QA know the expected behavior? In a perfect world, there will be specifications, but maybe those aren't quite complete. Be available to answer their questions, even be proactive and help them out by stepping through the application with them once. This will answer the majority of the questions they have, speed up the release process, and help you each understand assumptions in the program.

## Write down assumptions.
You can also help your QA by writing down those assumptions you made during the coding. Maybe you decided on some pattern because you think it will save time in the future. Maybe you exposed a value in a configuration. It's all good, your QA should value your opinion, but please write those down. It'll help save time in the long run.

## Tactical things to do.
There are lots of little actions you can take to make your QA's life easier.
1. For your SDETs using Selenium or similar, include a unique identifier on your html actionable elements. Put on your button, on each input box, on the container for your list, on the navigation section. This allows web automation to be written more quickly and clearer.
2. For your SDETs using Selenium or similar, avoid animations if possible. You can ask them about their different strategies for waiting for an element if you want to know why.
3. For your database testers, help them with sample data for testing, or at least the domain knowledge you have when generating your data.
4. For your API testers, provide some way to browse the API and structures; add Swagger, Apiary, or other api generation tool
5. Share the code. Black box testing is silly.
6. Visualize it. Draw some circles and arrows on the whiteboard, describe the flow of data.

These tips will help you speed up the QA process, and get better results. Everybody wants to write good code that gets the job done. Your QA will appreciate the time you've taken.

_This is my first post. Thanks you for reading. If you noticed any error, omissions, tone problems, good ideas, etc. please let me know. I want these posts to be useful. Any help is appreciated._
CAN I FIND A REMOTE JOB IF I'M A JUNIOR SOFTWARE ENGINEER ?. IF YES ANY IDEA HOW?
Tags: job, laravel
Published: 2019-07-29 03:09:54

---
title: CAN I FIND A REMOTE JOB IF I'M A JUNIOR SOFTWARE ENGINEER ?. IF YES ANY IDEA HOW?
published: true
description: 
tags: #job #vue #reactjs  #laravel
---
Talk about Yet another dictionary look up and text translator – Extension for 🦊 Firefox
Tags: firefox, addon
Published: 2019-07-30 07:58:33

Talk about [Yet another dictionary look up and text translator – Get this Extension for 🦊 Firefox](https://addons.mozilla.org/firefox/addon/yadattawa/ "Yet another dictionary look up and text translator – Get this Extension for 🦊 Firefox").
Yet another dictionary look up and text translatorについて話す。

If you post JSON codes, please surround the codes with "&#x60;&#x60;&#x60;json" and "&#x60;&#x60;&#x60;".
JSONコードをポストする場合は、コードを &#x60;&#x60;&#x60;json と &#x60;&#x60;&#x60; で囲む。

Example 例:
Source ソース
<pre>
&#x60;&#x60;&#x60;json
{
    "name": "Google translate",
    "url": "translate.google.com/#view=home&op...",
    "tooltip": true,
    "action": "fetch",
    "viewin": "tooltip"
}
&#x60;&#x60;&#x60;
</pre>

Result 表示
```json
{
    "name": "Google translate",
    "url": "translate.google.com/#view=home&op...",
    "tooltip": true,
    "action": "fetch",
    "viewin": "tooltip"
}
```
responsive testing with Selenium and Python
Tags: selenium, responsive, automation
Published: 2019-08-02 11:59:54

---
title: responsive testing with Selenium and Python
published: true
description: 
tags: selenium,responsive,automation
---

Here is a quick script to show how you could capture images to do some responsive testing. The test is super quick and you end up with 4 images that you can look at to see if things are put on the page correctly.

I chose some break points that made sense to me. I think if you are using bootstrap your breakpoints might be different. Just change the width to whatever you want to check.

```python
from selenium import webdriver
from selenium.webdriver.common.by import By

import time
driver = None

def checkit(w,filename):
    driver.set_window_size(w,HEIGHT)
    driver.get("https://getbootstrap.com/docs/4.0/examples/blog/")
    driver.save_screenshot(filename)

try:
    cpath = "e:\\projects\\headless\\chromedriver.exe"
    driver = webdriver.Chrome(cpath)

    HEIGHT = 768

    checkit(600,"test0.png")
    checkit(900,"test1.png")
    checkit(1200,"test2.png")
    checkit(1800,"test3.png")

finally:
    if driver is not None:
        driver.quit()

````
If you have read the other posts I have done this code is slightly different. 

I made a function called checkit to make the code more readable.
How to use the JavaScript bcrypt library
Tags: javascript
Published: 2019-07-31 14:06:59

The bcrypt npm package is one of the most used packages to work with passwords in JavaScript.

This is security 101, but it’s worth mentioning for new developers: you never store a password in plain text in the database or in any other place. You just don’t.

What you do instead is, you generate a hash from the password, and you store that.

In this way:

```js
import bcrypt from 'bcrypt'
// or
// const bcrypt = require('bcrypt')

const password = 'oe3im3io2r3o2'
const rounds = 10

bcrypt.hash(password, rounds, (err, hash) => {
	if (err) {
    console.error(err)
    return
  }
  console.log(hash)
})
```

You pass a number as second argument and the bigger that is, the more secure the hash is. But also the longer it takes to generate it.

The library README tells us that on a 2GHz core we can generate:

```
rounds=8 : ~40 hashes/sec
rounds=9 : ~20 hashes/sec
rounds=10: ~10 hashes/sec
rounds=11: ~5  hashes/sec
rounds=12: 2-3 hashes/sec
rounds=13: ~1 sec/hash
rounds=14: ~1.5 sec/hash
rounds=15: ~3 sec/hash
rounds=25: ~1 hour/hash
rounds=31: 2-3 days/hash
```

If you run `bcrypt.hash()` multiple times, the result will keep changing. This is key because there is no way to reconstruct the original password from a hash.

Given the same password and a hash it’s possible to find out if the hash was built from that password, using the `bcrypt.compare()` function:

```js
bcrypt.compare(password, hash, (err, res) => {
  if (err) {
    console.error(err)
    return
  }
  console.log(res) //true or false
})
```

If so, the password matches the hash and for example we can let a user log in successfully.

You can use the `bcrypt` library with its promise-based API too, instead of callbacks:

```js
const hashPassword = async () => {
  const hash = await bcrypt.hash(password, rounds)
  console.log(hash)
  console.log(await bcrypt.compare(password, hash))
}

hashPassword()
```
About Jorge Plaza Marquez
Tags: jorgeplazamarquez
Published: 2019-07-31 14:09:44

Jorge Plaza Marquez is the third-generation owner of Servimeca Sand Control. Jorge became President of Servimeca in April of 1998. Servimeca is one of the most experienced companies, with a trajectory of nearly 60 years, established in 1958 in order to manufacture sand control filters for oil, gas and water wells. 

Servimeca is a leader in its segment in the Colombian and Venezuelan markets. Jorge Plaza Marquez’s company, Servimeca, manufactures its filters with cutting-edge technology and the highest quality and productivity standards. Jorge Marquez enjoys traveling to Colombia and Venezuela regularly.
Creating New Financial Markets with Stellar Blockchain Solutions
Tags: stellarblockchain, stellarblockchainsolutions
Published: 2019-08-01 09:51:02

Stellar provides cost-efficient and simplified payment integration solutions , especially for SMEs and startups. Its ability to accept payments in any currency is crucial as it creates opportunities for new financial markets. It is something that traditional payment providers fail to guarantee.

Stellar opens new possibilities for both entrepreneurs and users. So, if you want to kickstart your financial services venture with a Stellar payment system, connect with us!  

Read More https://blockchain.oodles.io/blog/new-financial-markets-stellar-blockchain-solutions/
Website Blogs!
Tags: webdev, beginners, discuss
Published: 2019-08-01 10:12:13

Morning all from a very grey Derbyshire, England!

This is my first post on the platform so please direct me to the right place if this isn't it!

Just a quick question! What blog systems / engines / applications are you using on your website's?

I'm currently using BlogEngine.NET which I'm are looking to replace with something fresh. Does anyone have any recommendations??

Many Thanks in advance!

Ryan 😁
Things that forced me to leave GA for AWStats
Tags: seo
Published: 2019-08-02 10:57:12

---
title: Things that forced me to leave GA for AWStats
published: true
tags: SEO,seo
canonical_url: https://kevinhq.com/things-that-forced-me-to-leave-ga-for-awstats/
---

Starting on this first day of August, I decided to remove Google Analytics (GA). Ever since I migrate this blog to a new host that gives me AWStats on the cPanel, it looks like there are more and more things that make sense to leave GA for AWStats. Ad-block usage According to Statista.com, the Ad-blocking… [Continue reading »Things that forced me to leave GA for AWStats](https://kevinhq.com/things-that-forced-me-to-leave-ga-for-awstats/) ![](http://feeds.feedburner.com/~r/kevinhq/~4/9CjkKtbjMyI)
Which programming language features do you love and why?
Tags: discuss, plt, elm, haskell
Published: 2019-08-02 08:25:12

---
title: Which programming language features do you love and why?
published: true
description: 
tags: discuss, plt, elm, haskell
---

A few of my favorites include: [first-class functions](https://en.wikipedia.org/wiki/First-class_function), [algebraic data types](https://en.wikipedia.org/wiki/Algebraic_data_type) and [opaque data types](https://en.wikipedia.org/wiki/Opaque_data_type).

**First-class functions**

Because of all [the cool abstractions](https://mitpress.mit.edu/sites/default/files/sicp/full-text/book/book-Z-H-12.html#%_sec_1.3) &mdash; `map`, `filter`, `accumulate`, `fold` etc &mdash; you can build with them.

```scheme
(define (map f l)
  (if (null? l)
      '()
      (cons (f (car l)) (map f (cdr l)))))
```

**Algebraic data types**

Especially [sum types](https://en.wikipedia.org/wiki/Tagged_union). I think all languages should support this feature. They make it really convenient to precisely model your domain.

> Ruling out invalid data makes your code shorter, simpler, and more reliable. By making sure the set of possible values in code exactly matches the set of valid values in real life, many problems just go away. &mdash; [Types as Sets](https://guide.elm-lang.org/appendix/types_as_sets.html)

```elm
type RemoteData e a
  = NotAsked
  | Loading
  | Failure e
  | Success a
```

**Opaque data types**

Data abstraction allows you to hide implementation details and it makes it favorable to change representations. For e.g. you can start with a naive implementation and change to a more efficient representation if it proves critical to the overall performance of the system. Opaque data types are frequently used to implement [abstract data types](https://en.wikipedia.org/wiki/Abstract_data_type).

```haskell
module Stack
  ( Stack
  , empty, push, pop
  ) where

data Stack a
  = Empty
  | Stk a (Stack a)

empty :: Stack a
empty = Empty

push :: a -> Stack a -> Stack a
push x s = Stk x s

pop :: Stack a -> Stack a
pop Empty = Empty
pop (Stk _ s) = s
```

And you?
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-08-02 15:38:44

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![](https://media.giphy.com/media/e7f0kJekLyFFe/giphy.gif)

Have a good weekend everyone!
Who's looking for open source contributors? (August 2nd edition)
Tags: contributorswanted
Published: 2019-08-02 20:47:39

Find something to work on or promote your project here.

Please shamelessly promote your project. Everyone who posted in previous months is welcome back this month, as always.

Happy Coding!

Photo by [Christopher Rusev](https://unsplash.com/@ralics?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
🌎 4 Ways To Make Impact Everyday 🌎 
Tags: tech, socialtech, community
Published: 2019-08-02 21:55:01

---
title: 🌎 4 Ways To Make Impact Everyday 🌎 
published: true
description: 
tags: tech, socialtech, community
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ip083bl67gxh2fnrjneu.png
---

I am super inspired by Mindy Kaling and I want to pay it forward the way she did. I may not be a celebrity or rich but I think it's awesome that there are ways us ordinary human beings are empowered to give back. 

{% twitter 1143219939014090752 %}

That being said, these are a few of the ways I like to contribute positively to the world simply by using apps or the Internet the way I normally do! Additionally, being involved in the nonprofit sector - through the [Society of Women Engineers](https://www.facebook.com/SWE.SJSU/) and now [PERIOD.org](https://www.facebook.com/period.sanjose/) - definitely forced me to be creative when it came to fundraising. 


##Forest 🌳 

I actually mentioned this in the most recent #DevDiscuss re. productivity, but [Forest](https://www.forestapp.cc/) incentivizes less time spent on your phone by translating that to more points towards planting a tree in real life. If you use your phone before the timer is up, your virtual tree dies and you don't get any points. Better luck next time!

![Screenshots of Forest app.](https://thepracticaldev.s3.amazonaws.com/i/1x4lsyhewa08k7zv4x2a.JPG)<figcaption> Try not to use your phone before the timer is up. </figcaption>

##Lyft 🚕 

If you swipe to the left in the Lyft app and select 'Donate', you will be taken to the following page where you can opt-in to this feature, in which your fares will be rounded up to the next dollar and the difference will be donated to a charity of your choice. 

![Screenshots of Lyft's Donate feature.](https://thepracticaldev.s3.amazonaws.com/i/bz1go9v3rxh52jl2o5f0.JPG)<figcaption>Choose 'Donate' and your preferred charity. </figcaption>

##Amazon Smile 😊 

I know Amazon has come under fire for its treatment of warehouse workers, and I do not condone that. The fact remains that millions of people use Amazon Prime and its free two-day shipping. So why not donate along the way? You must remember to go to [smile.amazon.com](smile.amazon.com) instead of amazon.com and select your preferred charity. It's recommended to **bookmark Amazon Smile** so you don't forget. 

![Screenshot of Amazon Smile dropdown.](https://thepracticaldev.s3.amazonaws.com/i/2lyn14pimro9ghqcu15f.png)
![Screenshot of Amazon Smile bookmark.](https://thepracticaldev.s3.amazonaws.com/i/vfdp45h8u5c121dc3nki.png)<figcaption>Bookmark Amazon Smile in your browser. </figcaption>

##Tab for a Cause 💻 

A [browser extension](https://tab.gladly.io/?u=ashc0des) that donates money to charity every time you open a new tab. 

![Screenshot of Tab for a Cause page when you open a new tab.](https://thepracticaldev.s3.amazonaws.com/i/zbp8mg036siioqitclpe.png)<figcaption>Tab for a Cause.</figcaption>

What are some ways you all like to give back? Are there are any apps or websites that I missed?
The dimensions of an img tag
Tags: html, images, htmlparsing
Published: 2019-08-03 20:40:10

---
title: The dimensions of an img tag
published: true
description:
tags: html, images, html parsing
cover_image: https://thepracticaldev.s3.amazonaws.com/i/hdjstbijx1xhlukuaxdg.jpg
canonical_url: https://lyubomir-angelov.com/the-dimensions-of-an-img-tag/
---

The other day in the team we were playing with one simple bug.
The bug was why the Intersection Observer is loading almost all images on the page which are not in the viewport?

It was simple, the **src** attribute was empty:

```html
    <img src="" data-src="" class="lazy-load" alt="Some title" />
```

This was making all images on the page to render close one to another with the size of the defined line-height. So almost all images were initially in the viewport when the Intersection Observer was triggered.

Ok, we got the issue, so let's define some dimensions to the img tags:

```html
    <img src="" data-src="https://URL_TO_IMAGE" class="lazy-load" height="200" width="200" alt="Some title" />
```

Ahh, still the images are only with the size of the line-height and still almost all are visible...

Then after adding some CSS to try to set the size "min-height" and etc. we were not able to set the proper dimensions.

Suddenly someone remembers it if you don't have some URL to image in the **src** attribute, the **Width and Height** won't be used and the tag won't be that size.

The simple solution was:

```html
    <img src="https://URL_TO_1x1_PIXEL_IMAGE" data-src="https://URL_TO_REAL_IMAGE" class="lazy-load" height="200" width="200" alt="Some title" />
```

Yes, if you set 1x1 image in the src, the height and width will be applied and the Intersection Observer will do his job properly.

Most of the articles for Image lazy loading are not mentioning that you need src attribute filled, it is better for UI and for the lazy load.
How do you work with your designers?
Tags: ux, design, productivity, career
Published: 2019-08-03 21:36:49

As this is a very developer-centric platform, I thought it would be fun to talk about some of the ways the devs here coexist and work with the designers at their respective companies or projects.

I just finished up a 6 month UX Design internship. The next company I join (as a full-time UX Designer) might not have an established design team and I might be the only designer working with the dev. 

Now when I say design, I don't just mean the UI. I am talking about the complete workflow from the users perspective, different states of the applications, guidelines on how the components should behave, etc.

What I want out of this conversation are answers to a few of my questions:

* How do you currently work with your designer(s)?
* What are some of the concerns with the current process and how would you like to improve it?
* Are you involved in the design process or do you prefer being given the designs?
* Would you like to be involved in the design process?
* How can your designers help you during the development phase?

Feel free to add in questions that I might have missed.