teleren/devto huggingface dataset:
Live Substitution In Neovim
Tags: linux, vim
Published: 2021-01-04 14:35:05

---
templateKey: blog-post
tags: 
  - Linux
  - Vim
title: Live Substitution In Neovim
published: true
description: ''
cover_image: "https://waylonwalker.com/neovim-live-substitution.png"

---

Replacing text in vim can be quite frustrating especially since it doesn't have
live feedback to what is changing. Today I was watching Josh Branchaud's
Vim-Unalphabet series on Youtuve and realized that his vim was doing this and I
had to have it.

{% twitter 1346081617199198210 %}


## How to do it.

I had to do a bit of searching and found a great post from [vimcasts](http://vimcasts.org/episodes/neovim-eyecandy/) that shows exactly how to get the live search and replace highlighting using `inccomand`


## :h inccommand


``` vim
'inccommand' 'icm'	string	(default "")
			global
			
	"nosplit": Shows the effects of a command incrementally, as you type.
	"split"	 : Also shows partial off-screen results in a preview window.

	Works for |:substitute|, |:smagic|, |:snomagic|. |hl-Substitute|

	If the preview is too slow (exceeds 'redrawtime') then 'inccommand' is
	automatically disabled until |Command-line-mode| is done.

```

## Add this to your config

I believe that this is a neovim only feature, add it into your
`~/.config/nvim/init.vim` file. You can see it in my
[dotfiles](https://github.com/WaylonWalker/devtainer/blob/main/dotfiles/.config/nvim/settings.vim#L155)
as well.

``` vim
set inccommand=nosplit
```

## See it in Action

![example live
substitution](https://dev-to-uploads.s3.amazonaws.com/i/d9tsas3pb730lj2jg3dm.gif)

## The Video that inspired this

Check out Josh Branchaud's great series on the Vim-Unalphabet.

{% youtube 5jMiYtXz2QA %}
Consider NextJS for your next project
Tags: javascript, codenewbie, tutorial, programming
Published: 2021-01-04 14:28:50


It is no secret that software development means constant learning. New languages and frameworks come out frequently. And you are required to learn to keep up to date continuously. Recently, I finally decided to pick up the [NextJS](https://nextjs.org/). It is a newer framework that is gaining much popularity, and I can see why. After almost ten years as a software developer, focusing mostly on UI, it is a framework that impresses me from the start. It impresses me like mixins did before we had modern frameworks and like React did when released. Bellow, you can find the list of all the useful features you get out of the box when you use NextJS. Features that you should consider when choosing technology for your next project.
 
### 1. Easily creating project
Just like creating a ReactJS project, it is easy to create a NextJS project. For it, you can use create-next-app with npx. Use the following command to create a project.

```
npx create-next-app PROJECT_NAME --use-npm --example https://github.com/vercel/next-learn-starter/tree/master/learn-starter
```

### 2. It supports CSS and PostCSS, and SASS with minimal setup
CSS and PostCSS are available out of the box. And with just installing one dependency, you can use SASS also.

### 3. It supports CSS modules
CSS modules enable scoped CSS, which gives better-organized code and reduces bugs in it.

### 4. Routes structuring
NextJS gives clear guidelines on structuring. All page components need to be in a folder with name pages, and NextJS builds a router according to its content. That means if you have a component named Post.js in a folder /pages/blog, this component is available in the route /blog/post.

### 5. Prerendering
ReactJS does support server rendering, but it far from easy to implement. NextJS enables two types of pre-rendering. Static pre-rendering executed during the build and server-side, which runs on every request. This both improves your website performance and is SEO friendly.

### 6. Provides SWR hook
NextJS comes with an SWR hook that you can use to make the request. It provides you with many useful features like caching, focus-tracking, and fetching on the interval.

### 7. API server
If you have API code, you can place it into pages/api folder. Routes work like page components, and you can have all your code in one project.

### 8. Ease deployment
[Vercel](https://vercel.com/) maintains NextJS, and they provide you easy integration with GitHub to deploy your application on their platform.

There are many other useful features in NextJS, but these are, in my opinion,  the most useful ones. Just prerendering should give you enough of a reason to consider it for the next project.

***

For more, you can follow me on [Twitter](https://twitter.com/hi_iam_chris_), [LinkedIn](https://www.linkedin.com/in/kpajtasev/), [GitHub](https://github.com/kristijan-pajtasev/), or [Instagram](https://www.instagram.com/hi_iam_chris_/).
How does Azure Data Factory work?
Tags: adfinterviewquestions, azure, adfinterview
Published: 2021-01-04 14:28:22

Data Factory contains a series of interconnected systems that provide a complete end-to-end platform for data engineers.
1. **Connect and Collect**: The first step in building an information production system is to connect to all the required sources of data and processing, such as software-as-a-service (SaaS) services, databases, file shares, and FTP web services. The next step is to move the data as needed to a **centralized location** for subsequent processing.

Without Data Factory, enterprises must build custom data movement components or write custom services to integrate these data sources and processing. It's expensive and hard to integrate and maintain such systems. In addition, they often lack the enterprise-grade monitoring, alerting, and the controls that a fully managed service can offer.

2.**Transform and enrich**: After data is present in a centralized data store in the cloud, process or transform the collected data by using ADF mapping data flows. Data flows enable data engineers to build and maintain data transformation graphs that execute on Spark without needing to understand Spark clusters or Spark programming.

If you prefer to code transformations by hand, ADF supports external activities for executing your transformations on compute services such as HDInsight Hadoop, Spark, Data Lake Analytics, and Machine Learning.

3.**CI/CD and publish**:
Data Factory offers full support for CI/CD of your data pipelines using Azure DevOps and GitHub. This allows you to incrementally develop and deliver your ETL processes before publishing the finished product. After the raw data has been refined into a business-ready consumable form, load the data into Azure Data Warehouse, Azure SQL Database, Azure CosmosDB, or whichever analytics engine your business users can point to from their business intelligence tools.

4.**Monitor**:After you have successfully built and deployed your data integration pipeline, providing business value from refined data, monitor the scheduled activities and pipelines for success and failure rates. Azure Data Factory has built-in support for pipeline monitoring via Azure Monitor, API, PowerShell, Azure Monitor logs, and health panels on the Azure portal.
(Vlog)Berlin in Lockdown state(not app state) - view through a software engineer's eye(cam) 🇩🇪
Tags: vlog, showdev, berlin, happynewyear2021
Published: 2021-01-04 14:26:40

Happy New Year, 2021!
First VLOG on my channel 😊 ( With Fireworks )

👉 Berlin in lockdown state(not app state) - view through a software engineer's eye(cam) 🇩🇪

Like many cities in the world, BERLIN is also going through LOCKDOWN. I tried to capture few moments in this Lockdown state.

(I wore masks and kept distance from other people. Please keep distance if possible and wear masks)

Enjoy 🌸

{% youtube xSWlyBL8Bcg %}

P.S: I am not a professional Photographer/VideoEditor, the quality could have been better!

SUBSCRIBE to YouTube Channel - https://www.youtube.com/c/TheDestroDevShow?sub_confirmation=1
LIKE FB Page - https://www.facebook.com/the.destro.dev.show/
Follow on Twitter - https://twitter.com/destro_mas
Follow on DEV - https://dev.to/destro_mas

Made with ❤️ in Berlin!

Cheers!
👋

<hr />
As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸

<a href="https://www.buymeacoffee.com/destrodevshow" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 45px !important;width: 117px !important;" ></a>
Increase stack trace size by modifying stackTraceLimit property
Tags: javascript, angular, node, typescript
Published: 2021-01-04 14:24:16

When we get an error while debugging Javascript, we usually check stack trace in the console window of a browser. The default limit of stackTrace is 10 lines. Our applications are usually very complex and we need more than 10 lines of stack trace. This can be done by using property stackTraceLimit of class Error.

In below example is the default stack trace limit which is 10.
```javascript
function testStackTraceLimit() {
  const hi = () => my();
  const my = () => name();
  const name = () => is();
  const is = () => sahil();
  const sahil = () => {
    throw new Error();
  };
  hi();
}

testStackTraceLimit();
```
￼![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8q6veqxjx65w0lreic3e.png)

As you can see we have 10 lines of stack Trace.

The limit can be set between **0 and Infinity**, negative or non numeric values are converted to 0.  So if the limit is set to 0, no stack trace is shown and if it is set to infinity, all the stack trace is shown.

```javascript
function testStackTraceLimit() {
  const hi = () => my();
  const my = () => name();
  const name = () => is();
  const is = () => sahil();
  const sahil = () => {
    throw new Error();
  };
  // hi();
  Error.stackTraceLimit = Infinity;
  console.log("Error stack trace limit: ", Error.stackTraceLimit);
  hi();
}
testStackTraceLimit();
``` 

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

Sometimes we need to reduce the noise of errors, there we can set smaller numeric value. In the next example I will change the limit to 3.

```javascript
function testStackTraceLimit() {
  const hi = () => my();
  const my = () => name();
  const name = () => is();
  const is = () => sahil();
  const sahil = () => {
    throw new Error();
  };
  // hi();
  Error.stackTraceLimit = 3; 
  console.log("Error stack trace limit: ", Error.stackTraceLimit);
  hi();
}

testStackTraceLimit();
``` 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7kg0gsfxk5xqn0mdls9g.png)

Happy Coding!
Simple React Context Hook
Tags: react, context, hook, typescript
Published: 2021-01-04 14:15:19

![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/qi38tbl3fo68wylqr8zx.png)
 then you can use it as
![carbon (3)](https://dev-to-uploads.s3.amazonaws.com/i/y9r8wgbzq5jfl4ifg40e.png)
Day 4 Challenge
Tags: javascript, challenge, webdev, 365daysofcoding
Published: 2021-01-04 14:13:49

Happy day 4 of 365 days of coding! Write a function that accepts a string of numbers or a number and converts it to a phone number format.

Examples:
```javascript
      phoneFormat(2359654144) //'235-965-4144'
      phoneFormat('2359654144') //'235-965-4144'
      phoneFormat(1234) //error: was not supplied enough numbers please pass a 10 digit number
      phoneFormat(23596541445) //error: was supplied too many numbers please pass a 10 digit number
```
¿Por qué empezar en la industria Tech en 2021?
Tags: spanish, tech, 2021, latam
Published: 2021-01-04 14:08:20

Ya estando en pleno siglo 21 en el año 2021, años en los que de niños visualizábamos una era futurista y totalmente diferente de al menos hace 20 años, con carros voladores, robots que nos ayudaban cotidianamente, etc... y aunque muchas de esas cosas aun no las vivimos, si que han habido muchísimos avances tecnológicos.

Avances que en ocasiones notamos, en ocasiones no y es porque la tecnología ha venido para formar parte de nuestras vidas, desde nuestro smartphone hasta los sistema o software que utilizamos en nuestra computadora, reloj, tv. Cada año las ofertas de empleos en la industria TI aumentan en comparación con otros sectores de la economía, y en el pasado 2020 fuimos testigos todos de ello.

Ahora bien, ¿vale la pena dejar mi trabajo actual para iniciar en algún trabajo de la industria tecnológica? bueno antes de tomar alguna decisión déjame contarte algunos beneficios de estos trabajos:

* **Excelentes sueldos**: esto varía bastante conforme al lugar donde vives y el puesto que ocupas, pero en general si realmente posees talento definitivamente habrán sueldos altos.

* **Trabajos remotos**: con la pandemia, el trabajo remoto se hizo algo normal en la mayoría de trabajos en tecnología. Trabajar desde tu casa es algo que no solo te ahorra dinero en transporte sino también algo mucho más importante, tiempo y esto a diferencia del dinero no se recupera.

* **Pocas herramientas de trabajo**: dependiendo del trabajo que ocupes, en resumen seguro necesitaras 2 cosas, una computadora (o un smartphone) y una conexión a internet.

Claro, no todo es color de rosa, si decides cambiar tu trabajo y posees cero experiencia en algún puesto en tecnología necesitaras prepararte y esto amerita tiempo y esfuerzo, por ello te recomiendo que hagas la siguiente estrategia: Continúa con tu trabajo habitual, porque ciertamente no podemos quedarnos sin dinero, y en tus tiempos libres prepárate, estudia, capacítate hasta poder optar por un puesto de trabajo. 

Sé que lo anterior se dice fácil pero requiere de voluntad propia para hacerlo, estudiar en esos momentos que llegas cansado del trabajo y no querer hacer nada. Todo en la vida necesita algún sacrificio pero créeme que la recompensa lo vale.

Bien... se que no di muchos detalles que como empezar en la industria de la tecnología y de donde puedes prepararte, la semana siguiente hablaré sobre esto así que atentos a lo que viene :)

siguiente post: [Como iniciar en la industria tech en 2021](https://dev.to/rhonsanchez/como-iniciar-en-la-industria-tech-en-2021-1lkm)
Import PBKDF2 hashed user passwords into Keycloak
Tags: keycloak, password, authentication, pbkdf2
Published: 2021-01-04 14:02:27

If you are in process of migrating to dedicated authentication provider Keycloak, you might need to retain original passwords from the source system.

Since I spent some time on getting creating users with already hashed passwords to work with Keycloak, sharing the API call that is needed to achieve this. Tested with Keycloak 9.0.5

```
POST http://localhost:8080/auth/admin/realms/master/users
Authorization: Bearer {{access_token}}
Content-Type: application/json

{
  "enabled": true,
  "attributes": {},
  "username": "admin",
  "emailVerified": "",
  "credentials": [
    {
      "credentialData": "{\"hashIterations\": 27500,\"algorithm\": \"pbkdf2-sha256\"}",
      "secretData": "{\"salt\": \"x/bm4Y3DcuV9eU97ervkPA==\",\"value\": \"1u7BLvfSPxQFpwc5jpGSA+88EGl9pZYKhaZ8YPIu9N4=\"}",
      "type": "password"
    }
  ]
}
```

Here salt must be Base64 encoded value.
An example creates a user with username "admin" and password "admin"

There are also online tools available to encode raw passwords, for example, https://8gwifi.org/pbkdf.jsp.
Code Splitting Explained
Tags: webdev, javascript, beginners, webpack
Published: 2021-01-04 13:25:15

---
title: Code Splitting Explained
published: true
description: You may have heard of it, you may not have, so what is code splitting?
tags: webdev, javascript, beginners, webpack
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/v6cqyht6ota0uttfjv32.jpeg
canonical_url: https://laurieontech.com/posts/code-splitting/
---


If you're familiar with JavaScript applications you may have heard the term code splitting before. So what does it mean?

## Definition

According to [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Code_splitting), "Code splitting is the splitting of code into various bundles or components which can then be loaded on demand or in parallel."

In other words, when you have different chunks of code you can make choices about how you load them. When you only have one big one, your hands are tied.

But what does code splitting get you? And why is it necessary?

## Performance

When your application is bundled up for use, it isn't just your application code that's included. The bundle also comes with all the third-party libraries your code uses. That can make for a pretty big bundle size! And as the size of this bundle increases, loading it can become costly.

Suppose all of that code had to be downloaded every time a user loaded a page. It could take a considerable amount of time until the page was usable. This is not a great experience for users.

## The solution

Code splitting allows you to break up the monolithic bundle into various smaller bundles. You can then load the bundles in parallel or implement lazy loading, delaying download of certain code until a user needs it.

## Tools

The most common tools for implementing code splitting are [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/). However, you may be implementing code splitting behavior without even realizing it.

## Async

You're likely used to code at the top of your file that looks like this.

```js
import MyScript from './my-script'
```

This includes `my-script` in your main application bundle.

However, there is another way. Suppose you only needed that script to run in a certain scenario.

```js
function myFunction() {
  if (condition) {
    import(`./my-script`).then(() => {
      // do something here
    })
  }
}
```

If you've read my [Node or Webpack post](https://laurieontech.com/posts/webpack-or-node/) you may recall that Webpack often has implementations of functions you think you're familiar with. In this case, the code above is using Webpack's import function, not the browser or Node.js supported dynamic import. It loads the script asyncronously, so that it doesn't hold up the rest of the code, and returns a Promise.

By doing this, the code inside `my-script` becomes part of a different bundle. The snippet above is performing code splitting!

## Is that it?

There is a lot to talk about here. Bundling and performance are vast topics! But this is a nice primer.
after cloning a react project from GitHub, I run the following commands in order to install all the required dependencies …
Tags: node, npm, react, webpack
Published: 2021-01-04 13:23:07

but got stuck in this error otherwise:

https://imgur.com/a/tcM25Nz

the order of executing terminal commands are:
npm install
npm audit
npm audit fix
npm audit fix --force

help me figure this out
TY <3
Learning To Learn [Efficient Learning]: The Pillars
Tags: productivity, todayilearned, codenewbie
Published: 2021-01-04 13:14:18

Hello Fellow Codenewbies 👋

**The Pillars** are the foundational concepts for efficient learning.

**Note:**
The 🗝 icon is the **takeaway note** of each part.

---

# The Pillars

## Everything Is A Game

When we frame our mindset that everything is a game, we allow two things to happen in our lives: 
1. [Growth mindset](https://www.ted.com/talks/carol_dweck_the_power_of_believing_that_you_can_improve/up-next)

  🗝 Our brains can be developed with enough effort and strategy.

  *We look at obstacles as a challenge and think of how to find the solution*, instead of thinking that we are not capable or not smart enough (*fixed mindset*).

2. [Locus of control](https://en.wikipedia.org/wiki/Locus_of_control)

🗝 Control of life.

 ✔ **Internal** locus of control
      Those who believe that events in their lives come from their own action.

 ❌ **External** locus of control
      Those who tend to blame outside factors than themselves for events in their lives.

  Just like playing a game where we control our player, **we are actually in control of our lives**.

## Feynman Technique

This technique is named after [Richard Feynman](https://en.wikipedia.org/wiki/Richard_Feynman).
It is about **bringing concepts to the basic level**.

🗝 To understand a concept, we need to be able to explain it in simple terms as if we are presenting it to a child.

## Trunk Based Knowledge

To be a successful learner, we must start from the tree's root, then move up to the leaves.

🗝 Start with learning the fundamentals (the why) before getting into details.

Something that we are learning might not be relevant 10 years from now.
But if we understand the basics, we can adapt to the changes.

## Efficiency Trumps Grit

Being busy shows that we are not efficient with our time management.

🗝 We need to use the right strategies to be efficient with time to get ahead of others.

---

Thank you for reading!
Last but not least, you can find me on [Twitter](https://twitter.com/AdiatiAyu). Let's connect! 😊
Giveaway Alert - Edition 02
Tags: discuss, giveaway
Published: 2021-01-04 13:14:03

Gitlab Meetup Community makes a distinctive attempt of KNOWLEDGE WITH A FASCINATING GIVEAWAY! <head><meta charset="UTF-8"></head><body><p>&#128512;</p></body>

Thrilled to earn your giveaway? Mark the following points in your 'TO-DO list':

* It's our pleasure inviting you to the meetup session happening on 9th of January, 2021. [REGISTER and become an interactive ATTENDEE of the session](https://www.meetup.com/GitLab-Meetup-Coimbatore/events/275278219).

* Follow us on [Twitter] (https://twitter.com/GitlabC), [Substack] (https://gitlab.substack.com/) and [Dev.to] (https://dev.to/gitlabc) platforms. 

As an attempt to boost our followers and attendees to take away a wonderful bag of information alongside Gitlab Goodies, we have decided to have 4 lucky enthusiasts among the attendees as the goodie winners.

So what's the wait for?

HURRY UP WE ARE WAITING FOR THAT 4 LUCKY WINNERS AT THE END OF THE SESSION!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3vnbkpx2u3zamj1iq3mv.gif)



<code><p><br>
<footer style="height:auto"><h3>*Follow our community for more updates*</h3><table><tr><td><a href="https://gitlab.substack.com/">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hplp6opfpywirwur2vmz.png "Official Website")</a></td><td><a href="https://twitter.com/GitlabC">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/00qhd8v9ma2t2l2xv4xh.png "Twitter")</a></td><td><a href="https://www.meetup.com/GitLab-Meetup-Coimbatore/">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aqq6pi897bk687d3kwwa.png "Meetup Community")</a></td><td><a href="https://www.linkedin.com/groups/8955040/">![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8u4886rik46g1bvvrx8d.png "LinkedIn")</a></td></tr></table></footer></p></code>
Interactive Menu Bar using JavaScript, SVG & CSS- JSitor
Tags: javascript, css, html, webdev
Published: 2021-01-04 13:00:40

An interactive menu-bar using SVG and CSS animations. 

![Loading Snapshot...](https://i.ibb.co/kGGTPh9/Screenshot-2021-01-04-at-6-28-02-PM.png)

{% jsitor cNiYPzdoz %}

Credits - [https://www.youtube.com/c/OnlineTutorials4Designers/featured](https://www.youtube.com/c/OnlineTutorials4Designers/featured)

Code - [https://jsitor.com/cNiYPzdoz](https://jsitor.com/cNiYPzdoz)