teleren/devto huggingface dataset:
Top 5 Must-have VS Code extensions
Tags: vscode, productivity, programming, webdev
Published: 2021-08-06 14:37:59

**Visual Studio Code is the most popular code editor or IDE (Integrated Development Environment) currently. It's a lightweight source code editor, open-source and easy to use.**

*Visual Studio Code extensions makes the life of developer's much easier just like [VS Code keyboard shortcuts](https://dev.to/iarchitsharma/visual-studio-code-keyboard-shortcuts-for-windows-1fhh)*

#####Here is a list of top 5 must have extensions :-


##1. Beautify
![Beautify extension VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4v2gro21hqyoxzky74x.png)
When it comes to must-have extensions Beautify top's the list. This extension beautify your javascript files, JSON, CSS, Sass, and HTML. The unformatted code in these files is converted into formatted, readable code by this extension.
This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

##2. Snippets Pack
![Snippet extension VS Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtsgkdef0mncetne9jye.png)
Snippets help you write repetitive code easily and quickly. However, this might not be enough. You can simply install an extension that includes a bunch of useful snippets according to your programming language.

##3. Bracket pair colorizer

![Bracket pair colorizer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei67du62d3jhp89s5ix8.jpg)
This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use. It adds color to each set of opening and closing brackets, making it easier to identify each set of brackets. It's up to you to decide whether you'd like to add this feature to VS Code or not. However, it's a popular tool and many developers find it useful.

##4. Live Sass Compiler
![Live Sass Compiler VS Code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei2duwaqpofel08hngml.jpg)
Live Sass Compiler Extension helps you to compile/transpile your SASS/SCSS files to CSS files at realtime with live browser reload.
This extension is helpful for web developers while developing web pages with Sass.

##5. Live server
![Live server VS code extension](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6z5ig8e4zegedkn8jt4.png)
The live-server extension automates the reload for you. After installing it, an automated localhost will be able to run in your browser, which you can start with a single button.
This is one of the most helpful extension for web developers.
Recursion Breakthrough
Published: 2021-06-25 04:58:09

Recursion! Ah!

I've never felt like I *didn't* 'get' recursion. On a high level, I feel like I have a strong intuition for where/when it's used and how it works. (Or maybe a strong enough intuition to fool myself into thinking I get it).

But I'll be honest here and say that actual recursion *problems* - those have tripped me up way more than I'd like. Way more.

Like so much of coding, the devil's in the details. When and what to return, what base case to establish, where and how to use inner functions. It's been hard for me to put those elements together successfully to solve problems.

Recently we were assigned the 'Rock Paper Scissors' toy problem. I spent a good chunk over two days thinking the problem out, and whiteboarding the problem solving process. What a pain. I have sheets of paper and snippets of code to attest to my futility. But it always felt like the solution was *right there* and so I didn't give up. 

Well, I found the solution. And better yet, I feel like I've found a way to solve these problems. It feels awesome.

I certainly didn't come up with anything groundbreaking. In fact, I'm sure if I re-watched our instruction from pre-course, there'll be a lot of what I did in there. But I know I learn from experience, and feeling the problem solving process emerge from my struggle makes me feel a lot more connected to it.

Tomorrow I'll post the code and walk through it in small chunks to demonstrate how I worked inside out and came to an answer.

---

On a side note, I was wondering about this learning process when I was in the midst of fighting with this problem. And I wonder about it now too, after having solved it. Did the struggle make me better?

Namely, how worth it was it (and is it) to put so much effort into coming up with my answer? One way I conceptualize it is that my brain/body is aware of how much time I put into this. So does it dedicate more computing resources (processing power, recall/storage, pattern recognition/algorithm efficiency) to 'learning' it, commensurate with the effort expended? Would that time have been better spent (when perhaps naively thinking about learning-ROI) from looking up the answer, or the solution to similar problems and then moving on to the next problem? In other words, same time invested, but spread across more problems? It's almost like running a marathon vs HIIT training. Both will get you in better shape. How is the learning experience (and result) different?

