teleren/devto huggingface dataset:
Deploy, Run, and Monitor ML/AI models for free using Modzy Basic+
Tags: showdev, datascience, ai, machinelearning
Published: 2022-06-22 17:13:24

Using [Modzy Basic+](https://www2.modzy.com/l/893781/2022-06-20/531ql8), it’s possible to deploy, run, integrate, and monitor up to five ML/AI models at scale, for free.

Organizations everywhere are investing heavily in data science tools and talent. But research shows that more than half of models developed never make it into production, and what’s more, it can take up to nine months to integrate these models into systems at scale. We knew there had to be an easier way to accelerate the time to value from ML/AI, so that’s why we created Modzy Basic+.

With Modzy Basic+, users gain access to enterprise-grade MLOps & ModelOps functionality, without the price. It’s now easier than ever to integrate ML/AI models into production applications and manage their lifecycle over time. Users can deploy up to five of their own models from 15+ training tools and frameworks as long as they can run on a CPU and 4GB of RAM. From there, models can be easily integrated into web apps, mobile apps, pipelines or any other tool using our APIs and SDKs, and users can run up to 10,000 inferences per day.

[Modzy Basic+](https://www2.modzy.com/l/893781/2022-06-20/531ql8) is a gamechanger for data scientists, ML engineers, and developers who need an MLOps & ModelOps platform, and are looking to accelerate the time to production AI. With our documentation and tutorials, it’s easy to get up and running in a matter of minutes. To learn how you can get started with Modzy Basic+, be sure to tune into our Discord server on Thursday, June 23 at 12:30PM EDT. To get started for free today, check out the resources below:
•      [Getting started guide & docs](https://www2.modzy.com/l/893781/2022-06-20/531qbk)
•      [Deploying models to Modzy](https://www2.modzy.com/l/893781/2022-06-20/531qgg)
•      [SDKs](https://www2.modzy.com/l/893781/2022-06-20/531qgn)
Simple JSON to Excel in JavaScript - Code Snippet
Tags: javascript, tutorial, programming, node
Published: 2022-06-22 17:11:33

```js
const ExcelJS = require('exceljs');

const createWorkbook = async (worksheetName, jsonData) => {
  const workbook = new ExcelJS.Workbook()
  const worksheet = workbook.addWorksheet(worksheetName)
  
  const keys = [...new Set(jsonData.flatMap(item => {
    return Object.keys(item)
  }))]

  const values = jsonData.map(item => {
    return keys.map(key => {
      if(!item[key]) {
        return ''
      }

      return item[key]
    })
  })

  worksheet.columns = keys.map(entry => {
    return {
      header: entry,
      key: entry,
      width: 24
    }
  })

  values.forEach(value => worksheet.addRow(value))

  return workbook
}
```

Or use my npm package [json-to-excel](https://www.npmjs.com/package/@costamatheus97/json-to-excel)
Interview tips from a Senior Meta Frontend Engineer
Tags: tutorial, webdev, programming, beginners
Published: 2022-06-22 17:11:08

Hackpack Founder Interviews a Senior Meta Frontend Engineer. They started off as a music major before learning C and entering the world of computer science!

Check out the full story and video here: https://www.youtube.com/watch?v=OWxw1FTKo5I&t=7s

### Join the community

Looking for a study partner? Hackpack is the most active community of engineers studying for programming interviews. We hold each other accountable, provide support, and fight burnout to study more efficiently and get the job faster.

Apply [Here](https://www.hackpack.io/) 

[Events](https://discord.gg/VQkMr234zk?event=970275330294153257) | [Youtube](https://www.youtube.com/channel/UCfotE5RL1pfhIZ0fv2kAN9Q) | [Twitter](https://twitter.com/hackpack_) | [LinkedIn](https://www.linkedin.com/company/hackpack-io/?viewAsMember=true) | [Newsletter](https://fangprep.substack.com/)
Possible to use go rod on repl golang project while debuging
Tags: go, repl, gore, rod
Published: 2022-06-22 17:10:16

While developing a web script that needs to perform many operations, I encountered a bug in the middle, but couldn't terminate the program to debug where the error occurred.

detail: 
https://github.com/go-rod/rod
/issues/629
https://github.com/x-motemen/gore/issues/218
Hiring! Remote / Hybrid with Visa for you & fam to Bangkok too!
Published: 2022-06-22 17:03:38

🚀 We’re an international new stealth startup (Fintech) worth $150m USD within 1.5 years! 🚀
<www.siriustech.io>

💥Hiring: Backend Developers preferably with Go lang skills or willing to learn!
Over 50-60 positions open
💥 Salary: Starts at USD 2K - NO LIMIT (Junior - Senior)
💥 Hybrid / Remote - up to you
💥 Tech founders were from the largest digital bank in the world

📍HQ - Bangkok, Thailand
✈️Non-Thai and prefer hybrid? Visa will be provided to you and your family to move to Bangkok!
💪🏻 Above market rate perks from leaves, salary and bonuses!
🤩Only 1.5-2 rounds of interviews + FAST processing times!

Send your resumes to charlie.w@siriustech.io   to request for the JD, ask more questions, learn why top talents in tech, commercial and management are joining Sirius today!
A unique Angular hover directive
Published: 2022-06-22 17:07:26

@angular/cli: 13.3.0

{% github anirbmuk/ng-hover no-readme %}

Again, a strange requirement at work and the engineer goes to the drawing board to stretch the framework, and `angular` never disappoints!

### What was needed to be done?
When the user hovers on one part of the page, some css effect should be applied on another specified part of the page, something like this:

![Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3p7dcuna5r2r8nmq0r9.gif)

Interesting, isn't it? Well there could be a million other simpler solutions, but I thought of building a custom angular directive which could be used in multiple places.

---
### The solution
The directive I built needed two inputs:
1. The reference of elements on which the style is to be applied.
2. The list of css classes to be applied.

```
export interface IGroupHover {
  elements: HTMLDivElement[];
  classList?: string | undefined;
}
```
```
@Input() set appGroupHover(config: IGroupHover) {
  this._elements = config?.elements ? [...config?.elements] : [];
  this._classes = config?.classList?.split(' ') || [];
}
```

> I have used `Tailwindcss` for this demo, but that is just because I find it easy to use. Tailwind is no way related to the original purpose.

> Also, for the sake of simplicity of the demo, I have only targetted `HTMLDivElement`, but you can extend this solution to any HTML element.

The directive utilizes `@HostListener` for `mouseenter` and `mouseleave` events.

On `mouseenter`, I apply the classes to the referenced elements.
```
@HostListener('mouseenter') onMouseover() {
  if (this._elements && this._classes) {
    for (const element of this._elements) {
      for (const userClass of this._classes) {
        userClass && element.classList?.add?.(userClass);
      }
    }
  }
}
```

On `mouseleave`, I remove the classes from the referenced elements.
```
@HostListener('mouseleave') onMouseleave() {
  if (this._elements && this._classes) {
    for (const element of this._elements) {
      for (const userClass of this._classes) {
        userClass && element.classList?.remove?.(userClass);
      }
    }
  }
}
```

And technically, this is all that the directive needs. Now let's see how to use it.

---

### The implementation
I have a grid layout of 3 columns, and I intend to hover over the middle column, while alternately applying the specified classes on the left or right columns. I have prepared a similar data-set.
While looping through this data-set, I set a `#left` view reference on the left column, and a `#right` view reference on the right column.
On the middle column, I apply the directive and pass these references and the classes I want to apply. So each middle column has its own directive instance, with its own HTMLDivElement reference and class-list to apply.

![app.component.html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wbbkzh9ysf9f9g4mirm.png)

And there you go! You can download the source code from [GitHub](https://github.com/anirbmuk/ng-hover).

Cheers :-)
[Anirban Mukherjee](https://anirbmuk.appspot.com/en)
When creating an API, keep these five things in mind (I mean it)
Tags: javascript, api, beginners, tutorial
Published: 2022-06-22 17:05:26

## 1. Documentation

Building an API that is simple to use requires thorough and organised documentation.

To make things as simple as feasible, you should offer documentation on the quick start guide, security, available endpoints, and code examples.

## 2. Versioning

You will make adjustments to update and modify data over the lifecycle of your APIs. Such adjustments may break it and negatively affect user experience.

Always plan updates carefully and version your API so that you have earlier versions as a backup, ready to utilise for your users.

## 3. Testing

Testing is a crucial step that is frequently missed while creating APIs.

You should test your API frequently, especially after making changes, to create a great API. You might discover that users are changing the data in unexpected ways.

## 4. API evaluation

You may learn more about how users interact with your API and how to best improve it to increase its effectiveness by using software to track your API analytics.

## 5. Who is your audience?

To improve your APIs performance strategy, you’ll want it to reach its target audience.

Publish it on IBM Cloud App Management, Oracle Java Cloud Service, AWS Step Functions, Axway - Appcelerator Platform, RapidAPI


![steps to consider while considers the next api development](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8o7n1pg011jnuhibvt3.png)

Thats all, Follow this kido on [twitter](https://twitter.com/SamuelSojin) for more exclusive content updates.
Possible to develop a fiddler extension which convert js code to golang code?
Tags: javascript, go, webdev, fiddler
Published: 2022-06-22 16:59:14

Possible to make such a function? Input theJS file, Output the Golang code.not on the command line.
just like this Chinese Fiddler extension (https://dl.pconline.com.cn/download/2820922.html )  ,but generate golang code instead of convert js to E language
Collaborative Infrastructure as Code using Terraform Cloud - Publishing Modules Private Registries
Tags: aws, terraform, iac, hashicorp
Published: 2022-06-22 16:47:08

I'd like to start this post with a great quote from The DevOps Handbook which says: "When new learnings are discovered locally, there must also be some mechanism
to enable the rest of the organization to use and benefit from that knowledge." Infrastructure as Code is not a new concept and it is already used in many projects. However, collaborating on IaC has not always been easy for developers. Many organization are struggling with sharing the knowledge and expertise of their developers with other teams. This is a difficult problem that private registries Terraform Cloud/Enterprise is aiming to solve.


In a previous post, we had a go on solving the cold starts for Lambda Functions. Now we want to  help the next person in our team preventing them from reinvent the wheel again.

This tutorial assumes you already have a Terraform Cloud account, if you haven't opened up an account yet, please use the links bellow to open one.

https://cloud.hashicorp.com/products/terraform


So how do you go about creating a private registry? 

We begin by creating the module that you'd like to publish. I am using [this](https://github.com/pedramha/terraform-aws-lambda) module. I personally prefer adding variables with smart defaults as much as I can. Of course, the consumer of this module is also going to need some of the outputs of this module to be used in their application, e.g. the ARN of the lambda function. so don't forget to add them in the output section.

After creating the module, we are ready to push it into Github. Please also be aware of the naming convention for your module, which follow the "terraform-<PROVIDER>-<NAME>" pattern.
Before we jump to terraform cloud, we need to build a release for our project in Github, follow this [this](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository) to build the release, OR, click on releases on the right pane of your repository, click on "draft a new release" choose a tag for the release (should follow x.y.z versioning pattern), give it a title and click on publish, and we are good to go.

Now jump to Terraform Cloud, and click on registry, then click on modules, publish, modules. If you don't see your VCS provider, you need to connect it with Terraform cloud before proceeding, please visit [this link](https://learn.hashicorp.com/tutorials/terraform/github-oauth?in=terraform/cloud) to do so.

Choose your repository, and click on Publish module! 

Congratulations on publishing your first Terraform Module.

In the next post, I will show you how to consume this module and integrate it into a bigger application.


The link to the Video: https://youtu.be/S5JTD3hWOug

Github repo: https://github.com/pedramha/terraform-aws-lambda
Tailwindcss vs Bootstrap
Tags: programming, webdev, css, devops
Published: 2022-06-22 16:42:52

Tailwindcss is beautiful in parts of fun 

and

Bootstrap is Helpful to develop website faster 

1. The main difference between TailwindCSS and Bootstrap is that Tailwind CSS is not a UI kit. 
2. Unlike UI kits such as Bootstrap, Bulma, and Foundation, Tailwind CSS doesn’t have a default theme or built-in UI components. Instead, it comes with predesigned widgets you can use to build your site from scratch.

1. Bootstrap is known for its responsiveness, whereas proponents of Tailwind CSS typically value the framework’s customizability.
2. The best choice for you depends on your priorities and project requirements.
How rollup's latest release affected our angular library build
Tags: angular, rollup, lerna, monorepo
Published: 2022-06-22 16:29:09

In one of our project at workplace we are using [mono-repo](https://www.toptal.com/front-end/guide-to-monorepos) architecture for our angular applications.
Following is the tech stack for the mono repo.

1. Angular
2. Lerna (to manage the packages at multiple application level)
3. NPM (package manager)

Folder structure:-
```
project
│   README.md   
│   lerna.json
|   package.json
|   package-lock.json
└───apps
│   │
│   └───angular-app-1
│       │   package.json
│       │   angular.json
│       │   ...
|   |
│   └───angular-app-2
│       │   package.json
│       │   angular.json
│       │   ...
|
└───SDK
|   |
│   └───angular-library
│       │   package.json
|       |   ...
```

The angular library located inside SDK directory is used to share the code between multiple angular applications. Majorly it contains services, translators and utility functions.
The npm package which is used to build angular library is **_ng-packagr_** (for more info visit [this](https://www.npmjs.com/package/ng-packagr) website)
ng-packagr internally uses rollup for building the angular library. See the highlighted package in below screenshot.

![ng-packagr's package.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fo17im8k8auzuiytx3u7.png)

If you have noticed ng-packagr is using caret(^) sign to download the rollup package. It means every package version from **_2.0.0_** till **_< 3.0.0_** will be automatically fetched from npm registry whenever we are going to install the packages.

When rollup released its version **_2.75.3_** our angular library's build was suddenly started breaking. It throws following error.
`Cannot read properties of null (reading 'render')`
[Visit this link to see more details](https://github.com/rollup/rollup/issues/4517)

**Remediation**:-
When we checked the npm error log. We have found out that it was getting generated from rollup.js . But we were not using rollup.js in our root package.json so to know that from where it is getting installed we fired following command to identify the source package.
`npm list rollup`

![npm list result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8n5t6ywmqixg16plr8ow.png)
Then we got to know that it is being used by ng-packagr.
To resolve the issue quickly we added rollup's latest stable version in our root package.json without caret sign due to which the version specified by us was installed instead of the version which is required by ng-packagr.

```
"rollup": "2.75.2"
```

It was later fixed by rollup team in another release.
[Visit this link to understand the fix](https://github.com/rollup/rollup/pull/4519)
Git - Beginner's Guide
Tags: git, github, beginners, tutorial
Published: 2022-06-22 16:23:52


- Git

Git is version control system used to handle small to very large projects efficiently. 

Git helps in tracking changes in the source code, enabling multiple developers to work together on non-linear development.



## Installing git on ubuntu

- Update packages

```powershell
sudo apt update
```

- Install git

```powershell
sudo apt install git
```

- Confirm that you have installed Git correctly by running the following command :

```powershell
git --version
```



## Push your first project folder to git server

- How to initialiaze git in local system

After this command it will create empty git directory under current directory.

```powershell
init git
```

- Staging

After initiate git, now check what files are there for stating area.  File have have added or not.  If file not added to staging it will show filename as red color. 

```powershell
git status
```

- Add to staging

```powershell
#### to add single file or folder
git add filename
```

```powershell
#### to add all file and folder
git add .
```

After adding you can check status by git status,  file is added to staging or no.

And then now we need to commit changes.

Note:.  Add will only add in the queue,  it will not be added to versioning,  after commit it will be added to version control.

- Commit

```powershell
git commit -m "this helps to track changes readble easy,  so write what changes you made"
```
Cypress - counting the number of elements on a page
Tags: cypress, testing, javascript
Published: 2022-06-22 16:22:12

A scenario you may face is when you want to count how many of a certain element is on a page when using cypress.  There is a simple solution for this, especially if you use `data-cy` in your code to ease testing.

the command: `cy.get('[data-cy="element"').should('have.length', 2);` should get you the number of a certain element on a page.

If you do not use `data-cy`'s, then finding by class should work: `cy.get('class_name').should('have.length', 2);`.  Furthermore, if you want to find the number of elements in a table, you can do `cy.get('table_name').find('tr').should('have.length', 2);`

A more advanced way of finding elements can be done by this method: `cy.get('item:visible:contains("text")').should('have.length, 2);` where you are using `contains` to find all the items with a certain text you want.  The visible flag has to be used as `contains` can only find visible DOM elements.

Also, remember, you can simplify, without having to use `cy.get()` each time, especially if running multiple tests by declaring your items in a file and importing them into your test file as shown below.

```
const page = {
   item: () => cy.get('item'),
};

module.exports = page;
```
Then you can run `page.item().should('have.length', 2);` which can be considered better practice.

More information at https://docs.cypress.io/guides/references/assertions#Common-Assertions
Tense - Time Processing Tool (Refactored)
Tags: showdev, python, programming, tooling
Published: 2022-06-22 16:13:27

**Tense 1.0.0b release!**
https://github.com/Animatea/tense

**What's new?**
`aiotense` -> `tense`
- The project is completely redone and optimized for parsing. 

   By refactoring the project, we got a `~x22.31` speedup in processing complex strings (*using smart_resolver*).
   -> Was: *~0.00095030...μs* | Now: *~0.00004260...μs*

   And `~x38.28` speed up processing simple strings (*using basic_resolver*).
   -> Was: *~0.00062400...μs* | *Now: ~0.00001630...μs*

**Documentation here:**
https://animatea.github.io/tense/

**Not familiar with the project yet?**
`tense` - flexible time parsing tool.
Use existing functionality, create your own!
+ Create your own converters
+ Add your own units of time
+ Create your own parsers

**Coming soon:**
- Add your aliases to the numbers!

__Simple example:__
```py
from tense import TenseParser

time_string = "1d2minutes 5 sec"

digit_parser = TenseParser(TenseParser.DIGIT)
assert digit_parser.parse(time_string) == 86525
```

For more information see GitHub page!
Should you use semicolons in JavaScript?
Tags: javascript, beginners, webdev
Published: 2022-06-22 16:12:57

It's a topic that could seem trivial at first sight, but it actually causes some controversy among JavaScript developers. Semicolons, yes or no?

The syntax of JavaScript, just like many other languages, is based on the [C programming language](https://en.wikipedia.org/wiki/C_syntax). In that language, semicolons are necessary to end a statement (i.e. an instruction.)

But JavaScript interpreters use *Automatic Semicolon Insertion*, a system that "inserts" semicolons before a line break in some circumstances. It doesn't literally insert it in the code, the interpreter acts as if there were a semicolon where ASI decides to.

For example, In the following code:
```javascript
const myName = "Nico"
const myLastName = "Zerpa"
console.log(`My full name is ${myName} ${myLastName}`)
``` 
The ASI system will add semicolons after `"Nico"` on line 1, after `"Zerpa"` on line 2, and after the closing parenthesis on line 3.

The exact rules of automatic semicolon insertion can be found on [the official JavaScript/ECMAScript specification](https://262.ecma-international.org/12.0/#sec-automatic-semicolon-insertion).

The problem is that omitting semicolons can lead to ambiguous code in some cases where ASI doesn't work as you may expect. Here's an example of this:

```javascript
function getData() {
  return
  {
    name: "Mel",
    age: 49,
    favoriteFood: "Pizza"
  }
}

const melData = getData()
console.log(`Her name is ${melData.name},
  she's ${melData.age}
  and she loves ${melData.food}`)
```
The code above doesn't work because ASI insert semicolons in an unexpected place: after the `return` keyword on the second line. On top of that, the JS interpreter gets confused. Due to the added semicolon, it mistakenly thinks the object is a block of code. That triggers a syntax error.

Those kind of problems could be solved if you simply learn when ASI inserts a semicolon. However, coding is almost always a team work. Even if you know the ASI rules by heart, other developers may not, and they could not read the code properly.

For that reason, I decided to use semicolons. It's clearer for everyone, even for the JS interpreter.

---

If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
Paracetamol.js💊| #150: Explica este código JavaScript
Tags: javascript, webdev, spanish, programming
Published: 2022-06-22 16:07:24

## **<center>Explica el siguiente código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const obj = {
  a:1,
  b:2,
  c:[1,2,3],
};
const { c: [,,num] } = obj;
console.log(num);
```

A. `[3]`
B. `2`
C. `SyntaxError`
D. `3`

Respuesta en el primer comentario.

---