teleren/devto huggingface dataset:
Using Babel to write cross-browser modern ECMAScript
Tags: javascript, babel
Published: 2021-07-12 14:16:30

This is going to be a short write-up to demonstrate how Babel can make your modern JS more portable.

Here's a familiar situation you might relate to: You're a Javascript developer who wants to use ECMAscript 2015 features in your code, but you can't because you either a) have to support Internet Explorer or b) have to support mobile browsers. And believe it or not, with all the mobile-first craze, that's a very common concern!

So you're probably scratching your head thinking: "Well, how will I ever write ECMAscript 2015 like this?" Enter Babel.

Babel is an open-source JSX to JS compiler. So what it does is that it takes your element-wise JSX markup and converts it to JS that'll work on a particular browser. And what happens is you can insert your ECMAScript 2015 code inside the JSX and that will also get converted using polyfills for older browsers, and this allows you to utilize newer features that would otherwise result in a syntax error on some browsers.

##Installation and Running

Babel actually consists of a collection of packages. The library itself is located under babel-core, while the commands are contained in babel-cli and extensions to babel start with `babel-plugin-`. You usually want to install only `babel-cli` and this will automatically pull `babel-core`, and only install one of the `babel-plugin-` packages if you need that particular functionality.

Since it is a NodeJS package, you'll usually want to install it locally, not globally. This can be done with `npm install babel-cli`. You also need to install the `babel-preset-es2015` package as well because, without it, Babel will just spit out the input files onto the console. Then you can call Babel like this: `babel src --preset es2015 --out-dir dir`, where src is simply your root directory of source code, and "dir" is the folder where our files will be mirrored in but with the transpiled code, so that it's not sent to the console.

