teleren/devto huggingface dataset:
Embed deeplinks.js into userscript
Published: 2021-12-11 15:12:40

Recently, I came to a js libary that allows you to link to any text selection of a web page. That is deeplinks.js, which is [here](https://github.com/WesleyAC/deeplinks). It would be useful that your link points directly to the section you need especially the page is long. It would require the author of the page to use the deeplinks.js libary in order for the library to work but what if most of the pages does not include that library? So it would be nice to use the library even without the author including it. The solution is, of course, using a userscript. So I'm going to show you how to embed this library into a userscript and use it.

## `Deeplink.js` the library
While the library can be found in the above link, it would require you to build the library. Because I'm lazy, I'm going to use the pre-built library in the example given in the repository, which is [this one](view-source:https://notebook.wesleyac.com/deeplinks/deeplinks.js).

You should also note that this library can only work on pages with minimum changes. Generated page generally don't work and the library is truly useful when it comes to long pages.

Once included in a web page, you can select a text portion and the library will generate the link directly into the page url in a form of fragment identifier.

## Userscripts and Greasemonkey
In order to use userscripts, you need a browser extension to do so. In Firefox, it's Greasemonkey. In Chrome, you can use TamperMonkey or the like. Userscripts would be activated on the specified pages so check your scripts before running them for security concerns.

## Writing the script
The idea of writing this script is simple: create the script element, set the text content to the library and insert it into the body element. The problem with directly import this library into the userscript is that it contains the back tick character. So to circumvent this one, use base64 to encode the content and the decode it in the script.

So let's step in

The first step should be encode the content of the script in base64. You can use online tool to do the job

The second one is open a new userscript in Greasemonkey and type in some metadata

```
// ==UserScript==
// @name     Deeplink.js on all page
// @version  1
// @grant    none
```

You can change the name if you want

Next step is to write simple code below the metadata to create the script element and set the content of the element to the decoded library. Because the library use `export`, the type of the script element must be `module`. So it is

```js
let src64 = "...Your base64 encoded library here...";
let script = document.body.appendChild(document.createElement("script"));
script.type = "module"
script.textContent = atob(src64);
```

Now you can use and enjoy the library on pages especially static ones, for example [The storage problem of web3](https://www.stephendiehl.com/blog/web3-bullshit.html#22h2Yt6nBQ:0.8dMO1VpX6:1~ese~1~2) by Stephen Diehl
What are Closures in JavaScript?
Tags: javascript, webdev, programming, beginners
Published: 2021-12-11 14:53:22

Hello Readers,
- Keep Reading this Blog to know more about Closures ....
- Lets Look at this Example:
```
1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     y();
7. }
8. x();
```
- The above is a Example for Closure. We already know the output of this program ie a equals 14, but lets understand theory behind this.
- First we need to Understand what **Lexical Scoping(LS)** means, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hf717uc56xwafgsbtedq.png)
- LS means when y() gets called, it tries to find **a** variable inside local memory but a is not found, so it goes to its Lexical Parent and it finds variable a and thus console logs it. This is called Lexical Scoping.
- A Function bundled together with its Lexical Environment forms Closure. Here the Function y was bundled to variables of x.
- so in One Way, This is what **Closure** is !!!!

### Closure Deep Dive
- Consider the Example:
```
1. function x(){
2.     var a=14;
3.     function y(){
4.         console.log(a);
5.     }
6.     return y;
7. }
8. var z=x();
9. z();
```
- what is the output of the above program?
- The answer is when z() called in line9 returns 14, But how is that possible????
- We Know that ***JS is Synchronus*** ie after running line 8, x is Deleted ie X() **Execution Context(EC) gets Deleted in Call Stack**.
- To know more about EC, [Read my EC Blog](https://dev.to/naveenkamath/how-javascript-code-is-executed--iif)
- In the above Example, '**a**' is not in Global Scope and x gets deleted after line 8, So how program console logs 14. Here Closure comes into picture.
- When Functions are Returned from Another Function, They still maintain their **Lexical Scoping**.
- When y is returned, not just function code gets returned but **Closure enclosed function along with its Lexical Environment** gets returned and was assigned to z. This is the use case of Closures.
- Other Uses of Closures:

1. Currying
2. setTimeout
3. memoize etc

- Thanks for Reading my Blog folks, Have a great Day :)
Roadmap for Web Development
Tags: javascript, webdev, html, webcomponents
Published: 2021-12-11 14:49:25

Developing website its great thing and adding attractive components to it using CSS its pure skills which helps you to learn about website fundamentals and projects which you develop for others and earn money with it and also freelancing. Internet is great thing and you will get lot of material related to web development on Internet but every content you get is not suitable for you its vary person to person so Here I shared my web development roadmap where I start learning about web development

## HTML
for beginners Learn about basic fundamentals about HTML how its works and tags related to it like attribute about header tags  and basic components related to it.

## CSS
Cascading style sheet CSS for adding iconic looks and all type of animations and transition to your website you need CCS. CSS for beginners is start from box model flex box grid box animation transitions just learn basic and start learning with developing projects.

## JS  
JavaScript is just amazing just deep dive in JavaScript for beginners learn DOM model with functions and basic programing concepts like data type and variables. 

## Note
Don't fall in loop of learning just learn basic fundamentals of programing language and learn with real time projects with developments.

## Top 5 websites to learn Web Development
1. [GeeksforGeeks ](https://www.geeksforgeeks.org/)
2. [javatpoint](https://www.javatpoint.com/)
3. [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/)
4. [w3schools](https://www.w3schools.com/)
5. [Coursera](https://www.coursera.org/in)

 ask me anything about web development in comment section or follow me for latest posts and connect with me on social platforms my inbox is always open for you.
[Linktree](https://linktr.ee/ganeshpatil0101)
Determine Odd / Even Numbers using JavaScript
Tags: javascript, webdev, tutorial, programming
Published: 2021-12-11 14:07:11

In this article, we are going to talk about numbers, odd and even numbers with some JavaScript.

Let's gets started,
- Choose a random number
```js
let number = 24
```
- As we know this number is **even**, but let's check this with **JavaScript**
```js
if(number % 2 === 0){
		console.log(`${number} is an even number`)
}else{
		console.log(`${number} is odd number`)
}
```
- This gives the following output,
```js
// 24 is an even number
```

This is how you can determine **odd / even** numbers using JavaScript.

By the way, I have a tutorial on it so make sure to check that out
***
{% youtube https://www.youtube.com/watch?v=07AlsKyqDbc %}
MERN app with authentication using JWTs
Tags: javascript, node, react, webdev
Published: 2021-12-11 13:58:56

# mern-auth

Minimal full-stack MERN app with authentication using JWTs.

## Technology Stack:

- Node js
- Express Js
- MongoDB
- JWT
- React

## Usage

"/.env" update the values/settings to your own

## Install Dependencies

```
// Install dependencies for server
npm install

// Install dependencies for client
// Go to frontend folder
cd frontend

// Install dependencies
npm install

```

## Run App

```
// Run server
npm run

// for client
// Go to frontend folder
cd frontend

// Run
npm start

```

Github Repo : https://github.com/saidMounaim/mern-auth
Day 87/100 The Box Model
Tags: 100daysofcode, css, programming, motivation
Published: 2021-12-11 13:29:24

Understanding how to position a particular object creates a notion of the figure of a box that would guide and interpret the entire concept as functional modern design.

![banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wupfhvqeti4i3gymdo8g.png)

The box model comprises the set of properties that define parts of an element that take up space on a web page. The model includes the content area’s size (width and height) and the element’s padding, border, and margin. The properties include:

1. `width` and `height`: The width and height of the content area.
2. `padding`: The amount of space between the content area and the border.
3. `border`: The thickness and style of the border surrounding the content area and padding.
4. `margin`: The amount of space between the border and the outside edge of the element.

## Code Snippets

```
.card {
  border: 2px solid #9DD1F1;
  display: inline-block;
  height: 200px;
  margin-top: 4px;
  padding: 30px auto;
  text-align: center;
  width: 215px;
  transition: all 200ms ease;
  cursor: pointer;
}

.card:hover {
  background-color: #004E89;
  border-color: #004E89;
}

.card img {
  padding-top: 40px;
}
```

## a11y myths
**Accessibility only helps people with disabilities**

>  Fortunately it helps everyone. It's a known fact that applying accessibility principles improves overall user experience and makes a website more convenient to use. 

[![resources](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndik6fiihs05wzypjxhv.png)](https://css-tricks.com/the-css-box-model/)
Error HH9__NEED help
Published: 2021-12-11 12:56:23

Is someone can help me pls I keep getting this MSG ?


Error HH9: Error while loading Hardhat's configuration.

You probably tried to import the "hardhat" module from your config or a file imported from it.
This is not possible, as Hardhat can't be initialized while its config is being defined.

To learn more about how to access the Hardhat Runtime Environment from different contexts go to https://hardhat.org/hre
.

You probably tried to import the "hardhat" module from your config or a file imported from it.
This is not possible, as Hardhat can't be initialized while its config is being defined.

To learn more about how to access the Hardhat Runtime Environment from different contexts go to https://hardhat.org/hre

thanks
Advent of Code 2021 - Day 11
Published: 2021-12-11 12:56:16

---
title: Advent of Code 2021 - Day 11
published: true
description: In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
tags:
cover_image: 
---

{% youtube ej7z-kvAke4 %}

In this video series, I try to challenge myself with the Advent of Code trials. Each solution will be published to Github, and I hope you will learn something from my coding mistakes and perhaps send some code my way on how you have done these challenges. I know by reading code, so this is such an exciting thing for me.
Error HH9: 

Tags: hardhat
Published: 2021-12-11 12:47:47

EError HH9: Error while loading Hardhat's configuration.

You probably tried to import the "hardhat" module from your config or a file imported from it.
This is not possible, as Hardhat can't be initialized while its config is being defined.

To learn more about how to access the Hardhat Runtime Environment from different contexts go to https://hardhat.org/hre
.

You probably tried to import the "hardhat" module from your config or a file imported from it.
This is not possible, as Hardhat can't be initialized while its config is being defined.

To learn more about how to access the Hardhat Runtime Environment from different contexts go to https://hardhat.org/hre
 is someone can help me pls I keep getting this MSG ?
thanks
How to change the website content with JavaScript | Append Text in JavaScript
Published: 2021-12-11 12:42:15


In this post, I will show you how to change the website content with JavaScript and How to Append Text in JavaScript in 2022. This JavaScript tutorial will teach you the basic concepts of how to make an interactive website using JavaScript. You will also learn how to append or add text before and after to an existing paragraph on a button click.

**How do I change the content of a website using JavaScript?
How do I change everything on my website using JavaScript code?**

**Full Video Tutorial:**

{% youtube -rphTk2Vwwc %}

In this new JavaScript tutorial, you will learn how to change HTML content with javascript on button click and how to hide/show an image using the javascript onclick button. JavaScript is a very powerful language widely used to make a user interactive dynamic website. You can replace or change the content of an HTML div element when the user clicks on a button.

Does JavaScript change content?
How do I change the script on my website?
document.body.contenteditable = true; void 0;
javascript:document body contenteditable true
javascript change text on page
edit anything javascript
javascript change text in div
how to change text in javascript onclick
javascript edit text
innerhtml javascript
How to pass the Log4J2 Vulnerability, quickly!
Published: 2021-12-11 12:02:31

Apache recommends update quickly to 2.15.0 but If your server is running with java 1.7 or older, **DOH!**
because log4j 2.15.0 requires Java 8 or later.

Don't worry. here's quick fix for you. your objective is DON'T LOOKUP AND PARSE JDNI LAYOUT FOR PREVENT REMOTE EXECUTION.

## `log4j.formatMsgNoLookups` set to `true`

You just add system property; `log4j.formatMsgNoLookups` to `true` in your source(`public static void main`), java arguments, etc.
if you're using tomcat, add `-Dlog4j.formatMsgNoLookups=true` in `CATALINA_OPTS`. other servlet container app or server will have similar to container arguments to apply it.

this option requires log4j 2.10.0 or later.

## `%m{nolookups}` in the PatternLayout

most apps have seperated log4j config file(xml, yaml, etc.) for manage log environment. it's simple. you should have `PatternLayout` for log format. just replace `%m` to `%m{nolookups}`.
that's it! and restart your app.

this options requires log4j 2.7.0 or later.

## Hack `log4j-core.jar`

If your app have log4j perior to 2.6.x, it will pretty hard to patch it. You must remove `JdniLookUp` and `JdniManager` class from `log4j-core.jar`. you an create these class and fill dummy in your app, or manually build log4j on your own.

Go ahead! and secure your java app now!

References:
- [CVE-2021-44228: Proof-of-Concept for Critical Apache Log4j Remote Code Execution Vulnerability Available (Log4Shell)](https://www.tenable.com/blog/cve-2021-44228-proof-of-concept-for-critical-apache-log4j-remote-code-execution-vulnerability)
- [Log4J2 Vulnerability and Spring Boot](https://spring.io/blog/2021/12/10/log4j2-vulnerability-and-spring-boot)
5 best Online courses for students – every student must do
Tags: opensource, cs50, beginners, tutorial
Published: 2021-12-11 11:00:30

We all have heard this a lot of times, people suggest us to learn new skills, improve our knowledge in different fields and blah blah. But no one told us about what to learn, where to learn, and what kind of knowledge we should gain. But wait, here in this post of Terminal Stack, I am going to tell you about 5 such courses which will be going to change your life.

**1)   CS50:-**

If you are someone who is just starting in computer science, I am telling you after watching this course you are going to fall in love with computer science, that’s how powerful and how interactive this course is. Presented by David J. Malan, you can see it on the YouTube channel called CS50 course by Harvard University. You can browse through their YouTube channel and can see all the courses. The great part about this course is that they keep on modifying, like every year they release a new course like the same but with the modified version.

To read whole blog click here👇
https://terminalstack.com/5-best-online-courses-for-students-every-student-must-do/
Hi im Arman Ebtekari
Published: 2021-12-11 10:24:50


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2zi8fh55ilfacot4vcjv.jpg)
I Love code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aryv60cptjv7aqaibf75.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1c8j76bf15ezw60a68d5.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e594nqmnoyc09avwtzme.jpeg)
Symfony & Database-Part 2
Tags: symfony, doctrine, php, beginners
Published: 2021-12-11 10:11:19

In the previous post, we configured Symfony to use Docker for Database, in this post we will talk about Database creation(table, column...) using Doctrine and Symfony.

## Create Database : 

We can create a database with a simple command : `symfony console doctrine:database:create`

Doctrine is an **ORM** (Object Relational Mapper) : Each Table in Database (ex:employee) has a corresponding class in our App (known as **Entity**, ex : Employee.php) and each column of this table (ex:name) is related to a property of that class (ex: `private $name;`).

To create the entity class, run : `symfony console make:entity`

New file is created under _src/Entity_ folder _(I like to run after each command `git status` to check what has been generated by Symfony and access to the file to see its content)_.

The `make:entity` command can be used to create an new Entity or to update an existing one (add new property, a constraint...). 

Now to create the table and its columns, we need to execute 2 commands, the 1st one is : `symfony console make:migration`

This command compares the actual state of the database with all Entity classes, if an Entity is newly created or modified the command creates the query for that changes under _migrations_ folder in order to make database matches entities. 
![query generated for table creation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vtm80g9my4bajuqgsxqc.png)

To execute this query, we run the 2nd command : `symfony console doctrine:migrations:migrate`

Symfony is smart enough :D to know if a query has already been executed : The migration system create a table in Database _doctrine_migration_versions_  where it stores all migrations executed : 

![content of doctrine_migration_versions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/982rcpkdgphkwgbtfv0o.png)

Thanks for reading and Have a nice day ;)
Black Tool
Tags: programming, python, hacktoberfest, tutorial
Published: 2021-12-11 10:00:35

# How To Installing Black-Tool?


[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up4t7tlj1h0d8riraryo.jpeg)](https://github.com/mrprogrammer2938/black-tool)
<hr>

**Installing On Linux**
``` sh
git clone https://github.com/mrprogrammer2938/black-tool

cd black-tool

bash install.sh

python black
```
<br>

**Installing On Windows**
``` txt
Go To : https://github.com/mrprogrammer2938/black-tool-windows

and:
1_ Installing Zip File 
2_ Installing Ruby

And Go To Directory And Run Black
```
<br>
Am new! and would like to me you guys here.
Published: 2021-12-11 09:50:50


![Project am currently working on!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emg5noyte7dakjy3scce.PNG)Am a  Beginner in this tech world and I am starting out in web development, I would love and appreciate if I can meet new friends here where we could work on project together ,learn together and if developers are here who can be my mentors. I would love to work with great mind so that my productivity rate can improve ..........I am open to any kind of project and also available for any remote internship.

**my languages** Currently html5 and css3
ParseJS. An easy function I made to tokenize things.
Tags: javascript, watercooler, webdev
Published: 2021-12-11 09:45:45

[ParseJS on GitHub](https://github.com/CalinZBaenen/ParseJS)

Want to make a math evaluater? A programming language mockup? A document format? A file reader?
If you want to make any of those, my small one-function library is for you! \:D

This is the function signature:
```typescript
function parse_string(
    str:string,
    toks:Array<string>
):Array<string|symbol>;
```
How does it work?
It takes a string to scan and a list of tokens. If a token is found; a symbol (`Symbol.for( tok )`) is inserted, otherwise the character in the string being scanned is inserted -- and the final result is returned.

Here is an example of the function in action!
!["Sonic", "Tails", and "Knuckles" are all recognized as tokens, but "Amy" isn't.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/06k063k9naql9t00h1rv.png)

The documentation looks like this:
```
Parses a string and returns a list consisting of one of
length-1-`string` (`char`) or `symbol`, representing the
tokens the scanner finds.
Every time a token is successfully found, a symbol
representing the token is inserted, otherwise
the current character is used instead.
```
Installing Gem in Production Rails console
Tags: rails, gem, bundler, production
Published: 2021-12-11 09:24:21

---
title: Installing Gem in Production Rails console
published: true
description:
tags: rails, gem, bundler, production
cover_image: ![Ruby-on-Rails](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8q09ye0vod94lkhf2lk0.jpg)
---
For a good few years, I have been using `awesome_print` for improved readability in rails console. But recently, I came across an issue where I had to read Audits from the console and my usual savior `awesome_print` wasn't bundled.

So, I stopped doing what I was meant to and spent next few hours figuring out, how can I install a gem in any environment without making code changes?

Apparently this is possible by updating the `$LOAD_PATH` variable and then requiring the gem manually.
In Ruby, an identifier starting with a `$` symbol is a global variable. `$LOAD_PATH` is an array of absolute paths i.e it stores the exact location of all the dependencies in the project.

So, let's assume we want to install `awesome_print` in a production Rails Console. We can do so by following these steps:

- SSH into the production server.
- Run this to install the gem,
```
bundle install awesome_print
```
- Run this to figure out the path where gem is installed,
```
gem which awesome_print
```

which should give something like,
```
/home/user/.asdf/installs/ruby/2.7.0/lib/ruby/gems/2.7.0/gems/awesome_print-1.9.2/lib/awesome_print.rb
```

- Now, lets start our Rails console
- We can add the path of this gem to the `$LOAD_PATH` global variable using:
```
$LOAD_PATH << /home/user/.asdf/installs/ruby/2.7.0/lib/ruby/gems/2.7.0/gems/awesome_print-1.9.2/lib
```
- Let's try and require our freshly installed gem using:
```
require "/home/user/.asdf/installs/ruby/2.7.0/lib/ruby/gems/2.7.0/gems/awesome_print-1.9.2/lib/awesome_print.rb"
```

Follow the above steps and you should be able to install and use any gem you want on your production server without making any code changes.