teleren/devto huggingface dataset:
The 5 Pillars of Great Engineering Leadership
Tags: productivity, devops, leadership
Published: 2022-03-28 08:47:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ynsfac8u5n5iqatm3dik.png)

As engineering leaders, our job is to know how we can set up our organization for success and how to deliver impact to our end customers. 

**This means being able to juggle multiple areas within the organization.
**

From our chats with hundreds of engineering leaders, I see five topics that are consistently on their minds: **Organization, Velocity, Quality, Outcome, and Impact. **


**1. Organization**
All organizational questions stem from “are we set up as an organization for success?” You should be asking yourself this question all the time, but mainly as you grow. Another key one is: “Are the engineers happy?”

**2. Velocity**
"How fast do we deliver?"; "Where are the bottlenecks?"; "How do we improve?" No matter if you're an engineering manager, team lead, or CTO, these questions need to be on your mind.

**3. Quality**
"What's the quality of the software that we deliver to our end user?" Everything that impacts the experience for the end-user: From bugs reported and how fast they're fixed to your uptime, performance, and reliability.

**4. Outcome**
"What are we actually delivering?"; "Where are we investing our time?"; "Are we dedicating 20% to paying down tech debt?".

**5. Impact**
"What is the business impact of what we deliver?" - This is relevant for all engineering leaders, but usually, the amount of control that you have on impact gets smaller the closer you are to being an individual team member. 

In the full blog post "[The 5 Pillars of Successful Engineering Leadership](https://athenian.com/blog/the-5-pillars-of-successful-engineering-leadership)", we go deeper into this topic because we've seen the best organizations struggle with quantifying business impact for engineering. 

We also talk about which areas to prioritize depending on what stage of growth your company is in, and what happens when you don't answer these questions.
React, Vue and Svelte: Comparing Click Event
Tags: javascript, react, vue, svelte
Published: 2022-03-28 08:46:41

## Click Event in...

The use of the click directive is quite similar in these 3 frameworks.

Check it out 🚀

