teleren/devto huggingface dataset:
Off-Page Web Analytics
Tags: webdev, seo, offpageanalytics, digitalmarketing
Published: 2021-02-26 16:30:24

https://www.micropediaglobal.com/On-Page-Off-Page-Web-Analytics

Off-Page Web Analytics
There are n number of tools available on Internet to check On-Page Analytics, one of them includes Google Analytics, which is the most powerful tool to capture enough information about on Page Analytics. There are some other awesome tools as well to capture user behavior like Heatmap, Crazyegg, Jotjar etc which gives you more in-depth analysis about user clicks, page scrolls and user behavior on your web Page. So, in short, your have enough power to gauge your audiences and visitors on your own webpage.

I got this nice article on the website. Please refer https://www.micropediaglobal.com for more information.
How Would You Bring It together?
Tags: webdev, javascript, help, discuss
Published: 2021-02-26 16:23:41

Hello Everyone, My name is Sopulu. Am a self-taught software developer (of course, most of us are) or should I say self-teaching. Teaching yourself something you had no prior experience of can be very hard and fun at the same time. I have been having a problem with something and I need help

I want to help SMEs build an engaging online presence with their own platforms(Their websites) but I noticed that most of them rely solely on social media platforms Facebook pages for example to manage their online presence. You can immediately tell the reason for this. Easy to manage and easy to get engagements. I also noticed that some even forgot they own a website. So I wanted to give them something that'll allow them to engage customers and also easy to use. 

I had read about PWAs and all the features that came along with them. I decided they'd best fit for what I had in mind. From the features, The websites will behave like native apps, fast load times, and works offline most importantly take advantage of push notifications. There'll be a notification icon so when the business updates any information on the website visitors can see a number of notifications missed. Apart from these, it'll be basic. The pages will be the same old about contact etc and a products page to list their products and/or blog for those who want blogs. No checkout or cart any e-commerce functionality. The features will be added as the owner wants. For this, I had many thoughts. I also wanted the business to be able to manage its content. Like, upload new images and articles or stuff. I did some research and discovered Strapi. 

The technical part of this stuff has been very challenging since am just starting out in this field and not yet very experienced. I have problems with coming up with the right tech stack. For a moment I'd think reactjs was the way to go then I would see another one like Polymer and I also saw something about SSR frameworks like next and how they were better for SEO purposes and it seemed like the right choice. I have so much confusion about a lot of things. Like, am still confused as to whether you still need to write backend code when using headless cms like Strapi.

I would really like some guidance and advice based on this. Any sort of help would be appreciated. By the way, I came u with this idea by talking to SMEs and am already pitching it to them and they do nourish the idea of having such a platform to their name.

My name is Sopulu Started out learning to code on my phone(mostly reading) because I want to use technology to solve problems. I started out with HTML and CSS and Javascript dived a little bit into python. There was too much buzz about it. Wanted to see for myself. Now am doing backend with Nodejs and express.
ใช้คำสั่ง bc คิดเลขง่ายๆผ่าน command line
Tags: shell
Published: 2021-02-26 16:20:59

bc เป็นโปรแกรมคิดเลข ในแบบ command line เล็กๆ ที่ติดมากับ Unix base เช่น macOS หรือ Linux เราสามารถใช้มัน บวก ลบ คูณ หาร ยกกำลัง ถอด square root พวกนี้ได้ นอกจากนั้นยังเขียน script คำนวณ เขียน function เอาไว้คำนวณได้อีกด้วย แต่วันนี้มาดูวิธีคำนวณง่ายๆอย่าง บวก ลบ คูณ หาร ยกกำลัง sqrt กันก่อน

bc นั้นรับ input ผ่าน standard input หรือทำงานแบบ interactive ก็ได้เช่นถ้าเราอยากคำนวณง่ายๆ ก็ให้สั่ง bc แล้วจะขึ้น output แบบนี้

```
> bc
bc 1.06
Copyright 1991-1994, 1997, 1998, 2000 Free Software Foundation, Inc.
This is free software with ABSOLUTELY NO WARRANTY.
For details type `warranty'. 

