teleren/devto huggingface dataset:
JavaScript — Back to Basics: Prefix vs. Postfix
Tags: javascript, prefix, postfix, learningtocode
Published: 2018-04-15 20:54:12

---
title: JavaScript — Back to Basics: Prefix vs. Postfix
published: true
description: 
tags: JavaScript, Prefix, Postfix, Learning to Code
---
<img src="https://thepracticaldev.s3.amazonaws.com/i/bx58cffauijbx6b4xa0b.jpg" alt="abc-building-blocks">

####**Wish me luck, I’m diving into JavaScript!**
As much as I want to start using JavaScript right away, and create applications, I know that I won’t be able to fully grasp the language unless I understand the fundamentals. Consequently, I’ve been following the chapters from https://javascript.info which has been a great source so far.

For my own reference, I thought I would write about interesting tidbits I’m learning, or topics I’m struggling with along the way. I hope this will also be of some use to others who are leaning JavaScript as well.

####**Increment/Decrement**
This numerical operation increases or decreases a variable by 1. It’s important to remember that this can only be applied to variables, and applying this operation to numerical values will return an error.

Increment ++: Increases variable by 1
Decrement — — : Decreases variable by 1

The ++ or — — can be applied both before and after the variable. This is where it gets a bit tricky.

#####*Syntax*
Postfix Form: counter++
Prefix Form: ++counter

Although both forms increase the variable by 1, there is a difference. The Postfix Form returns the original value of the variable, before the increment/decrement The Prefix Form returns the value after the increment/decrement. This difference can be seen if we are using the returned value of the increment/decrement.

#####*Example*
Prefix
`let counter = 2;
 alert(++counter); //3 incremented value has been returned`

Postfix
`let counter = 2;
 alert(counter++); //2 Returns the original value prior to the increment`

If we are using the value of the increment/decrement at a later point in time however, there is no difference between the forms.

#####*Example*
Prefix
`let counter = 2; 
 ++counter; //3 The incremented value
 alert(counter); //3 Incremented value has been returned`

Postfix
`let counter = 2;
 counter++; // 2 The original value
 alert(counter); //3 Value has been incremented and returns the new value`


It took me a bit of time to wrap my head around this so I hope this was a clear enough explanation.

If you liked this article, click the heart button. I would greatly appreciate it!
DS with JS
Tags: javascript, webdev, programming
Published: 2018-04-15 19:46:17


---
title: DS with JS
published: true
description: 
tags: javascript, web-development, programming
---

### Data Structures with JavaScript — Chapter Three — Stacks and Queues

