teleren/devto huggingface dataset:
4 Reasons to Learn Vim
Tags: vim, vscode, programming, productivity
Published: 2021-05-06 08:23:08

Vim is perfect for all kinds of text editing, to coding, to editing configuration files.

If you spend any amount of time on the command line, the thought of moving your fingers to your mouse and hovering over a drop-down menu just to perform a simple edit is likely enough to make you lose your lunch.

Vim is a powerful text editor designed for use both from a keyboard and from a terminal. Many programmers prefer working with Vim than with their mouse due to the efficiency gained in typing commands with a keyboard, but this is not the only reason to use it.

## Why Learn Vim?

The best text editors allow you to enjoy programming and interact with code in a way that makes you feel like a developer, not a mindless robot. Vim is one of the best editors to offer this experience, which is why I’m here to give you 4 reasons why you should consider it as your next editor.

So why [learn vim](https://vim.is)? It's free and runs on most operating systems. It has keybindings that let you navigate and edit text easily. You can use it to edit code, which is the main reason I started using vim.

1: **It's Powerful** :zap:

Vim can do anything from jump around your code to reformatting it, running unit tests, and more all with a few keystrokes.

So why vim?

* Because it will make you faster;
* Because it will make you more efficient;
* Because it will enable you to do things you couldn’t do before.

Vim is immensely powerful, and the first time I tried it I was blown away at everything you could do without leaving the keyboard. 

2: **It's everywhere.**

Vim runs, almost anywhere. See: Vim on Windows, Vim on Mac OS X, Vim on Linux, Vim on Android, and Vim on iOS.

Vim is built into most Linux distributions and Mac OS X, installed by default in many places (but not always). So, even if you're stuck with a crappy computer that doesn't come with it, you can still get it. Good luck trying to get Emacs installed on your netbook, though—I bet that's possible, but I don't know how to do it.

Even if you don't have it installed already, you can install Vim in an evening using Homebrew or apt-get or whatever the cool kids use these days for package management.

It even runs inside Visual Studio Code and all the Jetbrains IDEs. You can use it in the terminal too. Basically, it's everywhere on any system.

3: **Keyboard shortcuts for everything**

Vim is an editor that does everything through keyboard shortcuts, so once you learn how to do a lot of things, you can move very quickly through your code

4: **Vim has a great community**

Vim has a great community, and I've found that people who are nice in real life are usually nice in the online Vim community, too
How to Use Soft Delete in Laravel
Tags: webdev, laravel
Published: 2021-05-06 08:02:39

**Soft** **delete** **Laravel** - With eloquent, besides we can make the delete data permanent option, we can also delete temporary data, namely by soft delete. This means that with soft delete, the data that we delete is not actually permanently deleted from the database, but only adds a value to the deleted_at field in the table that we want to add the soft delete feature to.

The way soft delete works on laravel is actually almost similar to the recycle bin on windows. The data that we delete actually still exists or has not been completely deleted permanently, so it can still be restored.

We take an example from the cover of this article. On the cover above, you can see a person throwing trash in a bin. We think of the trash on the cover above as data and the trash can we think of as a recycle bin (in windows). Before the garbage or data is disposed of in a final disposal site (permanently deleted), the trash or data can still be retrieved or displayed again (restored).

How soft delete works in the database, if the data is deleted, the deleted_at field in the data will be filled with a timestamp value. Then, if the data wants to be displayed again or restored, the value in the deleted_at field (previously filled with timestamp) will be updated with NULL.

For more details on how to create or use the soft delete feature on laravel, please see and follow this article to the end. Because in this article, I will share about the steps to use the laravel soft delete feature starting from scratch, namely by installing a new laravel project, creating dummy data with a tinker, using soft delete, restoring data, to how to make a permanent delete.

[read more about soft delete laravel at codelapan.com](https://codelapan.com/post/soft-delete-laravel)
An Experience I had using react hooks (useEffect, useState). Not the best practice but why did it work🤔🤔
Published: 2021-05-06 07:54:36

So I was trying to perform an update on a component being mounted by fetching data from an api into a react app, I prefer functional components with hooks to class components. Upon trying to use the useEffect hook I mistakenly used useState in the same form I would have use the useEffect hook and to my surprise the request went through and the component was correctly updated  🤔. 
#react #hooks
Data Analytics courses | Training in Gurgaon
Published: 2021-05-06 07:52:10

Data analytics will have a crucial role to play in business recovery during this new normal phase. Basis data analysis, employees will be able to return to their offices safely, businesses will be able to address their supply chain issues easily and level up their customer experience.
Besides, improvements will be seen in IT and cost optimization.
The science of data analytics enables you to leverage data for effective decision-making.
The business world of today, post-COVID-19, is disrupted. This calls for a thorough analysis and management of costs.
Through data analytics, you can reduce complexities and address different types of issues, ranging from internal employee matters, operations, and processes to partner interactions with your business ecosystem to customer experience.
As you gather data and use it to figure out inefficiencies, controlling costs becomes easy.
iClass Gyansetu :  This organisation also offers some up to date certifications related to Data Analytics and Big Data. Their Courses included:
Data Science Machine Learning with python 
Data Science With Deeplearning 
Data analytics Training in Gurgaon 
Data analytics with R certification 
Trainings are also available on technologies like-
Big Data hadoop training in gurgaon, AWS training in gurgaon, Docker Kubernetes training in gurgaon, Data Science training in gurgaon.
Training are also available online and offline mode :-
Contact
Phone No- +91-8130799520/ 9999201478
Website- www.gyansetu.in
I built grafar to visualize maths on the web
Tags: javascript, math, visualization
Published: 2021-05-06 07:45:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8v0am4qcj2g4s93aw9u.png)

I just open-sourced my library for mathematical (and data) visualization, [grafar](https://thoughtspile.github.io/grafar/#/). If you need to plot functions in a browser, or even draw charts with lots of data, you might find it useful, and here's why:
- Full 3D support via WebGL
- Simple API
- Reactive computations for effortless animations and interactivity

Just to show you how easy it is to get started, we'll plot a [parametric helix](https://en.wikipedia.org/wiki/Helix) together. You might play along in [a codesandbox](codesandbox.io/s/grafar-template-h1k66). 

A parametric surface has 2 parameters, let's call them p and q:

```js
const p = grafar.range(-2, 2, 500).select();
const q = grafar.range(0, 1, 2).select();
```

We define each of them to be a range: _p in [-2, 2], q in [0, 1]._ A this point, p and q basically hold numeric arrays, nothing too fancy.

Now, we map these parameters to the normal x,y,z coordinates:

```js
const xp = grafar.map([p, q], (p, q) => Math.cos(8 * p) * q);
const yp = grafar.map([p, q], (p, q) => Math.sin(8 * p) * q);
```

The neat thing here is how grafar knows that both p and q represent a degree of freedom, and calls our function for every combination of p and q. What about _z_? It's equal to p, so no need to `map` it.

Now we only have to draw the graph on a page. For this, we create a `panel` in some DOM node, then `pin` our (x,y,z) to it:

```js
const container = document.getElementById("app");
const panel = grafar.panel(container);
grafar.pin([xp, yp, p], panel);
```

And here's what we get with these 7 lines of code:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7s8v49ee6e41l9nqnzn.png)

Interested? Learn more [in the docs](https://thoughtspile.github.io/grafar/)
Build a LinkedIn Clone Using just HTML & CSS - Beginners Tutorial
Tags: html, tutorial, webdev, beginners
Published: 2021-05-06 07:44:35

I Built LinkedIn Clone using just HTML & CSS. I Just Love to build these to practice my HTML & CSS Skills. I made a tutorial video to help beginners to improve there html & css skills to build real world projects.

**Tutorial Video:**

{% youtube RnN6r0fTbvQ %}

**Github:** https://github.com/somanath-goudar/html-css-projects

Do you want to improve your HTML & CSS skills? Then Watch this video and follow along with me where we build LinkedIn Clone using just HTML & CSS. We will be using flexbox and Google font Icons in this project.

Hope You Guys Enjoyed the Video. Like Share Comment and Subscribe to my channel for more videos like these.

**Channel:** https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA
Subscribe to My YouTube Channel, Next Week I Will be building **Tiktok Clone** & **Instagram Reels Clone** with just HTML & CSS.

**You may also like my other posts:**

{% link https://dev.to/somanathgoudar/build-a-youtube-clone-with-just-html-css-for-complete-beginners-4fk1 %}

{% link https://dev.to/somanathgoudar/build-a-password-generator-with-react-js-react-toastify-beginners-tutorial-4a9n %}
5 HTML5 tags you did not hear about
Tags: html, cheat
Published: 2021-05-06 07:37:51

Generally, programmers and Front End Engineers consider HTML a relatively easier language to learn. Yes, it is easier because you don't have to memorize thousands of language constructs and syntax. However, there are a few tags that are used very rarely which I am going to uncover today.


##1\. \<base> 

Specifies the base URL and/or target for the relative URLs on the page.

```html
<head>
  <base href="https://ohmycheatsheet.com/images/" target="_blank">
</head>
<p>
    <img src="demo2x2.jpg" width="100" height="104" alt="puzzle cube"><br />
    <a href="/html/">HTML Code</a>
</p>
```

##2\. \<ins>
Text that has been inserted.

```html
<p>The Rubik's Cube World Record is 
<del>4.90</del> <ins>4.73</ins> seconds.</p>
```

##3\. \<param>
Parameter for an object element.

```html
<object data="sound.mp3">
    <param name="autoplay" value="true">
</object>
```

##4\. \<kbd>
Keyboard input.

```html

<p>Normal text and <kbd>Keyboard input</kbd></p>

```

##5\. \<keygen>
A Keypair generator field for forms. Not recommended to use because it's not supported in IE/Edge. 

```html

<form action="/action.php" method="post">
    Name: <input type="text" name="name">
    Encryption: <keygen name="encript">
    <input type="submit">
</form>
```

---

See https://ohmycheatsheet.com/html-cheat-sheet/ for more.
Running npm start without opening browser
Tags: programming, visualstudiocode, react
Published: 2021-05-18 07:33:48

---
title: Running npm start without opening browser
published: true
date: 2021-05-06 07:35:50 UTC
tags: programming,visualstudiocode,react
canonical_url: https://siderite.dev/blog/running-npm-start-without-opening-browser/
---

So you are working on a React app and, to test it, you repeatedly run `npm start` in the Powershell terminal window of Visual Studio Code. Only you have a browser open on the application and don't want to open another one whenever you restart the server. Or perhaps you have a default browser that is not optimal.

The solution is to set the environment variable BROWSER to either "none" or "chrome" or whatever browser you need. In order to set it in the same Powershell terminal, use `$Env:BROWSER="none"`. Now running `npm start` will not open a new browser window/tab.

More details here: [Advanced Configuration](https://create-react-app.dev/docs/advanced-configuration/ "By default, Create React App will open the default system browser. Specify a browser to override this behavior, or set it to none to disable it completely.")
Matt Brannelly | Rebranding Failure Reasons
Tags: rebranding, businessgrowth
Published: 2021-05-06 07:27:39

According to Matt Brannelly, companies are constantly looking for ways to make their brand relevant. Many of them re-strategize to change the brand identity through rebranding. 

Read on as Matt Brannelly, the founder of Orbit and NFP hub, a company what  works with NFPs to become more efficient and achieve their goals explains why rebranding often fails. 
https://matthewbrannellybrisbane.wordpress.com/2021/05/04/rebranding-strategies-to-avoid-failure/
How To Measure Code Quality ?
Tags: codequality, codereview, codenewbie, programming
Published: 2021-05-06 07:21:40

Software Engineers are in great demand nowadays. Their unique skill sets make them different from the other available professions.

We can never ignore the role of digitalization in our everyday life. Be it Facebook, Instagram, Linkedin, or Twitter, all of them are being managed by thousands of Software Engineers.

In short, every application that we use, are being handled by the Software Developers. Basically, all these applications are programmed in some language.

It might be C++, Python, Java, or Javascript, to name a few. The codebases of these applications can run into some millions of lines of code- yes millions of lines. To give you an idea, it is being said that Facebook runs on 62 million lines of code.


That is too when we don’t include the backend component. Maintaining such a huge codebase in itself is such a daunting task.

Obviously, there are different teams like the Development Team, Testing Team, QA Team, SRE Team to handle the different kinds of situations. But a thing that remains common in them is that all of them ultimately work and debug the code.

It is therefore very clear that there must be certain standards that must be followed by the developers while writing the code. Now, these standards can vary from one company to another or from one team to the other.

Read more: https://duecode.io/blog/how-to-measure-code-quality/
How to optimize React Native App
Tags: react, reactnative, howto
Published: 2021-05-06 07:16:48

   A great user experience should be the core objective of any app development. Although React Native tries to provide everything you need to develop a performant application, there are occasions where you have to manually optimize your app. To do this, developers need to have a performance optimization mindset from the start of their projects.

##**Ways to Optimize the React Native App**

**1. Use FlatList**
**2. Remove all console statements**
**3. Memoize expensive computations**
**4. Use Relevant sized images**
**5. Remove unnecessary libraries and features**
**6. Use Hermes**


**1. Use FlatList  to render large lists in React Native**

   If you have a large list, rendering all the items at once can cause a performance issue, but lazy loading with FlatList will improve performance

```
import React from 'react'
import {FlatList} from 'react-native'

const data = [
  {
    id: 1,
    text: 'First'
  },
  {
    id: 2,
    text: 'Second'
  },
  ...
]

const App = () =>{
    const renderItem = ({item}) =>(
        <View>
          <Text>{item.text}</Text>
        </View>
    )
    return (
        <FlatList
          data={data}
          renderItem={renderItem}
          keyExtractor={item => item.id}
        />
    )
}
```

**2. Remove all console statements**

  While you could install some plugins such as babel-plugin-transform-remove-console to remove these statements from production

**3. Memoize expensive computations**

  React introduced the memo HOC (Higher Order Component) for preventing unnecessary re-rendering and the useMemo hook for optimizing expensive computations.

**4. Adjust (resize and scale down) image sizes**

   Images can contribute significantly to performance issues in React Native applications. So use relevant sized Images to increase the loading performance of your App

**5. Remove unnecessary libraries and features**

Each library in a React or React Native application leaves some footprint on the application. This is why you should only add libraries and features you need in your app and remove irrelevant dependencies and libraries. Animations, navigations, tabs, and other features can contribute to the screen load time and so the more they are on the screen, the worse the performance.

**6. Use Hermes**

  Hermes is a JavaScript Engine developed by Facebook in 2019. It is one of the must-have features for improving app performance, reducing memory usage, decreasing app size, and improving the app start-up time.
  Hermes is not currently enabled by default in React Native but you can easily enable it in your app.
  To enable Hermes on Android, edit your android/app/build.gradle file and add the following rules.

```
project.ext.react = [
      entryFile: "index.js",
      enableHermes: true
  ]
```
5 Unique and Secret tricks Front-end Developers don't know
Tags: webdev, productivity, beginners, css
Published: 2021-05-06 07:14:48

This post comes with some of the unique and secrets(🤐) tricks developer don't know. Some tricks will help you in your career and will make you productive, take you to next level in development.

###Datalist Tag
![Datalist Tag](https://exceed-team.com/images/1775/5-unique-and-secret-tricks-frontend-developers-dont-know.webp)

![Tag](https://exceed-team.com/images/1776/datalist-tag.webp)

###CSS calc() function

This function allows you to perform calculations when specifying CSS property values. The most useful ability of calc() is that it mixed units, like percentages and pixels.

![CSS](https://exceed-team.com/images/1777/css-calc-function.webp)

###in operator

The {in} operator can check if an index exists in an array and will return true or false.

![in operator](https://exceed-team.com/images/1778/in-operator.webp)

###Writing mode

This trick allows text to run vertically. This property has five possible options.

![Writing mode](https://exceed-team.com/images/1779/writing-mode.webp)

![Writing](https://exceed-team.com/images/1780/writing-mode-1.webp)

###Math equations

Embeddings numerical problems, utilizing the MathML language is really basic in HTML5. You can put all your equations between the {math} tags.

![Math equations](https://exceed-team.com/images/1781/math-equations.webp)

![Writing](https://exceed-team.com/images/1782/math-equations-1.webp)

Thank you for reading, I hope [this article](https://exceed-team.com/tech/5-unique-tricks-that-all-front-end-developers-should-know-about?s=de&a=a) was useful for you! Have a nice day)
The best way to style broken images
Tags: html, programming, images, css
Published: 2021-05-06 06:38:16

Most techniques to style broken images rely on browser hacks and are **very** inconsistent. Let me show you a consistent way that works the same way across every browser.

This technique relies on the [`HTMLMediaElement.onerror`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/onerror "HTMLMediaElement.onerror - Web APIs | MDN") property, which is supported in **almost every** browser, all the way back to IE9. Take a look:

![](https://stephenafamo.com/blog/store/media/image.png "image.png")

On all our images, we will add an `onerror` event handler which will change the src of our image to a predefined one

```html
<img src="/path/toimage" alt="my image" 
onerror="this.onerror=null;this.src='/broken-img.svg';this.classList.add('broken-img');">
```

### What’s happening here?

We are hooking into the `onerror` event which fires when some form of error occurs while attempting to load or perform the media. When the event fires, we replace the `src` of the image to point to **A NEW** image and adds the class `broken-img` to our image.

On [Swish](https://swish.ink "Swish.ink"), I use [this image](https://swish.ink/assets/img/broken-img.svg "Swish's broken image"), an SVG that is only **855B** in size, and will be loaded once no matter how many times it appears on the page.

This part `this.onerror=null` prevents the browser from falling into an infinite loop if the `onerror` handler has a problem, maybe if the new image was also unable to be loaded. Although some browsers evaluate the `onerror` handler just once, others will attempt to run it again and again if an error keeps occurring.

With the `broken-img` class, we can add any further styling that only applies when the image is broken. On [Swish](https://swish.ink "Swish.ink"), I limit the height of the image to 5em

```css
.broken-img {
    max-height: 5em;
}
```

## Conclusion

I think this is the best way to handle broken images, we use a system that is guaranteed to work the same way across browsers and has practically no adverse effects on our website’s peformance.
LeetCode 45. Jump Game II
(javascript solution)
Tags: algorithms, javascript
Published: 2021-05-06 05:50:00

###Description:
Given an array of non-negative integers nums, you are initially positioned at the first index of the array.

Each element in the array represents your maximum jump length at that position.

Your goal is to reach the last index in the minimum number of jumps.

You can assume that you can always reach the last index.

###Solution:
Time Complexity : O(n)
Space Complexity: O(1)

```javascript
 // Greedy solution
var jump = function(nums) {
    let newMax = 0;
    let jump = 0;
    let oldMax = 0;
    for (let i=0;i<nums.length-1;i++) {
        // Keep track of the farthest jump
        newMax = Math.max(newMax, i+nums[i]);
        // When we get to the index where we had our previous farthest jump, we increase our jump count by 1
        if (i == oldMax) {
            jump++;
            oldMax = newMax;
        }
    }
    return jump;
};
```
Aight. Here we go.
Tags: beginners, codenewbie
Published: 2021-05-06 05:41:39

Time to do something I may or may not have been mildly putting off, writing something that isn't code. I know it sounds silly, but making a blog was intimidating to me. Finding the balance between being professional while still showing my personality, making sure my information is clear and informative, but not too dry. Stuff like that kinda' scared me. I'm still trying to figure out that balance but for now we'll start out with something that is (hopefully) easy, why I decided to become a software engineer.

In middle school I started playing a game with a couple of friends that, looking back at it now, has shaped my life in a huge way. That game was Halo 3 and it was my first real exposure to the world of video games. Halo 3 got me hooked, but from there I played a lot more in a bunch of different genres and started to develop a love and passion for the making of games. By the time graduation rolled around, I didn't know what I was going to do with my life, and while the dream to become a game developer was still there, it wasn't something I made any moves to actually do. It wasn't until recently that I decided it was time to act.

Knowing that the games industry is incredibly challenging and competitive, I decided that I should start by learning some more universal skills. That's why I decided to start attending Flatiron for software engineering so that I could learn important skills that can apply to any type of coding, and while I haven't given up on my dreams of becoming a game developer, I'm confident that this is the right first step for me.