teleren/devto huggingface dataset:
Wordpress concepts series: be a good wordpress developer
Tags: wordpress, tutorial, webdev, beginners
Published: 2019-06-01 07:05:08

I'm now developing wordpress themes and plugin for over 3 years and noticed one important thing: Knowing wordpress concepts is as important as knowing php. 
When you're using a cms or a framework, you expect it to have some prepared elements for your site. Sidebars, menus, posts, gallery and other things. In wordpress, many of these things are come in ready and those are the things that we call wordpress concepts. 

<h4>What this series is about?</h4>
I want to write about some core concepts and the things you should know beside the pure PHP to be a good developer. This can help you in coming with an efficient solution when you want to add a feature to your wordpress website or find a problem. 

<h4>For Beginners </h4>
This series is totally for the people who are in their way to be a wordpress developer and not for the professionals.

I will try to write every 2 or 3 days and share my best knowledge of wordpress, hope somebody can use it. I will update this post with the links of the articles I publish in this series. 

<strong>Part 1: </strong><a href="https://dev.to/amirition/wordpress-concepts-action-and-filter-hooks-power-and-foundation-of-wordpress-m90">Action and filter hooks, power and foundation of wordpress </a>
Access Control with Solidity & OpenZeppelin | Authorization, RBAC (Role Based Access Control)
Tags: ethereum, solidity, blockchain, accesscontrol
Published: 2019-06-01 06:55:30

---
title: Access Control with Solidity & OpenZeppelin | Authorization, RBAC (Role Based Access Control)
published: true
description: 
tags: ethereum, solidity, blockchain, access control
---


{% youtube Tnyrp_W5wdM %}

Most Solidity smart contracts need to implement access control. In this tutorial, I will show you how to implement basic access control with pure Solidity, as well as more advanced role-based patterns like RBAC, using the OpenZeppelin library:

* Authentication vs Authorization
* Basic access control in Solidity
* Ownable pattern with OpenZeppelin
* Secondary pattern with OpenZeppelin
* RBAC (Role-Based Access Control) with OpenZeppelin
What's New In DevTools (Chrome 76)
Tags: devtools, chrome, developer
Published: 2019-06-01 06:26:42

