teleren/devto huggingface dataset:
What are pseudo-classes in CSS?
Tags: css, webdev, beginners, codenewbie
Published: 2020-08-09 07:49:35

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#what-are-pseudo-classes-in-css

---

{% youtube ZAffonpp3L0 %}

In CSS we use a few selectors like elements, classes or ids, that most people know, but not all of us know about one, very useful selector.

The pseudo-class selector.

But don’t worry, I’ll explain to you what’s that, and I’ll show you a few of the most popular ones. I will tell you what they do and when to use them.

Pseudo-classes are keywords/selectors that we use to select elements when they are in a special state.

The pseudo-class looks like “:keyword” and is used to add some life into your styles.

For example, your elements can change when you put the mouse over them, or select some input.

Now, let’s take a look on the list of most popular pseudo classes:

:active - This selector is used to select give a possibility to style the active link.

:first-child - We use this selector to select the first element in the DOM parent, for example, the first menu item.

:hover - We use this selector to select and style the element where we put the mouse over on.

:last-child - This selector is the same as the first-child one, just this one selects the last element.

:nth-child(n) - We use this selector to select every “n” child. It can be useful, for example, in lists or tables, where we want to give another color every n row.

:visited - This one selector can take the visited link. It can be useful when we want to give other styles to the links that we already clicked in.

:required - This one selector can give us the possibility to style inputs marked as “required”.

:focus - This one selector gives us the possibility to style inputs that we are currently focused on.

:checked - We use this selector to select the checked checkboxes.

:disabled - This one selector is useful to give different styles for disabled inputs.

:not(selector) - This selector is very useful in the case when we would like to add styling to all the elements that are not a specified element, like, for example, all elements, but not div.

```css
a:active { color: #666; } /** Selects active link **/

a:first-child { color: #666; } /** Selects first element **/

a:hover { color: #666; } /** Selects element where mouse is over **/

a:last-child { color: #666; } /** Selects last element **/

a:nth-child(2) { color: #666; } /** Selects every second element **/

a:visited { color: #666; } /** Selects visited link **/

input:required { color: #666; } /** Selects required inputs **/

input:focus { color: #666; } /** Selects focused inputs **/

input:checked { color: #666; } /** Selects checked inputs **/

input:disabled { color: #666; } /** Selects disabled inputs **/

:not(p) { color: #666; } /** Selects every element that is not p **/
```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
Laravel 7.x Http Client Request Example
Tags: laravel, http, guzzle
Published: 2020-08-09 08:34:20

In this Laravel 7 guzzle http clinet request example tutorial, i will discuss how we can use laravel 7 http client request. In this example tutorial you will learn laravel 7 http client request. 

Link : https://www.codechief.org/article/laravel-7-http-client-request-example
Configuring PHP_CodeSniffer in PhpStorm
Tags: php, codequality
Published: 2020-08-09 08:23:28

