teleren/devto huggingface dataset:
Object Detection with Javascript, the Easy Way!
Tags: objectdetection, javascript, ai, machinelearning
Published: 2022-01-20 03:08:28

If you are currently looking for an easy way to develop an object detection application using javascript, you are then coming to the right place. In this article, we will walk you step by step on how to build a simple yet elegant application that could detect 80 different classes of objects using just javascript.

https://medium.com/the-web-tub/object-detection-with-javascript-the-easy-way-74fbe98741cf
First Post
Tags: beginners, programming, firstpost, discuss
Published: 2022-01-20 03:07:21

Hi dev community,

Would like to explore more of the dev community and create a network with different dev's.
I first Started Coding at the age of 16, when we were taught C++ during the high school , From there on I learned various programs in C/C++.
Then when I joined the college I came across various seniors and teachers from wherein I studied Arduino coding and then App development using Java.
From there on I was very well enthralled on to the world of coding, and I became interested in web development and machine learning, and have done some projects in it.
Currently I am a budding developer and hoping to learn more from the dev community.
OCR with Javascript
Tags: ocr, javascript, googlecloud, vision
Published: 2022-01-20 03:06:54

Optical Character Recognition (OCR) is a widespread technology to recognize text inside images. It is used to convert images containing text (typed, handwritten, or printed) into machine-readable text data. In this article, we are going to create a simple OCR application with Google Cloud Version API.

https://medium.com/the-web-tub/ocr-with-javascript-e7639099fba
100 días de código: 56, agregando algunas cositas al portafolio
Tags: spanish, 100daysofcode, webdev
Published: 2022-01-20 02:58:30

¡Hey hey hey!

Hoy me la he pasando realizando correcciones a un proyecto que hice cuando recién comenzaba a aprender un poco más sobre el desarrollo web y con ello me di cuenta de que he mejorado bastante y eso me motivo más.

Con ello en mente les animo a realizar el mismo ejercicio y ver algún proyecto anterior para así darse cuenta que han progresado y aumentar la motivación para los siguientes proyectos.

También agregué los proyectos que quiero mostrar en mi portafolio y los links de la parte principal y aunque aún le faltan algunos detalles y las fotos que aún no me he tomado me gusta como ha quedado el resultado.

