teleren/devto huggingface dataset:
JavaScript const
Tags: javascript, const, beginners, learn
Published: 2020-05-23 08:54:53

Topics covered in this video:

* What is const (constants)?
* What they are used for?
* The let keyword behavior vs the const keyword behavior with an example
* Access const object's value and change its properties

{% youtube 4HARgRzDmXc %}

Stay tuned for [updates](https://www.youtube.com/playlist?list=PLq2_2u8CDe3RSYnDqBlUNwHoJalovMK7j)!
Satisfaction as a Programmer
Tags: javascript, html, canvas, animation
Published: 2020-05-23 08:54:11

Whenever I looked at awesome graphic animation videos or posters, I felt a desire to make it by myself. I wanted to feel the satisfaction by making something so beautiful. But I never could because I am not a graphic designer. I am a Developer.

I have never worked with photoshop or adobe illustrator or any other tools like that. I do not even know other names. I guess I wanted to make those beautiful posters and animations but I did not want to use those tools. They never felt fun. I do not know why. Maybe because I am a programmer. 

Ever since I started to learn programming, I have worked on different languages and have made tons of projects. Now I think that maybe it’s time to make something visually beautiful. 
So yeah I can make animation because I am a programmer. 

{% youtube ysmjfRBgBT8 %}
A Package Optimization application
Tags: python, css, webdev
Published: 2020-05-23 08:38:25

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)

This is the application that I developed during Smart India Hackathon in 2019. This basically solves the problems of many companies regarding the packaging of their goods. 
It takes the physical and chemical properties of the packaging materials like plastics, glass, cardboard, aluminum, etc and its cost according to its area. It then applies a greedy algorithm to optimize the packaging area as well as material costs.

### `{%https://github.com/soumilk/Smart-Package}`

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)