1. Navigae to `Preferences > Languages & Frameworks > PHP > Quality Tools` and expand the PHP_CodeSniffer section and select Configuration to `Local` like following
![](https://imgur.com/mcobzMg.png)

2. Next, we have to set the binary paths of `PHP_CodeSniffer`. For that click on the three dots button next to Configuration dropdown and then inside the opened dialog set the `phpcs` and `phpcbf` binary paths:
![](https://imgur.com/RbnQHg3.png)

3. Finally we have to enable the `PHP_CodeSniffer` in the IDE by navigating to `Preferences > Editor > Inspections > PHP > Quality Tools` and enable the `PHP CS Fixer validation` and `PHP_CodeSniffer validation`.
![](https://imgur.com/rKtBo2H.png)
How to run multiple npm scripts with npm-run-all
Tags: npm, codenewbie, javascript
Published: 2020-08-09 08:18:54

Sometimes we need to run a fake API with JSON-Server and SPA at same time.

We need to run each command one for our spa _vue serve_ or  _ng serve_ and other for json-server _json-server /db.json_ 

One solution is with concatenating each command using *&&* but if tomorrow we need to start another program the line will be look like:
```bash
npm run lint && npm run build && npm run api && npm run whereverthing :P
```

Then I found [npm-run-all](https://www.npmjs.com/package/npm-run-all) is a node package, it allows us to run all scripts defined in npm in sequential or parallel each one in parallel.

First install *npm-run-all*.
```bash
npm install -g npm-run-all
```
The define a new option into our script area, like **all** and call the npm-run-all with type of execution --parallel or secuential (by default) and scripts names.

```json
"scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "api": "json-server src/db.json",
        "all": "npm-run-all --parallel serve api"
    },
```

Happy NPM!

Photo by <a href="https://unsplash.com/@ohamko?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Matúš Kovačovský</a> on <a href="https://unsplash.com/s/photos/multiple?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
How did GraphQL become a popular way to choose what to query from an API? (Are there any other JSON/XML based implementations?)
Tags: discuss, graphql, odata, restapi
Published: 2020-08-09 07:30:51

I think REST API is very lower level, and cannot compare to GraphQL.

{% comment 13bgc %}

I have seen (but never tried) OData, which seems to be focused on [GET request and querystrings](https://www.npmjs.com/package/odata-parser) (and of course has URL length limits.)

I think GraphQL is very daring, in that [it encourages using **POST** to query data](https://graphql.org/learn/serving-over-http/), which is controversial, when talking about REST API. (It seems to compensate with [different caching mechanisms](https://www.apollographql.com/docs/apollo-server/performance/caching/)...)

{% stackoverflow 19637459 %}

Of course, I can use **POST** requests with a well-defined [JSON schema](https://json-schema.org/understanding-json-schema/about.html) as well, but it probably will never be as secure, nor standardized, as GraphQL...

https://www.howtographql.com/advanced/4-security/

GraphQL is not only for fetching. It can do mutations as well, but why?

https://graphql.org/learn/queries/#mutations

What are you thoughts, knowledge of history, and recommendations?
How to read Bloomberg Articles for Free ? Boombergquint for Free?
Tags: bloomberg, tricks, outline, article
Published: 2020-08-09 07:20:10

Bloomberg is a Website where you can read best articles from the top journalists in the world.
Now I will show you how to Read Bloomberg articles for free which is a simple trick any one can do with in couple of seconds. Like Bloomberg you can read many paid articles like  The Economist, Wall Street Journal, Bloomberg, Financial Times (FT Articles) and many  using the trick from this video.
Read Bloomberg articles for free can save you $340 per year which is not a small amount.

Since you read them free of cost it is almost like you get a free subscription to all these news websites.

I am providing youtube link so you can watch 
https://www.youtube.com/watch?v=QWLmuzqkvhg
Top 2 themes I shortlisted for Personal Portfolio and Blogging
Tags: hugo, blog, theme, portfolio
Published: 2020-08-09 06:55:24

When I started my website, I wanted it minimal for the time being. I didn't want to overthink and never be able to start my blog. A chose [hermit](https://themes.gohugo.io/hermit/) which is a pretty cool theme.

By the time I started finding annoyances like:

- no icon for Flickr: hermit uses [feathericons](https://feathericons.com/) which has no Flickr icon.
- no dedicated portfolio section: I didn't want to dig deep into Hugo's API.
- no back to top button

My search criteria for theme hunt were:

- Dark Theme: Theme must be dark or should come with a switch for switching. Time-based switching doesn't work for me.
- Portfolio Section: Although Hugo is extensible, I don't want to spend time extending the theme. I'm not a frontend ninja. 😛
- Back to Top Button: This one is not the most important, but certainly helps in longer posts.

I was looking for themes that had both a portfolio and a blog section. My research is complete and I wanted to log my research.

My hunt started with around 45 themes [tagged dark](https://themes.gohugo.io/tags/dark/) on [Hugo's official theme directory](https://themes.gohugo.io/).

Along the way, I found some themes with wonderful typography and design, color combinations, but they were out of my search criteria.

Here are the themes that I think are best for both portfolio as well as blogging:

## [Academic](https://themes.gohugo.io/academic/)

![Academic theme](https://dev-to-uploads.s3.amazonaws.com/i/xlx1rcctrga8cg1ey86z.png)

Academic is one of the most popular and mature themes for Hugo. It's not only a theme, it's kind of a framework.

You can even browse [#MadeWithAcademic](https://twitter.com/search?q=%23MadeWithAcademic&src=typd) on Twitter to see who is using the theme. They even got a [chat room](https://spectrum.chat/academic?tab=posts).

## [Zzo](https://themes.gohugo.io/theme/hugo-theme-zzo/)

![Zzo Homepage](https://dev-to-uploads.s3.amazonaws.com/i/1giv0h4z4yaud8qd7jw1.png)

Although at first sight color combination doesn't seem too great, I can modify it to my own taste. It has "back to top" button at the bottom as well. 

---

I have decided to go with Zzo for now, let me use it and know if it has Flickr icon. 😅

If you use Hugo as a blogging engine, then what is your favorite theme? What theme do you use on your personal blog?
🔥How to Prepare for API Testing Interview?
Tags: tutorial, testing, webdev, beginners
Published: 2020-08-09 06:31:54

In this video, We are going to discuss How to Prepare for API Testing Interview?

{% youtube ZHzpQxcNunQ %}

Join Facebook Group :  http://bit.ly/learntesting2019
Website:   https://scrolltest.com
Website:   https://thetestingacademy.com
Twitter: https://twitter.com/itstechmode

✅ Enroll Early Bird  API Testing with Rest Assured(2 Days workshop) 
https://apitesting.co/enroll


----
Be sure to subscribe for more videos like this!

[![ TheTestingAcademy](https://dev-to-uploads.s3.amazonaws.com/i/r7vcy6wbvyjbk1y1uu0o.png
)](https://www.youtube.com/TheTestingAcademy?sub_confirmation=1 "TheTestingAcademy")
I made a GitHub Readme Profile Generator
Tags: github, javascript, markdown, showdev
Published: 2020-08-09 06:29:59


Ever since I saw GitHub's tweet about Profile readmes, I've had the idea of creating a GUI tool for it. I've seen a couple of generators but I didn't find them exciting enough. Last week I finally got the time to create one. It took me almost 7 days to release the first version and I personally feel very proud of my work.

Here is a quick demo:

![Github Profilinator](https://dev-to-uploads.s3.amazonaws.com/i/fbo49v8g1eyolve7uw32.gif)

## So, what it does?

This tool contains small components that you can hook together to create your perfect readme. I've tried to compile many creative components by developers from around the world. It has a very flexible layout that allows you to place your components wherever you want in the readme. 

## Features
- Lets you add gifs and provides options to resize and align them
- Provides checkboxes for adding your skills
- By simply adding your social handles, social badges are generated
- Allows to you add your blog posts dynamically
- Provides a visitor counter
- Allows multi-column flexible layout

## Roadmap

If this project gets some heat, I plan on adding dynamic feeds from Twitter and Instagram directly in the readme.

## What did I use?

I used Gatsby (TypeScript) with AntDesign UI Library. It was my first time using AntDesign and I've already fallen in love with it. 

## Demo

- [Link to live demo](https://profilinator.rishav.dev/)

### Sample of Generated Profile

{% github rishavanand/rishavanand %}

### GitHub Repo

{% github rishavanand/github-profilinator no-readme %}
Completely Remove Ruby 2.7's Default Bundler
Tags: ruby, ci, bundler
Published: 2020-08-09 06:26:34


Ruby 2.7 comes with the default `bundler` gem, which always has `2.0+` version. This is a great default in general, especially to the beginners. But in some cases, like when using `Rails 4`, we want to keep the `bundler` version under `2.0` to avoid conflicts. 

```
Bundler could not find compatible versions for gem "bundler":
  In Gemfile:
    rails (~> 4.2) was resolved to 4.2.11.3, which depends on
      bundler (< 2.0, >= 1.3.0)
  Current Bundler version:
    bundler (2.1.4)
```


However, it's not easy to rollback to a older version of `bundler`. Since the `2.0+` version will be installed as a default gem, simply uninstall it won't work:

```zsh
$ gem uninstall bundler
=> Gem bundler-2.1.4 cannot be uninstalled because it is a default gem
```

And these tricks won't work either (at least they didn't work for me):

```zsh
$ bundle -v
Bundler version 2.1.4

$ gem install bundler:1.17.3 --default
Successfully installed bundler-1.17.3 as a default gem
Done installing documentation for bundler after 0 seconds
1 gem installed

$ bundle -v
Bundler version 2.1.4

$ bundle config default 1.17.3
$ bundle -v
Bundler version 2.1.4
```

From all the references I can find, the only way to remove it is to delete the `bundler-2.1.4.gemspec` file from the gem path. The following commands did the trick for me:

```zsh
$ gem env gempath
/Users/st0012/.gem/ruby/2.7.0:/Users/st0012/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0
$ ls /Users/st0012/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/specifications/**/bundler-*.gemspec
/Users/st0012/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/specifications/default/bundler-2.1.4.gemspec
$ rm /Users/st0012/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/specifications/**/bundler-2.1.4.gemspec
$ gem install bundler:1.17.3 --default
$ bundle -v
Bundler version 1.17.3
```

But what if we want to perform the same cleanup on CI (like `travis-ci`) too? Well, I wrote a script for you:

```ruby
#!/usr/bin/env ruby

gempaths = `gem env gempath`.split(":")
gempaths.each do |gempath|
  # lookup bundler-*.gemspec files and delete them
  # this is the only way to completely cleanup default bundler
  # Note: the bundler gemspecs' paths are different for CRuby and JRuby
  Dir.glob(gempath.strip + "/specifications/**/bundler-*.gemspec").each { |p| File.delete(p) }
end

# Remember to make this file executable
```

Then you can add this to your CI config file (`.travis.yml` for example):

```yml
before_install:
  - ./cleanup_bundler
  - gem install bundler -v '1.17'
```


And that's it! I hope this short post can save you from pulling your hair for a few hours 😉

If you're a Rubyist and you like this post, please also check the debugging tools I wrote:

{% github st0012/tapping_device no-readme %}
{% github st0012/power_trace no-readme %}
Ad-hoc Polymorphism In Elixir Using defprotocol
Tags: elixir, tutorial, programming, beginners
Published: 2020-08-09 05:58:48

---
title: Ad-hoc Polymorphism In Elixir Using defprotocol
published: true
description: Polymorphism in Elixir
tags: elixir, tutorial, programming, beginners
//cover_image: https://direct_url_to_image.jpg
---

This is a follow up on my previous post on [Ad-hoc Polymorphism](https://dev.to/sharmapankaj2512/adhoc-polymorphism-in-elixir-2nbl). I highly recommend reading the previous post first. In this post we will refactor the same code to use `defprotocol` construct. At the end of this post you will notice that using `defprotocol` results in better encapsulation and fewer lines of code.

`defprotocol` is a means to achieving ad-hoc polymorphism. Ad-hoc polymorphism in simple terms is a technique of varying behaviour based on their types. Complex states can be modeled in Elixir using the `defstruct` construct. States defined using `defstruct` can be used as types for achieving ad-hoc polymorphism.

Lets use `defprotocol` to define a protocol (aka behavior) that we want to vary based on structs.

```
  defprotocol ConnectionHandler do
    def handle(con)
  end
```

`defimpl` let's us implement different behaviors for protocols defined using the `defprotocol` construct, as shown below.

```
  defmodule ConnectionHandler.FirstConnectionHandler do
    defstruct con: nil

    defimpl ConnectionHandler, for: ConnectionHandler.FirstConnectionHandler  do
      def handle(%ConnectionHandler.FirstConnectionHandler{con: con}) do
        "First"
      end
    end
  end

  defmodule ConnectionHandler.SecondConnectionHandler do
    defstruct con: nil

    defimpl ConnectionHandler, for: ConnectionHandler.SecondConnectionHandler  do
      def handle(%ConnectionHandler.SecondConnectionHandler{con: con}) do
        "Second"
      end
    end
  end
```

Below shown test demonstrates how everything glues together. If you have read the previous post, you might notice that no change has been made to the test.

```
  defmodule Blaze.Test do
  use ExUnit.Case

  defprotocol ConnectionHandler do
    def handle(con)
  end

  defmodule ConnectionHandler.FirstConnectionHandler do
    defstruct con: nil

    defimpl ConnectionHandler, for: ConnectionHandler.FirstConnectionHandler  do
      def handle(%ConnectionHandler.FirstConnectionHandler{con: con}) do
        "First"
      end
    end
  end

  defmodule ConnectionHandler.SecondConnectionHandler do
    defstruct con: nil

    defimpl ConnectionHandler, for: ConnectionHandler.SecondConnectionHandler  do
      def handle(%ConnectionHandler.SecondConnectionHandler{con: con}) do
        "Second"
      end
    end
  end

  test "demonstration of `defprotocol`" do
    alias ConnectionHandler.FirstConnectionHandler
    alias ConnectionHandler.SecondConnectionHandler

    assert ConnectionHandler.handle(%FirstConnectionHandler{con: []}) == "First"
    assert ConnectionHandler.handle(%SecondConnectionHandler{con: []}) == "Second"
  end
end
```

This post demonstrates that in Elixir using `defprotocol` for adhoc-polymorphism leads to fewer lines of code and better encapsulation.
Create (not just) diagrams stitching images on a grid using HCL (like terraform!)
Tags: go, hcl, cloud, diagrams
Published: 2020-08-09 06:25:25

---
title: Create (not just) diagrams stitching images on a grid using HCL (like terraform!) 
published: true
description: Create (not just) diagrams stitching images on a grid using HCL (like terraform!) 
tags: golang,hcl,cloud,diagrams
//cover_image: https://direct_url_to_image.jpg
---

```
   _           _   _
  |_|_ _ _____| |_| |___     
  | | | |     | . | | -_|   
 _| |___|_|_|_|___|_|___|            
|___|
``` 
https://github.com/lucasepe/jumble

> Create (not just) diagrams stitching, connecting  and labelling 
> images on a grid using HCL syntax (like terraform!).

515 Embedded cloud architecture icons! Ready to use!

- 225 AWS icons (uri = assets://aws_[KIND])
- 182 Azure icons (uri = assets://azure_[KIND])
- 108 Google Cloud icons (uri = assets://google_[KIND])

```hcl
# AWS Lambda Authorizer
tile "icon" "lambda1" {
    row = "${subtract(row("agw"), 1)}"
    col = "${subtract(col("agw"), 2)}"
    uri = "assets://aws_lambda"
}
```

- or you can use your local icons (uri = /path/to/my/ic.png)
- or you can use remote icons (uri = http://a.domain.com/img/ic.png)
How to write a readable commit message.
Tags: git, codequality, beginners
Published: 2020-08-09 05:43:19


Having a good guideline for creating commits and sticking to it makes working with Git and collaborating with others a lot easier.

## Subject

The subject should be around 50 characters or less. You want it to fit in an email subject line.  If you need to explain why you made some decisions or tradeoffs, those comments should be in the code.

* An adequately worded commit should fit grammatically into the sentence below:
  * If applied, this commit will **[Subject]**
* Use an [imperative mood](https://en.wikipedia.org/wiki/Imperative_mood). These changes will not be applied right away
* Capitalize the first letter
* No punctuation at the end
* Consider using a [conventional commits](https://www.conventionalcommits.org/) prefix like [karma](https://www.conventionalcommits.org/):
  * **feat**: a new feature for the user, not a new feature for a build script
  * **fix**: bug fix for the user, not a fix to a build script
  * **docs**: changes to the documentation
  * **style**: formatting, missing semicolons, etc.; no production code change
  * **refactor**: refactoring production code, e.g., renaming a variable
  * **test**: adding missing criteria, refactoring tests; no production code change
  * **chore**: updating grunt tasks etc.; no production code change
* A scope or section of the codebase can optionally follow the prefix


Instead of writing down everything you did, think of each commit as a command. These are instructions to your future self. Git will apply your commits to the codebase, not you, and only once the PR is approved and merged.

```Bash
git commit -m "feat(login): Add a google OAuth endpoint"
```

## Body

If you need to offer more information within your commit (code examples, external references, documentation,  explain complexity), you could do it here. But most times, this information belongs either in the code or the final pull request. Please keep this as short as possible. It is not a blog post. Focus on the following:

* Give the reasons why you made this change
* Explain the way things worked before this change (and what was wrong with that)
* Describe why you decided to solve it the way you did
* Describe how the code works differently now than it did before

```bash
git commit -m "feat(login): Add a google OAuth endpoint" -m "This includes the handler, routes, and templates."
```
Array of Object Literals | Javascript Crash Course
Tags: javascript, tutorial, webdev, codenewbie
Published: 2020-08-09 05:33:26

Hey YOU!
In this video, we are going to learn about one of the most important concept in Javascript. We will learn and implement an array of object literals. This is the essence of what you'll do daily as a JS developer. If you have any question then please feel free to ask me in the comments below.

Connect With Me:
Youtube: <a href="https://www.youtube.com/c/ShubhamSauravYT" target="_blank" rel="noopener noreferrer">ShubhamSauravYT</a>.
Twitter: <a href="https://www.twitter.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Instagram: <a href="https://www.instagram.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Facebook: <a href="https://facebook.com/hiShubhamSaurav" target="_blank" rel="noopener noreferrer">@hiShubhamSaurav</a>
Every tech you have ever worked on
Tags: watercooler
Published: 2020-08-09 05:26:12

If the "skills" section on your resume said every tech you have ever worked on, how would it look?

Mine would look a little like this (3 years in college)
* Java
* C/C++
* Lua
* Awt Java
* SFML
* SDL2
* PHP
* Expo
* React
* React native
* vuejs
* Angular
* Firebase
* Mongodb
* Mariadb
* Redis
* Javascript 
* Node
* python 
* typescript 
* prolog
* ruby