```

จากนั้นเราก็พิมพ์การคำนวณเบื้องต้นได้เลยแล้วก็จะได้ผลลัพธ์ตอบกลับมาเช่น

```
10+10
20
15.5 - 2.25
13.25
15.5 * 2.25
34.87
scale = 6
34.87 / 2.25
15.497777
2^5
32
2.5^5
97.65625
sqrt(4)
2.000000
quit
```

การหารนั้นต้องกำหนด scale ของส่วนที่เป็นทศนิยมก่อน เพราะ default มันเป็น 0 ทำให้ไม่เห็นผลลัพธ์ในส่วนทศนิยม

การยกกำลังใช้ `^` , กำถอดรูทใช้ sqrt

ส่วนถ้าต้องการออกจากโปรแกรมให้สั่ง quit

นอกจากนั้นเราสามารถคำนวณโดยใส่ standard input ผ่านการ echo แล้ว pipe ไปได้ในบรรทัดเดียวเช่น

```
> echo "2.5^5" | bc 
97.6
```

ส่วนฟีเจอร์อื่นๆของโปรแกรมดูกันต่อได้ที่ manual โดยสั่ง `man bc` ได้เลยครับ


## ขอฝาก Buy Me a Coffee
สำหรับท่านใดที่อ่านแล้วชอบโพสต์ต่างๆของผมที่นี่ ต้องการสนับสนุนค่ากาแฟเล็กๆน้อยๆ สามารถสนับสนุนผมได้ผ่านทาง Buy Me a Coffee คลิ๊กที่รูปด้านล่างนี้ได้เลยครับ

<a href="https://www.buymeacoffee.com/weerasak" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>

ส่วนท่านใดไม่สะดวกใช้บัตรเครดิต หรือ Paypal สามารถสนับสนุนผมได้ผ่านทาง PromptPay โดยดู QR Code ได้จากโพสต์ที่พินเอาไว้ได้ที่ Page DevDose ครับ https://web.facebook.com/devdoseth

ขอบคุณครับ 🙏
Machine Learning Project – How to Analyze and Clean Data, Create an ML Model, and Set Up an API
Tags: beginners, machinelearning, python
Published: 2021-02-26 15:59:34

This is a series on Data Science and Machine Learning applied to a House Prices dataset from the Kaggle competition [House Prices: Advanced Regression Techniques](https://www.kaggle.com/c/house-prices-advanced-regression-techniques/data).

[You can download a PDF version of this Data Science and Machine Learning Project with the full source code repository linked in the book.](https://renanmf.com/book-ds-ml-project-house-prices/)

In this series we begin with the EDA (Exploratory Data Analysis) of the data, we create a script to clean the data, then we use the cleaned data to create a Machine Learning Model, and finally we use the Machine Learning model to implement a prediction API:

* [Exploratory Data Analysis – House Prices – Part 1](https://renanmf.com/exploratory-data-analysis-house-prices-part-one/)
* [Exploratory Data Analysis – House Prices – Part 2](https://renanmf.com/exploratory-data-analysis-house-prices-part-two/)
* [Data Science Project: Data Cleaning Script – House Prices DataSet](https://renanmf.com/data-science-project-data-cleaning-house-prices-dataset/)
* [Data Science Project: Machine Learning Model – House Prices Dataset](https://renanmf.com/data-science-project-machine-learning-model-house-prices-dataset/)
* [Data Science Project: House Prices Dataset - API](https://renanmf.com/data-science-project-house-prices-dataset-api/)

You can download the complete code in the [Github Repository](https://github.com/renanmouraf/data-science-house-prices) with clear instructions to execute this end-to-end project.

**>>>You can also watch how to run this project on Youtube<<<**

{% youtube xEfCyb-0Wsk %}
EntrePEERship - Team up to build exciting stuffs
Tags: productivity, career, startup, leadership
Published: 2021-02-26 15:15:18

It always takes a team to run together for a long-mile and still remain excited if they are super passionate and envision things together.

While Entrepreneurship is cool and also exhaustive, I believe there is more power if the peers come together, on an aligned mission/purpose, as a team to embark on an entrepreneurial journey.

This word is coined now and it is dedicated to all the peer groups who have, or had, or will form a band to make something of value and drive it for the long run to define real change in systems.

I have always appreciated peer-based learning and have seen wonderful outcomes. I sometimes imagine, if this process can be applied from every angle to a startup economy right from the beginning and let's say it becomes a fully peer-driven operated structure.. just wonder what new sky of possibilities will open up for people. It will surely empower them to put their efforts with pure intention.

Of the peers, By the peers, For the peers!

Let me know your thoughts on this in the comment below:
Pro Tip: Don’t overcomplicate content storage / the database from the start
Tags: programming, tips, database, productivity
Published: 2021-02-26 15:46:19

# Part A – The problem

I’m currently working on a fairly complicated project that basically is a single-page app having just a quiz. Based on the answers you give, you receive a special report and solution at the end. Something regarding loans and financial stuff.

The problem is that those questions must be editable from an admin interface within a Laravel app and as I was building the actual form and logic, I found myself writing a lot of migrations and changing database structure a lot. Run `php artisan migrate:fresh --seed` over and over again until you reach the perfect shape of the database, right?

Well… not necessarily. In my current project, even this was overkill because I found myself changing the structure from a refresh to a refresh of the page.

# Part B – The alternative solution

In the project I am talking about I have a small GraphQL API that returns to the React frontend the set of questions to present to the user. What I’ve done is a “hack”: I thought myself, does the data actually need to come from the database right from the start? Couldn’t I somehow “mock” the set of questions? Well, GraphQL or the actual API endpoint can return the data from any source, the important thing is that the front-end needs the right structure.

What I’ve done is this: I created a YAML file with an array of questions and in that file, I could structure the object however I wanted – remove keys, add keys, change the shape of objects, anything… any change would just need adjusting in the YAML file and then CMD+S and boom, the API endpoint returned the new format.

Basically, you can load a JSON, Yaml, or any format you want and when you’re done and have the content in the final structure you want, you just create the database table in that format and you’re done with it. No more 100 migrations per minute, just a final migration that just works.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6dgzo36gd092kv161qk.jpg)



# Closing thoughts

We tend to over-complicate everything in development, when in fact we should choose the more simple path for us to keep our sanity. What’s the point of going through a lot of database changes when you can freely explore ideas using a mocked set of data?

Remember: keep going back to the basics. It’s simpler for you. Don’t just blindly follow conventions unless you want to reach the burnout phase quicker than the other programmer fellows.


*Originally posted on my blog only*
Top Programming Blogs in 2021
Tags: codenewbie, javascript, webdev, 100daysofcode
Published: 2021-02-26 15:45:13



[![](https://cdn-images-1.medium.com/max/2600/0*vcaqME_cboMFAD9B)](https://js.plainenglish.io/top-programming-blogs-in-2021-723dd49d707e?source=rss-795bd33d705------2)

#Best Programming Blogs to Master Your Coding Skills in 2021

[Continue reading»](https://js.plainenglish.io/top-programming-blogs-in-2021-723dd49d707e?source=rss-795bd33d705------2)
Real-world CSS Transform challenge 👄
Tags: todayilearned, css, codenewbie, tutorial
Published: 2021-02-26 15:42:43

Hi, coding people 👋

Hope you all doing well in your journey.

This post is part of our "20 days CSS animation"

{% link https://dev.to/atulcodex/20-days-of-css-animation-post-3g8d %}

In this post, we are not going to learn any animation property and in this post, I will show you a real-world CSS animation challenge.

See what I have created after learning CSS animation from [scrimba awesome learning platform ](https://scrimba.com/).

{% codepen https://codepen.io/atulcodex/pen/poNpYVo %}

And if you guys interested in my free website templates please download them here 👉[AtulCodex Marketplace 🏪](https://www.instamojo.com/atulcodex/).
Hey Dev.to!
Published: 2021-02-26 15:29:04

I'm thinking a new media query is needed for 27" monitors as in this size for a Samsung.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3jafq6wiz3twuyawm78s.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk55trhfvuw0lgwmkd1k.png)

Experiment showed:
- crayons-article-form-aside (display:none) could be an optional hide/show.

- crayons-article-form-content gives plenty of editing room when width:70vw.

From this (current style) :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mkyh58od20irtr4xqfi.png)

To this (width:70vw)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ujbe5jifpmck6qg1ds7.png)

- The Article Header area no longer wraps with just one or two words.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2t8kgnk4vyrtj6lefygv.png)

Thoughts?
-
#DevHack: Open your VSCode extension settings from the code
Tags: vscode, extension, markdown, productivity
Published: 2021-02-26 15:15:33

For my VSCode Front Matter extension, I wanted to implement a link that allows you to open the VSCode settings to the extension quickly.

![Front Matter - Quick link to settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sk9co44azo80o3qq6jnm.png)

I could not find anything in the documentation but found a reference on Stackoverflow mentioning you could use: `vscode.commands.executeCommand( 'workbench.action.openSettings', '<your extension>' );`.

Using my extension ID was not working correctly. So I did some more digging in VSCode, and it seems you have to add `@ext:<your extension id>`. In the case of my Front Matter extension this is:

```typescript
vscode.commands.executeCommand('workbench.action.openSettings', '@ext:eliostruyf.vscode-front-matter');
```

*First published on: [https://www.eliostruyf.com](https://www.eliostruyf.com/devhack-open-vscode-extension-settings-code/)*
What is AGI & ANI?
Tags: ai, aiforbeginners, beginners
Published: 2021-02-26 15:09:42

Artificial intelligence is one of the most trending topics in the
technology field right now, let's see first what is artificial
intelligence in simple terms. AI is a branch of computer science
that refers to programming machines to think like humans so they
can perform a certain task or a machine that can learn or make
decisions on its own.

Then what is ***ANI*** & ***AGI***?

There are three main types of AI :

1.*Artificial Narrow Intelligence*( ANI )

2.*Artificial General Intelligence*( AGI )

3.*Artificilal Super Intelligence* ( ASI )

So here we are only going to talk about important ones' ANI and
AGI, because ASI is a big topic and most of the part of it is
unexplored yet, maybe we will talk about it later.

**Artificial Narrow Intelligence** ( ANI ) 
         Artificial Narrow Intelligence is the most important and
successful type of Artificial intelligence, it is an Intelligence which
prominent in performing a single task in which AI outperforms
humans in some very narrow tasks. And maybe it doesn’t sound
cool to many people but you’ll like it when you get to know more,
Because we are using it right now in our day to day life and many
companies are investing in and implementing ANI to improve
efficiency, cut costs and automate tasks. Most ANI tasks are
obtained by machine learning algorithms.

Let’s see the examples of ANI :
Self-Driving Cars
Facial Recognition Tools
Virtual Assistants
Recommendation Systems
Spam Filters
Speech Recognition

**Artificial General Intelligence** ( AGI )
AGI as the name suggests is General intelligence or human-like
intelligence as you have already seen JARVIS in “Iron Man”, it's
the future of AI. It allows the machine to apply skills and
knowledge in different contexts. It can do many tasks and unlike
ANI, AGI can learn and improve.
There is much research going on to obtain AGI and some of the
AI experts are also said that maybe it cannot be achieved in the
next 50 years because human consciousness is one of the miracles
of nature, but some of the experts think it would happen before
2060.
Traversing DOM nodes in JavaScript
Tags: javascript, algorithms
Published: 2021-02-26 13:42:04

Here, I explore the underlying tree structure of the DOM, with a very simple example. 

The DOM is literally a tree data structure of javascript objects as nodes. So HTML elements can be accessed as javascript objects with these [properties and methods](https://www.w3schools.com/jsref/dom_obj_all.asp). A practical example is the following algorithm. When we get the top element in the `body` of the HTML document, for example:

```javascript
const root = document.getElementById("root")
```

Then we can access and traverse the rest of the children nodes with a simple recursion algorithm. 

```javascript
function getByClassName(root, className) {

  let result = []
  result.push(root)
	let traverse = (node) => {
        let nodeCh = node.children


        for(let ch of nodeCh){


            if(ch.className === className){
                result.push(ch)
            }

            if(node.children[0]){ // only call recursion if
              traverse(ch)
            }
        }


    }
  
  traverse(root)

  return result
}
```

So the parent nodes which are javascript objects (key-value pairs) contain the `.children` property that contains all the children, as well as many other [properties and methods](https://www.w3schools.com/jsref/dom_obj_all.asp).

This Tree data structure of nested javascript objects is the basis of DOM manipulation (HTML) and libraries like React use the same tree structure but with components to create the virtual DOM Tree. Of course, there are other complexities, but simply put, when we see HTML elements as nodes of the Tree, we can see how they can be traversed with recursion. Just like any other algorithm that uses nodes, and this is the bottom line of how HTML and javascript work together.

Feel more than welcome to reach out with any ideas/comments at [Linkedin](https://www.linkedin.com/in/santiago-salazar-pavajeau/) or [Twitter](https://twitter.com/santispavajeau), or check out my [portfolio](https://www.santiagosalazarpavajeau.live).
Essential commands pm2
Published: 2021-02-26 14:49:36

Essential commands pm2

I think that before we need to understand what is pm2? Pm2 is one tool that allows management of the process, case the process stops running the pm2 make restart the process, another thing interessent is that you can look at logs of the process to understand error that occurs.

Command to install pm2:

```
 npm i -g pm2
