teleren/devto huggingface dataset:
DOM
Published: 2020-01-29 13:56:03

 DOM! DOM! DOM! It was very difficult for me to understand the concept and finally i am willing to write on it for my understand then i thought why don’t i share to others may be it will be useful for them also,so let’s understand what is a DOM we all know it is called as Document Object Model so lets know first the definition
The Document Object Model:-
	When a browser sends a request to the server to fetch an HTML document, the server returns an HTML page in binary stream format which is basically a text file with a response header Content-Type which has value text/html; charset=UTF-8. Here text/html is a MIME Type which tells the browser that it is an HTML document and charset=UTF-8 tells the browser that it is encoded in UTF-8 character encoding. Using this information, the browser can convert the binary format into a readable text file.
                           If this header is missing the browser would not understand how to process the file and it will render in plain text format. But if everything is OK, after this conversion, the browser can start reading the HTML document. A typical HTML document could look like this.
"<!doctype html>
<html>
 <head>
  <title>My home page</title>
</head>
<body>
   <h1>My home page</h1>
   <p>Hello</p>
   <p>I  am Zenny</p>
</body>
</html>
The page has the following structure"
Html Scan Chrome extension (Inspect and copy HTML)
Tags: beginners, html, javascript, productivity
Published: 2020-01-29 13:48:45

---
title: Html Scan Chrome extension (Inspect and copy HTML)
published: true
description: Html Scan helps to inspect and copy hovered HTML code or text in any webpages with one click.
tags: beginners,html,javascript,productivity
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/3t3wjv4my8ykh1kpnd40.png
---

