teleren/devto huggingface dataset:
How to start a new phase of yourself
Tags: selfawareness, selfcare, selfimprovement, productivity
Published: 2022-10-05 17:50:50

---
title: How to start a new phase of yourself
published: true
date: 2022-10-03 05:04:20 UTC
tags: selfawareness, selfcare, selfimprovement, productivity
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*-7wgnaW0a1uQK8Fw70T6Iw.jpeg)

> The discussion of a Journey is what makes the distance far. The moment you start, it’s only a few miles to your destination —[ Nupe people](https://en.wikipedia.org/wiki/Nupe_people).

The secret to every journey is something in particular, but before I dive into the mystery, let me point out that everything has ingredients. In this article, I will discuss the five things to building yourself and the secret ingredient you need.

Here are five things to help you start the journey of building yourself.

### Accept the Fear.

Starting anything new comes with fear and uncertainty. The same applies to building yourself. It’s scary. No doubt about that.

Everybody who is anybody, has faced challenges and self-doubts as they grew into becoming who they are today.

It is okay to be scared, confused, and doubtful. Accepting these facts will prepare you confidently to move into the new phase of yourself.

### Define a Goal

The start can be a lot. You should be able to look at where you are and where you want to be.

There is a reason you want to embark on this journey, financial stability, family value, self-confidence, or a new career goal. Few questions to ask

- Where are you right now?
- Where do you want to be?
- What do you need to do to get there?

Set attainable goals using the answers you get from these questions. Your goals should be achievable and trimmed down to the smallest detail.

### Define a plan and celebrate the small wins

Now that we have defined the goal, the next thing is to create a plan and stick to it. Define a roadmap that will guide you and help track your progress as you go.

Break down your plans into small tasks with attainable achievements and incentives to reward yourself for every win.

### Learn as you go

Mistakes will happen, setbacks will come, and plans can change. The goal is to learn from these. Understand what happened and what you could have done better.

These will guide you and keep you focused on the goal.

### Just Start

The secret ingredient, this is it! JUST START. Don’t prepare for tomorrow, and don’t wait for some element to be in place. Just start.

Start working on the business idea, start talking to your friends. Start that journey today.

### Conclusion

One thing I’d love for you to take away from this article is that the start of everything is the key to its success. Once you start, the rest will come into place.

Do you have any tips, advice, or questions? Will love to hear them let’s connect my [@iNidAName](https://twitter.com/inidaname)
Using SUMIF() and VLOOKUP() in Google Sheet/Excel
Published: 2022-10-03 04:57:11

---
title: Using SUMIF() and VLOOKUP() in Google Sheet/Excel
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Let's look at a toy example to understand how the two functions `SUMIF()` and `VLOOKUP()` can be used. Let's say you run a liquor shop and you need to keep track of the number of drinks you sell, and their price where each drink has a different price. 

We are going to use `VLOOKUP` to lookup the price of a drink. Similarly, we are going to use `SUMIF` to calculate the total cost of individual drinks.

The lookup table looks like this. (Note the lookup table is in a different sheet)

![Lookup table with price](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2bw26qpf0tzej3nnbdv.png)


Now let's look at the expenses sheet.

I added a dropdown in the type of liquor column with the three types of liquor: 

![Type of liquors dropdown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5q31ml5ma4swdfvmcu7w.png)

&nbsp; 

Next, let's look at how we are using `SUMIF`.
 
`SUMIF` checks the string passed in the second argument against the value of the cell referenced by first argument, and if it matches, returns the value of the cell specified in the third argument. More info [1](https://support.google.com/docs/answer/3093583?hl=en), [2](https://www.ablebits.com/office-addins-blog/sumif-google-sheets/)

![Example of SUMIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3sr6vmk37r2dsu9q0dvd.png)

&nbsp; 

Let's look at how we are using `VLOOKUP`.

![Using VLOOKUP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7khrehw0l1pzmqzj76v.png)

The first argument is the string we are searching for, the second argument specifies the range of cells to search for the first argument, the third argument specifies which column to return from the result and the fourth argument returns an exact match. More info [1](https://support.google.com/docs/answer/3093318?hl=en), [2](https://www.ablebits.com/office-addins-blog/vlookup-google-sheets-example/).

Click [here](https://docs.google.com/spreadsheets/d/1iI4IaTYVbk8w_XEqAhlcyEObn8zH00YLBehHifoWnYs/edit?usp=sharing) for the complete example.
HTML SVG
Tags: html, webdev, beginners, tutorial
Published: 2022-10-03 04:54:13

HTML SVG is a modularized language which is used to describe graphics in XML. It describe two-dimensional vector and mixed vector/raster graphics in XML. It is a W3C recommendation. SVG images and their behaviors are defined in XML text files. So as XML files, you can create and edit an SVG image with text editor, but generally drawing programs like inkspace are preferred to create it.

SVG is mostly used for vector type diagrams like pie charts, 2-Dimensional graphs in an X,Y coordinate system etc.

The <svg> element specifies the root of a SVG fragment. You can animate every element and every attribute in SVG files.

**HTML SVG Circle Example
**
```
<svg width="100" height="100">  
 <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />  
</svg> 
```
Output:

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

**HTML SVG Rectangle Example**

```
<svg width="200" height="100">  
  <rect width="200" height="100" stroke="yellow" stroke-width="4" fill="red" />  
</svg>  
```
Output:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dvwc8ynd4b7hj11w2t4l.png)
Javascript Variables
Tags: javascript, webdev, beginners
Published: 2022-10-03 04:45:56

JavaScript (JS) is a lightweight, interpreted compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages. In this blog I will discuss the variables used in JavaScript Language.

Firstly to discuss what actually are variable ? Variables are used to store data values. They are used to contain values which can be used later in the program for different operations and algorithms. A variable can only contain one value at a time, which can be of any data type. Meaning either a string, number, boolean, array, object, function or null or undefined.

Now, In JavaScript we have 3 keywords for variables, Const, var & let.
While var was the OG variable declaration in JS, const and let were introduced with ES6.

Var : Scope of var can be global or local depending on where is it declared. It means if any variable with var is declared outside function , it can be used throughout the program , while if it is declared inside the function it can only be used inside the function.

Hoisting of Var : Basic meaning of hoist is to pull something up or lift , hoisting is basically a mechanism where declarations of Variables and functions move to top of the scope wherever they are declared before code execution starts.
When var variables are hoisted to top they are initialized with value of "undefined".

Const : Const variable keyword was introduced with ES6 in 2015.
As the name of the keyword suggests const is used to define variables that are constant, it sounds a little bit oxymoronic but in other words we can say Const variables cannot be reassigned, if we declare a const array we can make changes in it but cannot reassign it. It also cannot be re-declared. Since const cannot be redeclared it has to initialized at the time of declaration .Const has a block scope which I will explain with use of a example.

```
const hello="murtaza";
{
const hello="how";
console.log(hello);
// returns "how"
}
console.log(hello);
//returns "murtaza
```
Let : Just like const let is also a block scoped variable keyword. Let can be updated but it cannot be re-declared. Just like var and const , let declaration is hoisted to top , while var is initialized with "undefined" , const and let are not initialized,
so if we try a to use a variable with let keyword without initializing it , it will give "Reference Error".

```
greeting = 4;
console.log(greeting);
let greeting;
// it returns "error: Uncaught ReferenceError: Cannot access 'g' before initialization"
```
CSS Box Model
Published: 2022-10-03 04:24:36

The CSS box model is a set of rules that help dictate how items are displayed within your website or web project. It defines the parameters of elements, their boundaries, and spacing both in and outside the target element.

This means any web page you see is made up of elements wrapped in rectangular boxes and arranged in relation to each other. These elements can exist beside, above, below, and within each other, depending on the type of element they are. 
There are two types of HTML elements: block-level elements and inline elements. Let's take a closer look at each below.

**Block-Level Elements**
By default, block-level elements start on a new line and take up 100% of the space available — which might be the full width of the viewport or its container if it’s inside another element. Since they start on a new line by default, block-level elements break the flow of the document.With the padding, border, and margin properties applied to a block-level element, other elements will be forced away from the box around the element. As a result of this — and the fact that they span the full width of their container — block-level elements take up more space than inline elements and can create larger structures.

_Block-level elements include the following: _

```
<p> <h1> <h2> <h3> <h4> <h5> <h6> <ol> <ul> <pre> <address> <blockquote> <dl> <div> <fieldset> <form> <hr> <nonscript> <table> 
```

**Inline Elements**
By default, inline elements do not begin on a new line or take up the full width of the viewport. Width and height properties do not apply. Unlike block-level elements, inline elements do not break the flow of the document. 

Inline elements can contain other inline elements and data but not block-level elements. For example, a paragraph element can contain an emphasis element — but not a heading element. 

If the padding, border, and margin properties are applied vertically, other inline boxes will not be forced away from the box around the element. If the padding, border, and margin properties are applied horizontally, other inline elements will be forced away from the box around the element.

_Inline level elements include _

```
<b> <big> <i> <small> <tt> <abbr> <acronym> <cite> <code> <dfn> <em> <kbd> <strong> <samp> <var> 
```
Animación de Button de Menú en HTML y CSS
Published: 2022-10-03 03:53:39

Primero creamos el bloque del button con html con tres div, los cuales serán las barras.
```html
<button>
  <div></div>
   <div></div>
   <div></div>
</button>
```

Luego creamos los estilos para darle forma al menú, tanto al tag button como a los div.

Por último, creamos los hover con las animaciones.
```css[](url)
button{
  display:flex;
  flex-direction:column;
  width:3.5rem;
  heigth:3.5rem;
  border:0;
  background:transparent;
  gap:.65rem;
  
}
button > div{
  background: violet;
  height: 5px;
  width: 100%;
  border-radius:5px;
  transition:all .4s;
  transform-origin:left;
}
button:hover div:first-child{
  transform:rotate(45deg);
}
button:hover div:nth-child(2){
  opacity:0;
}
button:hover div:last-child{
  transform:rotate(-45deg);
}
```

[ENLACE A CODEPEN](https://codepen.io/pen?template=RwyydNa)
Sample java code example
Tags: javascript
Published: 2022-10-03 03:51:13

Every line of code that runs in Java must be inside a class. In our example, we named the class Main. A class should always start with an uppercase first letter.

Note: Java is case-sensitive: "MyClass" and "myclass" has different meaning.
public class Main {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
refer : [bạch thủ lô nuôi khung 2 ngày](https://soicau.blog/nuoi-bach-thu-lo-khung-2-ngay/)
Balanced Binary Tree
Tags: javascript, leetcode
Published: 2022-10-03 03:49:46

Given a binary tree, determine if it is height-balanced.

For this problem, a height-balanced binary tree is defined as:

a binary tree in which the left and right subtrees of every node differ in height by no more than 1.

Input: root = [3,9,20,null,null,15,7]
Output: true

```js
/**
 * Definition for a binary tree node.
 * function TreeNode(val, left, right) {
 *     this.val = (val===undefined ? 0 : val)
 *     this.left = (left===undefined ? null : left)
 *     this.right = (right===undefined ? null : right)
 * }
 */
/**
 * @param {TreeNode} root
 * @return {boolean}
 */
var isBalanced = function(root) {
    let flag = true;
    
    var height = function(r){
        if(!r) return 0;
    
        let num1 = height(r.left);
        let num2 = height(r.right);
        let res = num1 - num2;
    
        if(res < -1 || res > 1) flag = false;
    
    return Math.max(num1,num2) + 1;
    }
    
    height(root);
    return flag;
};
```
Creating a GraphQL Server from just Mongoose Models
Tags: mongoose, graphql, mongodb, node
Published: 2022-10-03 03:45:46

**Introduction**

Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js and is one of the most common libraries that NodeJs developers are acquainted with. Mongoose has been used widely for REST applications, with the coming of [GraphQL](https://graphql.org/), which is a query language for APIs to get exactly what you need, a simple interface to bridge both seemed to be missing.

To fill this gap and automatically generate a GraphQL Server from just mongoose models and provide basic CRUD operations for all models with support for deep nested populations, I created this library [mongoose-graphql-server](https://www.npmjs.com/package/mongoose-graphql-server).

**Getting Started**

To get started with this library and generate CRUD with GraphQL on just mongoose models.

_Note: Assuming MongoDB is installed locally or the connection string needs to be changed accordingly, to test with a free cloud MongDB database checkout [MongoDB Atlas](https://www.mongodb.com/atlas/database)_

Make a directory for the project.

In that directory initiate a new NodeJs project with npm or yarn

With npm

```console
$ npm init -y
```

With yarn

```console
$ yarn init -y
```

Install the required dependencies 

```console
$ npm install mongoose mongoose-graphql-server --save
```
Or 
```console
$ yarn add mongoose mongoose-graphql-server
```

Create a file `index.js` for the server code

```
const mongoose = require('mongoose');
const {
  generateSchema,
  createGraphQLServer,
} = require('mongoose-graphql-server');
const PORT = process.env.port || 3000;

mongoose.connect('mongodb://localhost/test');
const db = mongoose.connection;

const init = async () => {
  // Register models

  const userModel = mongoose.model('user', {name: String, age: Number});
  const catModel = mongoose.model('cat', {name: String});
  // Build the schema

  const schema = generateSchema(mongoose);

  // Create the graphQL server

  const app = await createGraphQLServer(schema);

  // Start the server

  app.listen(PORT, () => {
    console.log(
      `🚀🚀🚀 The server is running at http://localhost:${PORT}/`,
      `The GraphQL explorer is running at http://localhost:${PORT}/graphql`
    );
  });
};

db.once('open', init);

```

Start the server with

```console
$ node index.js
```

If there are no errors, head over to [GraphQL endpoint](http://localhost:3000/graphql) to start exploring using the GraphQL explorer.


This screen should be visible on successful server start
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gaitzwa5g6n0p26ainzr.png)


This was just a basic introduction more documentation and examples can be found on [mongoose-graphql-server](https://www.npmjs.com/package/mongoose-graphql-server) or the [GitHub repository](https://github.com/DanishSiraj/mongoose-graphql-server) 

Any type of feedback is highly appreciated as this is my first npm package and since [Hacktoberfest](https://hacktoberfest.com/) is upon us contributions to this project are also welcomed.
How do I become a programmer again?
Tags: webdev, beginners, python, programming
Published: 2022-10-03 03:41:52

This is probably going to be unbelievable to most of you, but bear with me. I learned (self taught) HTML, CSS and Python in the past but have forgotten most of it. I’m literally on zero and it hurts. Plus, I don’t know where to start from again. 

You see, I haven’t touched a single line of code in all over five years! Due to a career change. I couldn’t find a job as a programmer in my country. Back then, there wasn’t much need for programmers. Majority of companies and employers just needed basic tech like dynamic websites that could be easily built with WordPress. Hence, the only “code” I’ve touched has been tiny CSS and a dash of HTML when making adjustments that a theme or plugin missed out. 

So, what advice can you give me as a newbie? I would like to start all over again and become a data analyst at least. I’m so done with being a social worker and part time freelance WordPress designer. Any helpful insights and advice rendered will be highly appreciated. Please, take me as a noob and complete novice – over 5 years is a very long time. 

I’m in dire need of a career change like yesterday. Your input will change my life. Side note: I’m using a Windows 10 laptop with a fifth gen Core i5 processor – I thought I share as you recommend tools or IDEs. Thank you in anticipation.
Are you installing Hadoop?
Published: 2022-10-03 03:36:55

We can install Hadoop ecosystem to implement Data Lake system. But there are a dozen more frameworks to be installed after the installation of Hadoop itself.
So instead of installing frameworks one by one, we can install the whole stack. There are different types of Hadoop based stacks, such as Yahoo stack, Google stack and so on.
Cloudera stack is one of them.

First install the Oracle Virtual Box following this guide.
https://linuxize.com/post/how-to-install-virtualbox-on-ubuntu-20-04/

Then download the Cloudera VM from this link
https://downloads.cloudera.com/demo_vm/virtualbox/cloudera-quickstart-vm-5.12.0-0-virtualbox.zip

Then install the Cloudera VM in the Oracle Virtual Box
https://www.simplilearn.com/tutorials/big-data-tutorial/cloudera-quickstart-vm
Minimum Window Substring
Tags: javascript, leetcode
Published: 2022-10-03 03:30:59

Given two strings s and t of lengths m and n respectively, return the minimum window substring of s such that every character in t (including duplicates) is included in the window. If there is no such substring, return the empty string "".

The testcases will be generated such that the answer is unique.

A substring is a contiguous sequence of characters within the string.

Example 1:

Input: s = "ADOBECODEBANC", t = "ABC"
Output: "BANC"
Explanation: The minimum window substring "BANC" includes 'A', 'B', and 'C' from string t.

```js
var minWindow = function (s, t) {
  if (t.length > s.length) return "";
  const neededChars = {};

  for (let char of t) {
    neededChars[char] = (neededChars[char] || 0) + 1;
  }

  let left = 0;
  let right = 0;
  let neededLength = Object.keys(neededChars).length;
  let substring = "";

  while (right < s.length) {
    const rightChar = s[right];
    neededChars[rightChar]--;
    if (neededChars[rightChar] === 0) neededLength--;

    right++;

    while (neededLength === 0) {
      if (!substring || substring.length > right - left) {
        substring = s.slice(left, right);
      }
      const leftChar = s[left];
      // If the leftChar in charMap is at exactly 0 before being
      // incremented, we now need more leftChars so that its count
      // in charMap goes down to exactly 0

      if (neededChars[leftChar] === 0) {
        neededLength++;
      }
      neededChars[leftChar]++;
      left++;
    }
  }
  return substring;
};
console.log(minWindow("ADOBECODEBANC", "ABC"));
console.log(minWindow("ab", "a"));


```
Low-Code: Achieving 10x Productivity Through Better Dev Tools
Tags: productivity, tooling, programming, lowcode
Published: 2022-10-03 03:21:56

## The Mythical 10x Developer. A Creature As Elusive As Bigfoot.

![10X Developers: As Elusive As Bigfoot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/elqf702kppmo3csnkl1t.jpg)

---

Developers love to debate whether 10x developers really exist. But you don't have to be a 10x developer to increase your delivery speed.

## Do 10x Developers Really Exist?
Search "10x developer" on HackerNews, and you'll find many heated online debates on the topic. Expect nuggets of wisdom such as "Being a "real" 10X programmer is like being a savant. It's about being F****** SMART."

We're not going to weigh in on the debate of the 10x developer. At least not in relation to individual talent. Instead, we want to look at it from the perspective of development tools.

## How To Achieve 10x Productivity
Remember the story of the [30-story hotel built in China in just 15 days](https://www.youtube.com/watch?v=xg7F7nG0PKw)? If not, watch the video first before continuing to read.

Here are three lessons we can learn from the video regarding software engineering.

> "If you're writing it from scratch, you're doing it wrong!" - Titus Winters, Software Engineering at Google

1. Pre-built components help increase productivity in complex engineering processes. The less you build from scratch, the faster you can build - whether that's a building or a piece of software.

2. Not everybody in your software engineering team needs to be a 10x developer to achieve 10x outcomes. Better tools and processes can make a difference that even a team of highly talented 10x developers would struggle to achieve.

3. The trade-off is between speed of development and customizability. Expect to sacrifice some customizability in return for faster speed of development. But also expect this trade-off to lessen as tools get better in the future.

What's the overall conclusion? Process improvements, be it through better dev tools, such as low-code solutions, management techniques or even organization culture, can trump individual skill. Software engineering is best managed as an engineering process. And outcomes are driven by making this process as efficient as possible.

If you'd like to learn more about low-code software engineering or build your first app using low-code, why not download Five (for free!). Simply visit https://five.co.

Stay tuned for more topics related to no-code / low-code, such as:
- Are low-code and no-code the same?
- What are the limits of low-code and no-code?
- And, will low-code make developers redundant?

---

Originally published at [https://five.co/low-code-achieving-10x-software-engineering-productivity-through-better-dev-tools/](https://five.co) on August 23, 2022.
Storage link already exists but getting 404 error when trying to get a file from the public folder
Tags: laravel, php, tip
Published: 2022-10-03 02:40:14

Storage link already exists in your Laravel project but you are getting 404 error when trying to get a file from the public folder.

Go to your project's **public** folder, and _delete the **storage** folder_, if it exists. Then run this command line:

```
php artisan storage:link
```