---
title: What's New In DevTools (Chrome 76)
published: True
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jpaqujbwu2v5uwsrv5lh.png
tags: #devtools #chrome #developer
---
1. Autocomplete with CSS values
![Autocomplete with CSS values](https://thepracticaldev.s3.amazonaws.com/i/3mbgliowb7x87uwdknv0.png)
<figcaption>After typing bold the Styles pane autocompletes to font-weight: bold</figcaption>
2. A new UI for network settings
![A new UI for network settings](https://thepracticaldev.s3.amazonaws.com/i/uehvdfznmf10z0y9dy54.png)
<figcaption>Network Settings.</figcaption>
![](https://thepracticaldev.s3.amazonaws.com/i/4t4eao6fycg5nrxe4jw8.png)
<figcaption>Mapping the old locations to the new.</figcaption>
3. WebSocket messages in HAR exports
```
...
"_webSocketMessages": [
  {
    "type": "send",
    "time": 1558730482.5071473,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  },
  {
    "type": "receive",
    "time": 1558730482.5883863,
    "opcode": 1,
    "data": "Hello, WebSockets!"
  }
]
...
```
When exporting a HAR file from the Network panel to share network logs with your colleagues, your HAR file now includes WebSocket messages. The _webSocketMessages property begins with an underscore to indicate that it's a custom field.
4. HAR import and export buttons
![HAR import and export buttons](https://thepracticaldev.s3.amazonaws.com/i/537hcuyy1veemtvpkuyq.png)
<figcaption>The new HAR buttons.</figcaption>
5. Real-time total memory usage
![Real-time total memory usage](https://thepracticaldev.s3.amazonaws.com/i/w9myxna88xlzzl3z52t1.png)
<figcaption>The bottom of the Memory panel shows that the page is using 43.4 MB of memory in total. 209 KB/s indicates that total memory usage is increasing 209 KB per second.</figcaption>
6. Service worker registration port numbers
![](https://thepracticaldev.s3.amazonaws.com/i/vnprfoqwynuq35aqu3n3.png)
<figcaption>Service worker ports.</figcaption>
7. Inspect Background Fetch and Background Sync events
![](https://thepracticaldev.s3.amazonaws.com/i/td1peyimccdxadihxyc2.png)
<figcaption>The Background Fetch pane. Demo by Maxim Salnikov.</figcaption>
![](https://thepracticaldev.s3.amazonaws.com/i/0pv0xtmhblmsoloqmvqh.png)
<figcaption>The Background Sync pane.</figcaption>

Resource: [What's New In DevTools (Chrome 76)](https://developers.google.com/web/updates/2019/05/devtools)

Join the best and biggest Community!
[Click Here](https://t.me/theprogrammersclub)
How to plan a software?
Tags: dev, beginners, help, discuss
Published: 2019-06-01 03:55:31

Beginner here. I wanna go full stack, and I learn by doing (and not following a tutorial).. so i define a problem i want to solve, then i think what i need to do (logic) to solve it then i search how i accomplish that in the language i'm working 

when i try to just start coding my idea there is a lot of back-and-forth because in the middle of the code i realize I should have done that in a different way..

I need to have an overview how things should work (a plan!) and not just start coding.. 

i tried mock ups, writing down a document explaining how software should works and have tried UML (actually just read about UML, found it boring so didnt tried it)

didnt liked any of this option (or they just dont work for me)

And im having this problem 'working' alone. i imagine how this can work in a team where two or more persons are coding different sw parts and these parts works together..

 
how do you plan software?
My favorite type coercion example
Tags: javascript, coercion, types, comparision
Published: 2019-06-01 02:59:13

---
title: My favorite type coercion example
published: true
description: Type coercion in JavaScript might be confusing
tags: javascript, coercion, types, comparision
---

```js
[] == ![] // true
```

😱
How is an empty array equal to a not empty array?! It doesn't make sense!
That's the reason why there are a lot of articles and [videos](https://www.youtube.com/watch?v=et8xNAc2ic8) on `wtfjs` theme.

Most developers prefer not to use double equals at all to avoid such issues. 
IDE code checker may warn you not to use `==`.
![IDE warn](https://thepracticaldev.s3.amazonaws.com/i/k2fic8ooaz0ipjtneawu.png)

And this is a good decision to always use `===`.

But I really like Kyle Simpson's [YDKJS](https://github.com/getify/You-Dont-Know-JS) series and his `why` attitude. Why does JS behave like that? Let's dive in deeper!

`==` operator allows types coercion. It means that if two compared values are of different types, JS will try to coerce them to the same type before comparison.

What's the coercion algorithm? Actually it's pretty straightforward and defined in [ECMAScript language specification](https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3).

It might look scary at first, so let's follow this algorithm step by step using the example from the beginning of the post.

`[] == ![]` - expression statement of our interest
First of all, before the actual comparision JS engine will execute all operands. 

Step 1
`[] == false`
The right operand is the boolean type, so the result of comparision `[] == ToNumber(false)` is returned.

Step 2
`[] == 0`
`[]` is the object and `0` is the number, `ToPrimitive([]) == 0` is returned.

Step 3
`"" == 0`
"" is the string and 0 is the number, `ToNumber(x) == y` is returned.

Step 4
`0 == 0`
`true` is returned.

It's fascinating how much work a JS engine does under the hood. But it follows the clear algorithm, no magic involved. 
Read the specification, learn how JS works, be a better developer 😉

P.S. I really love this [tool](https://felix-kling.de/js-loose-comparison/#%5B%5D==!%5B%5D) which decomposes any JS comparison expression according to the ECMAScript language specification.
30 Days of AWS (Day 5)
Tags: aws, challenge, 30daysofaws
Published: 2019-06-01 02:49:00

---
title: 30 Days of AWS (Day 5)
published: true
description: 
tags: AWS, challenge, 30DaysOfAWS
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xk3wcpnc2h8nk8oy9xh6.png
series: 30 Days of AWS
---

Hey, welcome back to another post. I've been disconnected because I was pretty busy doing things, medical appointments and others.  

So I continue my studying learning about EC2, AMIS and EBS. This topic is my current weakness because I failed the demo exam provides but I have [exampro](https://app.exampro.co) to practice this topic again.

## EC2
It's a simple computer/server that Amazon provides to us. An EC2 instance has several parts and those are:

### AMIS

An Amazon Machine Image provides the information required to launch an EC2 instance, which is a server in a cloud. In other words, it's an OS (Operative System), packages and another require stuff.

There we have 3 different types of AMIS:

 1. Community AMIS: 
	1. Free to use.
	2. With this AMIS you are selecting the OS that you want, It has a pre-setup

 2. AWS Market place AMIS:
	1. Pay to use.
	2. It's licensed software.

 3. My AMIS:
	1. AMIS created by yourself.

### Instances type

This is the CPU that you want for your instance.
Here we have another config that is important when you are creating one instance type:

1. CPU: The number of virtual CPU's that you will need to use.
2. Memory: The amount of RAM that you need to your instance.
3. Storage: The instance storage volume, in other words, the HD (Hard drive)
4. Network Preference: Bandwidth capability, Security groups and other stuff related to networking.

### EBS (Elastic Block Store)

It's a hard drive that will have our EC2 instance.  provides persistent block storage volumes for use with Amazon EC2 instances in the AWS Cloud. Each Amazon EBS volume is automatically replicated within its Availability Zone to protect you from component failure, offering high availability and durability. Amazon EBS volumes offer the consistent and low-latency performance needed to run your workloads. With Amazon EBS, you can scale your usage up or down within minutes – all while paying a low price for only what you provision.

### Security Groups

The security groups are very similar than NACL ( I talked about in the last post) Allow or deny traffic depending on the rules that you've provided.

There we have another configuration,  I think that this topic wasn't cover in deep, In fact, as I mentioned above I fail the exam so I need to read more about.

So that's everything for today tomorrow I'll study about EC2 again, and I'm gonna try to move to S3 topic.

Thanks for reading, and enjoy learning.
Run React-Frontend and Nodejs-Backend with one command
Tags: react, node, javascript
Published: 2019-06-01 01:56:36

Before frontend frameworks came out, we just needed to run the backend and open `localhost` with the browser.

However, now we need to run the frontend and the backend. I think they are not too much work but, I sometimes run more than 4 programs and open many iTerm's tabs. Then get an error since I tried to use the same port which is totally my mistake, but I sometimes want to shout `WTF??????`


## steps
1. Install concurrently
2. Add proxy to frontend package.json
3. Modify package.json script


### step1 install concurrently
I like this npm package because easy to use lol.  
Basically, I use this to run a couple of things together.   
For example, my `npm run dev` is including tslint, build and run webpack-server

```zsh
$ npm install --save-dev concurrently
```


https://www.npmjs.com/package/concurrently


### step2 Add proxy
In this case, nodejs(backend) is using port 8080.

```ts
"proxy": "http://localhost:8080"
```


### step3 Modify package.json
This case is using `npm start` to start frontend and backend.

```ts
 "scripts": {
 "client": “cd client && npm start",
 "server": “cd server && npm start",
 "dev": “concurrently \"npm run server\" \"npm run client\""
 },
```

### Run
```zsh
$ npm run dev
```
Library logo feedback - show your workings.
Tags: webassembly, javascript, design
Published: 2019-05-31 23:54:18

On the 29th of May 2019, I put out a post for selfish reasons. I am working on a library which is getting a lot of my love. Tidal Node, you don't need to know much about other than it allows you to run 2 virtual machines on the same platform, The much faster Lua alongside Node.js v8 JavaScript via the magic WebAssembly. 

TLDR
I threw logo 1.0 together in about an hour, do you have any thoughts or ideas to improve it or its developments. The idea is a blending of Node.js logo and the Lua logo and my own twist (because they are both ugly logos anyway).

Would any of these logo's make you look twice? let me know in the comments. 🦄

#### 1.0 - Congratulations it's a logo
![](https://thepracticaldev.s3.amazonaws.com/i/xtqw67925p971n6qf4nx.png)

So based on your feedback and my underwhelming feeling about some of 1.0 one, here is another direction, leaning more towards node's logo but not enough to get sued by either.

#### 1.1 - The terrible twos
![](https://thepracticaldev.s3.amazonaws.com/i/3yimnax1lz125f4gjk6p.png)

I do like 1.1 but it's lacking pizazz, maybe as it grows up it will gain its own identity and be a good member of logo society.

#### 1.2 - Rebelling against parents
![](https://thepracticaldev.s3.amazonaws.com/i/nt4phx0w22l9dm4jyjjq.png)

So far 1.2 is more original but still has a subtle nod towards Node and Lua. But is it too subtle? It does have the whole moon and sea vibe.

I have chosen 1.2 and made an animated version in css and html.
{% codepen https://codepen.io/acronamy/pen/pmqrPm %}
Print A Random Phrase Using Python
Tags: python
Published: 2019-05-31 22:12:31

---
title: Print A Random Phrase Using Python
published: true
description: Chose a random phrase from a given file
tags: python
---

Some days ago I shared a little shell script to chose a random paragraph 
from a study text I have. Now let's see its version using python

```python
#!/usr/bin/env python3
#  -*- coding: utf-8 -*-
#         vim: ai ts=4 sts=4 et sw=4
#    Filename: randphrase.py
#      Author: Sergio Araujo
#     Purpose: read a random paragraph from a file
# Last Change: mai 31 2019 19:02
#     Created: sex 31 mai 2019 18:47:16 -03
#       email: <voyeg3r âœ‰ gmail.com>
#      Github: https://github.com/voyeg3r
#     twitter: @voyeg3r
#
# sources: 
# https://stackoverflow.com/a/40197938/2571881
# https://stackoverflow.com/a/509295/2571881

import random
import os

# clear the screen (I have used the os module just for the sake of cleaning the screen)
def cls():
    if os.name == 'posix':
        os.system('clear')
    else:
        os.system('cls')

cls()

file = "/home/sergio/.dotfiles/nvim/wiki/phrases.md"

par = open(file).read().split('\n\n')

# here I pick up a random paragraph (avoiding the two first paragraphs because they 
# are explanatory for the file and the last one wich contains tags)
print()
print(random.choice(par[2:-1]))
print()

```
I am a web developer, hard of hearing, and an a11y advocate, Ask Me Anything!
Tags: ama, a11y, webdev
Published: 2019-05-31 22:00:41

---
title: I am a web developer, hard of hearing, and an a11y advocate, Ask Me Anything!
published: true
tags: ama, a11y, webdev
---

Really, anything. I don't claim to be the spokesperson for all disabled people that need web accessibility, but I'm here to give you my own personal perspective.

Additionally, your questions don't even have to be about web development or a11y. If you have general questions about what it's like to be hard of hearing, please, ask away.

See you in the comments!

👇🏻👇🏻👇🏻

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).
Plastic.vim - a dark colorscheme for vim/neovim with low contrast colors for long coding sessions
Tags: vim, colorscheme
Published: 2019-05-31 19:37:37

[Plastic](https://will-stone.github.io/plastic/) (by Will Stone) is one of my favorite color schemes for Visual Studio Code. 

Since I use neovim as my main editor, I decided to create a port for vim/neovim.

{% github https://github.com/flrnprz/plastic.vim %}

It has the same design principle of simple syntax highlight. I hope you enjoy it!

Happy coding!
How to get involved with open source
Tags: opensource
Published: 2019-05-31 19:09:32


The most common question I get when I recommend open source as a launching pad for budding developers is "Where do I start?".

The answer: *anywhere!*

There's a plethora of open source software out there, and not everybody needs to have an encyclopaedic knowledge of the codebase to contribute. You can contribute small things like [fixing dead links in the README](https://github.com/portainer/portainer/commit/173c673d37ea2e4bb82d159b601e60109a435601) to [resolving trivial compilation warnings](https://github.com/mozilla-mobile/fenix/commits/master?author=MSF-Jarvis) to simply [tweaking an issue template](https://github.com/opengapps/opengapps/commits/master/.github/ISSUE_TEMPLATE.md).

The reason I'm linking my own commits is because I want to let people know that the guy helming a [theme engine](https://github.com/substratum) is also out of his element at times and there's no shame in admitting it :)

Thanks to the adoption of specs like [all-contributors](https://allcontributors.org), OSS is more friendly and welcoming than ever. Contribute literally __anything__ to a project you use and scale up from there.

Remember: You _will_ make mistakes in the process. Don't give up! There's always a project looking for any kind of help it can get. Start your search at home -- See what apps and desktop software you use that's open source, and if that's something you'd like to give back to or even fix something in, even if it's driven by the need to enhance your experience than your goodwill. Linus Torvalds, the creator of Linux [famously said](https://www.bbc.com/news/technology-18419231) this:

> I do not see open source as some big goody-goody "let's all sing kumbaya around the campfire and make the world a better place". No, open source only really works if everybody is contributing for their own selfish reasons.

And it's true! Most apps I contribute to right now, like [AdAway](https://github.com/AdAway/AdAway) and [Android Password Store](https://github.com/zeapo/Android-Password-Store), began as a manifestation of personal annoyance. I found things to be lacking, and decided to address it. In the end that benefitted both me and the project.

In conclusion, I'd like to reiterate this -- Contributing __anything__ is contributing!

P.S. It's okay to be nervous about it. I spent two weeks researching SSL before submitting a simple null check to Google's [conscrypt](https://github.com/google/conscrypt/pull/471) library :P
Taking notes with vim
Tags: vim, notes, vimwiki, markdown
Published: 2019-05-31 18:38:53

---
title: Taking notes with vim
published: true
description: using vimwiki to take notes
tags: vim, notes, vimwiki, markdown
cover_image: https://thepracticaldev.s3.amazonaws.com/i/a32lw1b0u3b8zhqiqm8m.png
series: taking notes in vim
---

For some time I've been searching for a plugin that would allow me to take notes without any hassle. I enjoy using `markdown`, so naturally this `plugin` had to support that format.

Recently I came across [vimwiki](https://github.com/vimwiki/vimwiki). It has almost everything that I wanted, although there are a couple of flaws. But since it's `vim` it is very easy to fix them yourself.

## Installing `vimwiki`

If you're using [vim-plug](https://github.com/junegunn/vim-plug), you can install it simply by adding following in your `~/.vimrc` file:

```vimscript
call plug#begin()

Plug 'vimwiki/vimwiki', { 'branch': 'dev' }

call plug#end()
```

I recommend using `dev` branch as I found it to be pretty stable, with a lot of bugfixes.

## Using `vimwiki`

`vimwiki` supports `wiki` format as well as `markdown` but since our task is to use the latter we need to add following to `~/.vimrc`:

```vimscript
let g:vimwiki_list = [{ 'path': '~/Documents/notes/',
       \ 'syntax':'markdown', 'ext': '.md' }]
```

This will tell the plugin that all notes must be stored in `~/Documents/notes/`, which is compatible with most OS and you will profit automatically of `iCloud` sync in `MacOS`. It also tells that we are using `markdown` format by default and our default `root` note will be called `index.md`. To access this note you need to hit <kbd>Leader</kbd> + <kbd>w</kbd> + <kbd>w</kbd> from any vim buffer.

After you've opened any `note` you can hit <kbd>Enter</kbd> on any word or selection and `vimwiki` will create a link to a child note(with that word or selection as a name) and the note file itself. Once the link is created you can simply navigate to a child note by hitting <kbd>Enter</kbd> once again. Magic!

## The flaws and how to fix them

The main flaw is that `vimwiki` replaces itself as syntax highlighter for `markdown` files. Compare:
`vimwiki` highlight
![vimwiki highlight](https://thepracticaldev.s3.amazonaws.com/i/4vt3xu1fxofsgc36xkeu.png)
to [vim-markdown](https://github.com/plasticboy/vim-markdown) highlight
![vim-markdown hightlight](https://thepracticaldev.s3.amazonaws.com/i/gbbgg5etzl2bv7ubz6gs.png)

I know that it depends on colorscheme, but I saw same result on multiple variants.

The second flaw is it changes `filetype` to `vimwiki` so that you lose all your snippets and other good stuff that was linked to `markdown` filetype.

To fix both you need to add following line to `~/.vimrc`:
```vimscript
autocmd FileType vimwiki set ft=markdown
```

That way we reset the `vimwiki` file type to markdown, all the magic functionality that I talked about earlier will remain.

You can find all the configuration in my vim settings repo:
{% github gko/vimio %}

I'm also on twitter as [konstantin](http://twitter.com/konstantin)
Who's looking for open source contributors? (May 31st edition)
Tags: opensource, contributorswanted, discuss
Published: 2019-05-31 17:42:53

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 [Arif Riyanto](https://unsplash.com/@arifriyanto?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)