teleren/devto huggingface dataset:
7️⃣ VSCODE Shortcuts for Developers you should know Thread🧵
Tags: vscode
Published: 2022-08-07 08:50:00

1. ID and CLASS Attributes

 - Add ID attr html tag
```html
div#info 👇
<div id="info"></div>
```
 - Add a CLASS attr to html tag 
````html
div.header 👇
<div class="header"></div>
```
 - Add ID and CLASS attr 
```html
form#search.info 👇
<form id="search" class="info"></form>
```
 - Add multiple CLASS and ID attr
```html
p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>
```

2.  ELEMENT WITH CHILD and MULTIPLICATION

  - Add child element to a parent element
````html
ul>li 👇
<ul>
    <li></li>
</ul>
```

 - Add multiple child elements
```html
ul>li*5 👇
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
```

3.  ELEMENT with SIBLINGS
 - Add html element next to another
```html
div+section+p 👇
<div></div>
<section></section>
<p></p>
```

4. HTML tag with TEXT
```html
a{Google} 👇
<header> <a href="">Google</a> </header>
```

5.  GROUPING
```html
div>(header>ul>li*2>a)+footer>p 👇
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>
```

6. IMPLICIT TAG NAMES
 - Adding multiple child element with same class
```html
ul>.item👇
<ul>
    <li class="item"></li>
</ul>
```
```html
table>.row>.col*3 👇
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>
```

7. ITEM NUMBERING
- Adding numbered class names to child elements
```html
ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
```

##Thank you for following✨
What other VSCODE shortcut can you suggest? 
comment below👇👇
Reasons Why Technology Startups Fail
Tags: webdev, beginners, startup
Published: 2022-08-07 08:47:25

Technology startups are all the rage these days. It seems like everyone has an idea for a new app or a website that is going to change the world. While there are certainly many successful technology startups, there are also many that fail. In this blog post, we will discuss the top 5 reasons why technology startups fail. Hopefully, this information will help you avoid making some of the common mistakes that lead to failure.

## Top 5 Reasons Why Technology Startups Fail

Reason # one: Lack of a clear value proposition
One of the most common reasons why technology startups fail is because they lack a clear value proposition. In other words, they have an idea for a product or service, but they do not have a clear understanding of who their target customer is and what need that product or service will fill. Without this understanding, it is very difficult to create a successful business.

Reason # two: Poor execution
Another common reason for failure is poor execution. This can manifest itself in many ways, but it essentially boils down to the fact that the team behind the startup does not have the skills or knowledge necessary to bring their product or service to market successfully. This can be a problem with the product itself, the marketing strategy, or even the sales process.

Reason # three: Lack of capital
Many startups fail because they simply do not have enough money to sustain their business. This can be due to some factors, such as underestimating the costs of development or failing to secure adequate funding from investors. Whatever the reason, lack of capital is often fatal for a startup.

Reason # four: Inadequate team
Another common cause of failure is an inadequate team. This can mean that the team does not have the right skills and knowledge to execute their vision, or that they are not able to work well together. Either way, a startup needs to have a strong team in order to be successful.

Reason # five: Poor market timing
Finally, another reason why technology startups fail is poor market timing. This can refer to either launching too early, before the product or service is ready, or launching too late after the market has already been saturated. In either case, it is important to carefully consider the timing of your launch to maximize your chances of success.

Hopefully, this information will help you avoid some of the common mistakes that lead to failure for technology startups. If you have a great idea and a solid plan, you stand a much better chance of succeeding. However, even with the best preparation, there are no guarantees in the business.
Bootstrap 5: grid system
Published: 2022-08-07 08:39:35

The Bootstrap grid-system offers a simple and powerful way to create responsive layouts and therefore suitable for all shapes and sizes.

A grid-system is a set of CSS rules useful for managing the arrangement of content on a page.
It divides the container into multiple columns
with dimensions and spaces consistent with each other.

It is based on flexbox.

The layout adapts flexibly to the display used (Responsive Design).
The space is filled or the elements are juxtaposed together so that everything is ordered
It works with two axes: the main one horizontally, the transverse one vertically.

It uses a twelve column per row system and six predefined reactive levels (breakpoints).

## Characteristics of the grid-system

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

Applying a .col-sm-* class to an element will affect small devices, but also medium, large and extra large devices if the specific .col-md-* .col-lg-* classes are not present, .Col-xl-*, or .col-xxl-*

## How use it

- You create a container that acts as a wrapper using a container class such as .container

- You create lines inside the container using the .row class

- Columns are created within any row using the classes .col-*, .col-sm-*, .col-md-*, .col-lg-*, .col-xl-* and .col-xxl-*