Puedes visitar [mi porfolio en versión beta](https://darito97.github.io/portafolio3/#myProjects)

Eso es todo por hoy, espero que les vaya super bien con sus proyectos y mucho éxito!. 
¡Adiós mundo! 

Foto del cover de [Jonatan Pie](https://unsplash.com/@r3dmax?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [unsplash](https://unsplash.com/s/photos/animals?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
Has anyone connected their JupyterLab desktop app to their conda environment?
Tags: help, python, jupyter
Published: 2022-01-20 02:34:01

Hello,

I prefer working with Desktop apps, as opposed to web based coding environments, and recently downloaded JupyterLab for Desktop and have tried to connect it to my conda environment with no success.

Has anyone been able to connect their desktop apps to their conda environment before?

I found a few tutorials online, but none have worked so far. I am unsure how to troubleshoot.
Are there good (sklearn) pipeline resources / articles?
Tags: help, python, programming, productivity
Published: 2022-01-20 02:33:18

Hello,

I'm trying to better understand pipelines in coding, especially when attached to a ML model. I have really struggled with this concept, even in guided classes.

I primarily code in Python, but would love to just learn more about what pipelines are used for in general. If I am able to get my certifications in python, I will try to learn R. So...any information on R pipelines would be helpful too!
#21 - Sum of integers in string CodeWars Kata (7 kyu)
Tags: javascript, webdev, tutorial, 100daysofcode
Published: 2022-01-20 01:47:44

##Instructions

Your task in this kata is to implement a function that calculates the sum of the integers inside a string. 

**For example:**

> Input --> "The30quick20brown10f0x1203jumps914ov3r1349the102l4zy dog"
> Output --> 3635.

---

##My solution:

```javascript
function sumOfIntegersInString(s){
  return s
    .split(/([^0-9])/g)
    .map(x => parseInt(x) )
    .filter(Boolean)
    .reduce((acc,el)=> acc+el,0)
}
```
---

##Explanation
First I splitted the string using a regex that matches the elements that are not numbers, so everytime an element is not a number it'll split.

> Input --> 'h3ll0w0rld'

> Output --> ['', 'h', '3', '1', '', 'l', '0', 'w', '0', 'r', '', 'l', '', 'd', '']

---

After that I converted every string element in the array to a number

> Input --> ['', 'h', '3', '1', '', 'l', '0', 'w', '0', 'r', '', 'l', '', 'd', '']

> Output --> [NaN, NaN, 3, NaN, NaN, NaN, 0, NaN, 0, NaN, NaN, NaN, NaN, NaN, NaN]

---

After that I filtered the array and I used Boolean so I would get every falsy element removed

> Input --> [NaN, NaN, 3, 1, NaN, NaN, 0, NaN, 0, NaN, NaN, NaN, NaN, NaN, NaN]

> Output --> [3,1]

---

At the end I just used .reduce() so I could sum all of the numbers left in the array

> Input --> [3,1]

> Output --> 4

---

**What do you think about this solution? 👇🤔**

[My Github](https://github.com/Cesardlr)
[My twitter](https://twitter.com/cesar__dlr)
[Solve this Kata](https://www.codewars.com/kata/598f76a44f613e0e0b000026)
Add Page Breaks in HTML to PDF Files with C# .NET
Published: 2022-01-20 01:41:42

---
canonical_url: https://ironpdf.com/docs/questions/html-to-pdf-page-breaks/
---

One major difference between [PDF documents](https://ironpdf.com/docs/questions/csharp-html-to-pdf-example-file-and-code/) and HTML is that HTML documents tend to scroll whereas PDFs are multi paged.

# Create a Page Break

To create a page-break in HTML you can use this code:

```html
<div style='page-break-after: always;'> </div>
```

# Avoiding Page Breaks in Images

To avoid a page-break within an image or table you may use the css _page-break-inside_ attribute applied to a wrapping DIV element.

```html
<div style='page-break-inside: avoid'>.
 <img src='no-break-me.png'>
</div>
```

# Page Breaks and Tables

As shown above, page breaks within tables can be avoided by using the CSS:

`page-break-inside: avoid`. This is better applied to a wrapping DIV than to the table itself to ensure the style is applied to a block level html node.

To duplicate table headers and footers across every page of a large HTML table spanning multiple pdf pages you may use an `<thead>` group within the table:

```html
      <thead>
            <tr>
                <th>C Sharp</th><th>VB</th>
            </tr>
        </thead>
```

**Advanced CSS 3**

To give greater control you may wish to use CSS3 in addition to your thead group:

```html

<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
```

# Alternative Options

IronPDF's API can also be used to construct and manipulate multipage documents by merging several documents together using the [IronPDF.PdfDocument](https://ironpdf.com/object-reference/api/IronPdf.PdfDocument.html) class editing methods.
I made a prismjs plugin for esbuild.
Tags: esbuild, babel, prismjs
Published: 2022-01-20 01:29:51

We have created a plugin that allows you to use the same settings when migrating from prismjs + webpack + babel to prismjs + esbuild.
It's easy to use because you just need to migrate the language and plugin information set in `.babelrc` to the optional arguments of the new plugin.
https://github.com/activeguild/esbuild-plugin-prismjs
C/C++ 的條件判斷
Tags: c, cpp
Published: 2022-01-20 01:26:14

許多人可能都是看網路上的範例自學 Arduino, 因此對於程式語言本身沒有太多的研究, 反正跑起來是對的就好了, 這就導致學了一陣子後, 常常會遇到困惑, 像是以下這個例子：

```c
void setup() {
  pinMode(13, OUTPUT);
  pinMode(2, INPUT);
}

void loop() {
  if(digitalRead(2))
    digitalWrite(13, HIGH);
  else
    digitalWrite(13, LOW);
}
```

就會有初學者問為什麼 [digitalRead()](https://www.arduino.cc/reference/en/language/functions/digital-io/digitalread/) 可以直接拿來當條件判斷？條件判斷不是都要有比較關係嗎？

## C 語言的 if 其實是看數字說話

如果你看 C 語言的規格書, 會看到 [if](http://www.open-std.org/jtc1/sc22/WG14/www/docs/n1256.pdf#page=145) 後面的小括號內要是一個運算式, 而 if 其實就是根據這個運算式的運算結果是不是 0 來決定要執行哪一段程式。只要運算結果不是 0, 就代表條件成立, 會執行 if 內的程式。

可是 digitalRead() 的傳回值是 HIGH 或 LOW, 跟是不是 0 有什麼關係呢？如果你打開安裝 Arduino 的資料夾, 在 hardware\arduino\avr\cores\arduino 下有一個 Arduino.h 檔, 在其中就可以看到 HIGH/LOW 的定義：

```c
#define HIGH 0x1
#define LOW  0x0
```

HIGH 就是 1, LOW 就是 0, 所以將 digitalRead() 直接放到 if 當條件判斷的運算式, 意思就是讀到高電位時條件成立。

## 比較運算子的運算結果也是 0 或 1

如果你看規格書上關於[比較運算子](http://www.open-std.org/jtc1/sc22/WG14/www/docs/n1256.pdf#page=290)的說明, 會看到關係運算子的運算結果不是 0 就是 1, 1 表示比較的關係成立。也正因為如此, 所以可以拿比較運算來當 if 的判斷條件, 把上述例子改寫成這樣：

```c
void setup() {
  pinMode(13, OUTPUT);
  pinMode(2, INPUT);
}

void loop() {
  if(digitalRead(2) == HIGH)
    digitalWrite(13, HIGH);
  else
    digitalWrite(13, LOW);
}
```

這兩種寫法效用相同, 但有實質上以及語意上的差異：

1. 第 2 種寫法實際上多做了一個比較運算, 然後才將運算結果給 if 判斷, 所以比較本格派的程式師會堅持第 1 種寫法執行效率比較好, 而且程式比較精簡, 應該要這樣寫比較好。

1. 第 2 種寫法在語意上比較清楚, 閱讀程式的人都會很清楚比較的條件是什麼？比較容易理解。

對於初學者, 我比較建議採用第 2 種寫法, 除非真的有必要計較細微的執行效率, 否則盡量採用清楚的寫法對初學者會是比較好的做法。

簡單的來說, C 語言是以 **0** 當**不成立、否、假、錯**的概念, 只要**不是 0**, 就是**成立、是、真、對**的概念。

## 但是 Arduino 是 C++

有人可能會說『可是 Arduino 是 C++ 語言, 跟 C 有一樣嗎？』。

沒錯, Arduino 採用的語言是 C++, 它的 if 是[把條件運算式的運算結果轉成 bool 型別](https://en.cppreference.com/w/cpp/language/if#Explanation)後, 再依據轉型結果是 true 還是 false 決定流程。而[轉成 bool 型別的規則](https://en.cppreference.com/w/cpp/language/implicit_conversion#Boolean_conversions)基本上就是剛剛提到 C 語言的概念, 0 會轉成 false, 其他值轉成 true。另外, C++ 的[比較運算子運算結果也是 bool](https://en.cppreference.com/w/cpp/language/default_comparisons#Defaulted_equality_comparison)。

因此, C 語言的寫法也適用於 C++, 不過老話一句, 我還是建議採用比較直白的方式撰寫程式, 避免誤會程式的意思。
How to kill processes running on localhost (macOS)
Tags: terminal, macos
Published: 2022-01-20 01:02:35

## Motivation

Sometimes a process, like a web server or running Clojure REPL, closes unexpectedly but the port is never released. I'd need to find that process and kill it so that I can rightfully claim my port back. 

## Find the process

```
netstat -vanp tcp | grep "*."
```

It will return something like this (note that the table scrolls to the right):

```
tcp4       0      0  *.3000                 *.* LISTEN      131072 131072  46834      0 0x0100 0x00000106
tcp46      0      0  *.8085                 *.* LISTEN      131072 131072  29254      0 0x0100 0x00000006
tcp46      0      0  *.8321                 *.* LISTEN      131072 131072  29254      0 0x0100 0x00000006
tcp46      0      0  *.8080                 *.* LISTEN      131072 131072  29254      0 0x0100 0x00000006
tcp4       0      0  *.61350                *.* LISTEN      131072 131072  29278      0 0x0100 0x00000006
tcp4       0      0  127.0.0.1.61933        *.* LISTEN      131072 131072   2951      0 0x0100 0x00000106
tcp4       0      0  127.0.0.1.45623        *.* LISTEN      131072 131072   2951      0 0x0100 0x00000106
tcp4       0      0  127.0.0.1.49489        *.* LISTEN      131072 131072   2951      0 0x0100 0x00000106
tcp4       0      0  127.0.0.1.49488        *.* LISTEN      131072 131072   2951      0 0x0100 0x00000106
tcp4       0      0  127.0.0.1.16494        *.* LISTEN      131072 131072   2901      0 0x0000 0x0000020f
tcp4       0      0  127.0.0.1.15393        *.* LISTEN      131072 131072   2901      0 0x0000 0x0000020f
tcp4       0      0  127.0.0.1.15292        *.* LISTEN      131072 131072   2901      0 0x0000 0x0000020f
tcp4       0      0  127.0.0.1.6463         *.* LISTEN      131072 131072    838      0 0x0100 0x00000106
```

## Identify the process

The 3rd column after `LISTEN` is the pid. Taking the first entry (a process running on `:3000`), I can safely grab its pid of `46834` and inspect it.

```
ps aux | grep 46834
```

It will return something like this:

```
clarice          46834   0.0  1.3 441950208 219760 s001  S+    9:06pm   0:25.95 /Users/clarice/.nvm/versions/node/v16.13.0/bin/node /Users/clarice/Workspace/demos/react/node_modules/react-scripts/scripts/start.js
clarice          58003   0.0  0.0 408628368   1632 s010  S+    4:52am   0:00.00 grep --color=auto --exclude-dir=.bzr --exclude-dir=CVS --exclude-dir=.git --exclude-dir=.hg --exclude-dir=.svn --exclude-dir=.idea --exclude-dir=.tox 46834
```

Based on this output, the first entry gives me the most information. I can see it's a Node.js application and it's coming from `demos/react` app. That's the correct one so I can kill it.

_The 2nd entry is always present on a terminal grep. I believe it to be the coloured output of the terminal._

## Kill the process

Now that I have the right process, I can kill it using `kill 46834`. If the process is stubborn and keen on staying alive, you can force it by using `kill -9 46834`

> (I think these commands are Unix based so it should work on Linux too)
Provider Cheatsheet
Tags: flutter, provider
Published: 2022-01-20 00:42:48

### ChangeNotifierProvider

```dart

ChangeNotifierProvider = ChangeNotifier + Provider

```

> Create an instance of ChangeNotifier.
(`ChangeNotifier`의 어떠한 원본으로 부터의 복제본을 생성한다.)

1. `ChangeNotifier` when needed, 필요할때 인스턴스 생성.(lazy),
2. `ChangeNotifier` no longer needed, 더이상 필요로 하지 않을때 메모리에서 지워짐.(dispose)

> Provide an easy way to access ChangeNotifier for widgets that need it, and rebuilds the UI if necessary
(`ChangeNotifier`를 필요로 하는 위젯에 `ChangeNotifier`를 쉽게 적용할 수 있는 수단을 제공하고 필요하면 UI 다시 만든다.)

 1. Constructor를 통해서 인스턴스를 전달할 필요없이 `Provider.of`를 통해서 `ChangeNotifier`의 인스턴스에 쉽게 액세스할 수 있다.
 2. Provider.of를 통해서 type T에 인스턴스를 적용할 때 두가지 방법으로 가능

   - `Provider.of<T>(context)` : 인스턴스를 액세스하고 변화가 있으면 리빌드. -> 데이터와 UI의 동기화
   - `Provider.of<T>(context`, listen:false) : 인스턴스를 액세스만 하고 변화를 추적하지 않는다.  -> Dependency Injection

---

### Provider extendsion methods
```dart
//1. value change not listen (변화 감지x)
context.read<T>() == Provider.of<T>(context, listen:false)

//* 2. value change listen(변화 감지O) + ChangeNotifierProvider, StreamPorvider, FutureProvider로 부터의 value를 listen.*/
context.watch<T>() == Provider.of<T>(context)

//* 3. property를 많이 가지고 있는 object의 특정 property만 리슨할 때 사용, 자기가 listen하고 싶은 것만 선별적으로 가능*/
context.select<T, R>(R selector(T value))
ex) 
//개의 이름이 변할때만 리빌드, 퍼포먼스 향상 도움
context.select<Dog, String>((Dog dog) => dog.name)

```
Pardot's new Email Builder Experience
Tags: salesforce, automation, email, css
Published: 2022-01-20 00:16:12

[Salesforce Pardot's new Pardot Email Builder content experience is the future of marketing automation](https://forcery.com/consulting-services-nyc/pardot-consulting/pardot-email-builder-experience-implementation/).  The new tool requires almost no coding knowledge, and is truly a drag-and-drop interface.  While HTML and CSS styling may be applied in certain regions of a template, the codebase itself is not accessible, making the resulting email template truly responsive in a way that[ Pardot marketing layouts and templates](https://help.salesforce.com/s/articleView?id=sf.email_template_builder_parent.htm&language=en_US) previously simply were not. 
<br>
The new Pardot Email Builder is really the future of the marketing automation platform. Assets and code are stored in the Salesforce database, NOT in the standalone Pardot platform. Using the new Builder requires setting up a Salesforce MyDomain, and implementing something called Salesforce CMS, which might require the support of a [Pardot Registered Consulting Partner](https://forcery.com/consulting-services-nyc/pardot-consulting/).
Convert Strings To Be URL Safe
Tags: python
Published: 2022-02-07 09:16:33

---
title: Convert Strings To Be URL Safe
published: true
date: 2022-01-20 00:00:00 UTC
tags: python
canonical_url: https://tech.serhatteker.com/post/2022-01/convert-strings-to-be-url-safe/
---

In order to convert your strings to be URL safe you can use python's built-in `urllib`:


```python
>>> from urllib import parse
>>> string_raw = "Test: Hey! this is an example string"
>>> parse.quote(string_raw)
'Test%3A%20Hey%21%20This%20is%20an%20example%20string'
```

`quote()` replaces special characters in string using the `%xx` escape. Letters, digits, and the characters `_.-~` are never touched. By default, this function is intended for converting the path section of a URL.

If you want to use your strings as query strings you can use `quote_plus`:

```python
>>> from urllib import parse
>>> string_raw = "Test: Hey! this is an example string"
>>> parse.quote(string_raw)
'Test%3A+Hey%21+This+is+an+example+string'
```

`quote_plus()` is like `quote()` but also replace spaces with plus signs. It is required for building HTML form values when building up a query string to go into a URL.

For more info you can look at official python doc: [quote], [quote_plus]


All done!




[quote]: https://docs.python.org/3/library/urllib.parse.html#urllib.parse.quote
[quote_plus]: https://docs.python.org/3/library/urllib.parse.html#urllib.parse.quote_plus
How to get the type of another variable in TypeScript?
Tags: typescript
Published: 2022-01-20 00:00:00

---
  title: How to get the type of another variable in TypeScript?
  published: true
  tags: TypeScript
  date: Thu Jan 20 2022 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-type-of-another-variable-in-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-f3babde974db970b968444dbaef61919.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-type-of-another-variable-in-typescript)
  
To get the type of another variable, you can use the `typeof` type operator in TypeScript.

### TL;DR

```ts
// a simple variable
let firstName = "John Doe";

// get the type of variable `firstName`
type SimpleType = typeof firstName; // string
```

For example, let's say we have a variable called `firstName` with a value of `John Doe` like this,

```ts
// a simple variable
let firstName = "John Doe";
```

Now to get the type of the variable `firstName` dynamically or programmatically, we can use the `typeof` type operator like this,

```ts
// a simple variable
let firstName = "John Doe";

// get the type of variable `firstName`
type SimpleType = typeof firstName; // string
```

Now if you hover over the `SimpleType` type, you can see that it is of `string` type which is what we want to happen.

We have successfully got the type of another variable in TypeScript. Yay! 🥳.

See the above code live in [codesandbox](https://codesandbox.io/s/get-type-of-another-variable-dynamically-in-typescript-ufsjmf?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Keep your Social Media Avatars up to Date
Tags: design, branding, ui, logo
Published: 2022-01-19 23:54:46

> **TLDR:** Refreshed my outdated avatar, which I use for social media.

---

## New Avatar

Since I use an illustrative self-portrait for my social media handles, it's sometimes hard for people to tell what I really look like IRL. Originally, I made my avatar back in 2018 or 2019. But since then, I have a different hairstyle. It's important to make your profile picture (regardless of medium) look like you as much as possible.

The original avatar was made in Photoshop, so the scaling doesn't work well since Photoshop is pixel based. I converted it to a vector image, and edited it in Illustrator so it scales to any image size (in SVG).

So here's my new avatar to match my curly hair:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/11vx02xdgpxszu4j2gqu.png)

---

## Design Process

This highlights the vector changes I made in this iteration (using Illustrator).


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zd5w38srkx82h4397fu.png)

---

## Old Avatar

And this is what my original avatar looked like (with my 2019 hair):


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

---

Thanks for reading!
Consider following me for more!

[My Blog](https://www.anthonydellavecchia.com/)
[Twitter](https://twitter.com/anthonyjdella)
[Dev Community](https://dev.to/anthonyjdella)
[HashNode](https://hashnode.com/)
[Medium](https://medium.com/@anthonyjdella)
January Gnarly Learnings #2: Business School for Engineers
Tags: business, management, career, productivity
Published: 2022-01-19 23:50:20

The former Director of Engineering at The Gnar, <a href="https://kevinjmurphy.com/">Kevin Murphy</a>, spoke at RailsConf 2021. The talk, which is cleverly described to the audience as an "accelerated MBA program for software engineers", is titled <em>"Engineering MBA: Be the Boss of Your Own Work"</em>. The presentation touches on several business concepts and explains not only how different strategies are employed by management teams, but also, how engineers can apply the concepts in their work.

<h2>Syllabus</h2>

<h3>I. Leadership</h3>
The opening section of the talk discusses <a href="https://en.wikipedia.org/wiki/Situational_leadership_theory">Situational Leadership</a> and the four different styles of leadership the theory proposes:

**1. Directing**
**2. Coaching**
**3. Supporting**
**4. Delegating**

For managers, the key to choosing the _right_ strategy involves evaluating the unique needs of the individuals on the team, and of the team itself. Not a manager or a team lead? Well, chances are you interact with one or more of them! Understanding these leadership styles can help you to better advocate for your needs and for the needs of the team.

<h3>II. Competitive Advantage</h3>
This section provides information about <a href="https://en.wikipedia.org/wiki/Competitive_advantage">Competitive Advantage</a> and three generic strategies used by organizations to gain market share:

**1. Cost**
**2. Differentiation**
**3. Focus**

These strategies, along with an organization's core competencies can be applied to decisions about whether or not a feature should be built in-house or outsourced. If the decision is made to outsource a feature, the economic impact should be considered, i.e should a paid third-party service be engaged or can we use a free library/integration?

<h3>III. Process Management</h3>
The final section of the talk covers <a href="https://en.wikipedia.org/wiki/Business_process_management">Business Process Management</a> and the five stages of process management.

**1. Design**
**2. Model**
**3. Execute**
**4. Monitor**
**5. Optimize**

So how does this apply to engineers? It is helpful to think about this in terms of maximizing efficiency. In general, we are probably all process managers even if we aren't fully cognizant of it. Some smaller examples include using <a href="https://git-scm.com/book/en/v2/Git-Basics-Git-Aliases">git aliases</a> or plug-ins for your text editor. On a larger scale, these stages apply directly to automation and feature delivery.

<h2>Looking for extra credit?</h2>

Check out Kevin's full talk on <a href="https://www.youtube.com/watch?v=6ldCGo29w5g">Youtube</a>.