teleren/devto huggingface dataset:
make your dev mgr AND your mktg mgr happy by migrating to google tag manager based analytics today
Tags: node, dynamic, analytics, javascript
Published: 2020-01-11 20:53:49

google are moving users away from the old google analytics javascript and analytics ids to new google tag manager javascript and google tag manager ids

https://www.bounteous.com/insights/2017/03/23/10-reasons-start-using-google-tag-manager-right-now/?ns=l

https://www.crazyegg.com/blog/easy-google-tag-manager/

https://developers.google.com/tag-manager/devguide#migration

https://developers.google.com/tag-manager/quickstart

NOTE *when choosing to use a single container across multiple domains, it's important to carefully configure your tags and triggers within Google Tag Manager. Using the default “All Pages” trigger in Google Tag Manager (i.e. $url matches RegEx) will fire tags on all pages of all domains on which your container snippet is deployed.*

here is an example of how to use node, node-fs, express and pug to dynamically generate HTML and JS that includes your NEW google tag manager id from your ENV so that if someone clones your @glitch or @zeit node project they DONT get a copy of your GTM ID :)

the top of your rendered html should end up like this note the code between the "Google Tag Manager" comments

{% codepen https://codepen.io/osde8info/pen/yLyjxPz default-tab=html %} 

server.js
{% glitch mapsaw file=server.js %} 

index.pug
{% glitch mapsaw file=views/index.pug %} 

gtm.js
{% glitch mapsaw file=googtagmgr/gtaghead.js %} 

the entire project on glitch 
{% glitch mapsaw code %} 

the entire project on github
{% github osde8info/glitch-mapsaw %}

see also

https://dev.to/dennisview/cookie-free-google-analytics-23gj

https://dev.to/yashints/setting-google-analytics-for-angular-applications-45k6
Web vs Mobile Development
Tags: discuss, webdev, mobile, help
Published: 2020-01-11 20:46:59

As a professional webdev software engineer, mobile is something that I am always curious about and want to tap into.

I am genuinely curious about the differences between these two types of development, and what skills are transferable and what not. For example:
- Deployment process (e.g. Web CI/CD vs Mobile gradual release)
- Error reporting
- Architecture (We tend to favor microservices for Web, but monolith for Mobile(?))

What do you think are similar and what are different?
What is Encryption?
Tags: computerscience, security
Published: 2020-01-11 20:33:36

Encryption is the process of securing information and translating it into unreadable data. Encryption is a two-way process, which means anything that is encrypted can be decrypted too. It is often used to secure users' passwords or to secure sensitive data over transmission.

Websites have to save your passwords somewhere, usually within a database, so that when you sign in they can verify that the password you have supplied matches the password they have stored. Encryption can be used to save your password in an unreadable format so that anyone who accesses the database cannot understand or know your password.

Imagine taking a simple word and changing each letter for the next letter in the alphabet, so 'a' becomes 'b', 'b' becomes 'c', etc. Using this system the word 'password' would become 'qbttxpse'. This is a very simple type of encryption as it can be reversed but when some plaintext (the original word) is encypted it is no longer presented in a readable format. This process is called a Caesar Cipher and the encryption algorithms used on websites to secure passwords are usually a lot stronger (harder to decrypt).

Encryption can be used for a lot of things, not just passwords, such as securing emails, instant messages or data during transmission. This means when you send an email or an instant message it will be encrypted, then sent across the internet to the intended receiver and decrypted at the other end.

Unfortunately, encryption isn't the most secure process and is susceptible to various attacks and vulnerabilities. Due to encryption being reversible it is possible for an attacker to access the encrypted message and be able to decrypt it if they know the algorithm used. This process is called reverse engineering, as they reverse the encryption algorithm used to access the plain text. Another approach used by attackers is called a rainbow table where the attacker has a list of plain text values and their encrypted counterparts. This is why it is advised to use an uncommon password. Another approach is just to brute force the decryption, try every possible password value to find the desired result. This is why it is advised to use a combination of lower case, upper case, special character, etc when creating a password as it will exponentially increase the time needed for a brute force attack.

There are different types of encryption that try to overcome these vulnerabilities, such as symmetric and asymmetric encryption that rely on the use of secret keys to encrypt the information. This means the encryption is only reversible is the attacker has access to the secret key(s). Imagine you use a Caesar Cipher but you only tell the receiver how many steps each letter takes, instead of 'a' going to 'b' (one step) you could take 3, 4, 17 steps. This means the attacker would have to know how many steps you used to decrypt the data.

This article was originally published on https://acroynon.com
What is Encoding?
Tags: computerscience
Published: 2020-01-11 20:33:33

Encoding is the process of transforming the format of information into a different format required for consumption by a different program or service. This can be compared to translating natural languages, like English or French, so that the other person can understand.

In computing, encoding is used to transform information from one program so that another program can process that information, such as changing unsafe ASCII characters in URLs to hexadecimal digits. You may have noticed that some characters in URLs get changed to a percentage '%' sign followed by two digits, such as a space character being changed to '%20'.

Another example of encoding is compilers. Compilers change code written in one language to another language so that the computer or another program can understand and execute the code. For example, code written in the programming language Java will be compiled, or encoded, into Java byte code so that the Java Virtual Machine (another program) can execute the code and run the created program. Whereas the programming language C will be compiled into machine code which allows the computer to execute the created program.

This post was originally published on https://acroynon.com/
URL Parameters in Flask vs Express
Tags: flask, express, python, javascript
Published: 2020-01-11 20:18:25


# Flask

```python 
@app.route('/api/v1/users/<user_id>')
def handler(user_id):
    # route handler
   # use user_id
```

# Express

```javascript
app.get('/api/v1/users/:userId', (req, res) => {
    // route handler
   const userId = req.params.userId;
});
```
Favorite Web Development Websites
Tags: webdev, discuss
Published: 2020-01-11 19:56:27

Here are a few of my go-to websites for web development and learning.

* [devdocs.io](https://devdocs.io/) - Fast, offline, and free documentation browser for developers. Search 100+ docs in one web app: HTML, CSS, JavaScript, PHP, Ruby, Python, Go...
* [bit.dev](https://bit.dev/) - Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop, publish and manage components and modules at any scale without overhead.
* [dev.to](https://dev.to/) - DEV is a community of software developers getting together to help one another out. The software industry relies on collaboration and networked learning. We provide a place for that to happen.
* [freeCodeCamp](https://www.freecodecamp.org/) - We’re a nonprofit community that helps you learn to code by building projects.
* [devhints.io](https://devhints.io/) - Ridiculous collection of web development cheatsheets · One-page guides.
* [Stack Overflow](https://stackoverflow.com/) - Stack Overflow is the largest, most trusted online community for developers to learn, share​ ​their programming ​knowledge.

What are some of your favorite resources?
Java Memory Model
Tags: java
Published: 2020-01-11 19:50:34

Hi Everyone,
 
Understanding JVM Memory Model, Java Memory Management are very important if you want to understand the working of Java Garbage Collection. Today we will look into memory management in Java, different parts of JVM memory.


JVM memory is divided into separate parts. At broad level, JVM Heap memory is physically divided into two parts – Young Generation and Old Generation.

Memory Management in Java – 

Young Generation-
The young generation is the place where all the new objects are created. When the young generation is filled, garbage collection is performed. This garbage collection is called Minor GC. Young Generation is divided into three parts – Eden Memory and two Survivor Memory spaces.

Important Points about Young Generation Spaces:


Most of the newly created objects are located in the Eden memory space.
When Eden space is filled with objects, Minor GC is performed and all the survivor objects are moved to one of the survivor spaces.
Minor GC also checks the survivor objects and move them to the other survivor space. So at a time, one of the survivor space is always empty.
Objects that are survived after many cycles of GC, are moved to the Old generation memory space. Usually, it’s done by setting a threshold for the age of the young generation objects before they become eligible to promote to Old generation.

Old Generation -
Old Generation memory contains the objects that are long-lived and survived after many rounds of Minor GC. Usually, garbage collection is performed in Old Generation memory when it’s full. Old Generation Garbage Collection is called Major GC and usually takes a longer time.

Stop the World Event -
All the Garbage Collections are “Stop the World” events because all application threads are stopped until the operation completes.

Since Young generation keeps short-lived objects, Minor GC is very fast and the application doesn’t get affected by this.

However, Major GC takes a long time because it checks all the live objects. Major GC should be minimized because it will make your application unresponsive for the garbage collection duration. So if you have a responsive application and there are a lot of Major Garbage Collection happening, you will notice timeout errors.

The duration taken by garbage collector depends on the strategy used for garbage collection. That’s why it’s necessary to monitor and tune the garbage collector to avoid timeouts in the highly responsive applications.

Permanent Generation -
Permanent Generation or “Perm Gen” contains the application metadata required by the JVM to describe the classes and methods used in the application. Note that Perm Gen is not part of Java Heap memory.

Perm Gen is populated by JVM at runtime based on the classes used by the application. Perm Gen also contains Java SE library classes and methods. Perm Gen objects are garbage collected in a full garbage collection.
Preparing for my Microsoft Exam 70-480
Tags: beginners, webdev, tutorial, html
Published: 2020-01-11 19:29:44

Hey Devs, 
I am junior and self taught developer, most of my experience being with WordPress. I love working in the frontend. 

I was fortunate enough to be hired way before I had ever written a line of code but unfortanately, in my country certifications kind of truimph experience so in the event that I lose my job, it would mean I stay jobless. 

This story's happy ending starts before the actual end. MY BOSS IS PAYING FOR MY MICROSOFT CERTIFICATION!!! so yeah, I will be documenting everything I learn and I hope this series will serve as a helpful resource for anyone else pursuing the course in the future. 

I will try to upload posts consistently, atleast once a week. Most of what I will be sharing will probably be from <a href="https://www.freecodecamp.org/">freecodecamp</a> and <a href="https://www.w3schools.com/">w3schools</a> but more curated and edited to my own understanding.  

Let's get started with what the topics I will be covering in this series. 
<h3>Implement and Manipulate Document Structures and Objects</h3>
<ol>
<li>
Create the Document Structure by using HTML
</li>
<li>
Write Code that Interacts with UI Controls
</li>
<li>
Apply Styling to HTML Elements Programmatically
</li>
<li>
Implement HTML5 APIs
</li>
<li>Establish the Scope of Objects and Variables
</li>
<li>
Create and Implement Objects and Methods</li>
</ol>
Feedback on V2 of BitBulb
Tags: webdev, discuss
Published: 2020-01-11 19:34:16

I have been working daily on making the new version of BitBulb to come to life.

I have a lot of work to do till the end of February. However, the homepage is done, it just needs a few little tweaks, but is mostly done.
 
https://imgur.com/a/gqwy2J5
“Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1 for ServerName” Error on Ubuntu
Tags: ubuntu, apache
Published: 2020-01-11 19:11:34

_“Could not reliably determine the server’s fully qualified domain name, using 127.0.1.1 for ServerName“_. I get this error upon restarting [Apache Server](http://httpd.apache.org/) on a server running Ubuntu 16.04. This occurs because the ``ServerName`` is not set.
```
sudo systemctl restart apache2

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message
```
To fix this problem, we need to edit the ``apache2.conf`` file. Open the terminal and type this command:
```
sudo nano /etc/apache2/apache2.conf
```
However, at the very bottom of that file and add this line:
```
ServerName localhost
```
This should solve the problem and the error code AH00558 should now be gone. Now restart the [Apache server](http://httpd.apache.org/) using the following command:
```
sudo systemctl restart apache2
```
I hope this article helps.

How to Set or Change System Hostname in Linux
[Pycharm IDE]File size exceeds configured limit(2.5M). Code insight features are not available
Tags: python, pycharm, ide
Published: 2020-01-11 19:11:25

## File size exceeds the configured limit(2.5M)
Working a crawler that involves capturing big sizes of data for your research. Using Pycharm IDE, I realize that it has a file size configuration limit that is 2.5Mb. And I get the message file size exceeds the configured limit.

True, the file size limit is mainly to protect your storage and the default 2.5Mb is enough for general files. But the crawler is probably generating a large file size bigger than the default file size specified by the IDE.

In this article, we will increase the default file size for PyCharm IDE. If you follow the steps below you will be able to change the default file size in MacOS.

The file size is set in the idea.properties file in the **./Application/PyCharm.app/Contents/bin** directory.

### Step 1: Application Directory
Open the application directory and right-click on the PyCharm application

![PyCharm IDE](https://i1.wp.com/anansewaa.com/wp-content/uploads/2018/10/pycharm-application.png?ssl=1)

### Step 2: Show Package Contents
Click on the show package contents to open PyCharm application contents.

![PyCharm Package Contents](https://i0.wp.com/anansewaa.com/wp-content/uploads/2018/10/package-content.png?ssl=1)
### Step 3: Bin Folder
Open the bin folder in the Contents folder. The configuration file we are looking for is in the bin folder.

![The configuration file in the bin folder.](https://i1.wp.com/anansewaa.com/wp-content/uploads/2018/10/bin-folder.png?ssl=1)
### Step 4: idea.properties File
idea.properties file contains the configuration for the default file size that the IDE is using.

![idea.properties configuration file](https://i0.wp.com/anansewaa.com/wp-content/uploads/2018/10/idea-properties.png?w=1540&ssl=1)
### Step 5: Inside idea.properties
Open idea.properties file found in the bin folder in a text editor of your choice.

![Default idea.properties file](https://i1.wp.com/anansewaa.com/wp-content/uploads/2018/10/Screen-Shot-2018-10-22-at-3.33.54-PM.png?w=1540&ssl=1)
### Step 6: Edit idea.properties File
Now, change the value of idea.max.intellisense.filesize from 2500 to the value that you will be comfortable with. I change mine to 25000.

![idea max filesize, Change idea max file size](https://i1.wp.com/anansewaa.com/wp-content/uploads/2018/10/idea-max-filesize.png?w=1540&ssl=1)
I hope this post solves your problem.
2020 Women In Tech Salaries (Response Data!)
Tags: womenintech, wecoded, discuss, watercooler
Published: 2020-01-11 19:00:03

I created this sheet for women to *anonymously* share their salary info, job titles, and benefits. I'm so inspired by ALL of you amazing females.

By sharing this info with each other we can better help the women in tech workforce to keep growing and understand the landscape during salary negotiations and raise discussions. 

#[2020 Female Salaries in Tech Public Google Sheet](https://docs.google.com/spreadsheets/d/1ewqoXMqFTrSKiBrntPwR1Lnv6lHMFZfaL_dy6ivY8zo/edit?usp=sharing)

A link to fill out the form for your data to appear here is included on the top of the sheet. Please share!

**UPDATED! Thanks to the commenter below who help me accountable to proper privacy standards. This doc has been updated to ensure anonymous data and the full privacy of submitters.
Handling events in React
Tags: react, javascript
Published: 2020-01-11 18:20:02

> Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences

This is what [React documentation](https://reactjs.org/docs/handling-events.html) says. But besides syntactic differences you can face the problem that handling works differently too.

Let’s take a look at the examples from the official documentation:

The HTML version
```
<button onclick="activateLasers()">
  Activate Lasers
</button>
```

And the React version
```
<button onClick={activateLasers}>
  Activate Lasers
</button>
```

In both cases if we click on the button, the `activateLasers` function would be called. With the difference in **when** it is going to be called.

In the HTML version `activateLasers` is called on the **button element** and in the React version `activateLasers` is be called on the [**document element**](https://github.com/facebook/react/blob/e706721490e50d0bd6af2cd933dbf857fd8b61ed/packages/react-dom/src/events/ReactBrowserEventEmitter.js#L179).

Why does it matter?

Usually the document element is the last element in the chain of elements which participate in an event handling[1]. So you can see the situation when the `click` handler on an ancestor element would be fired before the `click` handler on an descendent element. Usually you can face this problem if you use React with another non React libraries which could listen to DOM events.

*I hope this small note would be helpful and will save you a lot of headache down the line if you face this inconsistency between DOM and React event handling.*

*[1] - Here I’m talking about [event bubbling phase](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)*
What are Peer to Peer network and Client Server network ?
Tags: networking
Published: 2020-01-11 18:17:46

Peer to Peer network : 
In this network group of computers is connected together so that users can share resources and information.
There is no central location (server) for authenticating users, storing files, or accessing resources and each of them works as both client and server.
This means that users must remember which computers in the workgroup have the shared resource or information that they want to access.
Advantage of Peer to Peer network: 
It is easy to setup
There is no need of any committed server as each peer acts as both server and client.
The network implementation is quite cheap.
The resources of a peer can be shared with other peers very easily in the network.

https://codechief.org/article/what-are-peer-to-peer-network-and-client-server-network
SYMLINK(): No Such File or Directory Laravel
Tags: laravel, tutorial
Published: 2020-01-11 18:16:54

## Symlink Problem: No Such File
I pulled a [laravel](http://laravel.com/) project from GitHub that already have the storage symbolic link. Upon running it the browser, the images associated with the post came with errors. And after trying to create the symbolic again I had symlink(): no such file or directory.

After searching extensively, I found a solution on how to solve the problem of symlink(): no such file or directory. To fix this error on your server, change directory to the public and remove the symbolic link for the storage folder.

The following commands will help you remove the symbolic link from the public folder:
```
cd public 
rm storage
```
After removing the symbolic link change directory to the main folder using:
```
cd ..
```
Now create the symbolic link with the following command:
```
php artisan storage:link
```
After running the command successfully, you should get the following message
```
The [public/storage] directory has been linked.
```
I hope this post helps you. Then, you can check out the following post on [How to format date with accessors and mutators in laravel](https://anansewaa.com/how-to-change-date-format-with-accessors-and-mutators-in-laravel-5-2/).
How to set up PHP executable path in VSCode (XAMPP user's)
Tags: vscode, php, inclusion
Published: 2020-01-11 15:56:35

<h2>Did you find this message when creating a PHP file in VSCode?</h2>
<blockquote>Cannot validate since no PHP executable is set. Use the setting 'php.validate.executablePath' to configure the PHP executable.</blockquote> 

<h3>1. First of all</h3>
<p>Open settings.json and paste this line <code>"php.validate.executablePath": "your_unit:/xampp/php/php.exe"</code>, paste this in the last line of your settings.json.<br>
Ok, the annoying message does not pop up anymore, <strong>and now?</strong>.</p>

<h4>That's all</h4>
<p><em>not kidding really</em>😄 but... we want to debug PHP also in VSCode right?.</p>

<h3>2. CRTL+SHIFT+P</h3>
<p>type <code>ext install PHP Debug</code> and install the first match.</p>
<p>Run XAMPP server, create a php file like test.php with <strong>phpinfo();</strong> open it in your browser <code>localhost/test.php</code> copy the HTML source (what you see) and paste it into here: <a href="https://xdebug.org/wizard">xdebug.org/wizard</a> now hit <button>analise my phpinfo() output</button>. <br>
Follow the instruction and download the <strong>.dll file</strong>, install it in the folder <strong>your_unit:\xampp\php\ext </strong>.</p>

<h3>3. Almost done!</h3> 
<p>Now open you php.ini from XAMPP and paste the code in the very last line</p>
<p>
<pre>[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1
zend_extension = "you_unit:\xampp\php\ext\downloadedfile.dss</pre><br>
Save it!</p>

<p><strong>Now, restart XAMPP and VSCode and you should be done!</strong></p>

<h4>Last thing</h4>
<p><strong>Wondering how it works?</strong><br>
Open your project on your browser, set a stop point in VSCode and see the magic!</p>
<p>You can follow the documentation at <a href="https://xdebug.org/docs/">xdebug.org</a> and also at VSCode extension page.</p>

<em>Thanks for read, it's my really first post</em>