I just published a new chrome extension called [Html Scan](https://chrome.google.com/webstore/detail/html-scan/jkkccmdilclkdkhkfdmcbdiagpibmpne) which helps to check the [HTML](https://chrome.google.com/webstore/detail/html-scan/jkkccmdilclkdkhkfdmcbdiagpibmpne) code or text of any element and instantly copy its code with one click.


![html scan](https://dev-to-uploads.s3.amazonaws.com/i/bgux476a7g8n2qp1duiw.png)


> You can use for copying code in web pages with one click instead of selecting the whole code using the cursor and pressing the `ctrl+c`.


It also shows you currently rendered element tagName, height & width, `font-family` and `font-size`.


![html scan copying code](https://dev-to-uploads.s3.amazonaws.com/i/t9gtktaut8upv65ig5vk.png)

 
Here is the extension Link : [Html Scan](https://chrome.google.com/webstore/detail/html-scan/jkkccmdilclkdkhkfdmcbdiagpibmpne)
Live Coding: Write the freeCodeCamp Random Quote Machine in React - February 1st at 11am EST
Tags: tutorial, react, javascript, typescript
Published: 2020-01-29 13:30:28

I'll be live coding on [Saturday, February 1st at 11am EST](https://calendar.google.com/event?action=TEMPLATE&tmeid=MTBtNzVnb21pbXIwNXVvMXNjc2t1Y3ZqMjggdGhld2ViZGV2Y29hY2hAbQ&tmsrc=thewebdevcoach%40gmail.com) (click date for calendar invite). I'll develop the [freeCodeCamp Random Quote Machine](https://www.freecodecamp.org/learn/front-end-libraries/front-end-libraries-projects/build-a-random-quote-machine) and answer any questions you may have about web development, React, etc.

# Where
* [YouTube](https://www.youtube.com/watch?v=VJeoHFMYk9c)
{% youtube VJeoHFMYk9c %}
* [Twitch](https://www.twitch.tv/aryanjabbari)

# Tech
* React
* TypeScript
* Tailwind CSS

Want a head start on this project? Watch [my YouTube series on the Random Quote Machine](https://www.youtube.com/playlist?list=PL3cz80ehFCan4srLIp1HmhrQ0CU8Cw9XM).

{% youtube 3QngsWA9IEE %}

{% twitter 1222512762372444160 %}

This hopes to become a weekly event where I live stream myself coding one of the freeCodeCamp projects. Please comment below with projects you'd like to see written live.
Launching Roost, a cheaper way to travel
Tags: showdev
Published: 2020-01-29 13:27:12

Hello makers!

Super excited to launch my new venture on PH today. Roost was completely bootstrapped, built and deployed by a 1 person engineering team. The stack is React, Redux, TailwindCSS(my new fav), NodeJS, Express, Mongo, Redis. Launched on AWS ECS as containers. Happy to answer any tech questions.

Roost is currently only available in the US but we plan to expand soon. Would love your feedback (and an upvote :D)!

https://www.producthunt.com/posts/roost-7
Daily Developer Jokes - Wednesday, Jan 29, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-01-29 13:00:11

---
title: "Daily Developer Jokes - Wednesday, Jan 29, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Wednesday%2C%20Jan%2029%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258b057385.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the functions stop calling each other?

___A:___ Because they had constant arguments.
 -->
Angular 9|8 HttpClient & Http Services Tutorial
Tags: angular, httpclient, httpservices
Published: 2020-01-29 12:18:27

---
title: Angular 9|8 HttpClient & Http Services Tutorial
published: true
description: Consume RESTful API in Angular 9|8 using HttpClient service. HttpClient service is a very useful API in Angular to communicate with the remote server.
tags: angular, HttpClient, Http Services
---
 
Hello folks, today I am going to show you how you can consume RESTful API in Angular 9|8 using HttpClient service. HttpClient service is a very useful API in Angular to communicate with the remote server.
 

HttpClient API Features
Observable Support
Hassle Free API Testing
Smooth Requests & Response Mechanism
Better Error Handling

HttpClient is an injectable service, it comes with the various powerful methods to communicate with the remote server. HttpClient API can send Http POST, GET, PUT and DELETE requests easily.

HttpClient service methods in Angular

request()
delete()
get()
head()
jsonp()
options()
patch()
post()
put()

I’ll be showing you the practical examples of standard HTTP methods like GET, PUT, POST and DELETE, these methods allow you to communicate with a REST API server.

By the end of this tutorial, you’ll be able to understand…

How to set up the HttpClientModule in Angular app?
How to make a request using a local server with JSON server NPM package.
How to make GET, POST, PUT & DELETE request with Angular 7/8 using HttpClient API

Table of Contents

Install Angular CLI
Set up Angular Project
Configure Fake JSON Server in Angular 7/8
Enable Routing Service in Angular 7/8
Configure Angular 7/8 HttpClient
Create Angular Service for Consuming RESTful API using Angular 7 HttpClient API
Access HttpClient API from Angular 7 Component
Send HTTP GET and DELETE Requests in Angular 7 to Manage Data
Make HTTP PUT Request in Angular 7 to Update Data
GitHub Project Files

[click here to read more](https://www.positronx.io/angular-7-httpclient-http-service/)
Hey! Firefox scrollbar-color is magical
Tags: css, html, firefox
Published: 2020-01-29 11:51:47

I think so. I just came back from my site [Solitaire-Play](https://www.solitaire-play.com/) and I realized that the vertical scrollbar is "green", which is the dominant color of any solitaire game. Cool!

I check with Chrome and there, the scrollbar is "gray" as usual. No matter where I look, I can't find anything to explain this behavior.

According to [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color), it's possible to define the color used for the scrollbar with the experimental property `scrollbar-color`:

```css
scrollbar-color: auto | dark | light | <color> <color>;
```

And to define which colour to use, the following values are available:

* `auto` => default platform rendering for the track portion of the scrollbar, in the absence of any other related scrollbar color properties. (so "gray" in my case)
* `dark` => show a dark scrollbar, which can be either a dark variant of scrollbar provided by the platform, or a custom scrollbar with dark colors
* `light` => show a light scrollbar, which can be either a light variant of scrollbar provided by the platform, or a custom scrollbar with light colors
* `<color> <color>` => the two colours to be applied ("yellow" and "magenta" for example ...)

So no `magic` value to tell the browser to use colors that will match the general color theme of the site...

And I swear that I have no `scrollbar` or `scrollbar-color` property in my CSS and nothing redefined in the "normalize.css" I use.

Since I haven't yet set up a "manifest.json" file, I don't have any "theme_color" property that could have been a good idea to follow.

For now, I'm going to put this in an added bonus of switching from Chrome to Firefox. We don't see any other explanation...

---

This post was originally published on [blog.pagesd.info](https://blog.pagesd.info/2020/01/29/firefox-magic-scrollbar-color/).
Pythons range function
Tags: python
Published: 2020-01-29 11:30:13

<a href="https://python.org">Python</a> has a function that generates numbers, the *range* function. This function creates a list of numbers.

The range function is often used in a <a href="https://pythonbasics.org/for-loops/">for loop</a>, to repeat a certain number of times. You can see it used for creating a list of numbers too, writing down every number manually is just to cumbersome.


## Range list examples

If the range function has only one parameter, it will count from zero to the end.

    range(end)

In Python 3 you must parse it to a list. Thus making it a simple numeric list. We store the list in variable l, which we then use to output.

    >>> l = list(range(5))
    >>> print(l)
    [0, 1, 2, 3, 4]
    >>> 


The function permits definition of starting and step size. To start at 5 and have a step size of 2:

    >>> l = list(range(5,50,2))
    >>> print(l)
    [5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49]
    >>> 

<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fthumbs.gfycat.com%2FAchingWellinformedIndianrhinoceros-max-1mb.gif&f=1&nofb=1"> 

## Range loop example

For loops are one way of repeating code (iteration). That means, you don't have to rewrite the same instructions over and over but just can "jump back" or repeat lines.

For use in a for loop you don't need to parse to a list,

    >>> for i in range(0,6):
    ...     print(i)
    ... 
    0
    1
    2
    3
    4
    5
    >>> 

In the for loop you can use step size and starting value. In this case starting at 1 with a step size of 3.

    >>> for i in range(1,30,3):
    ...     print(i)
    ... 
    1
    4
    7
    10
    13
    16
    19
    22
    25
    28
    >>>

**Related links:**
* <a href="https://docs.python.org/3.5/library/stdtypes.html#typesseq-range">Range function in Python docs</a>
* <a href="https://pythonbasics.org">Learn Python programming</a>
* <a href="https://gum.co/dcsp">Python course</a>
Why you should Whiteboard your Design & Development, UI & UX
Tags: beginners, ux, webdev, productivity
Published: 2020-01-29 11:17:07

When starting any project, you should always have a clear plan.

A whiteboard of your design, whether it's a wireframe or something more detailed can become invaluable both for planning your project, scoping out its size and price, as well as having a clear vision for its future.

In this video I talk about:

* Why you should Whiteboard your designs and development
* How whiteboarding saves you time and money
* Types of whiteboarding, like UI/UX/Dev, etc
* How I whiteboard my work when doing projects

{% youtube H4JnRNfA8jE%}
What is free software and why you should care ?
Tags: opensource, gpl, freedom, meta
Published: 2020-01-29 11:09:13

Hi buddy!
A big thanks for starting to reading this.

I'm here to tell you, not the benefits of free software but the necessity of free software. My reference to `free` is not as in `free beer` but as in 'freedom'.

Almost all top tech companies live on surveillance capitalism. Before jumping into judgement, that this is too political or just a rant, let me tell you why how this affects you & why free software is necessary.

How do you differentiate free software? Here are the 4 signs:

* The freedom to run the program as you wish, for any purpose.
* The freedom to study how the program works, and change it so it does your computing as you wish. Access to the source code is a precondition for this.
* The freedom to redistribute copies so you can help your neighbor.
* The freedom to distribute copies of your modified versions to others. By doing this you can give the whole community a chance to benefit from your changes. Access to the source code is a precondition for this.

Please read about it more @ [GNU](https://www.gnu.org/philosophy/free-sw.html)

These 4 freedoms ensure the usage of software benefits everyone & prevents monopoly. I ask you 2 simple things. Is the software you're using have all this 4 freedoms & is it a monopoly or not ?

Pull your phone out or your laptop, desktop and just ask yourselves.

A large part of computer science is the result of research funded by the people & for the people.Yet, the same people are locked away on the terms of security.

Today, we live in a world where we think that giving away our private data will somehow improve our lives. As you know, nothing is free. We trade our privacy with short-term happiness.We're tricked it is the benefit we get.

Free Software is something which respects it's user. Imagine you bought a bike & you were instructed not to modify it or share it with anyone. That' s the freedom we lose.

The cherry on the cake is that free software doesn't mean the cost of the software is zero. You can buy, sell, ,study, modify, rent, share all the pieces of code. Voilà! you have a software that respects you, your freedom and can be monetized ethically.
Solution : Error during build the moodle mobile app through phonegap
Tags: moodle, elearning, mobileapp, builderror
Published: 2020-01-29 10:53:36

Many moodle developer getting error message at the time of phonegap build of moodle mobile app version 3.4.2.

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring root project 'project'.
> Could not resolve all dependencies for configuration ':_debugApkCopy'.
> Could not find com.android.support:support-v4:27.1.0.
Required by:
project :
> Could not find com.android.support:support-v4:27.1.0.
Required by:
project :
> Could not find com.android.support:support-v4:27.1.0.
Required by:
project : > com.android.support:support-v13:23.4.0
> Could not find com.android.support:support-v4:27.1.0.
Required by:
project : > com.google.android.gms:play-services-gcm:9.8.0 > com.google.android.gms:play-services-basement:9.8.0

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 1.559 secs
Command finished with error code 1: /project/gradlew cdvBuildDebug,-b,/project/build.gradle,-Dorg.gradle.daemon=true,-Dorg.gradle.jvmargs=-Xmx2048m,-Pandroid.useDeprecatedNdk=true
Error: /project/gradlew: Command failed with exit code 1 Error output:
FAILURE: Build failed with an exception.

It’s Simple solution, Just replace

<preference name=”phonegap-version” value=”cli-6.5.0” />

to

<preference name=”phonegap-version” value=”cli-7.1.0” />

It will works..!!!

For moodle related queries and moodle development services contact on inquiry@vibidsoft.com or call on +91 70161 48402
The Demo Effect
Tags: testing, agile
Published: 2020-01-29 10:36:46

Developers worldwide share a few common fears: the time when a project manager
asks for an estimate, the fear of being an impostor, the fear of not delivering
on time for a deadline. And then there's a very scary thing that is known in the
development world as the "Demo Effect".

The Demo Effect happens whenever you need to present your (supposedly finished, 
or almost) work to a client, an N+1 or any other kind of spectator.
You will, with pride, show the features you've been working on for 
[weeks|months|years]. You feel very confident, you tested it all before,
and all of a sudden, the
application crashes in front of your audience.
This is the **Demo Effect**.

Why is it happening? We developers tend to be biased and use data that will
fit our best case scenarios. Once we start fiddling with more realistic data
for the sake of our presentation, that's where the cracks in our programs
begin to appear.

## DDD: Demo Driven Development

My company recently adopted a new habit, which is the "Friday demo".
The format is quite simple: each department has someone on their team
doing a little, 5 minutes presentation. This is a good idea as the short
format reduces the pressure (it's not like you're doing a one hour talk).

Our team was asked to present something, and I thought that
I could demo one of our most advanced, but still in development feature.

I tested many things beforehand and thought that the feature was
ready to go to QA. So naturally I thought this would be a piece of cake.
And of course I was very wrong.

I started inserting records with real names of real people. With extended
latin characters. That's where I noticed there were collation problems
with the database.

I started having more than 10 records in my test DB, which showed problems
with the pagination system.

I started using the application a lot, instead of testing it, which showed
me there were some async problems, and some other bugs.

I later explained that to my colleagues and, as a joke, said we could now do
DDD: Demo Driven Development. But it might be a really good thing to keep doing
that once in a while, as it helps us get into the users shoes.

I might start doing **Demo Driven Development** from now on, and overcome my fear
of the Demo Effect.
Debugging node js app
Tags: node, debugging
Published: 2020-01-29 10:25:48

Introduction

Almost every javascript page that we create can be debugged on browser.
We debug code for fixing any defect or to have a better code understanding. So, I was wondering what about node js. Can I inspect my nodejs app or express app?

I somehow didn't pay attention to this and used to write log statements inside my express app. Then, I referred node js official doc 
https://nodejs.org/en/docs/guides/debugging-getting-started/

Steps:
1) Run your node js application using --inspect flag like
   node --inspect filename.js

It shows 
Debugger listening on ws://127.0.0.1:9229/3da188c5-8ab4-41e6-9fb2-2871638cb657
For help see https://nodejs.org/en/docs/inspector
App is listening on port 5000
Debugger attached.

2) Open a new tab in chrome and type about:inspect

3) Locate your file of interest under remote target.

4) click on “Open dedicated DevTools for Node” to start debugging.

The official doc also shows handy command line options.


That's it .. Enjoy debugging !!!!
TS async data creation helper function
Tags: typescript, snippet, vscode
Published: 2020-01-29 10:05:41

I have created a neat little helper function to create asynchronous data of synchronous data. I usually use it for mock data. 

```
async function promiseOf<T>(data: T): Promise<T> {
  return new Promise(resolve => resolve(data));
}
```

This simulates data being fetched. Because it uses generics, the data passed in will be available in Intellisense.

It can also easily be extended to include a mocked "latency"

```
async function promiseOf<T>(data: T, latency = 0): Promise<T> {
  return new Promise(resolve => setTimeout(resolve(data), latency));
}
```


Let me know if you find this helpful.
Speech to emotion with Web Speech API and Node.js
Tags: javascript, node, tutorial
Published: 2020-01-29 10:04:50

{% youtube pd-X2RnVYxc %}

I've started writing again and decided to start recording also.

This was the first attempt where we check how to translate voice into a reaction and I would like for you guys to check it out and let me know what you think could be improved in the video and what kind of projects would you like to see.

There is an article version available [here](https://www.freecodecamp.org/news/speech-to-sentiment-with-chrome-and-nodejs/) and the repository [here](https://github.com/daspinola/speech-to-emotion).

I will be posting the full article sometimes here and other times in FreeCodeCamp.

Hope this makes someone want to experiment more with code and find simple but enjoyable projects like this to do and share.
Database generic way of achieving Query Result Change Notification
Tags: help, database, sql, java
Published: 2020-01-29 09:45:40

There's a use case in which we would like a Java application to know when a result of a SELECT query changes as a consequence of a DML update in a database. On exploration, this seems to be achievable in the Oracle database using Oracle's "[*Query Result Change Notification*][1]" (at least with some limitations). As changing the datastore to Oracle database is not an option, we are looking for a solution that works with the following databases:

1. PostgreSQL
2. MySQL
3. MS SQL Server

Further exploration reveled that MS SQL Server has "[*Query Notifications*][2]" which is similar to Oracle's "*Query Result Change Notification*". PostgreSQL and MySQL equivalents could not be found.

Coming to the question, what could be a (possibly efficient) way to achieve this in PostgreSQL and MySQL databases? Is there any Java library that helps us know when a SELECT query result changes as a consequence of a DML update in a database?

PS: I've tried to provide enough information in the question. In case any information is required, kindly let me know.

  [1]: https://docs.oracle.com/cd/E11882_01/appdev.112/e41502/adfns_cqn.htm#ADFNS546
  [2]: https://docs.microsoft.com/en-us/sql/relational-databases/native-client/features/working-with-query-notifications?view=sql-server-ver15