As I wrote above, I feel really connected to the solution -- at least I do for now -- and am optimistic that I have a new clarity when it comes to approaching and thinking about these problems. If that proves to be true, it was time well spent.
Treehouse Coding Courses
Tags: codenewbie, beginners, discuss
Published: 2021-08-06 13:54:21

Hello! I found a resource to learn some coding, it’s called Treehouse. They have highly rated programs. It’s not accredited but it seems like for $200/mo to go through their Techdegree program self paced it’s worth it. Or the $25/mo for unlimited access to classes for things like Ruby on Rails, HTML, CSS, Python, JavaScript, and so many more. 

Has anyone used this resource for learning? 

https://teamtreehouse.com/
Bot framework composer error - ONNX Multilingual model failed to load, Bot is failing Failed to find or load Model with path
Published: 2022-07-05 10:49:57

---
title: Bot framework composer error - ONNX Multilingual model failed to load, Bot is failing Failed to find or load Model with path
published: true
date: 2021-08-06 13:52:34 UTC
tags: 
canonical_url: https://lkgforit.com/bot-framework-composer-error-onnx-multilingual-model-failed-to-load-bot-is-failing-failed-to-find-or-load-model-with-path
---

In this article we will see how to fix the following error in Bot framework composer deployment for a multilingual bot:

Error details:

```
Multi Lingual Bot using orchestrator model (ONNX) is failing with error
Failed to find or load Model with path C:\home\site\wwwroot\model\pretrained.20210205.microsoft.dte.00.06.unicoder_multilingual

```

Steps to reproduce the behavior:

- Create Bot in Composer
- Added Skill (another Bot) , which brought in Orchestrator models
- Added multi lingual capabilities into the Bot'
- Runtime Bot fails with the below
- Failed to find or load Model with path 
- C:\home\site\wwwroot\model\pretrained.20210205.microsoft.dte.00.06.unicoder\_multilingual Fails in emulator as well. Path is local path when deployed to Azure, above path is given

Expected behavior

- English language works in same bot, this issue occurs when another locale is selected
- additional info: My Root dialog uses Orchestrator recognizer and immediate next dialog where it fails uses Regular expression recognizer/ i tried with orchestrator also and it fails there as well

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628257785326/Tg8dCYfUG.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628257792577/dsAsbWNpR.png)

If the failure is happening only when you deploy multilingual bot to Azure can you please verify on your Azure deployment if that folder C:\home\site\wwwroot\model\pretrained.20210205.microsoft.dte.00.06.unicoder\_multilingual exists?

It is possible there is a missing file in the multilingual model causing this only on deployment to Azure. Can you try opening your bot project folder and open the .csproj file locally, and modify the includes to include _\*/_.model.

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1628257875578/LmYzMtE6H.png)

Reference:

[https://github.com/microsoft/BotFramework-Composer/issues/7892](https://github.com/microsoft/BotFramework-Composer/issues/7892)
FTP Service in SFCC - SFRA Architecture 📞
Published: 2021-08-06 13:36:50

####Hi guys! 🖖

Have you to work with FTP service but it is your first time? 
Don’t worry about it, SFCC provide a class called LocalServiceRegistry, with this class you can managing some request like **HTTP, FTP and SOAP**.
First of all we have to create a service in business manager on SFCC.

### Let’s create service credentials and service profile: 🛠️
Go to **Administration -> Services**

Here we have three tabs:
1. Services;
2. Profiles: here we can specify ms time-out after a maximum number of failed call.
3. Credentials: here we have to setup service credential.

#### Now we go to setup service credential:

![New Service Credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hagm5t98w9iafu979c2q.png)

#### Go setup service profiles: 

![Pasted Graphic 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dw8okosn7kdxdzp2b7fp.png)
 
#### And at the end we can setup Service:

![Pasted Graphic 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/61vm5ww72b1vx61ydda5.png)
 

#### After created service in business manager we can write our service call:

* Create a file under the path cartridge/scripts/service.

* Require LocalServiceRegistry.

![Pasted Graphic 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkkdt3v37wdk37vpohyu.png)

_LocalServiceRegistry.createService()_ accepts two parameters, first is the name of the service, second parameter passed is a config object were we create request and parse the response.
**_createRequest_** must have service passed as parameter, setOperation() method is exclusive for ftp service, you can find full list of operation you can execute [Here](https://documentation.b2c.commercecloud.salesforce.com/DOC2/index.jsp?topic=%2Fcom.demandware.dochelp%2FDWAPI%2Fscriptapi%2Fhtml%2Fapi%2Fclass_dw_svc_LocalServiceRegistry.html&resultof=%22%6c%6f%63%61%6c%73%65%72%76%69%63%65%72%65%67%69%73%74%72%79%22%20%22%6c%6f%63%61%6c%73%65%72%76%69%63%65%72%65%67%69%73%74%72%69%22%20)
After in **_parseResponse_** you can manipulate response and its returned data, for example you can iterate response data.

> As you have seen it isn’t difficult, indeed it is intuitive with LocalServiceRegistry class.

Now when you have to call this service you have to include it in a file and after use **yourService.call()**;
Write your first Cron Job with me.
Tags: linux
Published: 2021-08-06 13:28:04

![Cron Image](
https://snipcademy.com/img/articles/linux-command-line-cron-jobs/cron-main.svg)
For a long time, I was having an urge to write a cron job to automate some tasks. Here is a summary so you can do it too.
1. Little Background 
2. Setup
3. Write your cron job 

---


##1. Little Background


###1. What is Cron?
In simple words, it is a scheduler 

###2. What does a scheduler do?
runs a specified task at a specified time

###3. Where can you use it?
to automate any repeated task like syncing data or taking backups etc.

###4. How to write Syntax for cron.
for writing a cron file you just need 
(**specify the time**)+ (**specify the task**)

####Cron syntax sample



In General to specify the time we have 5 parameters (* * * * *)
1. minute
2. hour
3. day (month)
4. month
5. day (Week)

Example
`45 23 * * 6 /home/oracle/scripts/export_dump.sh`

In addition to this we could use some arbitrary scheduler expression such as
1. @yearly
2. @monthly
3. @weekly
4. @daily

Example 
`@weekly /bin/script.sh` 
This will run the script once in a week.

Cron expression syntax is very important for it to work use websites like https://crontab.guru/ and ensure that it works properly.

![Explanation for cron expression syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0cfg1t0uqjywuoj47nvp.png)  

---

##2. Setup
Although cron is installed in most Linux distributions you can check if it is present or not.
Just Type `crontab` and check.

---

##3. Write your cron Job


###1. To see if any cron job already exists
`crontab -l`

###2. Let's write a new cron job
`crontab -e` 
and since cron uses vi by default you may use the below command to edit it using your favorite editor
 `EDITOR=/usr/bin/vim crontab -e`

###3. Running a sample cron job
Open up your crontab and write
`0 0 * * * date >> /tmp/cron_output`

This will run every day at 00:00 in 24-hour format or 12:00 am in 12-hour format and will output the current date to /tmp/cron_output.


---


##Tips
1. Tests your cron job before deploying. 
2. Remember that **cron jobs** run on a separate thread(daemon thread) and sometimes may have different behavior than intended.




Stay tuned for more. 
***Next coming up***: Sending Automated WhatsApp message using cron
Have you seen the weirdest frontend-related logo?
Tags: webdev, html, design, canvas
Published: 2021-08-06 13:26:31

## Problem
Recently, I've created [a post](https://dev.to/sip3/how-to-achieve-top-notch-scrolling-performance-using-html5-canvas-k49) about HTML5 Canvas API and needed to make a cover image for it. I wanted to put a recognizable canvas logo on a solid background and applied custom colors, but I ran into a blocker.

## Starting Point
So, do you know what the Canvas logo looks like?

![HTML5 Canvas Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35v4e9efiqv6dxqqzdsh.png)

According to [Wikipedia](https://commons.wikimedia.org/wiki/File:Html5_canvas_logo.png), it is a suggestion for a logo of the HTML5 canvas element by [netgoblin154](https://www.deviantart.com/netgoblin154/art/HTML5-Canvas-Logo-309543653). It was published in 2012 and looks a bit outdated in 2021.

## Solution
So, I decided to make a more suitable logo for my purpose.
I used *netgloblin154*'s idea as a reference point, but started with a familiar HTML5 logo and colored it using an awesome [Nord theme](https://www.nordtheme.com/).

![HTML5 Canvas Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql7eodndw6ge1xccm6yh.png)

IMHO, it looks much more recognizable and emphasizes that Canvas API is a part of [HTML5](https://developer.mozilla.org/en-US/docs/Glossary/HTML5). 

Color regarding the updated logo is suitable for a dark background as is.
![HTML5 Canvas Logo on dark background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/shws4t83b9mc49qopm7r.png)
And works on light background with tiny color tweaking.
![HTML5 Canvas Logo on light background](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgycl8o6rr2y66mfqm52.png)

## Use it!
Now I want to share it with you guys. 
In case you face a similar task, you could download both variants of the updated logo from the [gist](https://gist.github.com/fromaline/f6a7b114028d7f358c035ac2a15b203c).

Happy blogging...
How to delete array in PHP
Published: 2021-08-06 13:26:18

We use the `unset()` function, which we use to destroy variables to subtract or destroy one of the arrays you create. In fact, you can use this function to destroy all variable types.

```php
<?php
$fruits[0] = 'Apple';
$fruits[1] = 'Pear';

// just to delete an array:
unset ($fruits[0]);
// to delete all:
unset ($fruits);
?>
```

Follow my blog for more [baransel.dev](https://baransel.dev/).
Basic commands in CLI
Tags: cli, tutorial
Published: 2021-08-06 13:25:03

Here is a summary of some useful commands:

| Command (Windows) | Command (Mac OS - GNU/Linux) |       Description      |
|:-----------------:|:----------------------------:|:----------------------:|
| exit              | exit                         | closes the window      |
| cd                | cd                           | change directory       |
| cd                | pwd                          | show current directory |
| dir               | ls                           | list directory/files   |
| copy              | cp                           | copy file              |
| move              | mv                           | move file              |
| mkdir             | mkdir                        | create a new directory |
| rmdir /S          | rm -r                        | delete the folder      |


Follow my blog for more [baransel.dev](https://baransel.dev/).
Operators in Java Explained

Tags: java, programming, webdev, webpack
Published: 2021-07-20 18:09:28

Operator are those who performs an action, for example + is an arithmetic operator that perform addition. They are various types of operators are available in java programming language.

Contents [show]

Types of Operator in Java
Arithmetic Operators
Assignment Operators
Auto-increment and Auto-decrement Operators
Logical Operators
Comparison (relational) operators
Arithmetic Operators
arithmetic operators are: +, -, *, /, %

+ is used for addition

– is used for substraction

* is for multiplication

/ is used for division

% is used for find reminder, % is called modulus(modulo) operator

Let’s take an example:

package com.sync;

public class OperatorsDemo {

    public static void main(String[] args) {

        int num1 = 300;
        int num2 = 30;

        System.out.println("num1 + num2: " + (num1 + num2) ); // addition
        System.out.println("num1 - num2: " + (num1 - num2) ); // subtraction
        System.out.println("num1 * num2: " + (num1 * num2) ); // multiplication
        System.out.println("num1 / num2: " + (num1 / num2) ); // division
        System.out.println("num1 % num2: " + (num1 % num2) ); // modulo
    }
}

/* output: 

 num1 + num2: 330
 num1 - num2: 270
 num1 * num2: 9000
 num1 / num2: 10
 num1 % num2: 0 

*/
Assignment Operators
Assignments operators in java are: =, +=, -=, *=, /=, %=

num2 = num1 would assign value of variable num1 to the variable num2.
num2+=num1 is equal to num2 = num2+num1
num2-=num1 is equal to num2 = num2-num1
num2*=num1 is equal to num2 = num2*num1
num2/=num1 is equal to num2 = num2/num1
num2%=num1 is equal to num2 = num2%num1
So, let’s take an example:

package com.sync;

public class OperatorsDemo {

    public static void main(String[] args) {

        int num1 = 10;
        int num2 = 20;

        num2 = num1;
        System.out.println("= Output: "+num2);

        num2 += num1;
        System.out.println("+= Output: "+num2);

        num2 -= num1;
        System.out.println("-= Output: "+num2);

        num2 *= num1;
        System.out.println("*= Output: "+num2);

        num2 /= num1;
        System.out.println("/= Output: "+num2);

        num2 %= num1;
        System.out.println("%= Output: "+num2);

    }
}
/* output:

 = Output: 10
 += Output: 20 
 -= Output: 10
 *= Output: 100
 /= Output: 10
 %= Output: 0

*/


Read More: https://codesnipeet.com/operators-in-java-explained/
Is there a programming language that you can call "the best"?
Tags: programming, learning, softwareengineering
Published: 2021-08-06 13:02:37

Is there a programming language that you can call "the best"?

When I was studying computer science at university, I had this thought several times. Now that I work as a full-time software engineer, I can say that the best programming language doesn't exist.😁 It's just a matter of personal preference, and it depends on what you are trying to build. 

Three criteria that I think can be useful when choosing a programming language to learn are:

🎨 **Your interests**: what do you like? Are you into mobile development? Then go with Kotlin/Java for Android, Swift for iOS. Data science? Python. Gaming? C++. Web development? JavaScript and PHP are great. The list goes on. 

📊 **Market trends**: some languages are more popular than others, and if you're looking to program professionally, ideally, you might want to stick with the top 5. Also, just because a programming language is more trendy for a year, it doesn't mean that the others become obsolete all of a sudden. Every year StackOverflow publishes a developer [survey](https://insights.stackoverflow.com/survey/2021#overview). It gives a great insight into what developers are learning. 

💭 **Complexity**: some languages take more effort than others to learn, are more verbose and strongly typed. Start with a relatively easy language and work your way up from there.

🔎 **Field**: I've noticed that some languages are more used in specific sectors than others. For example, in financial services Java is very popular, especially in large corporations. In healthcare, Python is predominant.

In a commercial setting, a language is chosen based on the type of application to build (for example: is it a mobile or web application that we're trying to develop?), the complexity, the time available, scalability, etc. 

Many factors need to be taken into account when considering a suitable language for a project. But if you're starting, the three criteria listed earlier should guide you in the right direction (I hope!). 

Happy learning!
Cumulative Layout Shift and how to disable Google's "People also search for" box
Tags: ux, tutorial, tips, google
Published: 2021-08-06 12:29:41

---
title: Cumulative Layout Shift and how to disable Google's "People also search for" box
published: true
date: 2021-08-06 12:29:00 UTC
tags: #ux #tutorial #tips #google
canonical_url: https://mmazzarolo.com/blog/2021-04-16-cumulative-layout-shift/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m6fy0771rg4ovmz7uu9.png
---

Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you’ve lost your place. Or even worse: you’re about to tap a link or a button, but in the instant before your finger lands — BOOM — the link moves, and you end up clicking something else!

Most of the time these kinds of experience aren’t dangerous, but they can be incredibly annoying — **just like the “People also search for” box in Google’s search result**.

<video autoplay controls loop muted playsinline>
  <source src="https://mmazzarolo.com/c2ff4373be11f06e60f4550085746218/google-cls.mp4" type="video/mp4"></source>
</video>

Nowadays, this annoying behaviour is measured with a metric known as [“Cumulative Layout Shift”](https://web.dev/cls/), which is one of the core pillars of Google’s [Core Web Vitals](https://web.dev/vitals/).  
And this year (2021), Core Web Vitals are starting to be used as [a signal for ranking Google Search results](https://developers.google.com/search/blog/2020/11/timing-for-page-experience). That’s funny, isn’t it?

Anyway, I hate this box.  
With this post, I just wanted to point out that I’m keeping track of a few ways you can disable the “People also search for” box in a [GitHub Gist](https://gist.github.com/mmazzarolo/34e5418aade64abe7618885e0c36d8a2). 
Comments and contribution are welcome!

{% gist https://gist.github.com/mmazzarolo/34e5418aade64abe7618885e0c36d8a2 %}