teleren/devto huggingface dataset:
How to Left Trim a String in JavaScript
Tags: javascript, codenewbie
Published: 2021-06-29 19:39:40

If you want to remove leading whitespace from a JavaScript string, the [`trimStart()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart) is what you're looking for.
Equivalently, you can call `trimLeft()`, which is an alias for `trimStart()`

```javascript
let example = '        Hello World';
example.trimStart(); // 'Hello World'
example.trimLeft(); // 'Hello World'
```

The `trimStart()` function is a relatively recent addition to JavaScript, so you need a [polyfill](https://github.com/es-shims/String.prototype.trimStart) if you want to use `trimStart()` in Internet Explorer or Node.js < 10.0.0.
An alternative is to use the [string `replace()` function](https://masteringjs.io/tutorials/fundamentals/string-replace) with a regular expression.

```javascript
// \s is a metacharacter representing any whitespace character
// See https://www.w3schools.com/jsref/jsref_regexp_whitespace.asp
example.replace(/^\s+/, ''); // 'Hello World'
```

### Trimming Other Characters

You can also use `replace()` to remove any other set of characters from the beginning of the string.
For example, suppose you want to remove any leading 'Na ' strings.
You can use the regular expression `/^(Na )+/`.
The `^` means at the beginning of the string, `(Na)` means the group `Na`, and `+` means one or more.

```javascript
let example = 'Na Na Na Na Na Na Na Na Na Na Na Na Na Na Na Na BATMAN!';
example.replace(/^(Na )+/, ''); // 'BATMAN!'
```
TIL: Colorful test output in Go
Tags: go, todayilearned, gotest
Published: 2021-06-29 19:23:21

---
title: TIL: Colorful test output in Go 
published: true
description: use gotest for colorful test output
tags: go, til, gotest, golang
//cover_image: https://direct_url_to_image.jpg
---
The standard command line use when testing go:

```bash
$ go test
```

Colors your test output according to your terminal configuration.

[@rakyll](https://github.com/rakyll) has implemented a cool tool [`gotest`][gotest] for coloring your test output, so you have passing tests colored green, failing tests marked red etc.

```bash
$ gotest
```

You can customize the colors for failing tests and passing tests via environment variables using the palette of your terminal.

```bash
GOTEST_PALETTE="red,green" gotest
```

The first color being for failures and the second one being for passes.

![Colorful terminal test output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uml40omxvnwfrfqvwwxg.png)

To find the colors in for example **iTerm.app** open the Preferences, your profile and the color tab.

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

Use the names for the colors in the environment variables

## Resources and References

1. [GitHub: rakyll/gotest][gotest]

[gotest]: https://github.com/rakyll/gotest

This article was lifted from [my TIL collection](http://jonasbn.github.io/til/)
🎬Animated Sidebar Menu with HTML & CSS✨
Tags: html, css, webdev
Published: 2021-06-29 19:18:46

Hey Devs n this video you will learn how to create an Animated Sidebar Menu with HTML & CSS (No JavaScript).
 We'll walk you through step-by-step on how to create it and how to add it to your websites. 

---

{% youtube QPZrQ_xPVs4 %}

---
🏆 **Other Amazing Projects** 🏆
---
---


🎬Login & Registration Form Using HTML & CSS & JS
➤https://youtu.be/I5_T547tHf0

🎬Neumorphism Login Form | HTML & CSS 
➤https://youtu.be/QWh0S-3D7uY

🎬Amazing Social Media Buttons Hover Effects | HTML & CSS 
➤ https://youtu.be/P9pi4hq7BBA 

🎬Animated Login Form | HTML, CSS & JavaScript 
➤ Watch: https://youtu.be/ogNwc45qHKo 

🎬Slider Sign In / Sign Up Form | HTML CSS Vanilla JS 
➤ Watch: https://youtu.be/Wz5THk0-Y1s 

---
Java Quickies. The Call Stack
Tags: java, beginners, tristan
Published: 2021-06-29 19:04:19

#Introduction
- This series is going to be dedicated to the basic understanding of Java. When ever I find myself asking, "How does this work ?". I will create a blog post and put it here. This series will not be in order so feel free to read what ever post you find most relevant. All my references for this blog post can be found [HERE](https://ticketnote.dev/ticket/O5g1EPOYnjzu1uqVSLbP)

###What is the call stack?
- Now my reasoning for looking up what the call stack is, was actually recursion. If you try to learn recursion like I am currently trying to do, you will eventually run into the words `call stack`. In recursion all the previous method calls are stored inside the call stack. With that being said, we can get back to the question at hand. What is a call stack? Well, it is what a program uses to keep track of its method calls and is made up of `stack frames`, one stack frame for each method call. So when we call a method it gets added to the call stack. Also, notice the `stack` part of `call stack`. This tells us that the call stack operates on the basic stack principles of [`first-in-last-out'](https://en.wikipedia.org/wiki/Stack_(abstract_data_type)). That is why you will often read the terminology of popping and pushing to the call stack.

###What is stored in the stack frames?
- As I mentioned earlier the call stack is actually made up of stack frames, one for each method call. But what do these stack frames actually contain? Well, they mainly consist of 4 things:


- **1)** Local Variables(variables inside of methods)