### React
[Link](https://stackblitz.com/edit/vitejs-vite-vghwku?file=src/App.tsx)

```jsx
const handleClick = () => {
  alert('I was clicked!')
}

<button
  onClick={handleClick}
  className="button">Click me!</button>
```

### Vue
[Link](https://stackblitz.com/edit/vitejs-vite-neyw2c?file=src/App.vue)

```jsx
const handleClick = () => {
  alert('I was clicked!')
}

<button
  @click="handleClick"
  class="button">Click me!</button>
```

### Svelte
[Link](https://stackblitz.com/edit/vitejs-vite-85fgje?file=src/App.svelte)

```jsx
const handleClick = () => {
  alert('I was clicked!')
}

<button
  on:click={handleClick}
  class="button">Click me!</button>
```
How To Embed Twitter Tweet Into Dev.to Post
Tags: embed, wwwhowbeginnerscom, webdev, beginners
Published: 2022-03-28 08:02:36

This is a great beginner's guide to embedding a Twitter tweet into your Dev.to posts! 

If you're looking to embed a tweet into your Dev.to post, this is the guide for you!

Are you a beginner in DEV.TO? Do you want to embed Twitter Tweet Into DEV.TO Post?

I'm a dev.to user but I don't know how to Embed Twitter Tweet Into DEV.TO Post, so I googled it and found a tutorial which is really helpful for me and now I can embed twitter tweet into dev.to post easily.

If you are a beginner in DEV.TO, then you should read this tutorial carefully and follow the simple steps below to learn how to embed Twitter Tweet Into DEV.TO Post easily with just one click!

## How To Embed a Tweet into Dev.to post

1. Click on share tweet button at bottom of the tweet to get the link of the tweet that you want to embed into dev.to post.
2. Get the tweet ID
3. Paste it into between code like this:

```

{% twitter ID %}

```

I Will mark an example for you. I have a link of my tweet like this: 

`https://twitter.com/wwwhowbeginner/status/1497533289930063877` so my tweet ID will be 1497533289930063877 and I will have a code embed exactly like this 
```
{% twitter 1497533289930063877 %} 
```

Here is how it will look like

Render:
{% twitter 1497533289930063877 %}

Thank you for taking the time to read my post. I hope you enjoyed it. That’s all I wanted to share with you. Have a great day!

Follow me to read more interesting contents. Thanks.
Here is my blog, [read more](https://www.howbeginners.com/).
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes
Published: 2022-03-28 08:00:13

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259a37a785.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:
A new database query walks into a bar.

The server says "Sorry, cache only."
 -->
Developer || Slave
Tags: career, codenewbie
Published: 2022-03-28 07:46:20

## Grinding gears as a developer.

I've always wanted to know and build, ever since i was a child and first heard about a kid that built the web based game Mafia back in the late 90's using Javascript.

You have a motivation behind the actual part of you that is dreaming for the ultimate lego game, which in turn created me as a developer.

Now i can create and build WHATEVER I WANT! But most of the time that is not the case. Since development is a group based activity, because of bad libraries/code and novice examples that explain nothing but the basis of how you use them and hours of googling to find hacks. Making a developer slave away on his keyboard for hours on end, trying to create something he or she has baked in their mind.

Nothing is as tedious as banging your head on a keyboard, not getting the results you want when building your ultimate lego project.

This is when the burn in burnout starts as in a developer, pushing him self to the brink of madness trying to achieve something, anything which can show that he actually can call himself a developer.

Going through project on project from `create-react-app` to `create-eth-app` to `create-next-app` and just so much libraries to choose both to fetch data and to format data a developer, its like being a whole marathon at once only to be standing still on a treadmill, gliding into a public repo Narnia hell just hoping to complete something so simple set in their mind.

This is my take on developing personal projects. This is why i give up my personal projects and will be giving the job market another chance to shine light where i need it.

Give me a job which has a flexible work hours where i can focus my hours on work rather than hours on pay.

Give me a job that has both in house and remote options.

Give me a job which is innovating, creative and where you have the freedom to take a nap if your head is on fire.

We are all biological machines, we need sun, air, freedom and good food to create optimal code.

Code comes from the mind, where both freedom and curiosity lives.

Give your peers the freedom to take your software to new highs, because the freedom we have is the freedom we make.

Strict rules results in shitty and tightly bound spagetti code, drop mic.

And give all your developers MAC's and nothing else.

The workflow is like the natural thought process, easy and exciting at the same time.

Your very best the create engine-ere - André
GIT Command - Overwrite Trick
Tags: git, github, tutorial, productivity
Published: 2022-03-28 07:43:03


A short post to all those who have difficulty with repository hell. This Git command parts the sea, brings peace and makes the local repository die for your sins.

Especially in IntelliJ i was faced with this issue numerous times, not being able to switch branches without going through some kind of satanic IntelliJ ritual of saving the repo changes to a shelf.

The solution is here:

**Force overwrite of local files from remote repository:**

```
$ git fetch --all
$ git reset --hard origin/master
```

**To download changes from some other branch**

Use the following command:

```
$ git reset --hard origin/<insert_other_branch>
```

> _`Git fetch` downloads latest updates from remote, but doesn't merge or rebase in local files._

Thank the lord! The repo is resurrected back to its stable form!

### Want to know more, check out the [Git cheat sheet here!](https://github.github.com/training-kit/downloads/github-git-cheat-sheet.pdf)
Python for begginers
Tags: beginners, programming, python
Published: 2022-03-28 07:39:29

**Hi! Firmbee just released a free Python e-book for beginners.**

There are over 60 pages of practical Python knowledge followed by ready to implement examples. 
You’ll not only get to discover the most important Python topics, but with each lesson, you’ll learn tangible coding solutions ready to implement in real life.

Feel free to check out: https://firmbee.com/ebook-python-from-beginner-to-advanced
Hoisting in javascript
Tags: javascript, webdev, programming, beginners
Published: 2022-03-28 07:34:34

Hello, everyone!
In this post, we'll look at the Concept of Hoisting in Javascript. We'll go over everything you need to know about hoisting and why it's crucial to know. Don't forget to bookmark this page so you can come back to it later.

## General Meaning
Meaning of the Word In English, hoisting implies "to raise(anything) using ropes and pulleys."

To put it another way, we may say that we are bringing something to the top. Now, let's talk in terms of Javascript: Meaning "lifting variable declarations to the top" refers to the process of bringing variable declarations to the top or before the variable usage.

## What then is Hoisting?
Hoisting is JavaScript's default behavior of moving declarations to the top. A variable is created when a declaration is made, i.e: var a; Initializing involves giving it a value, i.e: var a = 2, for example.

```
var a; // Declaration
a = 2; // Initializing
var a = 2; // Declaration & Initializing
```
A variable in JavaScript can be used before it has been defined.

Simply said, everytime you declare a variable in javascript, whether after or before it is used, the javascript engine in the browser moves that variable to the top, preventing the browser from returning an undefined error.

This signifies that javascript declarations are hoisted, and hoisting is the act of bringing declarations to the top.

```
a = 2; // Initailized
console.log(a); //used
var a; // Declared
// output -> 2
```

```
var a; // Declared
a = 2; // Initailized
console.log(a); //used
// output -> 2
```
Because every declaration advances to the top of the current scope, both will provide the same result (to the top of the current script or the current function)

## Declarations with let & const:

Let and const variables are hoisted to the top of the block but not initialized.
Meaning: The variable is recognized by the block of code, but it cannot be used until it has been declared.

If a let variable is used before it is defined a ReferenceError is thrown. similarly, using a const variable before it is declared, will return a syntax error, hence the code will not run. for example;

let

```
a = 'fotie';
let a;
// this will result in a reference error
```
const

```
a = 'fotie';
const a;
// this code will not run
```
It's worth noting that: JavaScript only hoists declarations, not initializations.

Thanks for reading.

DID YOU LIKE THIS POST. FOLLOW FOR MORE!

Originally published on [codementor](https://www.codementor.io/@fotiemconstant/1r4prypxjn) on Mar 05, 2022.
Home Assistant - Lovelace introduction: Step 3
Tags: webdev, programming, beginners, tutorial
Published: 2022-03-28 07:31:37


Home Assistant recently came out with their updated UI January 2019. 

A ui called Lovelace it has now become their default ui interface. Taking a new approach for building user interfaces for Home Assistant.

Note! I had to cut this project short because of the timeframe for my new job, but here is a quick overview over my custom Lovelace UI which i was able to put together.

A dynamic UI with a whole new set of features:

- 24 card grid.
- A UI editor.
- Faster!
- And fully customizable
  - Cards have a list of attributes and options which can alter how your data is presented.
  - Themes!
  - Entity overriding privileges (name and icon).
  - Custom cards built from the HA community.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xm1mp6b2gkcrimawb0l.png)

This is whats so fun about this new platform is that the community is blooming. Make HA work for you!

Take a look at my UI in mobile view:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1dph5iybt2xc3aaq0r5.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bo0tl9wjrfdca842ueew.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcpa1joz4uqqmjzw1lgz.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5qp7ne4dmcdeuh4r4ka.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpzwkzc5e9a2s5v83jmm.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53n1s6fl0z6is3cwkhtv.png)
React Native: State vs Props
Tags: react, beginners, tutorial, todayilearned
Published: 2022-03-28 07:12:46


The question that confuses most beginners in react.

What is the difference of props and state?

Lets clarify this.

Props includes data which we give to a component.

State includes data that is local or private to that component. So other components cannot access that state, it s completely internal to that component.

Lets say we have a Counters component.

```javascript
import React, { Component } from 'react';
import Counter from './counter';

class Counters extends Component {
  state = {
    counters: [
      {id: 1, value: 0},
      {id: 2, value: 0},
      {id: 3, value: 0},
      {id: 4, value: 0}
    ]
  };
    render() {
    return (
      <div>        
        { this.state.counters.map(counter =>
          <Counter key={counter.id} value={counter.value} id={counter.id}>
          </Counter>
          )
        }
      </div>
    );
  }
}

export default Counters;
```

If you take a closer look at the `render` method of the `Counters` component:

```javascript
<Counter key={counter.id} value={counter.value} id={counter.id}></Counter>
```

All attributes we are setting here are part of the `props`, the input to the `Counter` component.

We cannot access the `state` of this component. It is local and internal to that component.

Props is read only, for example lets look at the `Counter` component.

```javascript
import React, { Component } from 'react';

class Counter extends Component {
  state = {
    value: this.props.value
  };

  handleIncrement = product => {
    this.setState({value: this.state.value + 1});
  };

  render() {
    return (
      <div>
        <span className='badge badge-warning'>{this.state.value}</span>
        <button
          onClick={ () => this.handleIncrement({ id: 1 }) }
          className="btn btn-secondary btn-sm">click
        </button>
      </div>
    );
  }
}

export default Counter;
```

Look closer at the helper method `handleIncrement`, which increments the counter by one:

```javascript
handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};
```

If we update the `handleIncrement` method to update the `props.value` like this:

```javascript
handleIncrement = product => {
  this.props.value = 0;
  // this.setState({value: this.state.value + 1});
};
```

And we increment it in the view, we would get this error:

<img src="https://i.ibb.co/gyXg32t/Screenshot-2019-02-19-at-09-51-31.png" alt="react-native prop error" width="600">

So react does not allow you to change any props to any component.

If you would like to modify the input during the lifecycle of a component, you have to get that input and put it in the state like initially done in the `handleIncrement` method:

```javascript
handleIncrement = product => {
  this.setState({value: this.state.value + 1});
};
```

## More information about state and props

For more information about [state](https://facebook.github.io/react-native/docs/state) and [props](https://facebook.github.io/react-native/docs/props) visit the react [docs.](https://facebook.github.io/react-native/docs)
Starting a React Native project with Expo
Tags: react, expo, reactnative, webdev
Published: 2022-03-28 07:07:05


For React Native we need `node`, `Watchman`, React Native CLI and `Xcode`.

**node:**
* A javascript package manager.

**Watchman:**
* A service for watching changes in files and trigger actions when files are changed.

**React Native CLI:**
* A command line interface module for React Native.

**Xcode:**
* Apples IDE to test your application on an Iphone simulator.

## 1. Install `node` and `Watchman`

Install node and watchman using [Homebrew](https://brew.sh/index_se.html).

```
brew install node
brew install watchman
```

## 2. Install React Native CLI

Install React Native CLI with the node package manager (npm).

```
npm install -g react-native-cli
```
## 3. Install Xcode and the Xcode Command line tools.

Install [Xcode from the app store](https://itunes.apple.com/us/app/xcode/id497799835?mt=12).

In Xcode preferences, go to `locations` and download the Xcode CLI found at `Command Line Tools`.

Go to `Components` and download a simulator of your choice, preferably the newest.

## 4. Starting a React Native project

Now you can run these commands in your terminal to start of a React Native project:

```
react-native init MyApp
cd MyApp
react-native run-ios
```

This will initiate a React Native project, and showcase it in an iOS simulator that should look similar to this:

<img src="../assets/images/React-native-ios.png" alt="react-native" width="400">

## Expo

Expo is a free toolchain built around React Native like `react-native` to help build native iOS and Android projects.

The toolchain provides tools to simplify development of React Native apps by supplying components of users interface and services that are normally available in third-party native React Native components. All these you can find in Expo SDK.

Simply install the Expo CLI and run the simulator by running the following commands:

```
npm install -g expo-cli
expo init MyApp
cd MyApp
npm start
```

The last command will start Metro Bundler, which is a HTTP server that compiles the JavaScript code of our app using Babel and serves it to the Expo app.

You will also notice it pops open the Expo Dev Tools, a control panel for developing your app, in your default browser.

### Open the app on your phone or simulator

Looking at the Expo Dev Tools, you have available options on which type of simulator you would like to run (Android or iOS). And you have the option to scan the QR code to run the app on your phone in real time using Live Reload.

All you have to do is download the [Expo app](https://expo.io/tools#client) on either Android or iPhone and scan the QR code, and you are ready to go.


### React Native Documentation:

Learn more about how React Native works by looking at the [docs](https://facebook.github.io/react-native/docs/tutorial.html).
Laravel 8 Seeder Tutorial and Example
Tags: laravel, laravel8, laravelexample, php
Published: 2022-03-28 07:04:23

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/creating-a-seeder-in-laravel-8

In this post, I will share an example of how to create a **Laravel 8 seeder**. Seeder is important to initialize our default data to our database.


Here is the example:


## Step 1: Create Laravel Seeder

Let's create a Laravel seeder for our posts table. Run the following command:

```php
php artisan make:seeder CreatePostsSeeder
```

## Step 2: Insert Data

Once our Laravel seeder is generated kindly to the **database/seeders** directory. Open the CreatePostsSeeder.php and you will see the following code:

```php
<?php

namespace Database\Seeders;

use App\Models\Post;
use Illuminate\Database\Seeder;

class CreatePostsSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Post::create([
            'title' => 'Post 1',
            'description' => 'Description for post 1',
            'body' => 'Body for post 1'
        ]);

        Post::create([
            'title' => 'Post 2',
            'description' => 'Description for post 2',
            'body' => 'Body for post 2'
        ]);

        Post::create([
            'title' => 'Post 3',
            'description' => 'Description for post 3',
            'body' => 'Body for post 3'
        ]);

        Post::create([
            'title' => 'Post 4',
            'description' => 'Description for post 4',
            'body' => 'Body for post 4'
        ]);

        Post::create([
            'title' => 'Post 5',
            'description' => 'Description for post 5',
            'body' => 'Body for post 5'
        ]);
    }
}
```

As you can see in the **run()** method we added inserting posts data.

 

Now let's save the data by running the following commands below:

```php
php artisan db:seed
```

or in a specific command for a seeder class:

```php
php artisan db:seed --class=CreatePostsSeeder
```

Once done it will save the seeder data.


You can also rollback the rerun the migrations with the command below:

```php
php artisan migrate:refresh --seed
```

The **migrate:refresh --seed** is a shortcut of the following commands below:

```php
php artisan migrate:reset     # rollback all migrations
php artisan migrate           # run migrations
php artisan db:seed           # run seeders
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/creating-a-seeder-in-laravel-8 if you want to download this code.

Happy coding :)