![https://cdn-images-1.medium.com/max/2000/1*2ZL2CcfCB25rhf9KpdQ-GQ.jpeg](https://cdn-images-1.medium.com/max/2000/1*2ZL2CcfCB25rhf9KpdQ-GQ.jpeg)

Read the full story here- https://medium.com/dev-blogs/ds-with-js-stack-queue-d91fc8cea7a3
Agile Team Ritual Checklists
Tags: agile, checklists
Published: 2018-04-15 18:10:29

---
title: Agile Team Ritual Checklists
published: true
description: Collection of agile ritual checklists
tags: agile, checklists
---

A collection of checklists I maintain to help facilitate agile processes.

*NOTE: Hopefully this list will continue to grow to touch all areas of the value stream*

### [Definition of Ready](https://dev.to/dev3l/definition-of-ready--1jfb)
### [Entry Three Amigos](https://dev.to/dev3l/entry-three-amigos-3ejg)
Entry Three Amigos
Tags: agile, atdd, entryamigos
Published: 2018-04-15 17:45:21

---
title: Entry Three Amigos
published: true
description: An example of an agile team's entry three amigos checklist
tags: agile, atdd, entry amigos
cover_image: https://thepracticaldev.s3.amazonaws.com/i/3v5xnqosh414txdsfiph.jpg
---

The [Entry Three Amigos](http://itsadeliverything.com/three-amigos-meeting-agree-the-tests-before-development-starts) agile ritual is, the minimum viable conversation that occurs before a product backlog item enters a team's [value stream](https://www.scaledagileframework.com/value-streams/).

---

## Entry Three Amigos Checklist

[ &nbsp; ] - Product backlog item meets team **[definition of ready](https://dev.to/dev3l/definition-of-ready--1jfb)**
[ &nbsp; ] - Each amigo represented: **PO / DEV / QA**
[ &nbsp; ] - Time-boxed at **15 minutes** or less
[ &nbsp; ] - Target outcomes (**hypothesis**) presented
[ &nbsp; ] - **Feature introduced** by subject matter expert
[ &nbsp; ] - Similar system functionality identified
[ &nbsp; ] - Conditions of satisfaction (**[gherkin](https://dev.to/dev3l/behavior-driven-development-bdd-crash-course-170)**) finalized
[ &nbsp; ] - Three amigos **agree upon [definition of done](https://www.scrumalliance.org/community/articles/2008/september/definition-of-done-a-reference)**
A Place Owned By Everyone 
Tags: showdev, blockchain, ethereum, dapp
Published: 2018-04-15 15:59:40

---
title: A Place Owned By Everyone 
published: true
description: We've just launched new crypto app/game - [OneMillionPixels](https://ompx.io). And have already taken the 5th place on DappRadar.
tags: showdev, blockchain, ethereum, dapp
---

We've just launched new crypto app/game - OneMillionPixels. And have already taken the 5th place on DappRadar right after CryproKitties and more then 2mln tokens has been sold.
 
![Dapp screenshot](https://thepracticaldev.s3.amazonaws.com/i/lt4uymxe4dhi34a9kao5.png)

OMPx, a new online multiplayer creative game, that is centred around an online canvas of one million (1000x1000) pixels for players to edit to their imagination, announces free distribution of playground tokens to incentivise early players.
![OMPx.io](https://thepracticaldev.s3.amazonaws.com/i/2u40x48jf6itxfp1tau6.png)

OMPx stands for OneMillionPixels. The new game recently released on Ethereum blockchain represents a digital canvas of 1000x1000 pixels, which registered players can edit by changing the color of a single pixel from a 24-bit (16 million colour) palette.  OMPx game, or more specifically, a decentralised app (dapp) is powered by a smart contract on Ethereum blockchain, and is operating without any human interference according to the Game Rules embedded into the smart contract.

OMPx smart contract, in exchange for Ether crypto coins (ETH), releases the dapp’s tokens (ERC20 OMPx tokens), to be used by players  to paint the canvas’ pixels, one token for one pixel. This way, the more tokens a player has got, the more pixels she can paint, creating small logos and bigger pictures, writing slogans, embedding URL of websites in the repainted pixels, etc.

Another feature of OMPx dapp is the possible growth of OMPx Token value as provided in the OMPx smart contract code. The main factor directly increasing the token value is the number of players: the more players join, the more expensive the token becomes according to the smart contract. There are other factors the combination of which may result in the value of the token going up or down. These include: total token supply released by the OMPx smart contract, the number of tokens used to paint the pixels, and how many tokens are returned by players back to OMPx smart contract in exchange for ETH.

![How it looks right now](https://thepracticaldev.s3.amazonaws.com/i/vdqlbza58sjj1dj4y15t.png)


OMPx, as a fenomen, puts forward an intriguing question on what a society can do with a shared-use multi-purpose tool which can simultaneously serve to release one’s own creative potential, for marketing and advertising, as well as for betting on the ETH value of the game’s tokens.

To take part in the dapp, you should register on the game’s official website at  [https://ompx.io](https://ompx.io). To try one’s luck on the Free Supply of OMPx Tokens, a user should visit the dapp’s [thread on Reddit](https://www.reddit.com/r/OMPx/comments/8bjvie/one_million_pixels)

It would be awesome to hear some feedback.
Enjoy!
Today I learned: building an application's GUI using Glade
Tags: python, gtk, todayilearned
Published: 2018-04-15 15:25:02

---
title: Today I learned: building an application's GUI using Glade
published: true
description: 
tags: python, gtk, todayilearned
---

I've wrote a lot of Python's scripts for many task, such like web scraping or Telegram cool things. But until this week I never designed a non-web-based UI. I started using Glade and Gtk.

Just drag and drop some widgets into a `GtkApplicationWindow`, save it into your project's folder and load it.

```python
    import gi
    gi.require_version('Gtk', '3.0')
    
    from gi.repository import Gtk

    class ButtonHander():
        # button action's code here!

    builder = Gtk.Builder()
    builder.add_from_file("gui.glade")
    builder.connect_signals(ButtonHandler())

    window = builder.get_object("mainWindow")
    window.show_all()

    Gtk.main()
```

Because GUIs are cool!
How do you find potential clients to cold-email?
Tags: discuss, career, marketing
Published: 2018-04-15 15:16:28

---
title: How do you find potential clients to cold-email?
published: true
description: 
tags: discuss, career, marketing
---
![ice_cube_photo](https://img.clipartxtras.com/5d848a908432460ef1c6b2b0366af9f4_ice-cliparts-transparent-free-download-clip-art-free-clip-art-ice-clipart-transparent_425-395.jpeg)

I just launched a development studio [Lynn Digital](http://lynndigital.com). I'll give you a bit of background on my new company. Originally I needed more developers to assist me on larger projects when freelancing but eventually, clients started to dislike developers they didn't know working on their projects so I decided to start a company. Currently, I have four developers that I can subcontract work too, we each bring a different skillset to the table which allows us to work together on nearly any project. 

I've sent a handful of custom cold-emails to potential clients I found through another client but I was only able to get 5 - 10 references. I don't want to buy a database of emails and launch a marketing campaign, I want to be able to reach out to potential clients personally. 

How can I find potential clients to cold-email?
RIP jQuery: An alternative for modern browsers
Tags: javascript
Published: 2018-04-15 15:11:09

---
title: RIP jQuery: An alternative for modern browsers
published: true
description: What if jQuery was written today
tags: javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/oesz3vdbsouj232ribff.jpg
---

#### RIP jQuery

Two years ago, at the first ever [Code Newbie](https://twitter.com/CodeNewbies) meetup, I had the chance to meet the creator of [jQuery](https://jquery.com/), [John Resig](https://twitter.com/jeresig). At the time I was really starting to double down on my Full Stack Javascript / MongoDB, React, Node journey, coming from a PHP/MYSQL/jQuery world. It was that night when the creator of jQuery got up on stage and told us that he no longer uses the library he created and instead focuses only on React when I told myself it was time to double down on modern Javascript libraries. 

## Listen, I love jQuery. 

jQuery is great, it has allowed me to create amazing front end project, win hackathons and manipulate the dom to my heart's content. But sometimes you get to the point in a mans life that it is time to move on to bigger and better things. So I took the deep dive into the world of React and Node and I didn't look back. jQuery will always have a special place in my heart.  

But jQuery is an old dog in a javascript world full of cheetahs and jaguars. It was [created](https://en.wikipedia.org/wiki/JQuery) when IE6 was the latest browser and IE7 was the upgrade everyone was waiting for. It was release before Google Chrome was even a thing and Adobe Flash was the primary way people created interactive websites. jQuery was revolutionary for it's time, but it has been over 10 years since it's inception. 


Which begs the question....

## What if jQuery was written today? 

Meet Cash. Today I was viewing the source of a friend of mine and reviewing some code and I came across an interesting Javascript library called Cash. Cash is a super small library built for modern browsers (Chrome, Firefox, Safari and Internet Explorer 9+) that provides jQuery style syntax for manipulating the DOM. Utilizing modern browser features to minimize the codebase, developers can use the familiar chainable $ methods at a fraction of the blot. While Cash does not promise to replicate 100% of the features of traditional jQuery it does come close, covering most day to day use cases such as adding / removing / toggling classes and parsing strings of html.

Learn more about the project here: https://www.npmjs.com/package/cash-dom

## Is it time that the $ dollar sign made a come back? 

Tools like React and Angular are great for modern web applications but do feel like overkill for simple landing pages.

Let me know what you think in the comments section below.
Multibyte text and Laravel testing
Tags: laravel, php, testing, chinese
Published: 2018-04-15 14:06:29

---
title: Multibyte text and Laravel testing
published: true
description: 
tags: laravel, php, testing, chinese
---

# Problem

When I wrote test code in Laravel, I encountered a problem.

My API returns multibyte text.
By default, PHP's `json_encode` escapes multibyte text so my API returns like this:

```
curl localhost:8000/api/post/1

# Expected
{"title":"日本語"}

# Actual
{"title":"\u65e5\u672c\u8a9e"}
```

Laravel's `$response->assertSeeText('日本語')` does not work because it compares UTF-8 decoded string.

# Example

This test passes:

```php
<?php

use App\User;
use Tests\TestCase;

class UserTest extends TestCase
{
    public function testCanCreateUser()
    {
        User::create([
            'name' => '太郎',
            'gender' => 'male',
        ]);
        $this->assertDatabaseHas('users', [
            'name' => '太郎',
            'gender' => 'male',
        ]);
    }
}
```

(TODO: In my case, I expected this test fail... but passed.)

This test, returns JSON API, fails:

```php
<?php

use App\User;
use Tests\TestCase;

class UserTest extends TestCase
{
    public function testUserProfileApi()
    {
        $user = User::create([
            'name' => '太郎',
            'sex' => 'male',
        ]);
        $this->actingAs($user)
            ->get('/api/me')
            ->assertSeeText('太郎');
    }
}
```

Reports the following error:

```js
1) UserTest::testCanCreateUser
Failed asserting that '{"name":"\u592a\u90ce","sex":"male"}' contains "太郎".
```

Certainly, the text "太郎" is escaped.

# Solution

Simply, assert the result using `json_encode`.

```php
<?php

use App\User;

//...
        $this->actingAs($user)
            ->get('/api/me')
            ->assertSeeText(json_encode('太郎'));
// ...
```

You might wonder why I don't use `utf8_encode`, but in my case it failed.
Maybe that depends on `php.ini`.

There are other failing cases related to multibyte, in my case writing OAuth testing using mock object.
Then you can try `e('太郎')`. My problem was solved by this.

We can avoid using multibyte string in testing, but sometimes we need to test such strings.


# Refs

I researched a lot of websites, including Chinese websites like [思否](https://segmentfault.com/), finally found in Stack Overflow as usual.

https://stackoverflow.com/questions/49570725/laravel-5-assertseetext-and-html-entities

I sometimes run into Chinese articles when solving these multibyte problem.
I cannot understand accurately but by Kanji I can guess what they say.
CSS Selector and Logical Operation
Tags: css
Published: 2018-04-15 13:14:24

---
title: CSS Selector and Logical Operation
published: true
description: Considering relationship between CSS Selector and Logical Operation.
tags: css
---

[japanese Version(Qiita)](https://qiita.com/ln-north/items/bbfd0c271594ce7c1536)


# OR 

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/aa2c63d0-977e-b8f2-9108-19ed1b33b375.png" width="200">


```css
A, B {}
```

# AND 

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/093fb92b-6ade-4de3-ed7a-37f3607a56d0.png" width="200">

```css
AB {}
```

# NOT 

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/9a2ec2b9-954b-a253-fd65-98ed28f12bc5.png" width="120">

```css
:not(A) {}
```

# NOR 

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/f770b801-30a4-ba31-e59c-aa3b5017c7a4.png" width="200">

```css
:not(A, B) {} /* Currently undefined syntax  */
```

That way is so simply, but can't it now． 
[Selectors Level 4](https://www.w3.org/TR/selectors-4/) which is under working draft, defined this syntax.

At such times [De Morgan's law](https://en.wikipedia.org/wiki/De_Morgan%27s_laws) is convenient. 

Since NOR is "NOT `A`" AND "NOT `B`", it can be written as follows.


```css
:not(A):not(B) {}
```


If there are three or more selectors, the selector becomes dirty.　I hope to be implemented Selectors Level 4.

# NAND

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/817bb4ec-f242-853e-2d4a-d5caaaf778ad.png" width="200">

It's simpler then NOR．

```css
:not(AB) {}
```

Adapting Domorgan's law in the same way as NOR, so

```css
:not(A), :not(B) {}
```

is OK.

# XOR

<img src="https://qiita-image-store.s3.amazonaws.com/0/99270/848af736-b41c-6814-77d7-f05aa897d7a3.png" width="200">

XOR is **"`A` AND NOT `B`" OR "NOT `A` AND `B`"**, so it can be written as follows.

```css
A:not(B), :not(A)B {}
```

(Maybe, `A:not(B), B:not(A)` is simpler.)


# Impression


Actually, I was thinking about doing NOR things and started thinking about this at the trigger.

When doing something complicated, it seems to be easy to deal with remembering aggregate logic and doing this kind of things.
getting started in web development freelancing.
Tags: help, webdev
Published: 2018-04-15 13:03:51

---
title: getting started in web development freelancing.
published: true
tags: help, webdev
---

I'm a college guy, I have made projects using HTML, CSS, JS, nodejs, MongoDB, Reactjs, [see here](http://github.com/itsjzt). I'm more comfortable with the frontend. I want to get started in freelancing but things are little confusing, I know about upwork.com, fiverr.com. After seeing demo projects of many freelancers in those websites I think I can make them easily.

My main points of confusions are:- 

- How will they pay me?
- what to charge in the beginning?
- What are some good niches that have smaller projects? (eg: making landing pages)
- I think most of the backend is made with PHP, MYSQL at least in freelancing. really?
- where should I start, (one website, offline, many websites)

P.S. I have done an internship.
Making my own startpage using HTML/CSS  
Tags: startpage, showdev, linux, discuss
Published: 2018-04-15 12:50:39

---
title: Making my own startpage using HTML/CSS  
published: true
description: Cool browser startpage
tags: startpage,showdev,linux, discuss
---
This week I learned HTML and CSS from [Thinkful](https://thinkful.com) Frontend development course included in Github student pack. I always wanted to have a cool browser startpage, so I went ahead and coded one myself using HTML/CSS I had learned. It took me about 5-6 hours to create my first startpage. Here is how it looks.

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

I also had to deploy a small server to serve the startpage to Firefox because I wanted the link to look better than "file:///". So some quick Google searches lead to a small startup server script. I then use that server's address and port as my home page in Firefox. 

Source: https://github.com/GauravChaddha1996/startpage
Care to share yours?
how to describe my previous work without breaking confidentiality  
Tags: career, help
Published: 2018-04-15 10:08:25

---
title: how to describe my previous work without breaking confidentiality  
published: true
description: 
tags: #career #help
---

how to talk about my previous work and impress interviewers without being too detailed, and regarding web development, what is considered confidential and what is not?
PWAs are going to eat the (app) world
Tags: commentary, pwa, webassembly, electron
Published: 2018-04-15 16:59:42

---
title: PWAs are going to eat the (app) world
published: true
tags: Commentary,PWA,WASM,Electron
canonical_url: https://blog.jonstodle.com/pwas-are-going-to-eat-the-app-world/
---

There's been a lot of talk around Progressive Web Apps (or PWAs) for a time now. Some people are condemning them and don't want to give the browser even more access to data and sensors, while others are heralding the end of the native apps. While these are extremes, I think there are some interesting ramifications that the PWAs are bringing with them.

PWAs are going to be versatile enough and robust enough that they're going to supplant some of the native apps you might have on your phone (or computer) today.

While some apps will no doubt have a benefit by running directly on the metal of your phone or computing device, a lot of apps don't really need all that computing power. These apps can be swapped for PWAs. And with PWAs having the ability to be added to your homescreen or desktop as if it's a regular app, there's going to be no difference for a lot of users.

If you want a good example of a PWA at work, check out mobile.twitter.com.

Users are going to have the benefit of being able to try a PWA before installing it - just navigate to it's location on the web. If they want to install the app, they can add it to their home screen. Another great benefit is that PWAs (and single page applications) are naturally inclined to only download parts of the application at a time - no need for a large initial download before even using the app. When the app is "installed" by adding it to the home screen, the rest of the application can be downloaded in the background.

One can't talk about web development without mentioning Javascript. A lot of native developers are very sceptical to Javascript. While there have been built massive applications with Javascript, there's still a stigma that it's not a good language to build large, heavy apps in.

This is where Web Assembly (or WASM for short) is going to make a difference. WASM let's developers use almost any language and compile it down to WASM. The compiled WASM code will run in the browser with far superior performance to Javascript.

With the ease of install of PWAs and high performance of WASM, I think we're also going to see some Electron apps moving to be PWAs. Some Electron apps genuinely need the higher level of system access Electron (and nodejs) gives them, but some Electron apps are mostly Electron apps because a "native version" of a web app is desired. And apps in this last category are going to make the switch.

I don't think Adam Pedley was far off when he recently said that PWAs are going to make up 70% of apps in the future. I believe it's less work to maintain a PWA across multiple browsers, than it is to maintain a native app across multiple operating systems. And that's going to make a lot of developers jump on-board.