teleren/devto huggingface dataset:
Azure ML Experiments and Runs
Tags: azure, azureml
Published: 2021-03-13 11:39:02

>
An experiment is a grouping of many runs from a specified script. It always belongs to a workspace. When we submit a run, we provide an experiment name. Information for the run is stored under that experiment. If the name doesn't exist when we submit an experiment, a new experiment is automatically created.  

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

>  
A run is a single execution of a training script. An experiment will typically contain multiple runs.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1gstt676ddb1fsqk23cn.png)
 

A run has the following characteristics

* Metrics
* Child Runs  
* Outputs 
* Logs 

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o406hcph3hkvyztxh25o.png)
 
A run also has metrics and parameters associated with it

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk55lwy6cdan9cl8xbkf.png)
 
A run also has outputs associated with it

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/di7ya8tw1irisp5q3cur.png)
 
# Code    


## Create the workspace   

```
from azureml.core import Workspace
from azureml.core import Workspace
from azureml.core.authentication import InteractiveLoginAuthentication

sid = '<your-subscription-id>'
forced_interactive_auth = InteractiveLoginAuthentication(tenant_id="<your-tenant-id>", force=True)

ws = Workspace.create(name='azureml_workspace',
            subscription_id= sid, 
            resource_group='rgazureml',
            create_resource_group = True,
            location='centralus'
            )
```

## Create an experiment and a run              

```
from azureml.core import Experiment

# create an experiment
exp = Experiment(workspace=ws, name='trial_exp')

# start a run
run = exp.start_logging()

# log a number
run.log('trial', 30)

# log a list (Fibonacci numbers)
run.log_list('my list', [1, 1, 2, 3, 5, 8, 13, 21, 34, 55]) 

# finish the run
run.complete()

print('Finished logging')
```


## Create another run      

```
# start a run
run = exp.start_logging()

# log a number
run.log('trial2', 35)

# log a list 
run.log_list('my list2', [1, 1, 2, 2, 5, 5, 13, 13, 13, 13]) 

# finish the run
run.complete()
```       

*References*   