If you want to see some example, see [the document](url)
Maximum Subarray
Tags: leetcode, problemsolving, python
Published: 2022-08-07 08:37:00


Given an integer array nums, find the contiguous subarray (containing at least one number) which has the largest sum and return its sum.

A subarray is a contiguous part of an array.


```py 
class Solution(object):
    def maxSubArray(self, nums):        
        sumS = nums[0]
        sumL = 0
        
        l = len(nums)
        
        if l == 1:
            return sumS
        
        
        for i in range(l):
            sumL += nums[i]
            
            sumS = max(sumS, sumL)
            
            if sumL < 0:
                sumL = 0
                
        
        return sumS

```
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-08-07 08:00:16

---
title: "A Quick 10-Second Programming Joke For Today"
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/5e125964dfaa7.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:
___Q:___ What is React's favorite movie genre?

___A:___ Suspense
 -->
To Beginners | Learners
Tags: beginners, developer, programming, tutorial
Published: 2022-08-07 07:35:00

## Objective: Retaining the learnings

It is easy to spend (lose) time reading or watching content on any topic.
Unless used in practice, it is not so easy to remember any of it after a few months.
Most likely, you will only be practicing less than 5% of all that you have learned for the time span of your memory retention.

## Target audience

Beginners | Confused learners | Seekers of organized learning

### Method: Writing (or typing) own notes

#### Background

If you read/watch some content, practice it, watch the desired output rendered on your machine, you feel you have just learned something valuable. In most cases, the content is oversimplified to give you this exact feeling. Classic case of dopamine addiction! In-depth discussion on most core topics would make you run for other career choices if you are a beginner. At a later stage in your career, this same discussion is what would keep you interested in your work. Don't let the dopamine rush determine the success or failure of your endeavours. Track your efforts, not results!

#### Process

Think of your brain as a box to hold your learnings and your notes as a visual record of the same.
Every note which you add to this box has a value which you will be encashing throughout your career.
When you add something to this box, remember to ask yourself if you thoroughly understood it.
If you are not sure, or have not fully understood some part of your learnings but have sufficient information to move on to the next topics
  - Add a *TODO* note against such piece of learning explaining what you are unclear about.
  - Ensure that you narrow the scope of your learning objectives to account for the missing pieces.

#### Reason

- You get a chance to rethink about every single word
- Helps with
  - Improving your technical vocabulary
      - This is essential for others to understand and evaluate your technical expertise
  - Thoroughly grasp the content in its entirety
      - without skipping parts assumed to be non-essential at that given point of time

#### Benefits

Most developers feel lost in their early years because
  - they don't know what to study
  - how deep must they dive in their subject of choice
  - they don't know if what they have done is the right way to do it

If you follow the above process of noting your learnings, you always have an opportunity to be sure about what you know, how much you know and be able to understand where the new contrary information fits in the larger scheme of things (I guess you will grasp the last part better at a later stage in your career).

### Don't: Start teaching others when you are learning

Reason: There's more than plenty of incomplete, inaccurate and misleading content already out there. Let the documentation help others or go ahead and contribute to the documentation if you feel something can be improved. It would be a great service to others if there is a single source of information.
Node js Sequelize ORM (Book App)
Published: 2022-08-07 07:19:23

If you want to make an Awesome Book app using Postgres database, This video just for you after end of this video you will know how to make api using sequelize ORM
https://www.youtube.com/watch?v=0hZjbqyt3r4

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf75al42c5lonx3ual8m.png)
Secure Jenkins with Nginx
Tags: jenkins, nginx, ubuntu
Published: 2022-08-07 06:41:00

## Part 1 - Configure Nginx for Jenkins

- Add a new **A record** for Jenkins with the ipv4 address of the server.

- Add a new server block below the existing server blocks.

- Sample server block looks like,

```
server {
    server_name <domain-name for Jenkins>;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
    listen 80;
}
```

- Check nginx config via,

```
sudo nginx -t
```

- Restart nginx via,

```
sudo service nginx restart
```

- Check if everything worked fine by going to the URL <domain-name for Jenkins> in the browser. It should open the Jenkins UI.

---

## Part 2 - Configure SSL for Jenkins