I along with my team developed it using Python as backend, using bootstrap/HTML and CSS for frontend. For the database, we used Firebase.
[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Kirana automated invoice generator
Tags: octograd2020
Published: 2020-05-23 08:35:40

## My Final Project
Edge computing-based invoice generator and can differentiate up to 46 classes with respect to the size of the product.
## Demo Link
 https://www.youtube.com/embed/xyTsDTEi42E
## Link to Code

[Note]: # {% github https://github.com/ayushbathrey/Kirana-Web-App %}

## How I built it (what's the stack? did I run into issues or discover something new along the way?)
1. Tensorflow object detection API.
2. Flask Web development Framework.
3. HTML, CSS, JavaScript, Bootstrap, Jquery.

## Experience
This was project was pretty exciting to work, the most time-consuming part of the development was dataset collection (as no official dataset was present) and image labeling part.

[Final Note]: # Finally my hard work paid off and was called for an interview via this project.
What are the topics in FE development You don't understand?
Tags: discuss, javascript, webdev, beginners
Published: 2020-05-23 08:21:15

Hey guys!

I started thinking about concepts and topics in FE that I don't fully understand. Service workers came to my mind, as I haven't fully learned it nor built any projects.

As people and their experiences are different, I was wondering **what are the concepts in FE development that you don't fully understand or seem complex?**

I'll try to be helpful and find learning materials for you / explain myself.
123.hp.com : Printer Setup from the HP | 123.hp.com/setup
Published: 2020-05-23 08:19:42

HP provides cutting-edge Printing Technology to its worldwide users in the form of robust, feature-packed HP Printers. Purchasing these state-of-the-art machines is the first step in exploring this ingenious technology. Following that, its successful deployment is equally important. HP Printer Setup is quite simple and convenient by means of a user-friendly platform called “123.hp.com”. 


<a href="http://hpprinterofflinee.com/hp-printer-support/www-hp-com-go-wirelessprinting">www.hp.com/go/wirelessprinting</a>
<a href="http://hpprinterofflinee.com/123-hp-com-setup">123.hp.com/setup</a>
<a href="http://hpprinterofflinee.com/123-hp-com">123.hp.com</a>


Visit Here Also

<a href="http://officesetupp.uk/office-com-myaccount">microsoft office myaccount</a>
<a href="http://officesetupp.uk/office-setup">Office Setup</a>
<a href="http://officesetupp.uk/office-login">login office 365</a>
<a href="http://officesetupp.uk/reinstall-office-365">reinstall office 365</a>
<a href="http://turbotax-support.org/turbotax-login">TurboTax Login</a>
<a href="https://turbotax-support.org/turbotax-customer-service">Turbotax Customer Service</a>
<a href="https://turbotax-support.org/turbotax-download"> Turbotax Download</a>
<a href="https://turbotax-support.org/turbotax-phone-number">Turbotax Phone Number</a>
<a href="http://brotherprinterofflines.com">Brother Printer Saying Offline</a>
<a href="http://dragonnaturallyspeakingsupportt.com/nuance-support/">Nuance Support</a>
<a href="http://dragonnaturallyspeakingsupportt.com/dragon-support">Dragon Support</a>
<a href="http://garminlogins.com/garmin-update">garmin update</a>
<a href="http://garminlogins.com/garmin-connect">garmin connect </a>
<a href="http://garminlogins.com">Garmin Login</a>
<a href="http://garminlogins.com/garmin-connect-login">Garmin Connect Login</a>
<a href="http://garminlogins.com/garmin-express">Garmin Express</a>
<a href="http://garminlogins.com/garmin-com-express">Garmin.com/express</a>
Building a restful API using Deno (Intro)
Tags: deno, javascript, vscode, ubuntu
Published: 2020-05-23 08:00:47

Hi, dear devs!

In my last post [Deno is not here to replace Node](https://dev.to/vinicius77/deno-is-not-here-to-replace-node-nmd) I talked a little bit about Deno and I also promised to create an application together with you guys.

The project will be divided basically like this so I doesn't become overwhelming:
##### [Part 1](https://dev.to/vinicius77/building-a-restful-api-using-deno-part1-pc1)
* Installation
* Create the config file
* Create the app file
* Create the server file

##### Part 2
* Create the routes
* Create the controllers
* Fetch data from a local Javascript file.
* Making HTTP requests using a VSCode extension

##### Part 3 ?
* If at the end of our app you desire to create the front end it will be made.

#### Advantages To Follow This Tutorial
You maybe are thinking: *"Ok, one more tutorial out there so why should I stick with him?"*.

If you read my first published post you probably noticed that I wrote something like *"... we can walk this road together and learn from each others..."* and really meant it.

I'll be accepting **_pull requests from you, refactoring the code based in your hints and opinions, improving the application, expanding your networking, improving our git skills, testing_** etc.

In short, exactly as it is made in real life projects but by *OUR* own pace.

On next weekend I will start publishing the first of this series. 

For now, I already have the project's scratch on my [Github repository](https://github.com/vinicius77/deno-restful-dev_to) so feel free forking, cloning it or even starting with the first pull request ever. :)

Thanks and please let me know if you will join this journey.

**NB:** Part 2: [Building a restful API using Deno (Part2)](https://dev.to/vinicius77/building-a-restful-api-using-deno-part2-5eo2)
Get app actions and styles generated from HTML while typing simple attribute directives
Tags: javascript, html, css, webdev
Published: 2020-05-23 07:31:47



Imagine you just pasted some HTML template in your code editor. You want to make it interactive, so you add to it attribute directives which are interpreted as you type. You can split your UI into Virtual-DOM-backed sections with a `gc-slot` argument and that generates scoped CSS. You don't need to worry about class naming clashes. Imagine you have a list of products in your HTML and by adding few directives your static HTML is turned into uni-directional-state-powered actions. And there it generates even an action which returns your testing data parsed from HTML in real-time!

If it's sounds like something you may like, this is a subset of features you'll find in GlueCodes Platform (https://www.glue.codes). Check us out!

Here is a full list of all directive attributes you'll find when using the IDE: 

### Layout

root tag of a page

```
gc-as="layout"
```

### Slot 

wraps a slot/partial

```
gc-as="slot"
gc-name="${slotName}"
```


### Input

represents input field

```
gc-as="input"
gc-field="${fieldName}"
gc-model="${model || undefined}"
gc-error-name="${possibleErrorName || undefined}"
gc-error-message="${possibleErrorMessage || undefined}"
gc-error-cancel-on="${domEventName}"
gc-reload || undefined
```

### Command trigger

dispatches DOM event to commands

```
gc-as="commandTrigger"
gc-name="commandName"
gc-model="${model || undefined}"
gc-event="${eventName || onclick}"
gc-redirect="${urlPath}" || gc-reload || undefined
```

### Record field presenter

represents a filed of a record, works on img tag too

```
gc-as="recordFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"
```


### List item presenter

represents list of records

```
gc-as="listItemPresenter"
gc-provider="${providerName}"
```

### List field presenter

represents an item filed in the list

```
gc-as="listFieldPresenter"
gc-provider="${providerName}"
gc-field="${fieldName}"
```

### Conditional

wraps its content into if statement, can be used inside listItemPresenter by matching its provider

```
gc-as="conditional"
gc-provider="${providerName}"
gc-test-field="${fieldName}"
```

### Page link

link to a particular page, when gc-custom-name provided the link text is taken from provided text

```
gc-as="pageLink"
gc-page="${pageName}"
gc-custom-name || undefined
```

### Error presenter

presents error if one occurs, when gc-custom-name provided the text remains as provided

```
gc-as="errorPresenter"
gc-error="${errorName}"
gc-custom-name || undefined
```

What do you think? Is it something you would use?
[Dog Breed Prediction]
Tags: octograd2020
Published: 2020-05-23 07:23:56

hey there,
I made an object detection program especially Dog breed prediction.
This shows the maximum probability to show the top 3 types of dog-related to images which we give, and if you want you can change the code and increases the probability number.
Also if you want you can change the image of the dog to any image that you want to predict but need to be a dog.
 
#githubsdp

My Final Project:-Dog breed prediction
 

Link to Code:-{% https://github.com/vishnuparikh/dog_breed.git %}

How I built that just you can download and run the code or launch the code on Jupyter notebook and predict the dog bred.



CONGRATULATIONS!!! You are amazing!
Appwrite 0.6 Comes with Full TypeScript Support
Tags: typescript, javascript, react, vue
Published: 2020-05-23 07:22:34

The new [Appwrite version](https://dev.to/eldadfux/introducing-appwrite-0-6-with-flutter-support-3p8) that was released this week, includes an updated JS SDK with full TypeScript support using a **d.ts declaration** file. With this new feature, your Appwrite SDK objects will now have autocompletion with type hinting in your IDE.

TypeScript made it easier to add declaration files for your favorite library. Declaration files are just files that describe the shape of an existing JavaScript codebase to TypeScript. By using-declaration files (also called .d.ts files), you can avoid misusing libraries and get better completions in your editor.

The new feature is now available with version 0.2 of [Appwrite JS SDK](https://github.com/appwrite/sdk-for-js). You can go and grab it directly from NPM using the command `npm install appwrite`. Note that version 0.2 is only compatible with version 0.6 or higher of the Appwrite server. If you're using an older version of [Appwrite](https://appwrite.io), this might be a great chance to [upgrade your setup](https://appwrite.io/installation).

This is an excellent opportunity to thank Alessandro Mangone 🇮🇹 for contributing this feature on our SDK Generator repository on GitHub, Thank you, Alessandro!

# Join Us

If you wish to learn more about [Appwrite](https://appwrite.io), or need support getting started with Appwrite, you can join our [Discord community](https://discord.gg/GSeTUeA). You can also follow us on [Twitter](https://twitter.com/appwrite_io), [GitHub](https://github.com/appwrite/appwrite), or [Facebook](https://www.facebook.com/appwrite.io).
Sort Characters By Frequency - LeetCode
Tags: heap
Published: 2020-05-23 07:17:17

---
title: Sort Characters By Frequency - LeetCode
published: true
description: Medium Problem
tags: heap
---

Given a string, sort it in decreasing order based on the frequency of characters.

## Example 1:

**Input:** "tree"

**Output:** "eert"

**Explanation:**
'e' appears twice while 'r' and 't' both appear once.
So 'e' must appear before both 'r' and 't'. Therefore "eetr" is also a valid answer.

**Algorithm**

1. Save the frequencies in a hashtable
2. Sort the frequencies in decreasing order
3. rebuild the string based on frequencies

**Array Approach:**

```js
/**
 * @param {string} s
 * @return {string}
 */
var frequencySort = function (s) {
  let res = "";
  let map = new Array(128).fill(0);
  for (let i = 0; i < s.length; i++) {
    map[s.charCodeAt(i)]++;
	}
	while(res.length !== s.length) {
		let max = Math.max(...map)
		let idx = map.indexOf(max)
		res = res + String.fromCharCode(idx).repeat(max)
		map[idx] = 0
	}
	return res
};
```

**Optimized Array Approach:**

The idea is to store characters based on frequency in array

```js
/**
 * @param {string} s
 * @return {string}
 */
var frequencySort = function (s) {
  let map = new Array(128).fill(0);
  let max = 0;
  for (let i = 0; i < s.length; i++) {
    map[s.charCodeAt(i)]++;
    max = Math.max(max, map[s.charCodeAt(i)]);
  }
  let hash = new Array(max + 1).fill("");
  for (let i = 0; i < 127; i++) {
    let val = map[i];
    hash[max - val] += String.fromCharCode(i).repeat(val);
  }
  return hash.join("");
};
```

**Using Object:**

```js
/**
 * @param {string} s
 * @return {string}
 */
var frequencySort = function (s) {
	let hashMap = {}
	let res = ""
	for(let i = 0; i < s.length; i++) {
		hashMap[s[i]] = hashMap[s[i]] + 1 || 1
	}
	// sort the characters based on frequency
	let sortedArr = Object.keys(hashMap).sort((a, b) => hashMap[b] - hashMap[a])
	sortedArr.forEach(e => {
		res += e.repeat(hashMap[e])
	})
	return res
};
```
Angular 9 UI components
Tags: angular, custom, components, ui
Published: 2020-05-23 06:58:56

New Angular UI components library.

Created with Angular 9. 
27 components to plug and play in angular application.
Faster and easy integration.
Smaller in size.
And yes it's open source.

Find Examples at https://np-ui-lib.stackblitz.io/np-dropdown-demo

NPM package at https://www.npmjs.com/package/np-ui-lib
Graduation T20
Tags: octograd2020, githubsdp, machinelearning, python3
Published: 2020-05-23 06:52:42

#Home Automation Using Machine Learning

The Project is based on the idea to automate Home using the algorithms of Machine Learning. The projects covers two major parts:
1. Neural Network Based Lobby
2. Command Operated Electronic Appliances

## 1. Neural Network Based Lobby:

### Aim:
Make an energy efficient lighting system for places such as lobbies and corridors such that energy at each point is above a minimum threshold, wasting minimum energy. A human analogous model was designed using the neural network algorithm.

### Approach:
The network learns the pattern of bulbs in the lobby according to the intensity values obtained by LDR sensors placed at various points and the atmospheric conditions. Accordingly the trained network gives the pattern of bulbs according to the atmospheric condition such that energy at each point is approximately equal to the threshold.

## 2. Command Operated Electronic Appliances
### Aim:
To run electronic appliances through command sent from an Android phone, so that we can control all the appliances from your fingertips.

### Approach:
The keywords for the use cases are identified. Then the voice command is processed to get the command and accordingly the value for the each appliance is set. This is then transferred to the micro-controller through blue-tooth which further turns on or off the appliances accordingly.


Code Repo: [https://github.com/sourabhvarshney111/Home-Automation](https://github.com/sourabhvarshney111/Home-Automation)


While doing the project, we ran into many issues including data collection, feature extraction and all Machine Learning and NLP related issues. It took us a really great effort to get out from each of these issues and come out stronger. But we, finally made it.


It was the hard work of all my team members to produce a gem project like this. Kudos to my team members [Harnish Rajput](https://github.com/Orangeplumber/), [Mansi Sampat](https://github.com/mansi1710), [Aanchal Handa](https://github.com/AanchalHanda), and [Vasu Eranki](https://github.com/Vasu-Eranki) for being the best team-mates we needed for this project.
integrate Real time Audio video chat application with Company CRM system  
Tags: webdev, node, devops, npm
Published: 2020-05-23 06:45:56

we trying to integrate Real time Audio video chat application with Company CRM system, Our CTO recommend us to Use [wowza media server](https://www.wowza.com/products/streaming-engine)  for same and ask us to explore wowza setting and features,  but after week i found wowza is kind of live and VOD of streaming Engine server, 

i just want to know what should be use case of media server, on Real time Audio video chat application
Saw a badly written NodeJS code causing performance issues
Tags: node, performance, callbackHell
Published: 2020-05-23 06:35:04

Note: I did not solve the issue. Sharing because I think it may be interesting.

## Story

Some weeks ago someone contacted me to fix a performance issue. They were getting a response time of around a second on their production server, and sometimes, it worked fine.

The code worked perfectly on the local machine.

I took a look at the code and turns out it is badly written and has a callback hell. <b>20 levels of nested database calls<b> in one place. 

## Possible Cause:

When you make calls to any services, such as the DB, it takes time. On localhost, since the database is on the same machine, the latency is almost 0.

However, on a production server, each database call will have a higher latency, which depends on the configuration.

Even if a single call has a latency of 50 ms (just an example), it will take 1000 ms (a second) for 20 DB calls. 

And since all these calls are nested (one after another), they are not benefiting from the async nature of NodeJS.

## Possible Solution:

While I did not solve the issue, I would have been solved the issue by:

1. Getting rid of the callback hell. 
2. Avoiding unnecessary DB calls. 
3. Diving the code in smaller functions, so they can work independently. 

Batch updates and caching the data may help improve the performance too.

Personally, the code reminded me of old-time when I was an intern and was making and solving the same mistakes. 😅
[Car Price Prediction Model]
Tags: octograd2020
Published: 2020-05-23 06:28:33

This is a model  for prediction of second hand cars prices using various parameters like year of purchase, fuel type etc. It has been developed using Python language and Spyder IDE. Linear Regression and Random Forest Regressor have been used to make predictions. Feel free to check out the source code and dataset using the following link :-

{% github https://github.com/mukund-23/Car-Price-Prediction-Model %}
Problem in Reactjs installation, dependencies missing in package.json
Tags: react, npm, node
Published: 2020-05-23 06:23:29

Hi can anyone help me with installation problem of react js in windows 10, I tried all possible ways for installation but i am getting this Missing dependencies error.node version used 12.16.3, npm version is 6.14.4 and create-react-app version 3.4.1
I tried the following ways for installing react
1. `npx create-react-app my-app` 
2. with npm `npm init react-app my-app` and
3. using npm with npx `npx create-react-app my-app --use-npm`

content in the generated package.json
{ "name": "my-app", "version": "0.1.0", "private": true }
 no dependencies available
[Car Price Prediction Model]
Tags: octograd2020
Published: 2020-05-23 06:18:49

This is a model  for prediction of second hand cars prices using various parameters like year of purchase, fuel type etc. It has been developed using Python language and Spyder IDE. Linear Regression and Random Forest Regressor have been used to make predictions. Feel free to check out the source code and dataset using the following link :-

`{% https://github.com/mukund-23/Car-Price-Prediction-Model %}`
Have you tried learning WebGL/OpenGL technologies? How did it go?
Tags: webgl, opengl, webdev, discuss
Published: 2020-05-23 06:02:36

Hey everyone, so I've been recently learning and using WebGL and avoiding using libraries for my little game side projects.

I had always found learning OpenGL (few years ago and using C/C++) really hard and it was until now that I am beginning to see progress using JavaScript (A language that I am way more familiar with).

I'm wondering about your personal experience when trying to tackle this type of technology (low-level graphics libraries).
DEVgrad2020: Github Pages CV 
Tags: devgrad2020
Published: 2020-05-23 06:00:19

[Comment]: # (All of this is placeholder text. Use this format or any other format of your choosing to best describe your project and experience.)

[Note]: # (If you used the GitHub Student Developer Pack on your project, add the "#githubsdp" tag above. We’d also love to know which services you used and how you used it!)
Github page is a feature provided by github for users to publish their project pages. Generally the page is used by the user as like the documentation page of the repository. I prefer to use this feature as my CV page. the reason I use github pages as cv is it's free, I don't need to think about the costs for hosting and domains. The domain URL of the github pages is also interesting, namely the username followed by github io.

After deciding to use github pages as cv the next thing is what will be the content. The contents of the CV in general are biodata, education and work history. but because this is online I also want to add a portfolio during lectures. There are two types of portfolios namely project and video. I save the portfolio in the form of a project in a github account while my video is stored on YouTube. to get both data from the site generally using the API but I tried to find none. finally I use javascript and regex requests to retrieve the data. I designed a CV page using the bootstrap css framework because it is simple and in the future this cv auto generate pdf can be downloaded but I'm still looking for and learning the library for that. the difficulty in making this is the absence of serveride scripting so it must maximize javascript

## Demo Link : https://sabrisangjaya.github.io/
 

## Link to Code
{% github https://github.com/sabrisangjaya/sabrisangjaya.github.io %}

[Note]: # (Our markdown editor supports pretty embeds. If you're sharing a GitHub repo, try this syntax: `{% github link_to_your_repo %}`)


[Final Note]: # (CONGRATULATIONS!!! You are amazing!)
Cuadrados Anidados - Animaciones
Tags: codepen
Published: 2020-05-23 05:52:10

## Animaciones con Cuadrados

Animación con figuras geométricas. En este caso, cuadrados utilizando efectos sencillos, tales como, perspectiva, transformaciones de estilos y rotación.

Solamente HTML y CSS.

{% codepen https://codepen.io/dlunamontilla/pen/XWmGKxN %}