```

Command above install the pm2 globally

Command listing the processes running in pm2:
```
 pm2 list
```
Command to execute one process with the pm2:
``` 
pm2 start path_script_js
```

Command to execute one process and specific name to the process with the pm2:
``` 
pm2 start path_script_js --name=name_process
```
Command to execute one process in cluster mode with pm2:
```
pm2 start path_script_js -i max
```
The command above init script and the parameter  **-i max** will put this process the same as how many cpu core of the machine is running the application. It's to prevent that you have to implement it manually using a cluster module of node.js for creating child processes starting the parent process. It’s one strategy used to better performance in node.js applications.

Command to stop all the processes in the pm2:
 ```
  pm2 stop all
 ```

Command to stop one process in the pm2:
```
pm2 stop id_process
```
Command to delete all the processes in the pm2:
```
pm2 delete all
```
Command to delete one process in the pm2:
```
pm2 delete id_process
```
Command to see logs one process in the pm2:
 ```
 pm2 logs id_process
```
Command to restart one process in the pm2:
 ```
  pm2 restart id_process
 ```

Command to restart all the processes in the pm2:
 ```
 pm2 restart all
```

Command to save the processes in the pm2:
```
pm2 save
```

The command above is helpful, because will create one backup file with the processes that are running in pm2, case have that make reboot the machine the pm2 will use the backup file to recreate the processes.
🚀10 Trending projects on GitHub for web developers - 26th February 2021
Tags: react, css, javascript, webdev
Published: 2021-02-26 14:46:44

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Absolutely Awesome React Components

Curated List of React Components & Libraries.

{% github https://github.com/brillout/awesome-react-components %}

---

### 2. Perfect Freehand

Draw perfect freehand lines. A library for creating freehand paths

{% github https://github.com/steveruizok/perfect-freehand %}

---

### 3. Open Mission Control Technologies

Open MCT (Open Mission Control Technologies) is a next-generation mission control framework for visualization of data on desktop and mobile devices. It is developed at NASA's Ames Research Center, and is being used by NASA for data analysis of spacecraft missions.

{% github https://github.com/nasa/openmct %}

---

### 4. Next SEO

Next SEO is a plug in that makes managing your SEO easier in Next.js projects.

{% github https://github.com/garmeeh/next-seo %}

---

### 5. Serverless Stack (SST)

Serverless Stack (SST) is a framework that makes it easy to build serverless apps.

{% github https://github.com/serverless-stack/serverless-stack %}

---

### 6. Husky

Git hooks made easy. You can use it to lint your commit messages, run tests, lint code, etc. when you commit or push. Husky supports all Git hooks.

{% github https://github.com/typicode/husky %}

---

### 7. 30 seconds of CSS

Short CSS code snippets for all your development needs

{% github https://github.com/30-seconds/30-seconds-of-css %}

---

### 8. react-responsive

CSS media queries in react - for responsive design, and more.

{% github https://github.com/contra/react-responsive %}

---

### 9. Vitesse

Opinionated Vite Starter Template

{% github https://github.com/antfu/vitesse %}

---

### 10. microsite

A fast, opinionated static site generator powered by Snowpack. Build simple static sites with fool-proof performance by leveraging automatic partial hydration.

{% github https://github.com/natemoo-re/microsite %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.