- Follow the instructions at [Offical website of certbot](https://certbot.eff.org/instructions?ws=nginx&os=ubuntufocal).

---

## Part 3 - Configure Nginx for Jenkins

```
sudo nano /etc/nginx/sites-available/default
```

- Edit file for Jenkins server block.

```
server {
    # SSL Configuration
    access_log /var/log/nginx/jenkins.access.log;
    error_log /var/log/nginx/jenkins.error.log;
}
```
Ruby Enumerator.new(size)
Tags: ruby
Published: 2023-01-09 02:41:23

---
title: Ruby Enumerator.new(size)
published: true
date: 2022-08-07 04:00:00 UTC
tags: Ruby
canonical_url: https://max.engineer/ruby-enumerator-size
---

Every ruby enumerator supports `count`. It’s a method that will iterate over every item and return their total count.

```
irb> enum = Enumerator.new { |yielder|
  (1..100).each do |i|
    puts "counting item: #{i}"
    yielder << i
  end
}

irb> enum.count
counting item: 1
counting item: 2
…
counting item: 100
=> 100
```

However, Enumerable also has `size`. Except, by default it’s just `nil`.

```
irb> enum.size
=> nil
```

A little-known feature in ruby is that you can pass a parameter to `Enumerator.new` to give it a shortcut “answer” to the size question.

```
irb> enum = Enumerator.new(100) { |yielder|
  (1..100).each do |i|
    puts "counting item: #{i}"
    yielder << i
  end
}

irb> enum.size
=> 100
```

No more iterating to get the count. However, there’s an even more little-known feature. You can pass a lambda to determine the size lazily, and still faster than iterating. Let’s say that you’re enumerating over products in some kind of ecommerce API.

```
irb> api = EcommerceApi.new('connection config')
irb> enum = Enumerator.new { |yielder|
  api.products.each.with_index do |product, index|
    puts "fetching product: #{index}"
    yielder << product
  end
}
irb> enum.count
fetching product 0
fetching product 1
…
fetching product 235
=> 236
```

Let’s say our API has a more efficent way of obtaining the count: `total_count` endpoint.

```
irb> api = EcommerceApi.new('connection config')
irb> enum = Enumerator.new(api.products.total_count) { |yielder|
  api.products.each.with_index do |product, index|
    puts "fetching product: #{index}"
    yielder << product
  end
}
irb> enum.size
=> 236
```

We no longer have to iterate over products to get the total count, but notice a new problem: we now always run `total_count`, even if the user of our `enum` never calls `size`. Seems like a waste. Moreover, if the products are added to the API, our size will not change. The lambda would allow us to run the API call only when requested, and always get fresh count.

```
irb> api = EcommerceApi.new('connection config')
irb> enum = Enumerator.new(-> { api.products.total_count }) { |yielder|
  api.products.each.with_index do |product, index|
    puts "fetching product: #{index}"
    yielder << product
  end
}
irb> enum.size # Calls -> { api.products.total_count } lambda.
=> 236
```

This feature also exists when using `enum_for`/`to_enum` to create the enumerator. You have to return it from the block passed into `enum_for`. The block arguments are any additional arguments passed to `enum_for`.

```
irb> def each_number(max = 100)
  return enum_for( __method__ , max) { |max| max } unless block_given?
  (1..max).each { |n| yield n }
end
irb> each_number(200).size
=> 200
```

P.S. I often forget how this Ruby feature works, and searching never brings up quick examples, so hopefully this article will help when in need of a quick reminder.
Install Jenkins on Ubuntu server
Tags: jenkins, ubuntu
Published: 2022-08-07 06:34:00

## Part 1 - Download and install Jenkins

```
wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -

sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt update

sudo apt install jenkins
```

---

## Part 2 - Starting Jenkins

```
sudo systemctl start jenkins

sudo systemctl status jenkins
```

---

## Part 3 - Opening the Firewall

```
sudo ufw enable

sudo ufw allow OpenSSH

sudo ufw allow 8080
```

- Check the UFW status via,

```
sudo ufw status
```

---

## Part 4 - Setting Up Jenkins

- Open the url **<IPV4 address of the server>:8080** in your browser.

- Get the unlocking password from,

```
sudo cat /var/lib/jenkins/secrets/initialAdminPassword
```

- Click the **Install suggested plugins** option.

- Set-up the admin user.

- Assign the url **<IPV4 address of the server>:8080** in the **Instance Configuration** page.

- Save the details and the Jenkins is set on the server.
Typhoon engine, a new up and comer
Tags: gamedev, productivity, rust, opensource
Published: 2022-08-07 05:58:18

[Typhoon Engine](https://github.com/typhoonengine/typhoon)

Hello developers of the world, I am working on a game engine called [Typhoon Engine](https://github.com/typhoonengine/typhoon) and it is designed with modern in mind.

It is being made with rust and opengl and in the future will use egui for the editor (tempest-editor). If you could go take a look it would mean the world as it is hard to maintain all on my own.

The current state of the engine is very early meaning the codebase isn't massive making it easier to contribute as there aren't as many things.

Not only that but there are currently some issues and more to come as well as a 0.1.0 milestone to help know what is priority.

If you could go give it a look (And maybe a star :>) it would mean the world.

That is all for today see you next time.
[Typhoon Engine](https://github.com/typhoonengine/typhoon)
What makes a game engine good or bad
Tags: gamedev, discuss, opensource, productivity
Published: 2022-08-07 05:52:14

As every game developer knows unity typically gets hated becuase of those bad mobile games. BUT thats NOT what makes a game engine bad.

Ok so you may be wondering what makes a game engine generally bad and to answer that i have to say 1 thing games engines such as: UE, Unity, Godot, GameMakerStudio, etc etc are NOT bad they all have specific use cases. A bad game engine is one which it doesn't aid the game dev in making a game. A example of this would be something like opengl and glfw as it isnt made to make games but made to make game engine and other low level graphic programs.

But i want to hear your opinion and I'm also asking for help, currently i am making my own game engine with rust but i can't do it alone. It isn't a small project so if you could please come take a look and help out it would mean the world. [The game engine is linked here, so please take a look](https://github.com/typhoonengine/typhoon)

Anyway have a good day and let me know your opinion in the comments
Hiding API keys and links in .env files for local development of React web apps
Tags: react, api, webdev, tutorial
Published: 2022-08-07 05:39:00

A very secure way to storing and hiding API keys is by using a .env file. Note, in some circumstances outsiders will still be able to access the API keys when stored in the .env file but it is mostly assumed that the .env is not committed to your repository and is only used for local development. For deployed usage on hosting platforms like Netlify see my other article [here](https://dev.to/renegadedev/how-to-hide-and-use-api-keys-when-hosting-your-web-app-on-netlify-similar-to-env-files-m5m).

### Let's see how we can store an API key in a .env: 

#### Firstly create a .env file in your project's root folder: 

![.env file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g448dbtu6lstxs3vw9cg.png)

#### Now in the .env file let's declare the actual variable which will hold our API key:

```javascript
/* The variable name must start with the format REACT_APP 
followed by the actual variable name in snake case */

REACT_APP_API_KEY = myApiKey
```
#### Now let's use our API key from the .env file in our component:

```javascript
const ApiKey = process.env.REACT_APP_API_KEY 
```
That's it we're all done! 

<img src="https://media.giphy.com/media/3o6ZsZbUukGiYMf2a4/giphy.gif" alt="all done">
What is really partial update [React Hook] look like?
Tags: react, javascript, tutorial, webdev
Published: 2022-08-07 05:33:00

## What is it?
I think your guys know there are serval tips to improve react render performance, such as useMemo.

If you already read Dan's blog, you should also know other tips such as "Move State Down" and "Lift Content Up".
[Dan's blog](https://overreacted.io/before-you-memo/)

But do u ever think if u have a complex component, and this component have a list items (maybe for ten), if u want update one of item (maybe No. 3), then you only need call partialRender function such as
```js
partialRender({3: `my new content`});
```

Then that's all, you don't need take care other optimizations, and it will not make whole re-render. 

That is what usePartialRender do, and sometimes it is a bit tricky, someone will think is it possible render partial for a function component? Yes, it's really partial update.

## what is usePartialRender purpose.
1. help u update a complex component partial content without restructure.

2. provide a easy way to refresh all content.

## Quick Review

* Online Demo: [codesandbox](https://codesandbox.io/s/react-partial-render-mo3yu2?file=/src/App.js:604-716)

```js
  const [ListContent, partialRender, setRenderKeys] =
 usePartialRender(
    initRenderKeys,
    initList
  );
```
usePartialRender could input two optional initial variables or input nothing.

The initial variables only run once also could lazy assign.

|Input KEY|Required|Description|Lazy assign|Run Times|
|---------|--------|-----------|-----------|---------|
|initRenderKeys|No|The initial render keys, use for partialRender({updateKey: updateContent})|()=>initRenderKeys|one|
|initList|No|The initial list you want render, if key not exists in render keys will not shown.|()=>initList|one|

|Output KEY|Description|Will make whole render?|
|----------|-----------|-----------------------|
|ListContent|The finial content you could use in render directly, such as &lt;div>{ListContent}&lt;/div>|No|
|partialRender|partial render function, you could assign your update content only|No|
|setRenderKeys|This could help u control render keys, you need assign all key list. this will trigger whole render, but will not effect list render.|Yes|

## Conclusion
There is no magic for usePartialRender, I try to make things become automatic and let use become more convenient. usePartialRender especial suit for dynamic numbers children, I use it in my popup components, and let it to collect all float DOM.

* usePartialRender source code
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return/src/usePartialRender.js

* react popup component 
https://github.com/react-atomic/react-atomic-organism/tree/main/packages/organism-react-popup

* NPM package
https://github.com/react-atomic/reshow/blob/main/packages/reshow-return