There are many other flags that can be passed to Babel such as -s, for source maps. Source maps are special files that assist in debugging Babel-compiled Javascript. Another useful flag is -w which means "watch the current folder for any changes in the files and automatically compile them". It's an integral part of making webapps automatically load after a code update. All of these settings, including presets, can be placed in a .babelrc file so that you don't have to spell them out on each run. See [this page](https://babeljs.io/docs/en/configuration#babelrcjson) for details.

---

Also, by using libraries such as [ui-logger-dom](https://www.npmjs.com/package/ui-logger-dom) and services like [BrowserStack](https://www.browserstack.com/), you can emulate any browser online to test your app on, and the console errors will be printed in the main (DOM) window instead of in the respective browser's console, which may be difficult to access.
What's New in Codesphere Version 1.13.0
Tags: changelog, webdev, programming, javascript
Published: 2021-07-12 14:16:14

As we are sure that you saw, Github finally built the singularity! Jokes aside, we have exciting news.. we just released v1.13.0 as the latest version of Codesphere!

The latest release includes new features to further improve your Codesphere experience.

##New Features
* Custom Plans
* Ability to give feedback via Fider​

##Fixes
* Improved the look and feel of our code search
* Navigate the terminal and file tree faster

---

###Custom Plan
You know what your apps need best, so Codesphere now allows you to pick the exact computing power for your project.

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

With custom plans, in addition to having our existing three tiers - Basic, Awake, and Boost, you can now select exactly how much storage, memory, and processing speed you want for your app, and only pay for what you really need

And of course, in keeping with our mission of making scaling your app seamless, you can adjust these values at any point for when you experience sudden user growth.

---

###Fider
At Codesphere, our users are the center of our design process. That's why you can now suggest features for Codesphere on our Fider:

https://feedback.codesphere.com/

Additionally, if someone has already voiced your concern or suggestion for improvement, you can upvote their comment.

--- 

###Improved Code Search and Terminal
Last but not least, we've done a number of notable bug fixes and improvements. Most notably, we've improved the look and feel of code search.

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

In addition, we've made our terminal and file tree work much faster. Our average IDE startup time is 70% faster, down to 17 seconds from a previous of 58 seconds. We'll be continuing to reduce these load times to make your Codesphere experience smoother.

---

####Thank You!

Our team is working hard to make Codesphere easier and even more enjoyable to use. Stay tuned for future releases!

As always, thanks for using [Codesphere](https://link.codesphere.com/BC).
Happy coding!
Does anyone here use an "uptime tracker"? If so what do you mainly use it for?
Tags: discuss
Published: 2021-07-12 14:10:16

Hi everyone,

I've been working on a side project to build an uptime tracker and I realized I've been making a lot of assumptions on who my users are and what sort of problems I am solving for them.

I wanted to reach out to the community here and get some of your thoughts.

1. Do you use an uptime tracker?
2. What is it?
3. What do you mainly use it for?
4. What do you *like* the best about it?
5. What do you *hate* the most about it?

You'd think that an uptime tracker would be a simple product, i.e. keep track of your website's uptime and alert you when it goes down. Instead what you find in the market is a host of services that do a lot more than simple uptime tracking. From page SEO, to page performance metrics, to on call services. 

So... what do you really use it for?

😃 If anyone has any better ideas on how I can reach out to "possible users" and get their thoughts please let me know!
Episode 9: Sneeze Decor
Tags: speaking, communities, mentorship, programming
Published: 2021-07-12 14:07:27

The magnificent Naomi Ceder drops by the café to talk Python and communities with Bojan and Jason. Meanwhile, the unicorn's cold is resulting in spontaneous redecoration of the café. Learn how Naomi, Jason, and Bojan all got started in Python in the first place.

From hacking a set-top box to innovative new ways to give conference talks, this conversation is every bit as interesting as the wallpaper that just appeared.

Listen now!

{% podcast https://dev.to/bughunters/episode-9-sneeze-decor %}

---

Naomi Ceder's Website: [naomiceder.tech](https://naomiceder.tech/)

Naomi on Twitter: [@naomiceder](https://twitter.com/naomiceder)

["A Long Petal of the Sea" by Isabel Allende](https://bookshop.org/books/a-long-petal-of-the-sea/9781984820150)

[Peter Hintjens — Our decentralized future (EuroPython 2014)](https://www.youtube.com/watch?v=QB7VXSc5H3A)

["Confessions of a Necromancer" by Peter Hintjens](https://bookshop.org/books/confessions-of-a-necromancer-and-other-stories/9781539178842)

Music by: [https://audionautix.com](https://audionautix.com)

Sponsored by Softerrific: [https://www.softerrific.com/](https://www.softerrific.com/)
Uptime Is For Amateurs w/ Brian Murphy
Tags: sitereliabilityengineering, devops, metrics, programming
Published: 2021-07-12 14:06:37

You’ve probably heard of Site Reliability Engineering, but what does it really mean? Brian Murphy knows.

As the SRE Manager at G-Research, Brian has spent his career building and managing successful SRE teams. He joins [Dev Interrupted](https://devinterrupted.com/podcast/uptime-is-for-amateurs/) to explain how SRE teams operate, what success looks like, and why uptime isn’t the most important metric.

#**Listen to the full episode**
{% spotify spotify:episode:5uGLguKl81YnkfGskp73IM %}

#**Episode Highlights include:**
* What success looks like for SRE teams
* What kind of engineer is best for an SRE role
* The most important metrics for SRE teams
* How to get started with SRE at your company

#**Join the Dev Interrupted Discord Server**
With over 1200 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.gg/devinterrupted)
![Join the Dev Interrupted Discord Community!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19j3dzgz4r4kzav3w6z8.png)
How to check if string is member of union type
Tags: typescript
Published: 2021-07-12 14:02:31

There's some ongoing debate whether `enum` in TypeScript should be used: [The Dangers of TypeScript Enums](https://dev.to/azure/the-dangers-of-typescript-enums-55pd)

A TypeScript `enum` is compiled to an object at runtime:

```ts
enum Suits {
  Hearts = "hearts",
  Diamonds = "diamonds",
  Spages = "spades",
  Clubs = "clubs"
}
```

```js
var Suits;
(function (Suits) {
    Suits["Hearts"] = "hearts";
    Suits["Diamonds"] = "diamonds";
    Suits["Spages"] = "spades";
    Suits["Clubs"] = "clubs";
})(Suits || (Suits = {}));
```

One benefit of this approach is being able to check at runtime whether a string is a member of the `enum`:

```ts
function isSuit(value: string): value is Suits {
  return Object.values(Suits).includes(value)
}
```

The alternative for `enum` is using a union type:

```ts
type Suit = "hearts" | "diamonds" | "spades" | "clubs"
```

Type information doesn't exist at runtime, how can we check at runtime if a string is a member of the union type?

```ts
function isSuit(value: string): value is Suit {
  return ["hearts", "diamonds", "spades", "clubs"].includes(value as Suit)
}
```

This works but there is an issue with this approach... When you add or remove members, we need to update the array. This is prone to errors because we might forget to update the array or the type. How can we do this automatically?

```ts
const ALL_SUITS = ['hearts', 'diamonds', 'spades', 'clubs'] as const;
type SuitTuple = typeof ALL_SUITS;
type Suit = SuitTuple[number];

function isSuit(value: string): value is Suit {
  return ALL_SUITS.includes(value as Suit)
}
```

We define the possible options using an array with a const assertion. A const assertion tells the compiler to infer the narrowest or most specific type it can for an expression. If you leave it off, the compiler will use its default type inference behavior, which will possibly result in a wider or more general type.


This gets compiled to

```js
const ALL_SUITS = ['hearts', 'diamonds', 'spades', 'clubs'];

function isSuit(suit) {
    return ALL_SUITS.includes(suit);
}
```

Which is a lot nicer than using an `enum`! 🤩

Let me know if this blogpost was useful! 😊
Week 3/4 of building an Uptime Tracker - Thoughts?
Tags: discuss, showdev
Published: 2021-07-12 14:00:27

## The story so far 
I've always wanted to build a SaaS product and I had the great idea of building an Uptime Tracker and doing it in a less expensive and more user friendly way than Pingdom.

I'm 4 weeks into my journey.

## The story continues
Week 3 and 4 have been the slowest weeks yet.

I'm completely off track of my original dev plan.

✅ Simple visualizations of check results
❌ Triggering Alerts.

What I did instead, yes I didn't procrastinate *completely*
* Wrote up my first blog post on dev.to covering how I setup [ChartJS with Rails6 and Webpacker](https://dev.to/jameel263/rails-6-webpacker-and-chartjs-2kek). 
* Listened to [Courtland's interview of Arvid Kahl](https://www.indiehackers.com/podcast/212-arvid-kahl) gave me a lot of food for thought.

I've been ignoring the elephant in the room, i.e. what's my USP of my uptime tracker and who would be my target audience. Initially I thought it would be devs since I really wanted to make something dev friendly with better API integrations. But thinking on this further, I had the realization that devs likely don't have a need for an uptime tracker. Instead it's business owners of websites (who could also be devs) that would be my main customer instead. 

I'm a bit unsure where such people would congregate though. Indiehackers who start a website business would definitely be a user. I'm unsure how to validate this.

So for Week 5 my plans are
* Narrow down who my users are and find a way to validate this.
* I'm not sure I'm ready to pivot on my ideas yet. We'll see though.

Some super useful links I've found so far. Highly recommended for those starting out in the indie hacker career.
* Arvid Kahl's interview which I already [shared](https://www.indiehackers.com/podcast/212-arvid-kahl).
* Michell Hanson's series on [finding your customers](https://www.getrevue.co/profile/mjwhansen/issues/finding-people-to-talk-to-you-when-you-don-t-have-any-users-409685).
* Tyler Tringa's series on [bootstrapping your business](https://tylertringas.com/micro-saas-ebook/). Specifically his [Meat Grinder approach](https://tylertringas.com/good-micro-saas-ideas/)

If anyone has any feedback please do send them my way 😃 
I certainly need it 😂
Busted! Create an ML-Powered Speed Trap
Tags: python, machinelearning, cellular, iot
Published: 2021-07-12 13:57:09

---
title: Busted! Create an ML-Powered Speed Trap
published: true
description: Build a "speed trap" that uses ML to identify vehicles, a radar sensor to measure speed, and a cellular module to report data to the cloud.
tags: python, ml, cellular, iot
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/96f3kly2wgb5l8dqn96c.jpg
---

One relatively positive side effect of living through a global pandemic has been filling the void with family walks.

Yep, we actually had to interact with each other.

One thing I started to notice, though, was the reckless driving on some neighborhood streets. With others in similar situations, walking around and crossing busy intersections, I thought it would be cool to stop assuming reckless driving behaviors and start **measuring the frequency of speeding** along some nearby roads.

So I did something about it!

{% youtube IpvHeAGUA7I %}

I built a portable "speed trap" that uses a machine learning model from [Edge Impulse](https://www.edgeimpulse.com/) to identify vehicles, a [doppler radar sensor](https://omnipresense.com/product/ops243-doppler-radar-sensor/) to measure speed, and a [cellular module](https://blues.io/?utm_source=devto&utm_medium=web&utm_campaign=featured-project&utm_content=speedtrap) to report data to the cloud.

![final speed trap deployment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfff9l6t0umez5c9dddz.jpg)

**Ready? View the complete tutorial over at [hackster.io](https://www.hackster.io/rob-lauer/busted-create-an-ml-powered-speed-trap-b1e5d1)!**
secretlint can mask the secrets
Tags: security, credentials, tool, ci
Published: 2021-07-12 13:49:44

---
title: secretlint can mask the secrets
published: true
description: secrellint 3.3 support --maskSecrets option
tags: security, credentials, tool, CI
//cover_image: https://direct_url_to_image.jpg
---

[secretlint](https://github.com/secretlint/secretlint) is a pluggable linting tool to prevent committing credential.

secretlint 3.3.0 support `--maskSecrets` option that mask the actual secret of outputs.

- [Release v3.3.0 · secretlint/secretlint](https://github.com/secretlint/secretlint/releases/tag/v3.3.0)

For example, `secretlint` found AWS Secret Access key and report it. With `--maskSecrets`, secretlint mask the secrets in outputs.

```bash
$ secretlint --maskSecrets .credential

/Users/user/.credential
  1:0  error  [AWSSecretAccessKey] found AWS Secret Access Key: ****************************************  @secretlint/secretlint-rule-preset-recommend > @secretlint/secretlint-rule-aws

✖ 1 problem (1 error, 0 warnings)
```

It will help you to integrate secretlint with CI like GitLab.

- https://docs.gitlab.com/ee/user/application_security/secret_detection/


For more details, see original issue.

- [Option or formatter to not echo the actual secret to stdout · Issue #176 · secretlint/secretlint](https://github.com/secretlint/secretlint/issues/176)
Digital certificates and what they do
Tags: security, tutorial, learn, inthirtyseconds
Published: 2021-07-12 13:35:22

Digital certificates are a key component in the TLS handshake. We often hear digital 'certs', but what do they actually represent? 
Digital certificates (also called public key certificate) is a way to prove the ownership of a public key. The contents are (but are not limited to):
* Info about the key (what type of key it is)
* Who the owner of the key
* The owner's public key
* The digital signature of a third party entity that verifies that whoever holds the certificate is who they say they are (this is called the issuer). This is (supposedly) unique, un-fakeable hash.
* Who the issuer is
* The expiry date of the certificate

Okay cool, so we have someone who approves the certificate.... how do we know they are a valid entity?! We do the same thing again - another third party signs on the issuer's certificate, till we get to the root certificate authority. Ok.... so who approves them? Well those certificates are self signed, and are stored on your laptop by the manufacturer. 

Here is a helpful diagram to show how this waterfall of approvals happens (this is called the 'chain of trust'):
![Screen Shot 2021-07-12 at 9.31.47 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zusnsj2zy46z2p327kt9.png)
 

In the next article, I'll go through more TLS components, and break them down like this.
Creation of a tool to calculate data from a PDF
Tags: react
Published: 2021-07-12 13:18:04

Hello to all!

I need to create a tool to calculate the steering angles of a given car from a path drawn on a plan.
Concretely, the tool will allow to import a plan in PDF format directly on a web page and to draw a path on top of it. Once the path is drawn and thanks to the dimensions of the car entered previously (length, width, wheelbase, ...), the tool should be able to deduce the steering angle. 
Algorithmically speaking, I have the formulas allowing from the different data to calculate the steering angle, but I do not know if such an integration is possible in react or with any other language. If you have some tracks or a step to follow to realize this kind of web plugin knowing that I am rather comfortable in web development (js, react, angular, php) as well as in software development (C, C++, Java) and that documentations do not scare me ;).
I put you captures of a software allowing the same functionalities but in much more complex. 

Choice of car dimensions: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anz0rf0k46tu143o8x4x.png)

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

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


Thanks for answer.
5 reasons why Go is taking over DevOps in 2021?
Tags: go, devops, cloud, programming
Published: 2021-07-12 13:03:53

Go is a compiled, concurrent, garbage-collected, statically typed language developed at Google. According to Rob Pike, one of the creators of Go, the language was designed by and for people who write - and read and debug and maintain - large software systems.

Go is an excellent programming language for engineering large software projects. Some of the most popular container technologies used in DevOps like Docker and Kubernetes are written in Go.

It is also loved by the Dev community. According to 2020 developer survey by Stackoverflow, Go stands at 5th position in the list of of most loved programming languages and at 3rd position in the list of most wanted languages to learn.

So what are some of the characteristics of Go programming language that makes it great for DevOps.


## Go programs are statically linked
When you compile a Go program, everything is included as a single binary and there are no external dependencies that will need to be installed on the targeted machine that the Go program is intended to run on. And this makes the deployment of Go programs really easy.

## Build and deployment of Go programs
Even though Go is a compiled language, it compiles directly into machine code as opposed to intermediate object code which is required for Java. Go was designed to be extremely fast. Here’s a small benchmark game comparing [Go vs Python](https://benchmarksgame-team.pages.debian.net/benchmarksgame/fastest/go-python3.html).

## Go is platform independent
Binary executables of Go programs can be produced for any platform like Windows, Linux and macOS. In order for a binary to be supported on the different operating systems all it takes is setting two environment variables: `$GOOS`, `$GOARCH`.

## Extremely performant language
Go program has fast compilation times and fast runtimes with lower resource usage like CPU and memory especially when compared to language like Python. As the compiler fails the run if there are unused imports, the compilation time is short. And as the code is compiled to machine code, it also executes fast.

## Availability of Standard libraries
Unlike Python which often requires the use of third party libraries to implement a particular Python program, the Go programming language has a standard library which includes a lot of built-in functionality that you will need as a DevOps engineer. 
This includes functionality like file processing, HTTP web services, JSON processing, native support for concurrency and parallelism as well as built-in testing modules.
___

Currently building [SigNoz](https://bit.ly/3jpbpd7) - an open-source alternative to DataDog, New Relic, etc. 💙

SigNoz's backend is written in Go.

SigNoz helps developers monitor applications and troubleshoot problems in their deployed applications. Check out our GitHub repo👇

{% github signoz/signoz %}