teleren/devto huggingface dataset:
How to create a WordPress posts archive with REST API and ajax - A practical example
Tags: wordpress, tutorial, javascript, codepen
Published: 2020-05-14 11:14:05

<p>In this tutorial, we shall learn about a different approach of making posts archive in a WordPress site. Instead of the default WordPress loop or <code>WP_Query()</code>, we will be using WordPress REST API and jQuery Ajax. Here's the codepen that we shall try to achieve.
You can find the full tutorial here - <a href="https://templateartist.com/2020/05/12/wordpress-custom-posts-archive-with-rest-api-and-ajax/">WordPress posts archive with REST API and ajax.</a></p>

{% codepen https://codepen.io/amitbiswas06/pen/PoPavyZ %}
#CodepenChallenge Gettin' Practical with Tabs
Tags: codepen, vue, javascript, showdev
Published: 2020-05-14 11:08:53

<p>This is an example component design for tabs. Functionality is written mainly by VueJS, and the animation is written in GSAP. But some light animations are written in CSS.</p>

<p>This tabs' design is mainly influenced by Google's Material Design.</p>

{% codepen https://codepen.io/takaneichinose/pen/abvKVaO %}
Vim to the rescue: Attached Terminal
Tags: vim, todayilearned, tutorial, productivity
Published: 2020-05-14 11:08:24

## Introduction

I was recently working on some C++ code using vim and had to switch to a terminal to compile the code everytime I wanted to test it. Granted that this problem can be solved by installing a plugin which compiles on save, but I wanted an intuitive attached terminal instead.

The problem with terminals inside vim is that they open either in a new tab or in a new split pane. By default, a terminal in vim looks like this:

```
:term
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/z558w3qtckhz53yy92sc.png)

---

## What can be better

In the screenshot above, there are a few problems:

* The split pane is too big, and occupies half of the screen
* You have to enter a command everytime you want a terminal, it is slow
* The split pane opens up in the top part of the screen by default

---

## What we want to achieve

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zcusgrmeti1vp8fvqmkd.png)

The benefits we get here are:

* The terminal opens at the bottom (like it should)
* The size of the attached terminal is ideal
* The whole action is bound to a key, so it is fast

To configure your attached terminal this way, you can add the following lines in your **.vimrc**:

```vimscript
" SpawnTern function
" To add a terminal at the bottom
function SpawnTern()
	" spawn terminal below
	bel term

	" Decrease split size by 15 words
	15winc -
endfunction

" We bind the control+x keys to spawn the terminal
noremap <c-x> :call SpawnTern()<CR>
```
Understanding Kubernetes: part 23 – Ingress
Tags: kubernetes, devops, docker, beginners
Published: 2020-05-14 10:50:04

---
title: Understanding Kubernetes: part 23 – Ingress
published: true
description: Serie of sketchnotes about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/hxj3xmi5oe220z6tlehy.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes. I think it could be a good way, more visual, to explain Kubernetes (and others technologies).

We continue the serie of Sketchnotes about Kubernetes, with Ingress.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hxj3xmi5oe220z6tlehy.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uzxsrvtddvjfzcm9htu5.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g448npi266ledcbcl1ph.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tesvt5f9r4bnw05cc7jb.jpg)

If you are interested, I published all the sketchnotes on Kubernetes (and new ones!) to make a "book" of 120 pages: ["Understanding Kubernetes in a visual way"](https://gumroad.com/aurelievache#uCxcr).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
ZenjectのBindメソッドって何を使えば良いんだろう
Tags: zenject, unity3d
Published: 2020-05-14 10:42:51

インスタンスのInterfaceをまるごとBindしてくれるBindInterfacesAndSelfToは便利だけど常に使うべきだろうか？

#### ざっくりとした違い
まずは違いについておさらい

```
Container.Bind<Foo>(); //FooをBindする
Container.Bind<IBar>().To<Bar>(); // Barに実装されているIBarをBindする。
Container.BindInterfaces<Bar>(); // Barに含まれるすべてのInterfaceをBindする
Container.BindInterfacesAndSelfTo<Bar>(); //Barに含まれるすべてのInterfaceとBarをBindする。
```

Zenjectでは次のInterfaceがBindされた時自動的に呼び出すようになっている
 * ITickable
 * IInitializable
 * IDisposable

これらのInterfaceをBindした時に強制的にZenjectのライフサイクルに乗ってしまうのでこれを避けたい場合はBindInterfaces及びBindInterfacesAndSelfToを使うのを避けたほうが良いかもしれない。

また、複数のInterfaceを実装しているがZenjectで特定のInterfaceにしか用が無いならBindする対象を絞る方が良いだろう

### BindInterfacesとBindInterfacesAndSelfToの使い分け

この2つの違いはInterfaceを実装しているクラスそのものもBindするかどうか
Interfaceにしか用が無いならBindInterfacesを使うしクラスそのものも使うのであればBindInterfacesAndSelfToで良いと思う

### 全部BindInterfacesAndSelfToでいいんじゃない？

そういうわけでもない。
あるかわからないけど初期化処理やDisposeのタイミングを自分でコントロールしたいような時はそれらを含めるべきじゃない。

### 手間じゃないなら
チームでやるような開発ならBindやBind.Toである程度制御したほうが良い気がする。
最終的に読みやすさとかメンテナンス性とかにつながってくると思う。
あとはせいぜいBindInterfaces…

とりあえずそんな感じ
Terraform Fundamentals: State Management and Dependency Graph, Creating the First Server
Tags: terraform, aws, ansible, cloud
Published: 2020-05-14 10:27:26

---
title: Terraform Fundamentals: State Management and Dependency Graph, Creating the First Server
published: true
description: Learning Terraform: Part II
tags: terraform, aws, ansible, cloud
cover_image: https://assets.mkdev.me/posts/covers/000/000/012/original/mkdev_article.png
---
In the second part of the Terraform Lightning Course we are going to learn 2 fundamental concepts behind Terraform. Also, we will finally get our hands dirty and provision the first cloud server with Terraform.

{% youtube 4OUWDessM-s %}

***

**Terraform Lightning Course**

* Part I: [Infrastructure as Code](https://dev.to/mkdev/infrastructure-as-code-and-how-terraform-fits-into-it-40bl)
* Part II: [Terraform Fundamentals](https://dev.to/mkdev/terraform-fundamentals-state-management-and-dependency-graph-creating-the-first-server-1756)
* Part III: [Configuring Terraform Templates](https://dev.to/mkdev/configuring-terraform-templates-variables-and-data-resources-5b99)
* Part IV: [Multi-cloud Terraform Environment](https://dev.to/mkdev_me/creating-multi-cloud-terraform-environment-with-the-help-of-remote-state-backends-and-aws-s3-1l0)
* Part V: [Refactor Terraform code with Modules](https://dev.to/mkdev_me/refactor-terraform-code-with-modules-1o21)
* Part VI: [Learning Provisioners](https://dev.to/mkdev_me/creating-kubernetes-clusters-with-terraform-learning-provisioners-2o6o)

*You can always hire [our mentors](https://mkdev.me/en/specializations) and learn directly from them!*
A simple API using Django,Postgresql and Celery
Tags: python, django, postgres
Published: 2020-05-14 10:17:21


Day 1
A Django rest framework API for Air pollution data of India. Air pollution data resource is from [Govt. Of India Open Data Source](https://data.gov.in/).

A simple django project with some models and restfull api support. I am using Celery(A python lib.) to fetch data using celery tasks scheduler. I will store all data to Postgresql database.

All code will be available on Github. I will create a link in my next post.

For now i will simply start with project installations.

I am using windows system for this project. We need to install Python latest version from [Download Python](https://www.python.org/downloads/windows/). After Installing Python successfully, we will install virtualenv library, virtualenv is a tool to create isolated Python environments. virtualenv creates a folder which contains all the necessary executable to use the packages that a Python project would need. It can be used standalone, in place of Pipenv. Install virtualenv via pip, since i am using windows system, so every command will run inside command prompt:

<code>**pip install virtualenv**</code>

After installing virtualenv we will create a virtual environment by using:

<code>**mkdir test_django** to create a dir for project(Choose any name.)
**cd test_django**
**virtualenv env_name** to create a virtualenv.</code>

After creating virtualenv, check that environment is activated.

**`(env_name)C:\test_django>`**

For deactivating environment use deactivate command and for re activate:

**`cd test_django`**
**`Scripts\activate and hit enter`**

First we need to install Django, which we will do by using Pyhton Pip. I am using Django version 2.2 and Django Rest Framework, you can use any latest version.

**`(env_name)C:\test_django> pip install django==2.2`**
**`(env_name)C:\test_django> pip install djangorestframework`**

We are almost set to start the project. I will create another post to start project.

Please let me know if anyone is facing any issue, i will keep updating post here.

Thanks and hope you enjoy the article.

Cheers!!!
JavaScript Basics : How to retrieve an element from the DOM? 
Tags: javascript, webdev, beginners, codenewbie
Published: 2020-05-14 10:17:05

JavaScript can do many wonderful things, and one of them is [DOM](https://www.w3schools.com/js/js_htmldom.asp) (Document Object Model) manipulation. To manipulate a DOM element you need to access the corresponding DOM object and that is what this post is all about. Lets get right into it.

---
## Needle in a Haystack

There are many methods to get an element from the DOM. We will go from the slowest to fastest methods based on performance.

#### Accessing By ID
``` js
document.getElementByID();
```
This is the fastest method to retrieve an object from the DOM. When an element is added to the DOM with an id, it is stored as a global variable in the document tree object. (You can find more about how that design choice happened [here](https://stackoverflow.com/a/3434388), it's a funny story!). This is also why DOM element IDs need to be unique. When you call this method passing the ID of the element you need as an argument it instantly refers this global store and returns the DOM object.

#### Accessing by Class Name or Tag Name
``` js
document.getElementsByTagName();    //using tag name
document.getElementsByClassName();  //using class name
```
 `document.getElementsByTagName` takes a HTML tag name (like `<p>`,`<a>`,`<span>`,`<div>` etc) as an argument and returns elements having that HTML tag type. `document.getElementsByClassName` takes a classname as an argument and returns elements having that classname. As the name suggests these two functions retrieve multiple DOM elements at once and hence perform slower than `document.getElementByID`.

#### Accessing using Selectors
``` js
document.querySelector();    //returns the first element
document.querySelectorAll(); //returns all elements
```
These are very powerful functions to retrieve DOM elements. They take [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp) as an argument to retrieve the elements. This allows you to mix and match selectors to find the exact element(s) you need. `document.querySelector` returns the first matched element, while `document.querySelectorAll` returns all matched elements. As functionality and capability increases so does required time. Hence these are the slowest of the native DOM element retrieval functions.

#### Bonus Method : Accessing using jQuery
``` js
jQuery(selector);
jQuery.find(selector);
```
jQuery is a very useful library of functions which makes it easier to query the DOM and traverse elements. It has a lot of built in functions to retrieve elements and manipulate them. It has the functionality of all the native functions and more, but the major drawback is the time required for every operation. jQuery is much more slower than native JS in doing equivalent tasks. You can find more about jQuery [here](https://api.jquery.com/).

---
## Conclusion

In this post we have seen several different methods for accessing DOM elements using ID, tagName, className, selectors and by using jQuery. Hope you liked it. Thanks for reading through. <3
When knowing how to code could bite you back
Tags: codenewbie, gatsby, personal
Published: 2020-05-14 10:12:22

I always think knowing how to code is an advantage, a major one. I could come up with an idea and execute it at the same time.

It’s correct! But it dawns on me after a while that being a coder makes me consider a more complicated path for an idea.

I do not know code before (2 years ago), and I built up a successful blog with 2000 visits/day, earning a respectable income with only Wordpress and Shared Hosting (Yes!! Shared Hosting - and I message the Customer Service team a lot! I do not know SHIT!).

I focus on the core: content, and promoting the content (aka hustling). It’s simple, easy, and most importantly it works!

Now, I take almost 2 months just to have 10 article on my [newly launched blog](https://constantdelights.com). I built a custom admin, cook up a frontend with fancy site generator (Gatsby), and plug in an old-soul NodeJS API.

But then I realize, the most important focus for a blog is content. Everything else is a nice-to-have, but without content, your blog is just a no-man-land. Why I have to dread with all the fancy technology set up, rather than kicking start and drill in the most important stuff: creating content?

Maybe it’s not the problem with coding. It’s MY problem of over-complicating things, and suffering the shiny object syndrome. With code, I feel powerful. I feel I could tackle anything with 50 lines of code (or more). And I try to make use of the newly found power by finding every single opportunity to utilize it.

So … How to fix this? Truth to be told, I do not know. The good thing now is I finally launch, but I still find myself tinkering with the coding part to fine tune the details bit by bit, which again prevent myself from the core of my business.

Maybe I have to live with this, like we eventually learn to live with Covid-19. I’ll write a follow-up to this post once I figure out!

Quite an important thought for the day huh?

Tuan

This post was originally posted on [my blog](https://tuanphan.org/posts/when-knowing-code-bite-you-back)
Get Things Done with Shufl
Tags: management, javascript, nextjs
Published: 2020-05-14 10:09:43

_It is an introduction of a project I've built for my own use; I am an engineering manager and will be speaking to other "managers" out there, but it can and should be used (and has been since we introduced it in our team) by engineers to manage their own load._

## tldr;

Shuffle and assign tasks among your team members: [https://shufl.now.sh/](https://shufl.now.sh/)

## Motivation

We maintain an open team culture, where we trust everyone is a professional and does their job responsibly and to their best abilities, improving personal contribution and team's performance as the whole. 

Enough has been said about the importance of maintaining such leadership culture in modern [product teams](https://svpg.com/product-vs-feature-teams/).

One of practical examples is reviewing pull requests. 
Ideally, you would review PRs as they come up. 
On practice, it is not always happening and every day at a stand-up we would compile a list of of PRs from past day ready for review, send it in slack and let engineers pick them up and review, ideally before lunch.

It works well until the number of PRs exceeds your team bandwidth. Add a couple of urgent tickets that need to be merged "now" and you have a challenge to address.

Just putting a list of PRs and let the team pick them up may lead to everyone jumping on the first PR on the list and leaving less time for others. That's when you need to intervene and manage priorities.

You can do it manually by asking certain people to pick certain PRs. It can be time consuming and, worse, introduce bias and favouritism.

## Solution

Instead, we ask technology for help.
First, I used [random.org](https://random.org) to randomise assignments, but it is not that handy: you have to keep list of people somewhere aside to copy-paste quickly, and you cannot easily assign 2+ reviewers per PR.

That's when we introduced my little project to shuffle and assign tasks randomly with custom number of assignees per task.

It comes in two versions:
Web: [https://shufl.now.sh/](https://shufl.now.sh/)
and CLI: [GitHub](https://github.com/kraiovsky/get-it-done/tree/master/packages/cli)
Example of using CLI version:
![shuffle](https://github.com/kraiovsky/get-it-done/raw/master/packages/cli/static/demo-1st-run.gif)

We successfully use it for other assignments, like occasional manual QA rounds, or buying [fika](https://www.youtube.com/watch?v=oRIeytEXGhQ).

Contributions and suggestions are welcome.
How do I go about creating a scrollable tag feature on my website
Tags: html, help, css, django
Published: 2020-05-14 09:54:01

I'm currently working on a website using Django. I added the Taggit module to my model so each object has assigned tags . My question is if I want add the tag design you see in 'google images' or sometimes in YouTube (in which  the tags are displayed horizontally across the page and you are able to click on the arrows to  to scroll ), What's the best way to do this?
A Mock Interview Video with Notes and Advice
Tags: career, interview
Published: 2020-05-14 09:47:03

*tap* *tap* Hi! Is this thing on?

I like what I see here on Dev. I'm just getting started here!

I've been a programmer a long time. I've also been a tech lead, manager, architect. I've given a lot of interviews.

Here's a mock interview I did with Nellie Tobey - she's an aspiring software dev, trying to get her first job in the field. And there's a lot to learn besides code!

{% youtube KQ9nz9SEfA4 %}

It's easy for an old hand like me to forget which bits are weird, unexpected and, frankly, make no real sense. Having to explain it to somebody else helps me see which bits *need* explaining!
Does technical debt make burnout more likely?
Tags: career, productivity, discuss
Published: 2020-05-14 09:24:13

---
title: Does technical debt make burnout more likely?
published: true
description: 
tags: career, productivity, discuss
---

I've been working on a large legacy project for just over two years, and it's been my primary focus at work. It's built in a now-deprecated PHP framework (Zend 1), and has an awful lot of technical debt.

I've experienced developer burnout in the past, and mostly know how to avoid it, but I've noticed it's considerably harder to avoid it with this project. The mental burden of trying to figure out what's going on at any point is *much* higher than with a project with less technical debt - the inconsistency between how different objects work and confusing names of variables and methods means I spend far more time figuring out what's going on, and it stresses me out. Also the so-called "flow" state of maximum productivity simply isn't possibe to achieve, so I'm far less productive than I would be on a better-written project, and the drop in productivity makes it more likely deadlines are missed, causing even more stress. Tools like Psalm are helpful in finding what items are and adding type hints, but they're not a panacea, and at the current rate it's going to be a *long* time before the project is in a state where I'm happy with it.

Have you noticed a relationship between working on projects with high levels of technical debt and burnout? Has a particularly bad project caused you significant stress, or have you seen a code base you'd be working on and not taken/left a job for that reason? And how can we get across to non-technical colleagues the effect a particularly bad code base can have on developer productivity and well-being?
How do I get the first/last char of a string from a user input (input.value)
Tags: javascript, beginners, webdev
Published: 2020-05-14 09:23:44

So I'm trying to build this project where I ask the user to enter their name, then I display said name in full and put the initials in a button instead of "player one". I don't know why but slice(-1), charAt(str.length -1) are not working.

```HTML
<div>
        <label for="name">Enter your name</label>
        <input type="text" name="" id="yn">
        <button class="submit">Submit</button>
    </div>
    <p class="welcome"></p>
```

```javascript
var yourname = document.querySelector("#yn");
var welcome = document.querySelector(".welcome");
var div = document.querySelector("div");
var submit = document.querySelector(".submit");

submit.addEventListener("click", function(){
    div.classList.add("hide");
    welcome.textContent = "Welcome " + yourName.value
})
```

Thanks
Lockable Tree - Google Interview Question
Published: 2020-05-14 09:17:11

Lockable tree is a great programming interview question asked by Google, and it is a very well thought out one. A lockable tree is a tree with nodes that can be locked if none of the ancestors or descendants is locked. In the question, we are asked to implement locking/unlocking operations that should run in O(h) time where h is the height of the tree.

This is a very well-crafted interview question by Google. Both the requirements and the question itself are quite clear, which is a rarity in the industry. Often, the interviewers will intentionally make the question a little obscure, so they can observe how you do your requirements analysis and if you can communicate with the interviewers clearly. However, in this case, the requirements are clear cut, which I think reflects how Google operates.

I am pretty sure most of the folk here can solve this by themselves. But if you want the full solution with requirements analysis, improvement, and solution steps, here it is: https://quanticdev.com/algorithms/trees/lockable-tree
Handy Gitlab CI YAML job templates for Go projects
Tags: go, productivity, devops, gitlab
Published: 2020-05-14 08:50:56

Various useful and handy GitLab CI YAML templates for typical GitLab CI tasks.

Project site: https://gitlab.com/tymonx/gitlab-ci

# General Features

* Supporting validating, building, testing and auto-documenting projects out-of-box
* Automating various and mostly typical GitLab CI tasks
* Extending GitLab CI like with parallel download with caching support
* Easy to use with the GitLab CI `include` keyword in your `.gitlab-ci.yml` files

# Go Features

* Automatically installing required Go tools for validating, testing and documenting project
* Validating Go source files imports with the `goimports` tool
* Validating Go source files errors with the `errcheck` tool
* Validating Go source files format with the `gofmt` tool
* Linting Go source files with the `revive`, the `golangci-lint` and the `golint` tools
* Building Go source files
* Testing Go project
* Generating Go coverage result, text and HTML reports
* Generating JUnit test XML report for GitLab Merge Requests
* Generating Cobertura coverage XML report for GitLab Merge Requests
* Validating Go coverage value with customazible coverage threshold
* Colorizing Go imports and format validation with the `colordiff` tool
* Colorizing Go tests with the `richgo` tool
* Colorizing Go coverage results and format nicely with the `column` tool
* Generating static HTML source code documentation with the `godoc` tool
* Generating static HTML coverage report with the `go tool cover` tool
* Uploading static HTML source code documentation and coverage report to GitLab Pages for browsing

# Links
* Project site: https://gitlab.com/tymonx/gitlab-ci
* Documentation: https://gitlab.com/tymonx/gitlab-ci/-/wikis/home
* Project example: https://gitlab.com/tymonx/go-logger
* Generated Go documentation example: https://tymonx.gitlab.io/go-logger/doc/pkg/gitlab.com/tymonx/go-logger/logger/
* Generated Go coverage report example: https://tymonx.gitlab.io/go-logger/coverage/