teleren/devto huggingface dataset:
Loading Animation with pure CSS
Tags: html, css
Published: 2021-03-28 13:34:35

This article introduces a method to create a simple loading animation with PURE CSS, as demonstrated below (powered by codepen.io):

{% codepen https://codepen.io/moenupa/pen/poNgvdx %}

## HTML

This implementation needs only one line of HTML code, like what's below:

```html
<div class="loading">Loading</div>
```

## CSS

Then we move on to the major part, the CSS code.

Because we have only one related html element, we use a `:before` or `:after` selector to implement the spinning circle. Setting its content, width, height, etc. to let it show up.

```css
.loading, .loading:before {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 16rem;
  height: 16rem;
}
.loading:before {
  content: "";
  border-radius: 50%;
  border: 1rem solid;
  border-color: black transparent;
}
```
Then we will have two none-spinning quarter-circles, which is due to the `border-color: black transparent;` setting top/bottom's color to black, and left/right's color to transparent.

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

Note that `position: fixed` aligns the top-left corner to the 50%/50% position. so to align the center point to the center view point, we do the following modification to the css

```css
.loading,
.loading:before {
  margin: -5rem;
}

.loading {
  padding: 4.7rem 1rem;
  font-size: 2rem;
  text-align: center;
}
```

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

Then we shall define the spinning animation, using CSS `@keyframes` to implement.

```css
.loading:before {
  animation: loading 1.5s linear infinite;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```

You can also define the animation with keywords like `0% {...} 100% {...}`.

Finally, a bit beautifying work and variable-replacement for future modification.
Azure Spring Cloud posts
Published: 2021-03-28 13:27:04

<sub>Photo by <a href="https://unsplash.com/@glenncarstenspeters">Glenn Carstens-Peters</a> on <a href="https://unsplash.com/s/photos/list">Unsplash</a></sub>

[Azure Spring Clean](https://www.azurespringclean.com) is over and has provided lot of content !

- [Cost Management](https://vaibhavgujral.com/2021/03/22/manage-your-azure-spend-using-azure-cost-management/)
- [Azure Custom Roles](https://www.blueboxes.co.uk/azure-custom-roles-following-least-privilege-best-practices)
- [Azure Health Checks](https://staslebedenko.medium.com/azure-health-checks-via-csharp-35ce1d5b7c6f)

Hope this helps !
Laravel Firebase Push Notification Example
Published: 2021-03-28 13:23:17

Laravel firebase push notification example. We will learn laravel firebase push notification. In this post, I show example of firebase web push notification.  This tutorial give firebase web push notification in laravel. Today, I show simple way to firebase push notification in laravel.

We will explain step by step laravel firebase push notification example. Also, we will create example of laravel send push notification firebase. In this example, We step by step to send firebase push notification using laravel.

Google provide free open source send web push notification. Also, You learn example of send firebase push notification using laravel. In this example simple to getting device token of logged in users and send web push notification. Also we will create push notification with laravel app.

[Laravel firebase push notification](https://web-tuts.com/laravel-firebase-push-notification-example/)
How to clear commit history using GIT
Tags: git, github, development, code
Published: 2021-03-28 12:51:01

I am working in a presentation to Hotmart Dev team and it will basically have a hands on during this presentation and I will be sharing the final code on Github.

But I don't want them to follow each step I made so I decided to clear the whole commit history. 

I obviously had to search because I never had a need to clear the whole commit history and I found this on Stack Overflow from 2014 and edited in 2020:

`https://stackoverflow.com/questions/13716658/how-to-delete-all-commit-history-in-github`

The answer is pretty clear how I had to do it, so I am sharing here.

Let's see how it was done!

Checkout
`git checkout --orphan latest_branch`

Add all the files
`git add -A`

Commit the changes
`git commit -am "commit message"`

Delete the branch
`git branch -D main`

Rename the current branch to main
`git branch -m main`

Finally, force update your repository
`git push -f origin main`

That's all folks!
Understanding Kubernetes in a visual way (in 🎥 video): part 8 – Secrets
Tags: kubernetes, devops, docker, beginners
Published: 2021-03-28 12:39:50

---
title: Understanding Kubernetes in a visual way (in 🎥 video): part 8 – Secrets
published: true
description: Serie of videos about Kubernetes. Explaining in a visual way Kubernetes principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Kubernetes in a visual way - (in video) in video
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1skiw1u8ai0edz076ve.jpg
---

Understanding Kubernetes can be difficult or time-consuming. In order to spread knowledges about Cloud technologies I started to create sketchnotes about Kubernetes, then I've auto-published a book and since now I've started a new serie of video! :-)

I imagined a serie of short videos with a mix of sketchnotes and speech.

I think it could be a good way, more visual, with audio & video to explain Kubernetes (and others technologies).

The new episode is focused on a very important Kubernetes object: Secrets.

{% youtube pUXdk3FGTng %}

The video is in French BUT I done the subtitles in english (and french too).

If you liked the video and are interested to watch another ones, please give me some feedbacks (and you can also subscribe to [my Youtube channel](https://www.youtube.com/channel/UCrRk0kOP58lBMl9B8ZS8Vlg), if you want to ❤️).

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

If you like theses sketchnotes, you can follow me, I will publish others sketchs shortly :-).
React Apollo SSR Boilerplate
Tags: react, graphql, javascript, typescript
Published: 2021-03-28 12:36:52

react-ssr-apollo-boilerplate (Click link down below) repository has just been updated with the newest package versions including React v17, Apollo v3, Typescript v4 and Emotion v11. Make sure to check this out in case you'd like to start building a SSR react application using Graphql :)

Feel free to contribute to make it even better!  

Github: https://github.com/sepehr1313/react-ssr-apollo-boilerplate
When Lighthouse Itself Causes Issues
Tags: lighthouse, security, discuss
Published: 2021-03-28 12:31:02

I was re-inspecting my homepage after some edits earlier today, and discovered — to my horror 😱 — that my perfect score was not so perfect anymore.

The *Best Practices* were down to 93%. Why?

After some digging, I found this post:
[Lighthouse Complaining About CSP Violation](https://github.com/GoogleChrome/lighthouse/issues/11862)

And ... it's right! If I add the **unsafe-inline**-entry to the **styles-src** of my *content-security-policy*, it's back at 100%.


I won't do that, of course — but interesting to notice, that Lighthouse itself can cause issues!
Why did you decide to study Software Development?
Published: 2021-03-28 12:29:09

“Why did you decide to study Software Development?”

Currently, I work as Problem Solver at Amazon for 2 years. I used to work as Business Analyst implementing ERPs systems (Ex. SAP module MM) in Uruguay and Argentina, for several years before moving to the US. Therefore, I had a lot of contact with developers through functional testing phases. Talking with many of them I learned that software development is a nice career with a lot of possibilities. Then I move to this country and start work in Amazon in a position outside of the IT sector. But never lost my interest for learn some programming languages and start a software developer career. two months ago, when I was searching for a course on the career choice website, I saw this program and understand that is the opportunity that I am waiting for.

I do not know yet what path I will take after completing this course. Maybe I will keep on web development or takes other’s courses that focus on security on web apps.
Today I Learned — The Javascript In Operator
Tags: javascript, todayilearned
Published: 2021-03-28 12:29:02

Earlier this week, during one of my code challenges, I was asked to create a function that took in two arguments, an object and a property, that would return the value of the prop if the object contained the property or simply false if it didn't. Long story short, I ended up using Javascript's [hasOwnProperty](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty) , but along the way I came across / dove into the  [in operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in).

As someone who has never really used *[for .. in* loops](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) in Javascript, I never had the chance to really dive into what the *in* operator is actually doing / used for, until recently.

**What Does the In Operator Look Like?**

```jsx
let object = {fruit: "apple", job: "lawyer"}

// propertyName in objectWeWantToCheck
"fruit" in object
```

**What Does the In Operator Do?**

It returns true if the object OR its [prototype chain](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) contains the specified property

So using our example above: it would result in true

**How To Use It**

*With Arrays*

```jsx
// Use the index of the array + in operator + array name
let colors = ["red","green","blue"]

0 in colors // true
1 in colors // true
3 in colors // false
9 in colors // false

// Notice that the operator functions differently with arrays than it does with objects
// You must use the index with arrays, not the value
"red" in colors // false

// Arrays have a .length property that tells us ... the length, we can use in to confirm this
"length" in colors // true

```

*With Objects*

```jsx
let object = {fruit: "apple", job: "lawyer"}

"fruit" in object // true
"height" in object // false
```

*Alongside the [Delete operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete) and Undefined Properties*

```jsx
let object = {fruit: "apple", job: "lawyer"}
delete object.fruit
"fruit" in object // false

// However -- if instead we did the following:

let object = {fruit: "apple", job: "lawyer"}
object.fruit = undefined

// We'd be in for a surprise
"fruit" in object // true
```

Its always nice to notice and pick up on little things like this as you continue to grow as a developer 😎
Algorithm Complexity and Efficiency for Beginners
Tags: beginners, codenewbie, firstyearincode, programming
Published: 2021-03-28 12:27:53

All algorithms have 2 main characteristics:

1. Amount of required memory.
2. Execution time.

These two are used to compare algorithms with each other. Some algorithms are faster, but require more memory, while others are vice versa.

For most algorithms, the execution time and amount of memory cannot be expressed with one number. The more elements there are in the input array, the longer the search and sorting will take.

So, the **Big-O** notation was invented to describe the efficiency of algorithms.

## Constant complexity - O(1)

The most efficient algorithm, in theory, runs in constant time and consumes a constant amount of memory. No matter how you increase the amount of incoming data, the complexity of the algorithm will not increase. The efficiency (or complexity) of such an algorithm is called constant and is written as **O(1)**.

An example of an algorithm with constant complexity:

```js
const getArrayElement = (arr, i) => arr [i];
```

As an input, we get the array `arr` and the index `i`. We return the array element at position `i`.

The speed of execution and the amount of required memory of this algorithm doesn't depend on the length of the input array, so the complexity is considered constant.

## Linear complexity - O(n)

The complexity of many algorithms grows in direct proportion to the amount of incoming data.

A good example is linear search:

```js
const findArrayElement = (arr, x) => {
  for (let i = 0; i <arr.length; i ++) {
    if (arr [i] === x) {
      return i;
    }
  }
  
  return -1;
}
```

If a search in an array of 10 elements takes 5 seconds, then in an array of 100 elements we will search for 100 seconds. 10 times longer.

This complexity (efficiency) is called linear and is written as **O(n)**.

But, note that the linear search algorithm does not need additional memory. Therefore, for this characteristic, it gets the highest score - **O(1)**.

## Quadratic complexity - O(n^2^)

Simple sorting algorithms like bubble sort or selection sort have **O(n^2^)** complexity.

It is not very efficient. If the length of the array grows 10 times, the execution time of the algorithm will increase 10^2^ (100) times!

This happens because the algorithm uses a nested loop. We estimate the complexity of one pass as **O(n)**. But we go through it not once, but **n** times. Therefore, the total execution time is estimated as **O(n*n) = O(n^2^)**.

## Logarithmic complexity - O(log n)

Algorithms that can reduce the amount of analyzed data at each iteration have a logarithmic complexity - **O(log n)**.

Binary search is a good example of an algorithm with logarithmic complexity. At each iteration, we discard half of the data and work only with the other half.

[Learn Full Stack JavaScript](https://js.coderslang.com)
Where can I put C++ into practice? (real world usage)
Tags: help
Published: 2021-03-28 12:08:48

I'm aware that C++ is a powerful language that is used "everywhere"... but could we please get into specifics?

For example, servers come to mind when I think about Java, front-end interactivity would be JavaScript, Linux CLI programs coulde be Shell or Python, etc.

In that sense, what about C++? what things can I do with it that have real world usage?
Accessors in Laravel - quick view with example
Tags: laravel, php, coding, example
Published: 2021-03-28 12:02:01

First thing first: what’s an **accessor**?
An accessor is a **custom method** we can create inside a model and that can get and manipulate an attribute of that model. Its result can be a new attribute of that model or “substitute” an existing one.

Real case scenario: for instance, if we have a model mapping to an “album” table that has a “thumb” field in which the name of its thumbnail is stored. When we retrieve that value and put it in the src of a img tag, it can be annoying to build the path and then print that value at the end, especially if we have a lot of images.

We can build our accessor that creates a new attribute of that model and that will return the complete url for us. The name of the method must be built in this way: **get{Name}Attribute**. The “Name” can be what you want but if you use the name of the album’s field you are retrieving, the value of the field will be automatically passed.
So, in the album model we can write:
```php
    public function getPathAttribute(){
        return 'pathToThumbsFolder/'.$this->thumb;
    }
```
Or using the field name
```php
    public function getThumbAttribute($value){
        return 'pathToThumbsFolder/'.$value;
    }
```

When we have an instance of an album, this accessor will let us write 
```php
$album->thumb
```
Where we want to get or print the full url to the thumbnail.
Of course, we can set that path in the .env file and use something like env('ALBUM_THUMB_DIR') as path in this method.

Further example: it can help building an if statement to show a default image if album has no thumbnail make the html code cleaner.
```php
    public function getThumbAttribute($value){
        return $value?'pathToThumbsFolder/'.$value:'pathToDefaultImage/default.jpg';
   }
```
This can be very helpful, save a lot of code and make it cleaner because every time you need to retrieve a value manipulating it first you have only one place to do it and possibly change it later.
Daily Developer Jokes - Sunday, Mar 28, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-03-28 12:00:20

---
title: "Daily Developer Jokes - Sunday, Mar 28, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Sunday%2C%20Mar%2028%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258999910d.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did 10 get paid less than "10"?

___A:___ There was workplace inequality.
 -->
A 5 minute guide to nvm
Tags: nvm, node
Published: 2021-03-28 11:58:53



To have multiple versions of `node` and `npm` on our machine, we can use `nvm`.

The official docs of `nvm` is on: https://github.com/nvm-sh/nvm

If we only need one version of `node` and `npm`, then we may not need `nvm`, but to solve the problem of the write permission, we can use: https://dev.to/sunflower/don-t-run-sudo-npm-install-g-the-simplest-way-to-make-it-work-30e5

Here is a quick start guide:

# To install `nvm`

```bash
curl https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh -o install_nvm.sh
```
Or because Ubuntu doesn't have `curl` by default, we can also use `wget`:

```bash
wget https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh -O install_nvm.sh
```

and we can look at `install_nvm.sh` -- I usually don't like to `curl` and directly pipe it to `bash`, because it is like we don't even know what was running. So then we download it, and can run it:

```bash
bash install_nvm.sh
source ~/.profile     # no need to do it after reboot
```

## Useful commands

```bash
nvm ls-remote       # to see all available versions
nvm install --lts   # install the latest LTS (long term support) version
nvm install node    # install the latest
nvm which current   # tells the path of current node
nvm ls              # tells what are all the node versions we have
nvm ls current      # tells the version we are using
nvm use             # use the .nvmrc specified version if any
nvm use 14          # use the version 14.x.x
nvm use 15          # use 15.x.x
nvm use --lts       # use the latest LTS
nvm use node        # use the latest
nvm use system      # use the system's version of node
nvm alias default 14.16.0   # set the default version to use
```
As of 2021 March, all we need to do is:

```bash
nvm install --lts   # install the latest LTS (long term support) version
nvm install node    # install the latest
```

and then depending on which one we want to use (version `14.16.0` which is LTS, or version `15.13.0`, which is the latest), we can just use

```bash
nvm use 14     # or
nvm use 15
```

to switch between them.
Day 14 of 100 days of SwiftUI
Tags: swift, 100daysofcode, 100daysofswiftui
Published: 2021-03-28 11:50:28

I just completed day 14 of 100 days of SwiftUi. Today I reviewed what I learnt functions, optional, optional chaining, enumeration, structs, classes, and structs.

If you are interested in taking the challenge, you can find it at https://www.hackingwithswift.com/100/swiftui
See you tomorrow ;)
Where should I learn system design & architecture?
Tags: discuss, systems, design, architecture
Published: 2021-03-28 11:31:43

Hello!

I've been wanting, for some time, to get better at and increase my knowledge in the field of system design and software architecture, covering topics like microservices, design patterns, etc.

What are some good resources that I can learn from? It can be online courses, books, blogs, YouTube channels...

Thank you! :)
call(), apply() and bind() methods in Javascript
Tags: javascript, beginners, programming, webdev
Published: 2021-03-28 11:30:35

We know that functions are a special kind of objects in JavaScript. So they have access to some methods and properties. To prove functions are objects, we can do something like this, for example:
```
function greeting() {
  console.log('Hello World');
}
greeting.lang = 'English';
// Prints 'English'
console.log(greeting.lang);
```
JavaScript also provides some special methods and properties to every function object. So every function in JavaScript inherits those methods. Call, bind, and apply are some of the methods that every function inherits.

#call( ) 
The call( ) allows for a function/method belonging to one object to be assigned and called for a different object.
Using the call method we can do a function borrowing.
We can borrow a method from some object and use it with the data of some other object.
We can do like following-
```
let name = {
  firstName: "nouman",
  lastName: "shah",
}

let printFullName = function () {
  console.log(this.firstName + " " + this.lastName)
}
printFullName.call(name)
//nouman shah
```
```
let name2 = {
  firstName: "Ali",
  lastName: "khan"
}
printFullName.call(name2)

```
*In call( ), we pass arguments individually.*

```
let printFullName = function (hometown, gender, job) {
  console.log(this.firstName + " " + this.lastName + " " + "from" + " " + hometown + " " + gender + " " + job)
}
printFullName.call(name, "Pakistan", "Male", "Software Engineer")

```

#apply( )
The apply() method is similar to call(). The difference is that the apply() method accepts an array of arguments instead of comma-separated values.

```
printFullName.apply(name,["Pakistan","Male", "Software Engineer"])

```

#bind( )
bind method looks similar to call but instead of directly calling the method, the bind method binds the printFullName with an object and returns a copy of that.

```
let printMyName=printFullName.bind(name)
printMyName();
// nouman shah
```

What it will do is that it will create a copy of printFullName and it will bind that with name object and will return a function that can be called later.
> The difference between call() and bind() is that the call()  does not create a new copy of the function, 

We can also pass extra arguments to the bind method. The general syntax for this is function.bind(this, arg1, arg2, ...).

*If you have any questions or suggestions please let me know.*
What are your favorite tech blogs/websites?
Tags: discuss, blog
Published: 2021-03-28 11:26:59

Hello!

I've been interested in following some tech blogs for a while. Recently I've discovered apps like [Feedly](https://feedly.com/i/welcome), which aggregates posts from various blogs and websites that you can "subscribe to", giving you a curated feed with the content from those sources.

Now I'm looking for some blogs/websites related to programming, software engineering, and tech in general. What are your favorite tech blogs/websites? :)