- **2)** Arguments passed into the method

- **3)** Information about the caller's stack frame

- **4)** The return address. This is usually somewhere in the middle of the caller's code

- Each method call creates its own stack frame, which takes up space on the call stack. This becomes especially important when dealing with recursion which deals exclusively with repeated method calls. If you have too many stack frames added to the call stack you will get a `stack overflow` which is an common logic error in recursion.

#Conclusion
- Now I hope we can both use this information to tackle recursion.
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/TristAndroidDev).
- Also make sure to checkout my [YouTube](https://www.youtube.com/channel/UCN9jWE9COJ0wN1m4huDFqzw/playlists) channel for more programming tutorials.
how to give number format to a input box text while I am typing it
Published: 2021-06-29 19:00:58

<html>
    <head>
    <script>
        function format_num(id) {
            var number = document.getElementById("principal").value;        
            var checkedNew = number.split('.').join("");            
            document.getElementById("principal").value = checkedNew.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");                
        }
    </script>
    </head>
    <body>
        <form>
        <input type=text id="principal" onkeyup="format_num()" >
        </form>   
    </body>
</html>
GitHub Pull Requests with Screenshots Tip
Tags: github
Published: 2021-06-29 18:51:10

When you're making a pull request in GitHub and want to include screenshots in the description, you might be tempted to just throw the screenshots in with headings. I urge you, though, not to do that! Those screenshots take up a lot of room and there is a better way!

## Dropdowns

Dropdowns are truly the better way to add images to pull requests. By default they can be ignored and can be expanded if you want to look at them.

Here's a picture of a pull request description without using dropdowns. Notice how much room is taken up. I had to zoom out to 60% just to get it all on my screen!
![PR description without dropdowns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyh8l0td0anndd1hgjl2.png)

Now here's a picture using dropdowns. It's so much simpler.

![PR description with dropdowns](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfrkc4s7zsrqy05436ff.png)

### Syntax

I used to always google "github markdown dropdown" and used [this link](https://gist.github.com/citrusui/07978f14b11adada364ff901e27c7f61).

They are created using markdown like this:

```markdown
<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>
```

## Saved Replies

Just so that you and I don't have to remember this article or that GitHub gist in the future, you can make it easy by creating a saved reply. Those are accessed in the bar above the text area when creating a pull request description.

![saved replies button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdjvrhjze1dhng5hyl2c.png)

You can create a new saved reply through that button and make a dropdown saved reply. That's going to save me a bunch of time!
NavLink active ClassName using styled-components
Published: 2021-06-29 18:01:02

```javascript
npm i styled-components react-router-dom
or
yarn add styled-components react-router-dom
```
####slyled-navlink.js
```javascript

import styled from "styled-components"
 

export const StyledNavLink=styled(NavLink).attrs({activeClassName:"anyClassName"})`
color: black;
&.anyClassName{
color: red;
}
`;
```
#### *Note activeClassName accept string as className when NavLink is active so you can pass any className you like
Agile isn't just for Teams, its for Executives too!
Tags: agile, management, process
Published: 2021-06-29 17:53:58

---
title: Agile isn't just for Teams, its for Executives too!
published: true
description: Agile and upper management
tags: agile, management, process
---

In my current company we use SAfE as a framework, and really push the Agile envelope with a lot of Teams doing work cooperatively and across Teams in our Trains (that have lots of Teams cooperating).  The culture has been built up over time and we do well at cooperative planning and scheduling, keeping up the date on dependencies and workflows.  All of it good on the Team side.

With a recent merger of the company one thing that was missing was integrating with the other Teams we interacted with at times.  They loved the idea of our process and were happy to get on board, some did well as we integrated and Teams went out of the way to be accommodating.  For others, not so much.

Teams can do Agile and when they put their minds to it, this works well.

Teams of Teams can also do it, as they cooperate and communicate.  Being transparent on how dependencies are going there is a lot that can work well.

Even among different departments (Marketing, IT, etc) the process can work.

Though where it always needs that extra push is Upper Management.

Executives need to give more than lip service, it's easy to say "my whole Engineering Department is using Agile" but if they are waiting on equipment or resources from IT or HR (always need hires!) then things slow down.  You can adjust but the culture needs to come from the top.

More than lip service Executives need to push the culture, speak the words and walk the walk.  Be able to not just understand that the Teams working for them are doing cool stuff, but enable them from THE TOP so that Teams can continue doing cool things.

Companies make culture, and processes can enable that culture, but only so long as everyone is on board, otherwise its just Teams doing cool stuff.
Sh*ft Festival 2021
Tags: techtalks, eventsinyourcity, culture
Published: 2021-06-29 17:49:26

After helping with [Codecon](https://dev.to/heymarkkop/codecon-2021-33gg)'s tech event, the same organizer asked me to help with another event, the Sh*ft Festival. But this one is kinda different.

{% youtube YSLSy4igtUw %}

It's an online Digital Culture event made in a 100% [open collaboration](https://www.notion.so/Sh-ft-Collab-71da843f37b64010ab02d3f4cf1c84cf) format, pretty similar to the way we devs see open-source software.
So there were dozens of volunteers helping in several areas like creating content, contacting speakers, social media advertising and much more.
My role in this project was helping with the [website](https://www.shiftfestival.cc/)'s development, brainstorming ideas and supporting participants at the event's day.

But the coolest thing about this experience was the event being hosted on an awesome 8bit interactive meeting platform: [gather.town](https://gather.town/)

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ku1omf143i5co4280tx.png)
 
We've created an entire 8bit [map](https://codepen.io/gabrnunes/full/jOBdmWq), with several interactive objects (mostly with memes content) and with 7 indoor rooms in which 4 were used to host activities.

{% codepen https://codepen.io/gabrnunes/pen/jOBdmWq %}

We had talks, interviews, panels and [fishbowls](https://en.wikipedia.org/wiki/Fishbowl_(conversation)) about digital culture, such as startups impacts, podcasts, post pandemic world, social networks, internet's history, remote working, games, children & technology and much more.

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


 
As the last activity, we had a Happy Hour meeting with music, interactive conversation starter objects and lots of networking. It lasted more than we thought, by the way.

{% twitter 1408904085558943745 %}

The event, that happened on June 26th, was a huge success with over 200 participants simultaneously and lots of positive feedbacks.

I'll surely keep collaborating in the next editions and I hope to see you there!

{% instagram CQqpXLbFye8 %}

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qolam2mdh4ajgzwcaqdv.png)
ng update @my/lib - What's the order of executing custom Angular schematics? 🤹
Tags: angular, schematics
Published: 2021-06-29 17:38:36

**Custom Angular update schematics are executed in the alphabetical order by their names declared in `migrations.json`.**

When maintaining a custom Angular library and making breaking changes in major version, you'd like to provide your library users with a smooth migration path (nobody likes to spend much time fixing problems after upgrading npm dependencies, right?). For that purpose you can leverage scripts (aka. [Angular custom schematics](https://tomastrajan.medium.com/total-guide-to-custom-angular-schematics-5c50cf90cdb4#944f)) that will apply code modifications to fix the breaking changes directly in user's codebase - when running a command, i.e. `ng update @my/lib@2.0.0`.

All the migration scripts of schematics are declared in a json file, i.e. `migrations.json`. And each of them is assigned to specific version (so you can have different schematics for migration from 1.x to 2.0, and different from 2.x to 3.0).

But you might have multiple schematics targeted for the same version, i.e. 2.0.0. In case  the order of schematics matter, you need to be aware that they are executed always in the alphabetical order by the name. That's why we should care about the prefix convention in `migrations.json` declared in our lib, for example numbering `-01-`, `-02-`, ...:

```json
{
  "schematics": {
    "migration-v2--01-components": {
      "version": "2.0.0",
      "factory": "./2/component-migration#migrate",
      "description": "Migrate components"
    },
    "migration-v2--02-services": {
      "version": "2.0.0",
      "factory": "./2/services-migration#migrate",
      "description": "Migrate services"
    },
  }
}
```

To proof it's not the order of keys in the JSON that determines the order, but the alphabetical order of the keys (`migration-v2--01-components`, `migration-v2--02-services`), see the GitHub [@angular/cli source code](https://github.com/angular/angular-cli/blob/c1623c429eee44eb32045dcf94edcf0d7f5c30dc/packages/angular/cli/commands/update-impl.ts#L221) - sorting schematics by name.
Typing with different Input Methods on the web - Keywrite
Tags: keyboard, inputmethod, javascript, showdev
Published: 2021-06-29 17:37:49

[Keywrite](https://eyuelberga.github.io/keywrite/) is a JavaScript library that allows you to type non-latin scripts in any web based application using a standard keyboard. You can use it to type in any language without having to configure your operating system or installing a virtual keyboard software.

Keywrite supports dynamically changing between input-methods during runtime. This feature can become useful if we want users to choose from a selection of input methods.

For this demo we will be using the pre-made input-methods defined in the `@keywrite/ethiopic-input-methods` package. It is also possible to define your own input method. Read the [Docs](https://eyuelberga.github.io/keywrite/#/input_method) to know more about input-methods.

We will use a text-input and a textarea for this demo. We will also add an input-method selector and an on/off button for each field. 

We can `enable/disable` the Keywrite instance by modifying the `on` property:

```javascript
const addToggle = (instance: KeywriteWeb, btnId: string) => {
  const id = `#${btnId}`;
  const btn = document.querySelector(id);
  if (btn) {
    btn.addEventListener("click", () => {
      instance.on = !instance.on;
      btn.classList.add("btn", "mb-3");
      if (instance.on) {
        btn.classList.add("btn-success");
        btn.classList.remove("btn-danger");
      } else {
        btn.classList.remove("btn-success");
        btn.classList.add("btn-danger");
      }
      btn.innerHTML = `${instance.on ? "ON" : "OFF"}`;
    });
  }
};
```
Input-methods can also be changed by setting the `current` property to the name of the input-method we want:
 
```javascript
const addIMSelect = (instance: KeywriteWeb, selectId: string) => {
  const id = `#${selectId}`;
  const select: HTMLSelectElement | null = document.querySelector(id);
  if (select) {
    select.addEventListener("change", (e) => {
      const value = (e.target as HTMLSelectElement).value;
      instance.current = value;
    });
  }
};
```

Checkout this sandbox for the complete demo:
{% codesandbox keywrite-using-ethiopic-input-methods-ts-h14ow %}
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-06-29 17:34:18

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## Using TypeScript with React: A Crash-Course

@riyanegi is here to help developers use existing React and JavaScript knowledge to learn TypeScript. Great stuff!

{% link https://dev.to/riyanegi/getting-started-with-typescript-with-react-hooks-2021-5cfd %}

## Confessions of a recovering "Tech Hipster"

@knajjars used to spend a lot of time researching, consuming, and learning about the latest and buzziest trends in tech. It's awesome to be curious about the latest technology, but not when it burns you out. Thanks for sharing these valuable insights, Khalil!
 

{% link https://dev.to/knajjars/learnings-after-5-years-of-being-a-hipster-in-tech-1b0n %}

##  Making React Apps More Accessible

React fully supports building accessible websites, often via standard HTML techniques. In this article, @sreashi shares how you can make your React apps more accessible — today.

{% link https://dev.to/sreashi/accessibility-in-react-2m2n %}

## Take a deep breath...

... it's just one of the many ways you can undo some of the stress that coding can bring. Thanks for this fantastic list of stress-reduction tips, @chetan_atrawalka. Such an important topic.


{% link https://dev.to/chetan_atrawalkar/how-to-avoid-stress-during-coding-56f1 %}

## There is no objectively correct structure for a scalable app

However, there are some principles that can help guide you in your quest to building an app that scales. Thanks for walking us through this, @pietmichal_67. 

{% link https://dev.to/pietmichal/how-to-structure-your-app-in-a-way-that-scales-bkf %}


## A DEV history lesson

The DEV team loves historical tech deep dives, essays, and research projects. This one by @mr_victor about the history of JS does not disappoint!

{% link https://dev.to/mr_victor/the-history-of-javascript-1fp3 %}


##  Set up, build and run your own Chrome extension. 

@venkyakshaya shared this handy guide to building your very own Chrome extension ✨  In this example, you'll be making a count-down timer. What date are you looking forward to the most? 

{% link xhttps://dev.to/venkyakshaya/chrome-extensions-101-3dif %}


_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
Boy or Girl Paradox... What the heck is it??? 🤯🤷
Tags: probability, maths, statistics
Published: 2021-06-29 17:25:52

Hi friends,

I am a machine learning and data science enthusiast. I love playing with numbers and finding insights. I know many of you are, at least to some level. Even if you are not but you have some level of interest in mathematics, there is a great chance you will find this post interesting. 

Please let me know if you guys already knew this and if there are many more which I should check out, please let me know in the comments belows. I encourage all my fellow reader to read them too.

----

I like solving problems, sometimes I find it on renowned platforms like Kaggle and hackerearth. Randomly I came across this seemingly easy question but which blew my mind off [partly because I feel this problem is not articulated well!]

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

I thought I didn't have to think much about it. Because it is just so straight forward. I mean it is given that one child is a boy, only probability of the other child being a boy is `1/2` [unless otherwise stated].

I selected the 1/2 answer from the answer, it was a wrong one. Okay, it needed a little more thinking. I wrote down all the possibilities at least one of the child is a boy [we are already given this information]. 

```
[BB, BG, GB]
```

Therefore, another answer which is also equally likely according to the question is `1/3`. And as it turns out, this indeed is a correct answer. 

But how can we have two equally correct answers for this. In my view, both the answers, as per the problem statement is correct. 

I took to Google for adjudication, and again, Google didn't disappoint. Look what I found:

{% wikipedia https://en.wikipedia.org/wiki/Boy_or_Girl_paradox %}

I think it is a good read. I suggest you all to go through it (if you already haven't). 

----

Just wanted to share this information to this erudite community. Please feel free to reach out to me on:

Twitter: https://twitter.com/AashishLChaubey
LinkedIn: https://www.linkedin.com/in/chaubey-aashish

Please checkout my [Github](https://github.com/aashish-chaubey)
Loopple for AdminKit - Free Drag and Drop Dashboard Builder for Bootstrap 5
Tags: css, html, javascript, webdev
Published: 2021-06-29 17:18:34

Hi,

I recently launched a new theme to **Loopple**, a **Free Low Code Dashboard Builder** that aims to help developers to speed up their development process.

This new theme is built on top of **AdminKit**, an **Open Source Bootstrap 5 Dashboard**.

Any feedback would be gratefully received!

Links:

[AdminKit Builder](https://www.loopple.com/theme/adminkit)
[AdminKit Dashboard](https://adminkit.io/)
[Loopple Website](https://www.loopple.com/)
[Loopple Github](https://github.com/Loopple/loopple)

Thank you!