teleren/devto huggingface dataset:
Tech Blogs You Should Definitely Read !!!
Tags: webdev, programming, codenewbie
Published: 2021-07-10 17:55:17

Here are some of the popular tech blogs from some famous brands that you must definitely read.

Indian Edition: 

1. [Swiggy Bytes](https://bytes.swiggy.com/)
2. [Flipkart Tech](https://tech.flipkart.com/)
3. [Amazon Developers](https://developer.amazon.com/blogs)
4. [Myntra Tech](https://tech.myntra.com/)
5. [CultFit Blog](https://blog.cult.fit/)

International Edition

Here is a link for the [GitHub](https://github.com/kilimchoi/engineering-blogs) repo of all the popular tech companies and their tech blogs
FizzBuzz for Javascript
Tags: javascript, beginners, codenewbie, algorithms
Published: 2021-07-10 17:49:53

New developers will surely see this problem show up in technical interviews. FizzBuzz is a classic technical interview questions to find out if you are familiar with solving programming challenges. 

### FizzBuzz setup:

Create a solution that prints the number 1 through 100. Print "Fizz" for numbers that have a multiple of 3. Print "Fizz" for numbers that have a multiple of 5. Print "FizzBuzz" for numbers that have a multiple of both 3 and 5. 

### FizzBuzz solution: (There's many ways to solve this problem)

```javascript
for (let i = 1; i <= 100; i++) {
    // Finding multiples of 3 and 5
    if (i % 3 === 0 && i % 5 === 0) {
      console.log('FizzBuzz');
    } else if (i % 3 === 0) {
      // Finding multiples of 3
      console.log('Fizz');
    } else if (i % 5 === 0) {
      // Finding multiples of 5
      console.log('Buzz');
    } else {
      console.log(i);
    }
  }
```
WordPress Beitragsbild-Größe und optimale Bildergrößen
Tags: wordpress, bilder
Published: 2021-07-31 16:23:57

---
title: WordPress Beitragsbild-Größe und optimale Bildergrößen
published: true
date: 2021-07-10 17:39:16 UTC
tags: WordPress,bilder
canonical_url: https://bloggerpilot.com/wordpress-bildgroesse/
---

![Optimale WordPress Bildergrößen](https://bloggerpilot.com/wp-content/uploads/2021/07/optimale-wp-bildergroessen.png)

Nutze die [optimalen WordPress Bildergrößen](https://bloggerpilot.com/wordpress-bildgroesse/) für dein Theme! 

Manchmal möchtest du vielleicht nur ein Bild in die offizielle Blogger-Bildergalerie hochladen, aber du würdest das Bild gerne auf eine bestimmte Größe (oder ein bestimmtes Pixel-Seitenverhältnis) anpassen. Was kannst du tun? Nun, du hast zwei Möglichkeiten: du kannst entweder die Größe des Bildes im WordPress Admin Panel ändern oder du kannst den in WordPress eingebauten Bildeditor verwenden. :
How Trakka Uses Predictive Analytics to Prevent Unplanned Downtime
Tags: maintence
Published: 2021-07-10 17:07:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn13kok620bfu26l6lsf.jpg)
Forestalling gear disappointments and diminishing spontaneous upkeep is basic to efficiency and the main concern. Prescient support with Trakka® will help better oversee hazard in your upkeep activity, wipe out impromptu gear disappointments, and increment generally speaking consistency, usefulness, and wellbeing. 

Profound Industry Expertise and Predictive Maintenance Technology 

[DINGO](https://www.dingo.com/) utilizes an extraordinary mix of individuals, innovation, and information to give noteworthy bits of knowledge that further develop resource wellbeing, increment efficiency, and broaden resource life. How can it function? 

Gathering Data 

With Trakka's consistent combinations and in-field information assortment capacities, all ongoing and clump condition observing information can be ingested into one stage and examined all the while. We make the information assortment measure basic by utilizing pre-arranged interfaces to associate with your current information sources and IT foundation. 

Boosting Asset Health 

Trakka consolidates prescient investigation with work process the board, including shut circle, ceaseless observing, and activity following. Issues stay open and are firmly followed until your hardware gets back to its ordinary working state. This methodology builds resource accessibility, further develops resource wellbeing, and advances asset use.
Extracting the KUBE_CONFIG for a DigitalOcean Kubernetes cluster from a Terraform .tfstate
Tags: terraform, kubernetes, digitalocean, jq
Published: 2021-07-10 17:03:48

When provisioning a Kubernetes cluster from DigitalOcean with Terraform, the `.tfstate` contains a field called `raw_config` that authenticates `kubectl`. It can elegantly be extracted with `jq`:

```yaml
$ jq -r '.resources[]
        | select(.type == "digitalocean_kubernetes_cluster")
        | .instances[].attributes.kube_config[].raw_config' \ 
    terraform.tfstate
apiVersion: v1
kind: Config
clusters:
- cluster:
    certificate-authority-data: ...
    server: https://...k8s.ondigitalocean.com
  name: your-cluster-name
contexts:
- context:
    cluster: your-cluster-name
    user: your-cluster-name-admin
  name: your-cluster-name
current-context: your-cluster-name
users:
- name: your-cluster-name-admin
  user:
    token: ...
```

If you provision multiple clusters, you cannot simply pipe the multiple `kind: Config`s, but otherwhise, this output can be dumped straight into `~/.kube/config`. Otherwise, you may want to dump it to a specific file before you run

```
KUBECONFIG=some.config kubectl ...
```

Now, I'd like if the `~/.kube/config` could get populated as part of the provisioning, so that `kubectl` commands work immediately after. This is possible with the [`local-exec` provisioner](https://www.terraform.io/docs/language/resources/provisioners/local-exec.html):

```
  provisioner "local-exec" {
    command = <<EOF
      mkdir -p ~/.kube && jq -r \
        '.resources[]
        | select(.type == "digitalocean_kubernetes_cluster")
        | .instances[].attributes.kube_config[].raw_config' \
            terraform.tfstate > ~/.kube/config
EOF
```

I'm not sure exactly how useful this last step is yet. This was just another demonstration of how powerful and useful `jq` is.
Create a custom cursor for your website
Tags: javascript, dom, html, css
Published: 2021-07-10 16:56:09

Hi, Do you think about how you can create a custom cursor for your website?
This section will show you how to create custom cursors quickly and easily. We must take simple step (Create a HTML file and paste the codes below into it)
```html
    <div class="mouse" id="mouse">
        <img src="https://i.postimg.cc/NFx1b2f7/pack2586.png" alt="">
    </div>

    <style>
        body,
        html {

            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            cursor: none;

        }

        .mouse {
            width: 20px;
            height: 20px;
            background-color: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .mouse img {
            width: 40px;
        }
    </style>

    <script>
        document.onmousemove = function (e) {
            var mouse = document.getElementById("mouse");
            console.log(mouse.style);
            mouse.style.left = e.pageX + 1 + "px";
            mouse.style.top = e.pageY + 1 + "px";
        }
    </script>

```
Create personal stock portfolio tracker with Google Sheets and Google Data Studio
Tags: appscript, showdev, googlesheets, googledatastudio
Published: 2021-07-10 16:37:04

The idea is to take advantage of what Google Sheets and Google Data Studio offer and pull them together to build a personal stock portfolio tracker.

We can think of a spreadsheet as a database to register transactions made along with a stock portfolio investment. To track the portfolio’s evolution, we need to know the prices of owned stocks and that is exactly what is offered by GOOGLEFINANCE function. We can register the transactions in a sheet and use the pivot table, built-in functions such as GOOGLEFINANCE, and Apps Script to automate the computation for daily evolution of the portfolio as well as the current position for each stock in the portfolio.

![Manage Stock Transactions With Google Sheets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kuaxo0c9y4bimf495s7f.png)

![Compute daily evolution of a stock portfolio with Google Sheets and Apps Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jpxtqkgvhfr0npbpy0bj.png)

We can then use Google Data Studio to build an interactive dashboard with data from spreadsheet. Google Data Studio provides a built-in connector to Google Sheets to fetch data stored in spreadsheets and visualize them in many beautiful and interactive charts. We can effectively draw charts directly within the spreadsheet but I find it inconvenient to have charts overlapped the data and it is better to separate them.

![Create personal stock portfolio tracker with Google Sheets and Google Data Studio](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7c2q5e3gych9gn2wpg9h.png)

You can follow the [LION stock portfolio tracker guide](
https://www.allstacksdeveloper.com/p/lion-stock-portfolio-tracker.html) to create your own personal stock portfolio tracker with Google Sheets and Google Data Studio.

https://www.allstacksdeveloper.com/p/lion-stock-portfolio-tracker.html
👨🏾‍🚀 This Week  I Learned #1
Tags: javascript, devjournal, webdev, braziliandevs
Published: 2021-07-10 16:01:19

**HIGHLIGHT ⚡** 
> I found that 8 hours of gameplay can be converted into 8 hours of study

1. Start new project 
2. Webdev up skills
3. Watched videos: 3
4. Listened podcast: 2
 
**STRUGGLE ⚔️**
![Link](https://media.giphy.com/media/Ov5NiLVXT8JEc/giphy.gif)
 
- When creating a function to prevent the same number from being drawn by `Math.random`. This took a lot of time out of the day, but after a lot of research... the pieces fell into place.

**INSIGHT 📕**
1. Element property `innerHTML`
2. Element `input` event
3. Built-in object `Math`
4. Method `indexOf()`
5. Method `setInterval()`
6. Css style  `absolute-position` 


**VIDEO 🎬**
- Progbr - [Developer entrepreneurship](https://www.youtube.com/watch?v=WAUQOXcf1-w) 
-  Rodrigo Branas - [Carrer ](https://www.youtube.com/watch?v=hvkGut3C24U) 
-  Rodrigo Branas - [Dev JavaScript FullStack ] (https://www.youtube.com/watch?v=C0PMGaVvjrI) 


**PODCAST 🎧**

- Lucas Montano & Rodrigo Branas - [About salary](https://www.youtube.com/watch?v=oXdWr41uEUo) 

- Fabricio Bittencout & Rodrigo Branas - [About college](https://www.youtube.com/watch?v=qObmUK65IzU )
Toy Problems - The Best of Times, The Worst of Times
Published: 2021-07-10 15:59:17

One day after a minor triumph, see: [one-shotting a toy problem](https://dev.to/zbretz/some-wins-today-22lo), I was taken down bittersweetly in another toy-problem square-off.

'Bittersweet' because the solution was (and remains) tantalizingly close - white-boarded meticulously, tested in Chrome snippets, and recently, producing promising results.

I first attempted `allAnagrams` during our hourlong end-of-day toy problem  block. The recursion approach came to me pretty quickly, and so did the white-boarding. The devil, my friends, is in the details.

Two things that I've learned, or learned more deeply, on this problem: closures and assignment.

###Closures

Yes, closures do exist in recursion.

My allAnagrams strategy centers around entering for-loops that call a recursive inner function. My assumption was that at any given iteration of the loop (i=2 for example) that after going however many layers deep into the recursion, the function would revisit that loop and pick back up at the next i++ and continue; in this case, at i=3. And then once this loop terminated, if it was nested, it would pick back up wherever it was entered, for instance in a parent loop at x = whatever.

I'm not sure that closures is the right term, or the right way to think about remembering where in the loop (ie. which *i*) to pick-back up from. But that's the idea. It's always satisfying when your carefully-considered assumptions are validated.

###Persisting Data
I might even call this *the* tricky thing about recursion. Moving data deeper inside of the recursion in a way that is aligned with your strategy and then managing that data when you spin back out of the recursion, going from the inside outwards.

I ran into an issue when, while looping over an array, I spliced that array, permanently removing one of its items. I then passed that smaller array into the recursive inner function, with the intention of repeating this process until I hit the base case of array.length === 0.

Well, the array that I spliced was being iterated over in the for-loop, and when the function unwound back from the base case to pick back up with iterating over that array...there was no more array. I had spliced its contents out of existence, prematurely terminating the for-loop.

The immediate lesson here was to copy the array - and then splice the copy so that the destructive recursion-splicing would leave the original array intact to be looped over when the recursion unwound back up to that level. The larger lesson is the be hyper-aware of what's happening to the data - because the data's all you got baby.

##Grand takeaway
While the goal is absolutely to solve every toy problem (and to do it elegantly, and quickly, and...), really the goal right now is to improve my problem-solving process and to gain familiarity with the common patterns in the problems and solutions. If those are improving, then everything is working exactly as they should. The point isn't to be really good right now. It's to be really good when I need to be really good.
Python Virtual Environment
Published: 2021-07-10 15:14:10

# Installation
## Using pip
```bash
python -m pip install --user virtualenv
```

# Create folder to local python packages
```bash
python -m virtualenv venv
source venv/bin/activate
```

# Install colorama package
```bash
pip install colorama
```

# Call colorama
```python
from pip._vendor.colorama import init, Fore
```

# Install python-dotenv package
```bash
pip install python-dotenv
```
## Usage
create _.env_ file
```
DATABASE_CONFIG=my_database_config
```
## In settings.py
```python
from dotenv import load_dotenv
import os

# load all env variables from .env file
load_dotenv()

# print out the value
print(os.getenv('DATABASE_CONFIG'))
```

```bash
python --version
pip --version # */venv/lib/python3.8/site-packages/pip (python 3.8)

python3.8 settings.py
```
Awesome card hover effect with CSS, HTML.
Tags: html, css, uiweekly, ux
Published: 2021-07-10 14:48:36

Hello, I am kunaal, glad you are here Today we'll learn to create this awesome card hover effect with HTML, CSS and JS. You can see the demo below in the video tutorial.

#Video Tutorial

{% youtube sawVK7GATIQ %}

[Subscribe my youtube channel](https://www.youtube.com/c/modern_web?sub_confirmation=1), [My Instagram](https://www.instagram.com/modern_web_channel/)
Elixir phoenix - Render Ecto schema to json with relationships
Tags: elixir
Published: 2021-07-10 14:00:00

When writing API with Phoenix and render json to client,
- **For some fields I want to keep it original value.**
- **For some fields, I want to do some calculation or format data before returning.**
- **And I want to render Ecto association too.**

An while working on an project at [OnPoint](https://www.onpoint.vn/) I have build a little module that helps to do this easier.

I have extract that module and release as a package named `JsonView`. Its source code is hosted on github:

https://github.com/bluzky/json_view

You can use it with Phoenix.View or use it independently. It helps to manipulate data, and handle rendering association automatically.

**I have published an article on how to write it**
[A better way to render json response in Elixir Phoenix](https://dev.to/bluzky/a-better-way-to-render-json-response-in-elixir-phoenix-41a3)

Let's take a look.

First define view modules

```elixir
  defmodule MyApp.UserView do
      use JsonView
      def render("user.json", %{user: user}) do
      	render_json(user, [:first_name, :last_name, :vatar], [], [])
      end
  end
      
  defmodule MyApp.PostView do
      use JsonView

      # define which fields return without modifying
      @fields [:title, :content, :excerpt, :cover]
      # define which fields that need to format or calculate, you have to define `render_field/2` below
      @custom_fields [:like_count]
      # define which view used to render relationship
      @relationships [author: MyApp.UserView]

      def render("post.json", %{post: post}) do
          # 1st way if `use JsonView`
          render_json(post, @fields, @custom_fields, @relationships)
      end

      def render_field(:like_count, item) do
          # load like_count from some where
      end
  end
```

And then use it

```elixir
post = %Post{
	title: "Hello JsonView",
	excerpt: "Now you can render Json easier",
	content: "Install and put it to work",
	cover: nil,
	inserted_at: ~N[2021-07-05 00:00:00],
	updated_at: ~N[2021-07-09 00:00:00],
	author: %User{
		first_name: "Daniel",
		last_name: "James",
		email: "daniel@example.com",
		avatar: nil,
		inserted_at: ~N[2021-06-30 00:00:00]
		updated_at: ~N[2021-07-02 00:00:00]
	}
}

MyApp.PostView.render("post.json", %{post: post})

# or invoke from PostController
render(conn, "post.json", post: post)
```



This is the result that you can use to return from PhoenixController

```elixir
%{
	title: "Hello JsonView",
	excerpt: "Now you can render Json easier",
	content: "Install and put it to work",
	cover: nil,
  like_count: nil,
	author: %{
		first_name: "Daniel",
		last_name: "James"
	}
}
```

If you have any feedback, please comment or [create an issue](https://github.com/bluzky/json_view/issues/new).

In the next post I will go through step by step to write this library.
Exploring useRef hook
Published: 2021-07-10 13:20:59

The ref in useRef stands for reference. We can use useRef to reference a javascript value or a DOM node.

useRef hook accepts one argument as the initial value and returns a mutable object (reference) which will persist for the full lifetime of the component. The returned object has a `current` property which holds the value we passed and can be mutated. 

*Updating the `current` property does not trigger a re-render.* This is difference between useRef and useState.

### Use case 1 : Mutable values

We can use useRef to create a reference to a variable that we can update without triggering a re-render.

Consider the example of a timer.  `setInterval` returns an id which we must passed to `clearInterval` to stop the `setInterval` function from calling the callback passed to `setInterval`. If we stored the id returned by `setInterval` in a state variable, it would trigger a re-render. After re-render, a new id will again be returned by `setInterval`, eventually resulting in an infinite loop. 

useRef can be used here instead, to avoid the re-render.

```jsx
const Timer = () => {
	const [time,setTime] = useState(0);
  const intervalRef = useRef();

  useEffect(() => {
    const id = setInterval(() => {      
			setTime((time)=>time + 1);			
    }, 1000);
    intervalRef.current = id;
    return () => clearInterval(intervalRef.current);
  });

  const handleCancel = () => clearInterval(intervalRef.current);
  
  return (
    <div>
      <h1>{time}</h1>
			<button onClick={handleCancel}>Cancel</button>
    </div>
  );
}
```

### Use case 2: Accessing DOM elements

This is the more common use case. We can access the DOM elements and interact with the APIs of the HTML elements.

Consider the example, where we want to focus on the input field when the component mounts. We can achieve this with the help of `useRef`. We will have to create a reference to the the input element and on mounting calling the focus API of the element.

```jsx
function App() {
  const inputRef = useRef();

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  return (
    <input 
      ref={inputRef} 
      type="text"
			placeholder="Enter value..." 
    />
  );
}
```
How solving others errors will help you grow as a programmer
Tags: beginners, programming, codenewbie
Published: 2021-07-10 13:51:22

There is no programmer in the world who has not come across errors in their code. You might’ve come across this quote, *`“90% of coding is debugging, the other 10% is writing bugs”`* it’s funny but in most of the cases its true. Someone who is new to the programming world will surely face problems and errors or might’ve started learning a new technology or is stuck with a problem and helping them solve such problems is being useful and it also improves your programming skills. If you yourself are in the learning phase and are at a beginner/intermediate level it’s going to be quite useful and a skill you must know, it’ll surely help you in the long run.
<br />

   >  [_What are the Benefits?_](#benefits) 

   >  [_How to help others?_](#help)

<br />
We always try to learn and gain as much knowledge as we can. In the same way helping a colleague or friend stuck with a problem or error in return will help you to learn something, find a new solution or a workaround for a certain problem. Even if you don’t know the language, technology or the framework you’ll probably end up learning something related to it. As a beginner you too will face errors and discussing it with someone will help you understand what your code is doing and it’ll also reinforce what you learned.

<hr>

## What are the Benefits?  <a name="benefits"></a>

* You’ll learn to grasp quickly what issue or problem there is or the underlying functionality of the code.
* Improve communication skills and technical knowledge.
* Learn to come up with workarounds for problems.
* Learn where to search or look for when facing a problem, reading the related documentation and its specifics.
* Helps you become a better code reviewer in a way.

<hr>

## How to Help others?  <a name="help"></a>

There are dozens of ways to help others. Reach out to your friends and inform them to let you know when they are stuck with an error/problem. [Stack Overflow](https://stackoverflow.com/) is a great place to help and get solutions for similar problem, there will be many solutions to a certain problem but maybe yours is a better one or the required solution the person was looking for. Contributing to open-source projects and solving some of their issues or finding a bug and fixing it.

<hr>
## Conclusion
Helping a fellow programmer is not a waste of your time or you should never hesitate to help. Take up the challenge, try to understand what they need or what functionality that piece of code is for, research and come up with solutions. You’ll be helpful and useful for someone as well as learn something new 😊
Guide to setTimeout and setInterval in Javascript
Published: 2021-07-10 13:32:54

The global object in Javascript provides two in-built methods `setTimeout` and `setInterval` to trigger a block of code at a scheduled time.

### setInterval

`setInterval` method accepts two arguments. A callback function and delay in milliseconds. The function passed is called at specified intervals. `setInterval` will continue calling the passed function until we use another in-built method `clearInterval` or until the window is closed. 

In this example, the increment function passed as callback, will be called after every one second.

```jsx
let i = 0;
function increment() {
  i++;
  console.log(i);
}
setInterval(increment, 1000);
```

### setTimeout

`setTimeout` also accepts two arguements like `setInterval`. The function passed is called *once* after the specified interval. 

After an interval of one second, the increment function passed to setTimeout will be called.

```jsx
let i = 0;
function increment() {
  i++;
  console.log(i);
}
setTimeout(increment, 1000);
```

### clearInterval and clearTimeout

The `setInterval` and `setTimeout` functions returns a number which is used to identify that particular function. Calling `clearInterval` and `clearTimeout` by passing the corresponding id will stop executing it.

In the example shown below, `clearInterval` will be executed after 3 seconds, thus terminating the `setInterval` call.

```jsx
let i = 0;
function increment() {
  i++;
  console.log(i);
}
const incrementTimer = setInterval(increment, 1000);
setInterval(() => {
  clearInterval(incrementTimer);
}, 3000)
```