* [Azure Machine Learning documentation](https://docs.microsoft.com/en-in/azure/machine-learning/)
Time to start learning how to regex
Tags: resource, regex, learn
Published: 2021-03-31 17:04:00

---
title: Time to start learning how to regex
published: true
date: 2021-03-13 11:03:10 UTC
tags: resource,regex,learn
canonical_url: https://www.antopiras.dev/blog/2021-03-13-w-s-and-no-im-not-swearing/#2
---

It's time for me to come out: I've been working as a professional developer for 6 years and I've never managed to write a regex without intense googling and the help of [regex 101](https://regex101.com/).

This needs to stop, so I decided to take advantage of the current lockdown and spend my Saturday morning doing some googling, and as it turns out... regular expressions are not that complicated. At all.

![How to regex](https://www.antopiras.dev/images/uploads/how_to_regex.jpeg "How to regex")<figcaption>Image from <a href="https://twitter.com/garabatokid" rel="noreferrer" target="_blank" aria-label="Image from garabatokid">garabatokid</a></figcaption>

After a couple of minutes of googling, I landed on [RegexOne](https://regexone.com/) and found a great and exhaustive tutorial that takes you through the basics of writing regular expressions. The lessons are clear and concise and offer real-world examples with a nifty little exercise at the end of each chapter.

It took me about an hour to go through the 15 lessons of the basic tutorial touching everything, from the ABCs to _capturing groups._

Once you're done with all the lessons you can take the _Practice Problems_ which are useful tests that push you to write regular expressions that help in a developer's everyday life like:

- matching email addresses
- parsing HTML elements
- extract pieces of information from a log file

... and more.  
  
So, whether you're a seasoned developer or just starting out in this world, I highly suggest you try out this tutorial and use _Regex101_ as a reference and code generator (this utility is actually very useful!) for more complex regular expressions.  
  
I'll be diving more into this and I'll probably end up writing a follow-up, but for now, I'd say it's been a productive Saturday morning.
How to duplicate array
Tags: javascript, beginners
Published: 2021-03-13 10:57:11


If you run following script, something weird will happen, can you tell me ?  

```
    const arrayA = [1,2,3]
    const duplicate = arrayA 
    duplicate.push(4)
    console.log(duplicate,arrayA)
```

output for that example will be something like this
```
[1, 2, 3, 4] [1, 2, 3, 4]
```
Yes the value from `duplicate` array is correct as we expected, but why `arrayA` value is changed ? 


this happen because we did assignment `duplicate = arrayA` and assignment in array is working as reference, so when we try to copy an array using assignment what happen actually is new variable will copy reference to original array and not value of original array.


to handle this problem you can use spread operator to clone `arrayA`, spread operator is a new feature that introduce in ES6,

```
    const arrayA = [1,2,3]
    const duplicate = [...arrayA] 
    duplicate.push(4)
    console.log(duplicate,arrayA)
```
output for that example
```
[1, 2, 3, 4] [1, 2, 3]
```
Conditional animations with CSS properties
Tags: a11y, css, customproperties
Published: 2021-03-13 10:54:50

---
title: Conditional animations with CSS properties
published: true
description: Using CSS custom properties you can make sure that your CSS animations only apply where people want to see them.
tags: accessibility, css, customproperties
canonical_url: https://christianheilmann.com/2021/03/13/conditional-animation-with-css-properties/
cover_image: https://christianheilmann.com/wp-content/uploads/2021/03/carbon-1.png
---

Using animations, transitions and smooth scrolling is fun, but they also represent an accessibility problem. Various groups of people have a hard time using your products when things move and change all the time. 

This is why operating systems have a "reduced motion" setting you can turn on. Our CSS animations should respect these settings and only apply themselves when the user wants to see animations. The best way to achieve this is to wrap them in a [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query. You can use that in various ways [as described in this excellent article](https://web.dev/prefers-reduced-motion/) but they all come with the problem that you need to repeat the settings. 
There is a simpler way. You can use a custom property:

```CSS
@media (prefers-reduced-motion: reduce) {
  :root {
    --nomotion: none;
  }
}
html {
  scroll-behavior: var(--nomotion, smooth);
}
button {
  animation: var(--nomotion, rotate 1s infinite alternate);
}
```
This defines the CSS custom property `nomotion` as `none` when the user doesn't want to see any animations. If the user wants to see animations, it isn't defined and thus the CSS engine applies the fallback, which is your animation settings.

You can see this in action [in this CodePen](https://codepen.io/codepo8/pen/OJbdoEJ)

{% codepen https://codepen.io/codepo8/pen/OJbdoEJ %}

You can test it using the [reduced motion emulation](https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation) in the Browser Developer Tools. 

Here's a screencast showing this in action:

![Demo animation showing how to use Developer tools to simulate reduced motion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8h3bv2hv9lzdrciy8r4.gif)

{%youtube I46eCv4nKC8 %}
Aspect ratio for an higher score from Lighthouse CLS
Tags: webdev, css, codequality, ux
Published: 2021-03-13 10:45:47

---
title: Aspect ratio for an higher score from Lighthouse CLS
description: Getting a high score from Lighthouse means respecting the rules of the web, being rewarded by search engines, giving the guarantee of being able to let everyone read your content.
published: true
tags: webdev, css, codequality, ux
cover_image: https://web-dev.imgix.net/image/admin/BHaoqqR73jDWe6FL2kfw.png?auto=format
---
For the last project I worked on, the goal was to build a new modern, light and performing layout. All the most modern and crossbrowser frontend techniques have been used; e.g. _grid_, _flex_, _custom properties_, etc.
The final result was placed at the analysis of **Lighthouse**, a tool present on Chrome. In this phase, despite having respected the most canonical construction rules, we came across new measurement parameters defined in **Vitals** - https://web.dev/learn-web-vitals/
Among these parameters, I pleasantly discovered **Cumulative Layout Shift (CLS)**.

> Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.

Getting a high score from Lighthouse means respecting the rules of the web, being rewarded by search engines, giving the guarantee of being able to let everyone read your content.

How many times, due to line problems, has it happened to you to load a page, start reading the textual content and suddenly an image appears that moves, up or down, what you were reading? Really frustrating!

To solve this problem on the page https://web.dev/cls/ there are several tips, such as passing the measures via attribute (nein nein nein ...).
I preferred to recall the image in a div or link declaring a `.o-skeleton` class with _responsive_ and _aspect ratio_ properties (16: 9 or 4: 3).
 
Here is the example code. In your browser settings, you can set the page loading speed simulation.

{% codepen https://codepen.io/tamer_aka_remat/pen/LYbBqrd %}
Import SweetAlert2 into Laravel with NPM
Published: 2021-09-18 17:48:10

---
title: Import SweetAlert2 into Laravel with NPM
published: true
date: 2021-03-13 10:44:32 UTC
tags: 
canonical_url: https://dcblog.dev/import-sweetalert2-into-laravel-with-npm
---

 ![Import SweetAlert2 into Laravel with NPM](https://dcblog.dev/assets/images/blog/laravel-framework/import-sweetalert2-into-laravel-with-npm.png) 

SweetAlert2 is a great package for user-friendly alerts, normally I install by adding in script tags and then use the package as normal. This post will explain how to instead install with NPM in Laravel.

First, open your Laravel project in the terminal and add

```

npm install sweetalert2
```

This will install the package into package.json that looks like:

```

"dependencies": {
    "sweetalert2": "^10.15.5"
}
```

Next, we need to import SweetAlert2 into **resources/js/app.js **

Import to make the package available to the current file

```

import swal from 'sweetalert2';
```

If you want to use SweetAlert2 globally you can add it to a window object:

```

window.Swal = swal;
```

This can then be used directly in app.js or in any blade file.

Now we need to compile the changes into app.js by running:

```

npm run dev
```

## Using SweetAlert2 in a Blade file

To use in a blade file lets you need to ensure the content is loaded before attempting to use SweetAlert2 otherwise you will get an error. To do this we can add an event listener called DOMContentLoaded which will run only when the content is ready.

```

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   //content goes here
});
</script>
```

Here's an example of a confirmation alert:

```

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
   Swal.fire({
      title: 'Are you sure?',
      text: "You won't be able to revert this!",
      icon: 'warning',
      showCancelButton: true,
      confirmButtonColor: '#3085d6',
      cancelButtonColor: '#d33',
      confirmButtonText: 'Yes, delete it!'
    }).then((result) => {
      if (result.isConfirmed) {
        Swal.fire(
          'Deleted!',
          'Your file has been deleted.',
          'success'
        )
      }
    })
});
</script>
```
Responsive Personal Portfolio Website HTML CSS and JavaScript
Tags: html, css, javascript, portfolio
Published: 2021-03-13 10:42:58

Hello viewers, Today in this video you’ll learn how to create a Fully **Responsive Personal Portfolio Website using HTML CSS & JavaScript**. A single or one-page website is simply a website that only contains one HTML page. There are no additional pages like about, contact, etc. Nowadays most the peoples prefer single-page website for their personal portfolio or resume. The main benefit of the one-page website is, users can see all the valuable information just by scrolling.

Today you will learn to create a single-page website for your personal presentation. This post will be the best HTML CSS practice for beginners because they can learn the proper use of tags and properties. You use this as your own portfolio website by just changing the matters and links. The best face of this template is a minimal design with fewer codes.

So, Today I am sharing One Page Portfolio Template With HTML CSS Bootstrap. This is an attractive web template for your personal portfolio with responsive design. There I have used bootstrap to create a responsive layout, and have not used other libraries just used a little bit of jQuery for smooth scrolling.

If you are thinking now how this web template actually is, Then you can watch the video below to see all the features.

{% youtube 9DDiorNZiyw %}

Before sharing source code, let’s talk about it. As you know I have used Bootstrap for creating responsive layouts easily (get). Most of the works have been done in HTML file, because used special tags for elements like navbar, section, footer, etc. Bootstrap is very easy to use, you just have to place class and ID.

There are fewer line codes of jQuery for smooth scrolling when we click on any item in the navbar then its scrolls to the targeted container. There is some image of the element’s background, I have placed these for good-looking UI. BTW this design is inspired by a post on the dribble. As you can see in the preview there is a verticle timeline for showing experiences.

Now in the CSS File, I have done many works like placing all elements by giving margin and padding, font style, colors, element style, etc. I also have used CSS @media query for reduced font size in the small screen. Talk about extra things: I have used a google font and font-awesome library for icons.

**Download Code: [Click Here {Google Drive}] (https://drive.google.com/file/d/1Tt9PiCnhVC6Mh3GLbKznQ46ofXJGzv5I/view?usp=sharing)**

**Watch Video Tutorial: [Click Here {YouTube}](https://youtu.be/9DDiorNZiyw)**
How to iterate through objects in JAVASCRIPT ?
Tags: javascript, webdev, algorithms, node
Published: 2021-03-13 10:41:22

Given an object range={a:1,b:2,c:3} 
**How can we iterate through this object?**
It is not possible since objects are not iterable therefore we can't use **for .. of** loop and **spread operator**, and if we try, it gives us this error:

 *TypeError: Found non-callable @@iterator* 

When we use **for .. of** loop with objects, its **@@iterator** method is called. Yet, objects do not have a built-in iterator method like arrays and strings. Therefore, we need to implement the default iterator by ourselves.

To do that we need to add an attribute **Symbol.iterator** containing a function specifying how to iterate through this object which gets called when we iterate through the object and must return an **iterator** 

Iterator is simply an object that contains a next() method that returns an object, this object has two attributes : 
- **done:** a boolean specifying if we reach the last value or not. 
- **value:** specifying the next value in the iteration. 

And before that, we need to retrieve different values of objects with **Object.values()** to be returned and the **length** of object to check if we get to the last value and **index** specifying the current value.

The function is illustrated in the code below.

```javascript 
range[Symbol.iterator] = function () {
  let values = Object.values(this);
  let index = 0;
  let length = values.length;
  return {
    next: () => {
      return index < length
        ? { done: false, value: values[index++] }
        : { done: true, value: undefined };
    },
  };
}; 
``` 
Now we are able to iterate through this object through **for .. of** loop and **spread operator**. 

```javascript 
console.log(...range); 
// 1 5 6 8 

for (let x of range) {
  console.log(x);
} 
//1
//5
//6
//8
```


More details: 
**Symbol.Iterator:** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator 

**Iterator protocol:** https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#the_iterator_protocol
Python Zero to Hero - Ep.37 - NLP with BERT encoding can predict emoji?
Tags: python, beginners, nlp, machinelearning
Published: 2021-03-13 10:18:31

---
title: Python Zero to Hero - Ep.37 - NLP with BERT encoding can predict emoji?
published: true
description: To make our emoprint less useless (double negative, let me try again) more useful, we will see if we can use some NLP tricks, namely BERT encoding to do emoji prediction.
tags: python, beginner, nlp, machinelearning
---
To make our emoprint less useless (double negative, let me try again) more useful, we will see if we can use some NLP tricks, namely BERT encoding to do emoji prediction. If you have any questions or any suggestions about which Python topics to cover, please leave your comment at my [Twitch channel](https://www.twitch.tv/cheukting_ho)
FEC Day 16
Published: 2021-03-13 10:13:30

We're finally done!! I polished most of my section and left my review modal un-styled up until the very end. This was mainly because I knew it was going to be an arduous process. This was because it had like 35+ elements that would need to be styled using css grids and possibly a unique class for each of them. That's hours of work! When I finally tackled it however, I realized that I could recycle 6 of my classes across each characteristic. This reduced my need for an additional 30 classes which is something I'm grateful for. After completing that styling, I realized that I completed my last major task that I needed before presenting. I learned that when I just dove into code and tackled it line by line (no matter how tedious it seemed), time would move by quickly and it will get done. My section proved to be extremely repetitive for me. This has to do with the sheer amount of content I had to display. There were 6 characteristics and each one with 5 different possible values. That's 30 radio buttons that I had to make into controlled components! Now begs the question: would I have traded my section for a different one? Honestly, maybe. Although I enjoyed working with the rating stars and breakdown, I think I would of enjoyed perfecting the overview section's image carousel and zoom feature. Overall this experience taught me a lot about react/state management, agile team workflow, and planning for big projects.
FEC Day 14-15
Published: 2021-03-13 09:58:39

I finished implementing my sorting and filter features! The sorting took a lot of work in my server working with the API. One of the problems that I learned from was how to pull data out of the request. I thought that I could get it from the request's params, but the data was actually in the query! I only spotted this error by putting a debugger in my front-end, in my server endpoint, and in the api request made from the server.
March LeetCoding Challenge 2021 — Day 8: Remove Palindromic Subsequences
Tags: codenewbie, algorithms, programming
Published: 2021-03-13 09:50:03


Today, we will solve the 8th problem of the March LeetCoding Challenge.


## Problem Statement

Given a string s consisting only of letters 'a' and 'b'. In a single step, you can remove one palindromic **subsequence** from s.

Return the minimum number of steps to make the given string empty.

A string is a subsequence of a given string if it is generated by deleting some characters of a given string without changing its order.

A string is called palindrome if is one that reads the same backward as well as forward.

**Example 1:**

    **Input:** s = "ababa"
    **Output:** 1
    **Explanation:** String is already palindrome

**Example 2:**

    **Input:** s = "abb"
    **Output:** 2
    **Explanation:** "**a**bb" -> "**bb**" -> "". 
    Remove palindromic subsequence "a" then "bb".

**Example 3:**

    **Input:** s = "baabb"
    **Output:** 2
    **Explanation:** "**baa**b**b**" -> "b" -> "". 
    Remove palindromic subsequence "baab" then "b".

**Example 4:**

    **Input:** s = ""
    **Output:** 0

## Solution

If we get an empty string, we can return 0 because there is nothing to delete.

If we have a palindrome, we can return 1 because a palindrome can be removed at once.

If not, we can return 2. (At first we can remove ‘a’ or ‘b’ and then we can remove the remaining string)
{% gist https://gist.github.com/sksaikia/3aeef3a83ba58d8c418b2d0c3be44a07.js %}
Time complexity:O(n), n is the length of the string

Space Complexity:O(1), no additional space is used

The code can be found in the following repository.
 
{%github sksaikia/Leetcode %}

I have posted all the previous problems for the March LeetCoding Challenge 2021. You can check them out.

 1. [March LeetCoding Challenge — Day 1 — Distribute Candies](https://medium.com/dev-genius/march-leetcoding-challenge-2021-problem-1-distribute-candies-f37f66ea7ee9)

 2. [March LeetCoding Challenge — Day 2 — Set Mismatch](https://sourav-saikia.medium.com/march-leetcoding-challenge-2021-day-2-set-mismatch-4abd5ee491c9)

 3. [March LeetCoding Challenge — Day 3 — Missing Number](https://sourav-saikia.medium.com/march-leetcoding-challenge-2021-day-3-missing-number-ae8ee45a58cb)

 4. [March LeetCoding Challenge — Day 4 — Intersection of Two Linked Lists](https://sourav-saikia.medium.com/march-leetcoding-challenge-2021-day-4-intersection-of-two-linked-lists-a775449b5563)

 5. [March LeetCoding Challenge — Day 5 — Average of Levels in Binary Tree](https://link.medium.com/sC9L595opeb)

 6. [March LeetCoding Challenge — Day 6 — Short Encoding of Words](https://medium.com/leetcode-simplified/march-leetcoding-challenge-2021-day-6-short-encoding-of-words-7fed4bfae557)