teleren/devto huggingface dataset:
reduce() - Bonding arrays contained in an array of objects
Tags: codesandbox, javascript, beginners
Published: 2021-08-07 09:05:28

Time to play with `reduce()` 🥳 
I will try some functions with `reduce()` to deepen my understanding about `reduce()`

[Array.prototype.reduce() - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce)

## Bonding arrays contained in an array of objects

Combine arrays in an array of objects using the spread operator and initialValue

![Image 2021-08-07 at 6.04.00 PM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kuypddi3nz19xurmm4e.jpg)
 

## Play it by yourself

{% codesandbox fzuqk %}
Another 100 days of code
Tags: 100daysofcode
Published: 2021-08-07 08:32:29

I've now done 500 days of code in total. The first 100 days took me a year. But then I got into a routine and the other 400 days have taken me about a year and a half.

## What have I done during the last 100 days?

The 100 days started this back in April, when I was working on the [FreeCodeCamp Front End Development Libraries Projects](https://www.freecodecamp.org/learn/front-end-libraries/). I'd done everything else on that module apart from React ages ago. Since I'd done a React project, I then wanted to go back and get that certification.

Now that I knew React there was an open source project I used that I wanted to contribute to that used React. I then found it that it used Styled Components, so I went off and learnt that, then I could understand the project enough to make a contribution.

I then spent two months of the 100 days working on a solo project for [Chingu](https://chingu.io/) using an API in React and Styled Components. I added a lot of complexity, which is why it took so long (plus at an hour a day everything takes a while), but I understood React more. And learnt about React Context and creating my own React hooks.

I felt myself going slightly mad working on the same project for 7 days a week, so I decided to take Saturdays off to do some tutorials on languages completely unrelated to JavaScript. It wasn't about learning them properly, just knowing the basics, as I am curious every time I see them mentioned as to what they are about. I did Python, Go and PHP in this 100 days.

I spent some time between projects (and sometimes during) working on [Scrimba's Weekly Wen Dev Challenges](https://scrimba.com/learn/weeklychallenge) and giving some feedback on [Frontend Mentor](https://www.frontendmentor.io/).

Towards the end of the 100 days I started on a small project using Express to hide my API key.

## What next?

In my next 100 days I will be doing some more [Frontend Mentor](https://www.frontendmentor.io/) challenges and learning Drupal. It will be my last 100 days. The reason is that in about 100 days I'll be starting a job as a front end developer! These are the things that will be useful in my new job, so hopefully I won't feel too lost when I start.
Custom WooCommerce Product View Counter
Tags: wordpress, woocommerce, productviewcounter, customization
Published: 2021-08-07 08:27:45

The product view counter is a count of the total page view of that specific product page. This means when someone visits your product page then this counter will auto-increment each time. It will increment one by one and show you the total views of that page.

Why you should add it? Because it is a very powerful impression for visitors and when they look this product has that many views then it will think about to go with this product and have it.

__[Custom WooCommerce Product View Counter](https://yourblogcoach.com/custom-woocommerce-product-view-counter/)__

To make a custom product view counter in woocommerce, we will make a hook function to add a post meta field in the wp_postmeta table.

__Functions reference:__
* To get the post meta field based on product ID __get_post_meta()__
* To update the post meta field __update_post_meta()__
* To show counter on product page __woocommerce_before_add_to_cart_button__
* To show counter on shop page or archove page __woocommerce_after_shop_loop_item__

```
add_action('wp', 'product_view_counter'); 
function product_view_counter() { 
     
         global $post; 
         if ( is_product() ){ 
             $meta = get_post_meta( $post->ID, '_total_views_count', TRUE ); 
             $meta = ($meta) ? $meta + 1 : 1;  
             update_post_meta( $post->ID, '_total_views_count', $meta ); 
         } 
     
} 
```
Add the above code in your active theme’s functions.php file, I’ll recommend using a [child theme](https://yourblogcoach.com/how-to-create-a-child-theme-in-wordpress/) for any functionality.

__Show them on the product page.__

```
add_action( 'woocommerce_before_add_to_cart_button', 'show_product_view_counter_on_product_page', 10); 
    function show_product_view_counter_on_product_page() { 
     
        global $product; 
        $id = $product->id;          
        $meta = get_post_meta( $id, '_total_views_count', true); 
        if(!$meta) { 
            $count = 0; 
        } else {         
            $count = $meta;  
        }        
        echo "<div class="custom-visitor-count"><i class="fa fa-eye"></i><span class="counter-value">".$count." Views</span></div>"; 
     
} 
```
You can also show the counter on product archive page/shop page with this action hook __woocommerce_after_shop_loop_item__.

And also make a conditions in the code for [product view counter](https://yourblogcoach.com/custom-woocommerce-product-view-counter/) based on IP address.
Vite vue ts tailwind template: Convert styles to TailwindCSS classes and configs (Part 2)
Tags: vite, vue, tailwindcss
Published: 2021-08-07 08:22:45

## Replace existing styles with TailwindCSS classes in `src/components/HelloWorld.vue`

### Replace for styles for `a`

1. There is only `color` in `a` selector. Add new `textColor` as we did in previous article.
1. Update our code

    ```diff
    diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
    index 7e9abbe..efb4ee8 100644
    --- a/src/components/HelloWorld.vue
    +++ b/src/components/HelloWorld.vue
    @@ -65,7 +65,7 @@ export default defineComponent({

     <style scoped>
     a {
    -  color: #42b983;
    +  @apply text-link;
     }

     label {
    diff --git a/tailwind.config.js b/tailwind.config.js
    index 8855955..eaabfc4 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -8,7 +8,8 @@ module.exports = {
         },
         extend: {
           textColor: {
    -        default: '#2c3e50'
    +        default: '#2c3e50',
    +        link: '#42b983'
           }
         },
       },
    ```

1. `git add -u`
1. `git commit -m 'add link color'`

### Replace styles for `code`

1. First replace `background-color`. As with `color` we will add new color called `code` in [`backgroundColor`](https://tailwindcss.com/docs/background-color#customizing) by `extend`ing our `theme`.
1. Then as with `margin` we will replace [`padding`](https://tailwindcss.com/docs/padding). Luckily there are classes that match our values.
1. Finally, create a new `textColor` called `code`.
1. Our code diff should look like this

    ```diff
    diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
    index efb4ee8..c761112 100644
    --- a/src/components/HelloWorld.vue
    +++ b/src/components/HelloWorld.vue
    @@ -68,15 +68,7 @@ a {
       @apply text-link;
     }

     code {
    -  background-color: #eee;
    -  padding: 2px 4px;
    -  border-radius: 4px;
    -  color: #304455;
    +  @apply bg-code py-0.5 px-1 text-code;
     }
     </style>
    diff --git a/tailwind.config.js b/tailwind.config.js
    index eaabfc4..d8ca082 100644
    --- a/tailwind.config.js
    +++ b/tailwind.config.js
    @@ -9,7 +9,11 @@ module.exports = {
         extend: {
           textColor: {
             default: '#2c3e50',
    -        link: '#42b983'
    +        link: '#42b983',
    +        code: '#304455',
    +      },
    +      backgroundColor: {
    +        code: '#eeeeee',
           }
         },
       },
    ```

1. `git add -u`
1. `git commit -m 'replace code styles'`

## Links

-   https://tailwindcss.com/docs/text-color#text-colors
-   https://tailwindcss.com/docs/configuration#theme
-   https://tailwindcss.com/docs/customizing-colors#extending-the-defaults
-   https://tailwindcss.com/docs/margin
-   https://tailwindcss.com/docs/margin#customizing
-   https://tailwindcss.com/docs/background-color#customizing
-   https://tailwindcss.com/docs/padding

## Project

{% github https://github.com/imomaliev/vue-ts-tailwind no-readme %}
C language software or simple VPN solution for voice or video communication
Published: 2021-08-07 08:06:31

Hi All,
I'm happy to join this amazing group. 
I am new to programming however, I have a school project that require that I use a C language software or develop a simple VPN solution that can allow me to make end-to-end voice or video communication.
My overall goal is to be able to test the voice or video communication using different sets of encryption algorithm and measure the performances.
I have searched exhaustively to see if I can find any available solution without any success. Like I said, I'm extremely new in programming and I will appreciate any advice or resource that can be of help.

Regards
Error PHP & Error Reporting
Tags: programming, php, codenewbie, tutorial
Published: 2021-08-07 07:34:37

Error PHP dan Error Reporting adalah sesuatu yang mungkin terlewatkan oleh banyak programmer yang baru mengenal bahasa ini pada awalnya. Ini karena, pada banyak instalasi server web berbasis PHP, error PHP dapat ditekan secara default. Ini berarti bahwa tidak ada yang melihat atau bahkan menyadari kesalahan ini.

Untuk alasan ini, ada baiknya untuk mengetahui di mana dan bagaimana mengaktifkannya, terutama untuk lingkungan pengembangan lokal Anda. Ini membantu Anda mengetahui kesalahan dalam kode Anda sejak dini.

Baca selengkapnya : [Cara Menampilkan Error PHP](https://ruangkoding.page.link/PsgF).
WHAT’S YOUR BEST TIME TO STUDY?
Tags: tutorial, study, hacks, tipsandtricks
Published: 2021-08-07 06:46:11

What is the best time to study ? It’s one of those never-ending debates among students. While some prefer the activity of the day, others vouch for the peace of then night. I analyzed both of them

There are those students who get more out of the studying at night, while others find the best time to study is in the early mornings or after-noon's. Views may differ on this but the reality is that there is no clear winner in this because each of us is different. It really depends on the personality, the subject you’re studying, your resources, time management and your natural sleep cycle. Let’s find out the benefits of each of them to understand this better.

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

BENEFITS OF STUDYING DURING THE DAY
study_online
1. After a good night’s sleep, students will feel more energetic and thus possess a higher ability to concentrate on what they are studying during the day.
2. As social animals, we are conditioned to being active during the day and sleep at night. Besides sticking to this norm, there are other benefits of the day time studies as you can take advantage of the library or the book shops which are open in the day.
3. It is easier to reach out to friends or teacher during the day in case of a query or notes.
4. Many prefer studying in the day time light as artificial light could affect the eyes and probably aid sleeping.

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

BENEFITS OF STUDYING AT NIGHT

1. Since people are more active and thus loud during the day time, students prefer studying in the night mostly because of the peace and quiet that night time brings with it when people prefer to sleep or rest.
2. ‎One of the major reasons for night time studying is that there are fewer distractions than during the day. Most o the friends and family is asleep so most of the social networks are less active.
3. ‎Many students prefer staying up late than waking up early. They feel that nights increase their capability to study and help to understand concepts better.
4. ‎For many students who work during the day or are busy with other activities, the nights are the best time to catch up on studies after all their work is finished

HOPE YOU LIKE THE BLOG DON’T FORGET TO FOLLOW OUR WEBSITE FOR MORE BLOGS FROM US ❤️
Drawing a cartoon with HTML and CSS (with video)
Tags: css, html, art, youtube
Published: 2021-08-07 06:20:07

---
title: Drawing a cartoon with HTML and CSS (with video)
published: true
description: css, webdev, html, art
tags: css, html, art, youtube
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tcv4xfypmja0yz4diry3.jpg
canonical_url: https://alvaromontoro.com/blog/67983/drawing-a-cartoon-with-html-and-css
---

I enjoy coding [CSS drawings](https://dev.to/alvaromontoro/100-days-of-css-illustrations-4hi5) for fun. I find it relaxing and think it's an excellent way to practice CSS. So today, I did a session and completed [this drawing on CodePen](https://codepen.io/alvaromontoro/full/mdmzojb):

{% codepen https://codepen.io/alvaromontoro/pen/mdmzojb %}

I recorded the process (as I normally do), but this time was a bit different: I recorded myself speaking and explaining the process on video for the first time. Typically, I only show time-lapses of the process as I’m too self-conscious of my voice and accent. Anyway, here’s the video:

{% youtube uf_sG7yrO9Y %}

It’s also my first long video, and I know it is pretty amateur (not a great mic, using iMovie for editing, etc.) So, any constructive feedback on the video will be appreciated and welcomed.

The process took longer than usual –I was describing each step out loud–, and followed these steps:

- Draw the basic head using an oval with `border-radius`.
- Add the ears (a flipped copy of each other with `scaleX(-1)`).
- Attach the parts of the face: mouth, eyes, nose...
- Add the neck (a simple square).
- Draw the hair using a bunch of `box-shadow` in three steps.
- Complete the body by setting a soft curve (`border-radius`) on a rectangle.

With that, the drawing had all parts done, but it looked too basic and flat. So, to finish the CSS art, I added some details like shadows, freckles, some blushing on the cheeks... mostly using `box-shadow`s and some filters.

---

If you don’t like long videos, or my voice is annoying or puts you to sleep (you wouldn’t be the first), here’s the time-lapse video I usually do:


{% youtube kk9GCmAS6do %}

----

If you enjoy this content, [check the other videos on my channel](http://youtube.com/c/AlvaroMontoroCSS) too! :P
Tcp, Udp, Http
Tags: protocols, http, tls, ssl
Published: 2021-06-25 08:36:47

Many times while learning about web applications and application architecture, it is common to get across some basic concepts related to computer networks, I got across the terms "TCP/UDP" "HTTP/HTTPS" "SSL/tls" quite a lot and realized that I don't understand these terms correctly, so as a result of re-learning those terms related to networking am writing this post this is more of a revision note for myself :}

## Introduction

before starting it will be great to mention about **OSI model** 
OSI model is a set of standardized rules that specifies the communication functions of a computer networking system. This model divides the transfer process of data from one computer to another into 7 layers tasks, such that each layer serves to the next layer of completing the required task.

### Layer Architecture

* Layer 1: Physical Layer
* Layer 2: Data Link Layer
* Layer 3: Network Layer
* Layer 4: Transport Layer
* Layer 5: Session Layer
* Layer 6: Presentation Layer
* Layer 7: Application Layer

> not going in the depth

now, before going to protocols, one doubt I got was:

> why are there two protocols like HTTP, and TCP/UDP 

And these are mentioned quite often, I was confused after some reading online I realized HTTP and TCP are not alternatives, These protocols work in two different layers. HTTP needs some transport layer protocol. 

## what is HTTP?
HTTP is a Hypertext Transfer Protocol. It works in layer seven or the application layer and it fetches resources such as HTML documents. It is used for exchanging data on the Web and is a client-server protocol which means requests are initiated by the recipient usually the Web browser.
HTTP clients generally use Transmission Control Protocol (TCP) connection to communicate with servers.

## what is TCP?
TCP is Transmission Control Protocol. It works in layer four or transport layer it states a connection is established and maintained until the application data at each end have finished exchange. TCP breaks application data into packets. This packet delivers to the transport layer.

Where TCP ensures that all the packets are received by re-transmitting any defected or lost packets sometimes this is not required. Then udp comes in to picture it does not re-transmit the dropped packets thus ensuring fast delivery hence when the requirement is of fast delivery rather than of ensuring everything is delivered UDP is preferred.


that's it thanks for reading :)

---
Day.js vs date-fns
Tags: javascript
Published: 2021-08-07 06:09:35

In this article, I'll summarize [Day.js](https://day.js.org/) & [date-fns](https://date-fns.org/) comparison, that concludes this series.

# Introduction
Based on what I've learned in the first round of articles, Day.js & date-fns look the most interesting. 

# date-fns
In the [first test](https://how-to.dev/what-is-the-size-impact-of-importing-one-method-from-date-fns), where I used only one method, the application was at **1.6 KiB** in both webpack & esbuild. That was the best result from all tested libraries, but the functional API of date-fns is built for tree-shaking. As this way of testing emphasizes gains of three-shaking, the size advantage of date-fns can diminish if we use more methods.

The [second test](https://how-to.dev/what-is-the-size-impact-of-importing-multiple-methods-from-date-fns), with using more methods started above **22 KiB**. That's because `format` is huge. I found a smaller one that can achieve the same result by shopping around among many date formating methods. Then the final results were:
* webpack - **3.63 KiB**
* esbuild - **3.6 KiB**

# Day.js

The main advantage of Day.js is that is has the same API as Moment.js. This makes it especially easy if we have Moment used all over the place in our project, and we want to replace is it with something smaller or newer. In my [first test](https://how-to.dev/what-is-the-size-impact-of-importing-dayjs), the application was  **6.64 KiB** when bundled with webpack, and **7.0KiB** with esbuild.

To keep the comparison fair, I recreated the [second test app](https://how-to.dev/how-to-use-quarters-in-dayjs). I found a gotcha - Day.js pretend to provide complete API, but some method doesn't work as expected until you add a plugin with a correct implementation. With the plugin in place, the results are:
* webpack - **7.39 KiB**
* esbuild - **8KiB**

# Verdict
I would go with date-fns for projects where I'm very build-size-conscious, and I can manage without a fully flexible `format` function. Day.js is for sure a good migration option for projects that are using Moment.js. The only downside is that we have to pay attention to all the plugins we need to import to ensure all works as expected. The 4KiB difference may not be enough to justify the effort of rewriting all the date manipulation logic.

# Summary
This article concludes the series. Please let me know if there is some other library I should take a look at.
My javascript / tech / web development newsletter for 2021-08-07 is out!
Tags: javascript, tech, webdev, discuss
Published: 2021-08-07 05:50:19

---
title: My javascript / tech / web development newsletter for 2021-08-07 is out!
published: true
description: A roundup of all the best javascript, tech and web development links posted to my linkblog in the past week
tags: javascript, tech, webdev, discuss
---
In this week’s edition:

Worker Threads, XML, Google Drive CMS, Version Bumper, GIT, Recycling Electronics, Life Before Smartphones, Olympics, Mental Health, Multiple Worlds, Eth2.0, AI Dev Tools

https://markjgsmith.substack.com/p/mark-smiths-newsletter-07-08-2021

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
what you could do with rust
Tags: rust, programming, webassembly, backend
Published: 2021-08-07 05:32:43

Rust is a language which reaches into almost all corners in the world of development, whether it is super fast server-side execution, or near native performance in browsers with webassembly, or game development, or making cli tools, or almost anything you could imagine.

<img src="https://c.tenor.com/o55vTt-KXyUAAAAS/the-wolf-of-wall-street-leonardo-di-caprio.gif">

For servers, there are very fast, async frameworks like actix or rocket, with a very easy to use api for a compiled language.
Example: ```rust
#[get("/")]
fn index() -> &'static str {
  "Hello Rocket!"
}

...
```

There are crates like `web-sys` and `js-sys` to enable you to use web apis in your to-be webassembly code, and amazing tools like `wasm-pack` to make compiling and using webassembly much easier :)

And rust has a great amount of targets already to whom you can compile your code to :) and many rust crates are available which hide away the platform specific details from you, so you can just focus on what you're making.

Rust tooling is pretty awesome.
`rustup` to manage rust compiler, components, targets, etc.
`cargo` to use and publish crates, and hide away the mess of compiling and linking and running the code.
and much more depending on your project.
And specially `rust-analyzer` (a lsp for rust), which makes programming in rust a lot easier.

[Rust's website](http://rust-lang.org/)
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 12
Tags: php, javascript, webdev, tutorial
Published: 2021-08-07 05:24:04

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will create formSanitizer class

{% youtube R9h9FejbV4k %}

In this video,we will create Sanitization method

{% youtube 5mkvtSYNuSI %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
whats the worst program you can make for squaring a number.
Tags: theworsethebetter, slow, programming
Published: 2021-08-07 04:48:24

Try making a ultimate slow program to square a number, or share a program you have made previously.
The slower the better.
But each iteration should do something, dont loop for ever and then print the square like this:
```js
function square(x) {
  while(true) {}
  console.log(x*x)
}
```

Ok, now comment your slow program in the comments ;)

*Join orbits community now: https://discord.gg/9hB4VJcw97*