teleren/devto huggingface dataset:
"Don't Make Me Think" Summary for UI/UX  designers [First Chapter]
Tags: usability, ux, books, ui
Published: 2021-02-07 08:25:59

Hi there! I'm gonna write articles in which I explain the rules inside "Don't make me think" book as you saw from the title of this article. 

**Some stuff to know before starting**:
* In each one, I'll summarize a chapter, until I finish all of them.
* After each point, I'm going to put an image from the book as an example [if exists]
* and finally, my English is not very good, so I'm sorry for any mistakes



##Chapter number 1: Don't make me think [Krug’s First Law of Usability]

* The first ultimate principle is to make your website self-evident so that everyone can use it efficiently and easily even this one who barely knows how to use the back button. 

**Good One**:
![image to show when a website is evident and easy to use](https://dev-to-uploads.s3.amazonaws.com/i/a07dsjmrfm1shak3b183.png)
**Bad One**:
![image to show when a website is obscure and hard](https://dev-to-uploads.s3.amazonaws.com/i/5wtp1ymm4303notvxenz.png)

* Get rid of question marks: All kinds of things on a Web page can make us stop and think unnecessarily:
   * Be careful when naming things: one of the things that make people confused and annoyed when they use anything, not just sites is to face ambiguous names
![Image](https://dev-to-uploads.s3.amazonaws.com/i/4cda6t42v8mrnbfu8c2o.png)
   * Clickable things: User should never devote a millisecond trying to figure out whether a thing is clickable or not, so make it effortless to realize it. for instance, you can color all of the clickable stuff in the same color, or you can make all of them in the same shape, and so on
![Image as an example of obscure clickable thing](https://dev-to-uploads.s3.amazonaws.com/i/l39ne5ub6r4gectyiesz.png)


 "They enjoy puzzles in their place—
when they want to be entertained or diverted or challenged—but not when they’re trying to find out what time their dry cleaner closes" :)
![Image for how a site can be puzzling](https://dev-to-uploads.s3.amazonaws.com/i/bvdk6ncik8jilrb6m0f2.png)


Great! that's the end of it. Hope you like it and get even a little benefit. See you next article:)
Usage of Inbuilt Functions In Coding Interview's 
Published: 2021-02-07 08:00:27


![images (3)](https://dev-to-uploads.s3.amazonaws.com/i/o4l7qftsbwp88cq3mfkz.jpeg)

 
At a high level, candidates are allowed to use as many built-in functions as they like, as long as it doesn’t make the solution trivial.

**Example:** Multiply two large numbers A and B. 1 <= A, B <= 10^300

**Intent:** The interviewer wants to see how the number will be stored in memory (array vs. list), how operations like carry-over will be performed, etc…

**Solution 1:**

A language like Java has in-built libraries that make coding the solution trivial.
```
BigInteger x = new BigInteger(“1234…”); 
BigInteger y = new BigInteger(“9876…”); 
BigInteger result = x.multiply(y);
```
These libraries will **not** be allowed.

**Solution 2:**

On the other hand, you may use in-built libraries to store the number. Like an ArrayList.
```
List<Integer> digits = new ArrayList<>(); 
while(number > 0){ 
    digits.add(number % 10); 
    number = number / 10; 
}
```
Despite using an ArrayList over building a custom list (with node and tail pointer), this is allowed. Because the requirement of testing the candidate’s logic, coding, and communication skills are met.

Lastly, third-party libraries are a strict no for most interviews. It’s best to clarify with the interviewer when in doubt.

All the best!
WebDir - Web Path Scanner
Tags: javascript
Published: 2021-02-07 07:56:19

WebDir is a Web Path Scanner it is an automated tool which designed to find interesting files or folders (e.g: php.ini,.htaccess,.htpasswd .. etc )
WebDir tool comes with a built-in payload file which contains 9000 payloads



Visit GitHub for more information:

https://github.com/CyberRaven/WebDir
Personal Memoirs of a Silicon Valley Tech Whore: Part 2
Tags: startup, business, programmers, haskell
Published: 2021-02-07 06:43:41

---
title: Personal Memoirs of a Silicon Valley Tech Whore: Part 2
published: true
description: 
tags: #startup #business #programmers #haskell
//cover_image: https://direct_url_to_image.jpg
---

This is very controversial, programmers are NOT like prostitutes at ALL!

https://solaire.substack.com/p/personal-memoirs-of-a-silicon-valley-dbe
Array Indexing Method
Tags: javascript, todayilearned, webdev, discuss
Published: 2021-02-07 06:41:00

Recently, came across a cool Twitter [thread](https://twitter.com/BenLesh/status/1357701400453672965) which talks about a new way to access the array items.

Basically, this is a tc39 proposal which is at stage 3 at the moment. The `at` method supports relative indexing from the end, this is a prototype of built-in indexable objects: Array, String, and TypedArrays objects.

You can provide either positive or negative integers both and it will return the item at that index. Negative indexes helping to count back in the array.

```javascript
const arr = [1, 2, 3, 4, 5];

// Current way to get last item
arr[arr.length - 1]; // 5

// Proposed way
arr.at(-1); // 5
```

Earlier, there was another [proposal](https://github.com/tc39/proposal-array-last) which suggested adding a method `Array.prototype.last` to get the last item from an array. Which did not cross the stage 1.

Currently, it is not supported in any browser but hopefully will be supported soon.

Would love to know what other uses do you guys feel we can have with this method.

## Further Reading

- [https://github.com/tc39/proposal-relative-indexing-method](https://github.com/tc39/proposal-relative-indexing-method)
- [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at)
Simpler Way To Conditionally Add Properties to Javascript Object
Tags: javascript
Published: 2021-02-07 06:20:23

---
title: Simpler Way To Conditionally Add Properties to Javascript Object
description: Conditionally adding properties to an object might mean writing if statements. With this trick, you can avoid it.
tags: javascript
published: true
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/fx7hvutplw9nx3fzl9xt.png
---

Ever had a situation where you wanted to conditionally add an attribute to a javascript object and you had to use `let` instead of `const` and add an if condition just because of that? I am talking about this:

```javascript
let userProps = {
   username: "rad-coder" 
}

if (userIsBanned) {
    userProps.banned = true
}

return userProps
```

In the above code, if there was no conditional attribute, `userProps` wouldn't have been needed. If there are multiple attributes like that, that means more if conditions and code. 

## Simpler Alternative
Instead of using the if statement, you can use the spread operator. The idea is simple: the spread operator merges the properties of the target object with the object it's being applied on and if the source object is null, it adds no properties. 

```javascript
const x = { ...{ a: 2 } } // => x = { a : 2 }
const y = { ...null } // => y = {}
```

Now, we can use the same idea to simplify our code:

```javascript
return {
   username: "rad-coder",
   ...(userIsBanned && {banned: true})
}
```

And if there are multiple conditions:

```
return {
   username: "rad-coder",
   ...(userIsBanned && {banned: true}),
   ...(userIsOrganic && {organic: true}),
   ...(userIsPaid && {paid: true}),
}
```

## "Code is Harder to Read!"
I know some folks would say that this just makes code harder to read and is needlessly clever. And maybe that's right.

I personally find it a nifty trick to avoid writing more code than that's needed, but some developers might not feel that way, which makes its usefulness subjective.

So, use it if only you think it's a good choice.
Introduction to Contract-First REST Development
Tags: programming, contractfirstrest, openapi
Published: 2021-02-08 05:25:30

---
title: Introduction to Contract-First REST Development
published: true
date: 2021-02-07 06:00:00 UTC
tags: programming,contractfirstrest,openapi
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/s1nz3xfnmmo72md2p2nm.png
canonical_url: https://fwmotion.com/blog/programming/contract-first-rest/2021-02-07-introduction-to-contract-first-development/
series: "Contract-First REST Development"
---

In this post, I provide an overview of contract-first development and reasons to follow this style of development. Specifically, I define contract-first REST development, tell the story of a real-life project that migrated to contract-first development, discuss some benefits of contract-first development, and then introduce three styles of generating code to complement contract-first development.

Continue reading [Introduction to Contract-First REST Development](https://fwmotion.com/blog/programming/contract-first-rest/2021-02-07-introduction-to-contract-first-development/) on my blog.
Experiments with code: drawing with Rough.js
Tags: canvas, javascript
Published: 2021-02-07 05:09:02

---
title: Experiments with code: drawing with Rough.js 
published: true
description: Drawing an ugly cover image for my dev.to posts with Rough.js
tags: canvas, javascript
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/vdxmoiyaeix5z7ydd7k6.png
---
One of the top reasons I never blog is because I always feel obligated to make images for my blog posts. And then I spend too much time making images. I decided to generate one using JavaScript. It turned out super weird looking but it was fun to make.

Anyway, I used [Rough.js](https://www.skypack.dev/view/roughjs) in [Codepen](https://blog.codepen.io/2020/11/18/skypack-codepen/) using Skypack. Rough.js is a nifty library for making canvas and svg graphics with a hand-drawn appearance. 

![vintage cookbook image, showing hand drawn chickens on a green polygon](https://dev-to-uploads.s3.amazonaws.com/i/zu8u0dmhbj4kxnfbs9sc.jpeg)

I started with a picture from a vintage cookbook (James Beard's Fireside Cookbook). I added a rough polygon for a background and then some circles as decoration. 

It was pretty fun experimenting with different options even if some were pretty hilariously ugly. I call this one "diseased cookies":

![green polygon, text that says hello world, ugly circles with weird dots](https://dev-to-uploads.s3.amazonaws.com/i/0rh800eg4q8qra45o2de.png)

Finally I used the regular [Canvas browser API](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font) to add some text. 

If you'd like to play around with it, here is the CodePen I used:
{% codepen https://codepen.io/melissamcewen/pen/OJbNOwJ %}
Interview Practice: Buy and Sell Stock Problem
Tags: javascript, beginners, tutorial, programming
Published: 2021-02-07 05:04:12

---
title: Interview Practice: Buy and Sell Stock Problem
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/j8rqwd82dyjez6sku3dm.jpg
published: true
description: javascript array algorithms practice
tags: javascript, beginners, tutorial, programming
---

## Visual learners this is for you!

Challenge:

You are given an array of integers which represent the price of a stock on a given day. 

You want to MAXIMIZE your profit by choosing a single day to buy one stock and choosing a DIFFERENT day in the future to sell that stock.

Return the MAXIMUM PROFIT you can achieve from this selling transaction. 

**In this video I'm going to show you the different approaches to tackle this problem, starting with a basic brute force approach, then switching to something a bit more optimized using some intuition that we gather from some visuals.**

Let me know what you think!

:rocket: :gem: :open_hands:

{% youtube _rKAex0Va0M %}
FrontEnd Interview Tips??
Tags: javascript, html, css, webdev
Published: 2021-02-07 04:21:04

Hello Everyone! This is my first post! (yayy!) 
I need some advice/suggestion from all Front-End Developers right here. I am having my Front-End Developer interview next week, can anyone give me any advice? Or any suggestion I should focus on prepping for the interview? 

Any kind of help is highly appreciated. Thanks! ^_^
How to write a SQL Inner Join
Tags: database, codenewbie, sql
Published: 2021-02-07 04:19:17

When you are new to writing SQL queries, A big hurdle is learning to gather necessary data with complex queries. A common hurdle you will see is an Inner Join. 

The Inner Join is a query that will return results that has matching values in two tables. Let's code up a quick stocks tutorial to demonstrate an Inner Join. 

First, we are going to initialize a new database to make SQL queries. 

###Setting up the database: 
```SQL
sqlite3 stocks_database.db
```
Next, we will need to create two tables so that we can create our inner join.

###Stocks Table: 
```SQL
CREATE TABLE stocks (
id INTEGER PRIMARY KEY,
company TEXT,
ticker TEXT,
price INTEGER,
platform_id INTEGER);
```

###Platforms Table: 
```SQL
CREATE TABLE platforms (
id INTEGER PRIMARY KEY,
name TEXT);
```

Let's create some data so that we can tie together our stock example for our inner join. 

###Starting Data: 
```SQL
INSERT INTO platforms (name) VALUES ("Robinhood");
INSERT INTO platforms (name) VALUES ("Webull");
INSERT INTO stocks (company, ticker, price, platform_id) VALUES ("GameStop", "GME", 63.77, 1);
INSERT INTO stocks (company, ticker, price, platform_id) VALUES ("AMC", "AMC", 6.83, 1);
INSERT INTO stocks (company, ticker, price, platform_id) VALUES ("Nokia", "NOK", 4.22, 2);
INSERT INTO stocks (company, ticker, price, platform_id) VALUES ("Blackberry", "BB" 13.23, 2);
```

Here is our inner join that will connect our tables to put together a useful table of data. 

###Inner Join:
```SQL
SELECT Stocks.company, Stocks.price, Platforms.name 
FROM Stocks 
INNER JOIN Platforms
ON Stocks.platform_id = Platforms.id;
```
Now we are able to return a copy of our database query results. 

###Results: 
```
company             price          platform
-------             ------         ---------
GameStop            63.77          Robinhood  
AMC                 6.83           Robinhood  
Nokia               4.22           Webull
Blackberry          13.23          Webull
```

###Let's chat about SQL
So now you have a quick guide on how to write an inner join in SQL. If you enjoyed this post feel free to leave a comment about your thoughts and experiences working with SQL.

Happy Coding,
Terry Threatt
Open Source Real-world Ruby and Rails Applications 🔥
Tags: ruby, rails, opensource, showdev
Published: 2021-02-07 04:18:09

![](https://blog.codemy.net/content/images/2019/01/ruby-rails-part-1-cover.jpg)

[Ruby and Rails](https://rubyonrails.org/) is a perfect combination to build awesome stuff on the web. Indeed, use Rails as an API to integrate with mobile app stacks like React Native or Swift and other major platforms.

Here, I create a list of tons of Open source Ruby and Rails applications that some of us didn't know it is open source 😅. For example ;

- [chaskiq](https://github.com/chaskiq/chaskiq) - A full featured Live Chat, Support & Marketing platform
- [chatwoot](https://github.com/chatwoot/chatwoot) - Open-source live chat software, an alternative to Intercom, Zendesk, Drift, Crisp etc. 🔥💬
- [codeTriage](https://github.com/codetriage/CodeTriage) - Discover the best way to get started contributing to Open Source projects
- [Depandabot](https://github.com/dependabot/dependabot-core) - 🤖 The core logic behind Dependabot's update PR creation, and the public issue tracker for all things Dependabot
- [Discource](https://github.com/discourse/discourse) - A platform for community discussion. Free, open, simple.
- [feedbin](https://github.com/feedbin/feedbin) - Follow your passions with RSS, email newsletters, and Twitter.
- [lobster.rs](https://github.com/lobsters/lobsters) - Computing-focused community centered around link aggregation and discussion
- [mastodon](https://github.com/tootsuite/mastodon) - Your self-hosted, globally interconnected microblogging community
- and so on......

# This project is Great for ;

✅ **Beginners** ; to learn from a real-world production app 
✅ **Beginners** ; learn how to contribute to an open-source project
✅ **Seniors/expert** ; gain pattern and extra knowledge
✅ **New-comers** ; know how Awesome Ruby and Rails is 🔥

# This project contains;

- real-world production app
- Clone of a real-world startup-like Kickstarter and Airbnb
- Ecommerce
- cool ruby gems
- website
- .
- .
- .
- and the list goes on

## What do you waiting for ???
![](https://media.giphy.com/media/Js7cqIkpxFy0bILFFA/giphy.gif)

<center><a href="https://github.com/asyraffff/Open-Source-Ruby-and-Rails-Apps" target="_blank" rel="noopener noreferrer">Here we go 🚀</a>.</center>

![](https://media.giphy.com/media/eg3f90cy2Mc6yVRWyR/giphy.gif)
Todo Application - An Open Source and Easy to Use Web Application
Tags: showdev, javascript, webdev, productivity
Published: 2021-02-07 04:00:34

> Organizing Easier, Improve Your Productivity

![Todo Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b3fpspi3hoy78f8wk7sh.png)

[Todo Application](https://github.com/stanleyowen/todo-application) is an **open source** project distributed under [MIT License](https://github.com/stanleyowen/todo-application/blob/master/LICENSE) which is easy to use and easy to organize!

Todo Application is built using MERN Stack:
1. MongoDB
2. Express JS
3. React JS
4. Node JS

{% github stanleyowen/todo-application %}

GitHub Code: https://github.com/stanleyowen/todo-application
Website: https://todoapp-task.netlify.app/

#### If you like this project, be sure to drop a star on GitHub 🌟!

### Happy coding! ❤️
Entity Framework Core 5 - Relacionamento N-N
Tags: dotnet, efcore5, entityframeworkcore
Published: 2021-02-07 03:47:47

Juntamente com o lançamento do .Net 5 também tivemos o lançamento do EF Core 5 em alinhamento com toda 'iniciativa' do .Net 5!
Particularmente em relação do EF Core 5 o que podemos observar é praticamente (e é mesmo) um produto 'novo' mas com muitos avanços que tem tornado a experiência de uso muito melhor em comparação a outros ORM's.

Neste artigo quero destacar uma novidade a muito esperada que é o relacionamento 'Muitos pra Muitos' sem precisar de especificar a classe intermediaria, o que era preciso na versão 3.1 do EF Core.

Vamos lá direto ao ponto!

Criamos duas classes e seus relacionamentos para nosso exemplo:

![image](https://dev-to-uploads.s3.amazonaws.com/i/k9l99jdvbupv3zmq1vj0.png)
 
Utilizamos em nosso exemplo o Migrations para criar o banco de dados e com esse código simples abaixo realizar uma pequena carga de dados para comprovarmos os relacionamentos.

![image](https://dev-to-uploads.s3.amazonaws.com/i/32bqnoqp7iv9y7p58hhs.png)

No banco de dados podemos constatar os registros vendo a tabela de relacionamento entre 'Usuarios' e 'Grupos':

![image](https://dev-to-uploads.s3.amazonaws.com/i/ttoamvo1u7rawmwd6ntd.png)

A equipe do EF já está trabalhando na versão 6 que será também lançada com o .Net 6 (Teremos sim lançamento anuais), veja neste artigo (https://devblogs.microsoft.com/dotnet/the-plan-for-entity-framework-core-6-0) os rumos do EF Core.

Neste link você encontra o código completo deste exemplo:
https://github.com/marcelojpaiva/EFCore5ShowTime

Até logo!
How do you learn English when you are not a native English speaker?
Tags: english, newbie, communicate, learning
Published: 2021-02-07 03:43:28

It took me about 3 years for learning English from zero, now I can reading and listening well, but I cannot speaking and writing.

I see that there are a lot of developers in the world who is struggling with learning English and mine either. Can you give me any advice on this if you are not a native English speaker?
How to create an SQLite database in node.js
Tags: sql, node, javascript, database
Published: 2021-02-07 03:35:10

_This was originally posted on [atdatabases.org](https://www.atdatabases.org/blog/2021/02/03/create-sqlite-database)_

SQLite is a great database for embedded use cases. e.g. if you are using node.js in IOT, or an Electron app.

To get started, install `@databases/sqlite` using either yarn or npm:

```sh
yarn install @databases/sqlite
```

```sh
npm install @databases/sqlite
```

Then you can `import` it (if you are using TypeScript/Babel/some other environment that supports ESModules) or `require` it (if you are using plain JavaScript), and call `connect` to create the database file if it does not exist, and open it if it already exists.

Here is an example of using SQLite as a basic key value store of strings (here `VARCHAR` is the SQLite data type that is equivalent to `string` in JavaScript).

```javascript
const connect = require('@databases/sqlite');
const {sql} = require('@databases/sqlite');

const db = connect('temp.db');

async function prepare() {
  await db.query(sql`
    CREATE TABLE IF NOT EXISTS app_data (
      id VARCHAR NOT NULL PRIMARY KEY,
      value VARCHAR NOT NULL
    );
  `);
}
const prepared = prepare();

async function set(id, value) {
  await prepared;
  await db.query(sql`
    INSERT INTO app_data (id, value)
      VALUES (${id}, ${value})
    ON CONFLICT (id) DO UPDATE
      SET value=excluded.value;
  `);
}

async function get(id) {
  await prepared;
  const results = await db.query(sql`
    SELECT value FROM app_data WHERE id=${id};
  `);
  if (results.length) {
    return results[0].value;
  } else {
    return undefined;
  }
}

async function remove(id) {
  await prepared;
  await db.query(sql`
    DELETE FROM app_data WHERE id=${id};
  `);
}

async function run() {
  const runCount = JSON.parse((await get('run_count')) || '0');
  console.log('run count =', runCount);
  await set('run_count', JSON.stringify(runCount + 1));
  console.log(await get('name'));
  await set('name', 'Forbes');
  console.log(await get('name'));
  await set('name', 'Forbes Lindesay');
  console.log(await get('name'));
  remove('name');
}
run().catch((ex) => {
  console.error(ex.stack);
  process.exit(1);
});
```

For more information, check out [the API docs for @databases/sqlite](https://www.atdatabases.org/docs/sqlite) and [the SQLite Language Docs](https://sqlite.org/lang.html).
Linux File compression/decompression tools with usages
Tags: linux, systems, devops
Published: 2021-02-07 03:23:11

This is a minimal cheatsheet for Linux File compression tools with usages. Of course, only basic usages are included and thus the cheatsheet is lite. Helpful for everyday use. 
Zip, unzip,7zip, gunzip,bzip2,xz,zcat,tar,jpegoptim
![Alt Text]
(https://pbs.twimg.com/media/Etj1u1iXAAAcoyJ?format=jpg&name=medium)
And V.1 
![Alt Text]
(https://pbs.twimg.com/media/EtgqnLbVkAAIMNA?format=jpg&name=large)
Download pdf: https://drive.google.com/file/d/1nrufK-0PJa0xL7fMYjcLW2prIQ67hTXq/view?usp=sharing

I make cheatsheet when i get time. And post them mostly via twitter. https://twitter.com/b3nsh4 

Do your best, guys! 👍