teleren/devto huggingface dataset:
How onDestroy() lifecycle function works in Svelte?
Tags: svelte, beginners, javascript, webdev
Published: 2022-02-17 05:14:15

When we removed the component from DOM, the onDestroy() method is used. We need to call it before the component is removed from the DOM.

Let's create a new component, `DateAndTimeComponent.svelte` and add the following code.

```javascript
<script>
    import { onMount } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });
</script>

<table>
    <thead>
    <tr>
        <th>Date</th>
        <th>Epoch Time</th>
        <th>Time</th>
    </tr>
    </thead>

        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>

</table>
```

We have only implemented the onMount() lifecycle function. If you are not aware of onMount then please visit the following article.
And in the App.svelte add the following:
```javascript
<script>
    import DateAndTimeComponent from "./DateAndTimeComponent.svelte";

    let showComponent = false;
</script>

<main>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>
```
If you visit the webpate http://localhost:5000 then you'll see an empty page because showComponent variable is false at the moment.

Lets add a button to show the component. onMount will only be called once when the component is loaded to the DOM.

In the `App.svelte`, add the following under the `main` tag.

```javascript
<script>
....
..
..
..
</script>

<main>
    <button on:click={ () => showComponent = !showComponent }>Show Component</button>
    {#if showComponent}
        <DateAndTimeComponent />
    {/if}
</main>
```
And in the `DateAndTimeComponent.svelte` we'll add the onDestroy lifecycle function.

```javascript

<script>
    import { onMount, onDestroy } from 'svelte'

    let tasks = []
    const url = 'http://time.jsontest.com'

    onMount( async () => {
        fetch(url)
            .then( response => response.json() )
            .then( data => { tasks = data } )
    });

    onDestroy( () => {
        console.log("Date Component removed")
    });

</script>

<table>
    <thead>

        <tr>
            <th>Date</th>
            <th>Epoch Time</th>
            <th>Time</th>
        </tr>

    </thead>
    <tbody>
        <tr>
            <td>{tasks.date}</td>
            <td>{tasks.milliseconds_since_epoch}</td>
            <td>{tasks.time}</td>
        </tr>
    </tbody>


</table>
```

Take a look at `import { onMount, onDestroy } from 'svelte'`

and
```javascript
onDestroy( () => {
        console.log("Date Component removed")
    });
```



![Image description](https://ashutosh.dev/content/images/2022/02/onDestroy_Svelte.gif)
Grouping Bar in React Pivot Table
Tags: react, reactnative, webdev
Published: 2022-02-17 09:12:33

Learn how easily you can enable the grouping bar in the Syncfusion [React Pivot Table](https://www.syncfusion.com/react-ui-components/react-pivot-table). Also learn how to drag fields between different axes such as columns, rows, values, and filters, and to show or hide the sort icon, filter icon, remove icon, value type dropdown, and value buttons in the grouping bar.

 Download an example from GitHub: https://github.com/SyncfusionExamples

Refer to the grouping bar documentation for the Syncfusion React Pivot Table component: https://ej2.syncfusion.com/react/document

Interact with the grouping bar demo for the React Pivot Table: https://ej2.syncfusion.com/react/demo

{% youtube 6zKDyLyPnmg %}
How to deal with haters?
Tags: discuss, personal, improvement, growth
Published: 2022-02-17 09:02:03

---
title: How to deal with haters?
published: true
description: Don't let anyone get into your head 
tags: discuss, personal, improvement, growth
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flt0hq0htfyg65itgzvo.jpeg
---

_Originally published on [my blog](https://www.nikola-breznjak.com/blog/daily-thoughts/how-to-deal-with-haters/)._

> I wrote about [haters](https://www.nikola-breznjak.com/blog/daily-thoughts/haters/) and my suggestion to them. However, when someone is just not letting go, then you need to be wary of two things: 1) don't let them get into your head 2) your success hurts them to no extent, so keep on going.
> 
> Oh, and dear parents, check yourself in what behaviors you encourage.

---

This is [why I write](https://www.nikola-breznjak.com/blog/daily-thoughts/why-do-i-write-these-daily-thoughts-posts/) these 'daily thoughts' posts.
Day 24/100 Java
Tags: 100daysofcode
Published: 2022-02-17 08:59:12

Hitting bumps on the road.

Day 24/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**
- Deeper Autoboxing & Unboxing
- Banking application.

- Code Challenge:
	- Banking application.


**Additional Notes:**
Some concepts I cannot seem to wrap my head around. I may stay on this topic for a while and do some pure research on tomorrows session. I feel like I want to catch the grasp of this first before I move along to other concepts. So either after this section, I research all the different components, or I do this tomorrow, not thought about it yet. This is great tho, it shows that it is not a smooth process. Hitting bumps along the road is normal. We move along and continue to strive for progress.
Day 23/100 Java
Tags: 100daysofcode
Published: 2022-02-17 08:47:23



Day 22/100

**Language:**
JAVA

**Time Period Spent:**
2 hrs

**Course Taken:**
Udemy: Java Programming Masterclass - Tim Buchalka

**Todays Learning:**
- Autoboxing & Unboxing
- Bug Fixing

- Code Challange:
	- Mobile Phone
	- Autoboxing & unboxing

**Additional Notes:**
Learning new concepts are always nice, Autoboxing seems to be to allow the ability to apply new instances to an ArrayList method. for example, we can create a newly defined list of contacts, using a name/number. We then allow the constructor to update this list by parsing through the name/number and doing something with it like adding it to the list or check if the name exists etc.
Laravel Roles and Permissions with Gates and Policies Full Tutorial for Beginners
Tags: tutorial, laravel, beginners, programming
Published: 2022-02-17 08:41:00

In this video, we are going to create roles and permissions with Gates and Policies Laravel to authorize users.

{% embed https://youtu.be/OtiNA3IKPdE %}

Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/

Repo: https://github.com/laraveller/laravel-roles-permission-example
Playlists:
LARAVEL INERTIA MOVIE APP: https://bit.ly/3FVMp4Q
Laravel Livewire Movie App: https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
#laravel #laravel9
CSS Box Model Explain!
Tags: webdev, css, codenewbie, programming
Published: 2022-02-17 08:36:27

**CSS Box model**: 
          As a front End Developer I myself not good at CSS but when I was a beginner in CSS I might get confused between margin padding border such properties because I never learn them properly so in this post I'm going to show you how simple it is.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p8a4jvi4zgjmpda6wun.png)

- **An Element**: 
           As if you are familiar with HTML then you should know that every html tag is an element. So the first thing that comes in box model that is Element. We can style it using the box model properties or any properties that are present in CSS .

```
<button class="btn">Cick me</button>
```

- **Padding**: 
        Padding is a property for of both sides of the Element, It's basically give space inside any Element. and using Padding property we can make our any element beautiful. it has four different properties padding-top, padding-bottom, padding-right, padding-left;

```
.btn {
     padding-top: 10px;
     padding-bottom: 10px;
     padding-right: 10px;
     padding-left: 10px;
}
```

- **Border**: 
       Border is an property from box model it is useful for making the borders outside of an element also. We can use them to remove the borders that already have on buttons and all that stuff using border: none property

```
.btn {
    border: 2px solid #fff;
}
```

- **Margin**: 
      As similar as padding the margin is also use to giving the space to an Element, But not from inside the margin gives the space outside to an Element it is most useful property that you have be working with most of your time if you are a front end Developer
Today's Daily Humor For Devs - Daily Developer Jokes
Tags: jokes, dailydeveloperjokes
Published: 2022-02-17 08:00:21

---
title: "Today's Daily Humor For Devs - Daily Developer Jokes"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12588f481d4.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

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

<!--
Joke text:
___Q:___ How many Prolog programmers does it take to change a lightbulb?

___A:___ Yes.
 -->
The Subtle Differences between 'innerText' and 'textContent' You Should Know
Tags: beginners, javascript, html
Published: 2022-02-17 08:22:57

<p> While both properties on the surface seem to perform the same task within lines of code - render the text from an element or tag. Understanding the similarities and differences between the two will allow you to choose the property optimal for your next JavaScript project.</p>

<h3>Element.innerText</h3>
Where  'element.innerText'  triumphs above the other property, is the fact innerText takes into account CSS styling. Opting for rendering what humans prefer to read. Text will be rendered in plain text. Keeping styling in mind, 'element.innerText' trims all white space in its renderings, unlike 'node.textContent'. 

To better demonstrate what '.innerText' does, below there's a sample of HTML. 

```
   <div id='property-test'>
            Flatagram     is the <strong>best</strong> app ever! Wouldn't <em>you</em> agree?
        </div>
```
Once opened in browser, the code renders a sentence of "Flatagram is the best app ever! Wouldn't you agree?" with strong/bold tags wrapped around "best" and em/italic tags wrapped around "you". 

![Browser render of code above](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8f259tezsyyrarbxqxb8.png)


```
const renderText = document.getElementById('property-test');
```
I assigned the div to a new variable. Let's call .innerText on our new variable 'renderText'. 
```
renderText.innerText
// =>   Flatagram is the best app ever! Wouldn't you agree?

```
Once called, what's rendered is plain text. No inclusion of HTML tags like '.innerHTML' and no inclusion of the spacing like '.textContent'. 

<br>

<h3>Node.textContent</h3>
Node.textContent triumphs 'element.innerText' in the event, all elements in the node need to be rendered. 

```
<div id="market-options">
            <div>mangos, coconuts, and pears</div>
            <div style="visibility:hidden">all go great in a smoothie bowl.</div>
        </div>
```
In the code above although we have a element set to be hidden, using '.textContent' will override the assigned setting and display as logged. 

```
mangos, coconuts, and pearsall go great in a smoothie bowl.
```




<h3>Conclusion</h3>
After reading through this post, I hope you've learned something new about .innerText and .textContent properties. And because I know one source is never enough to encapsulate the depth of knowledge that programming entails, I highly encourage you to check out the extra resources I've provided to show you more examples of the nuances of these properties and how they affect your code. 


**Resources**

- More information on .innerText Property | [link](https://www.geeksforgeeks.org/html-dom-innertext-property/)
- Comparison of the properties |  [link] (https://www.w3schools.com/jsref/prop_node_textcontent.asp)

- MDN .textContent | [link](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
Free wildcard SSL for CPanel
Published: 2022-02-17 08:15:51

1) Install Let’s Encrypt

```
/scripts/install_lets_encrypt_autossl_provider
```

2)  Login to WHM and visit:

```
SSL/TLS »Manage AutoSSL
```

3)  Choose `Let’s Encrypt` and Save

4)  Add `CAA` record to your domain

```
type: CAA
hostname: *.domain.com
authority: letsencrypt.org
tag: issuewild
flag: 0
ttl: 3600
```

```
type: CAA
hostname: *.domain.com
authority: letsencrypt.org
tag: issue
flag: 0
ttl: 3600
```

```
type: CAA
hostname: domain.com
authority: letsencrypt.org
tag: issue
flag: 0
ttl: 3600
```

if you want to use `cPanel (powered by Sectigo)` then change autority to following:

```
sectigo.com
```


5)  Open terminal and run following command:

```
/usr/local/cpanel/bin/autossl_check --user=<cpanel-username>
```

---

To renew all CPanel SSL include WHM, run following command:

```
/usr/local/cpanel/bin/checkallsslcerts --force
```
5 Wesbites made with Laravel
Tags: laravel, beginners, websites, programming
Published: 2022-02-17 08:04:41

 
Laravel is the beautiful framework that adorns the websites with all the grace and brings in the spark to them. Laravel has the best of features that help the web apps stand out. It is one of the most widely used frameworks by developers as the source code it implies is not only clean and easily understandable but also brings in the unique classification to the websites.
Here is the list of awesome websites made with Laravel.

1. John Fowler holidays 
John Fowler holidays is a destination management website that helps to manage tourist services.  It is a beautiful website that has a clean code structure and works out smoothly with no loading time. One can see Laravel playing its part by providing smooth browsing and navigation within the site.

2. PinPoint Promo
Pinpoint promo is a  wonderful website made with laravel. It has introduced a  new range of Eco-friendly products with a full range of Bamboo, PET & Wheat Straw products.
It provides a range of products in Apparel, drinkware, bags, keyrings, stationery, technology, and themes. Recently it has earned a supplier of the year 2021 award for providing unparalleled services. Laravel provides a clean user interface that is a pleasure for the eyes.

3.My Rank
My Rank is a website that is made with Laravel and truly displays the best characteristics of laravel. My Rank is a well-known website that provides a full-scale online learning web portal for people in India. One can witness the versatility of laravel with the integrated functionality and design elements that make the design worthy and mesmerizing.

4. Cachet
How often do you listen to the word cachet?
Do you witness the speed issues with your device? Is your system going slow or is it not functioning properly? If you answer in the affirmative, this website made with Laravel known as cachet can certainly help you solve these errors. Cachet brings to you the solutions by providing beautiful status pages that can be used for using the services optimally.
5. Barchart

Barchart is a leading online portal for providing the latest market data for the US, UK, Australia. It also gives data on the Canadian stock market that includes stock, commodity, gold, options data, currency exchange, etc. Also, does it provides smooth navigation and the best UI/ UX with laravel.
 
 
The number of websites built with Laravel has emerged displaying the best of characteristics of  Laravel. List down your favorite websites in the comments given below made with Laravel that have left an impact on you. Contact our experts at [Laravel Development company](https://www.sifars.com/services/laravel-development-company) to make the best website for your brand.
7 Must-Haves For Ultimate AWS Security
Tags: aws, devops, security, productivity
Published: 2022-02-17 10:53:13

---
title: 7 Must-Haves For Ultimate AWS Security
published: true
date: 2022-02-17 07:48:44 UTC
tags: aws, devops, security, productivity
canonical_url: https://www.setops.co/blog/aws-account-security-must-haves
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnmwt2n1zcl7wvg47f59.png
---
AWS makes our life easier in many ways. But, as it often happens, in an attempt to address all possible needs, it ended up with just too many features to keep an eye on. Newbies or small teams that cannot have a dedicated AWS admin, may get lost or spend too much time managing and configuring it.

In our new series, we help you to set up an AWS account from scratch. We start with security. Read this article to learn the 7 must-haves of it:
[setops.co/blog/aws-account-security-must-haves](https://seto.ps/9a0230)
How to delete documents in mongo with mongoose
Tags: mongodb, mongoose, javascript, codever
Published: 2022-02-17 07:19:00

To delete one entry you can use `findOneAndRemove` command - it issues a mongodb `findAndModify` remove command.
Finds a matching document, removes it, passing the found document (if any) to the callback.

```javascript
let deleteBookmarkById = async (userId, bookmarkId) => {
  const bookmark = await Bookmark.findOneAndRemove({
    _id: bookmarkId,
    userId: userId
  });

  if ( !bookmark ) {
    throw new NotFoundError('Bookmark NOT_FOUND with id: ' + bookmarkId);
  } else {
    return true;
  }
};
```

An alternative is to use the `deleteOne()` method which deletes the first document that matches `conditions` from the collection. It returns an object with the property `deletedCount` indicating how many documents were deleted:

```javascript
let deleteBookmarkById = async (userId, bookmarkId) => {
  const response = await Bookmark.deleteOne({
    _id: bookmarkId,
    userId: userId
  });

  if ( response.deletedCount !== 1 ) {
    throw new NotFoundError('Bookmark NOT_FOUND with id: ' + bookmarkId);
  } else {
    return true;
  }
};
```

To delete multiple documents use the `deleteMany` function. This deletes all the documents that match the conditions specified in filter. It returns an object with the property `deletedCount` containing the number of documents deleted.

```javascript
/**
 * Delete bookmarks of a user, identified by userId
 */
let deleteBookmarksByUserId = async (userId) => {
  await Bookmark.deleteMany({userId: userId});
  return true;
};
```

<span style="font-size: 0.9rem">
  <strong>Reference - </strong>
  <a href="https://mongoosejs.com/docs/api/model.html" target="_blank" style="font-weight: lighter">
     https://mongoosejs.com/docs/api/model.html
  </a>
</span>

<hr/>

> Shared with :heart: from [Codever](https://www.codever.dev/snippets/620c9bb7e102f148ceb9f6f0/details). Use :point_right: [**copy to mine**](https://www.codever.dev/snippets/620c9bb7e102f148ceb9f6f0/details) functionality to add it to your personal snippets collection.
Animated Sidebar Navigation Panel using HTML, CSS and Javascript
Tags: javascript, html, css
Published: 2022-02-17 07:12:32

In this video tutorial we will be building an
awesome animated navigation panel purely using HTML,CSS and little bit of JS.

https://youtu.be/fiGCCuarFmY

I highly recommend beginners to watch it so they can learn and get better understanding of the html, css and javascript.
How to remove class on scroll top and add on scroll down on html body using JavaScript.
Published: 2022-02-17 06:58:23

Here we are going to write simple JavaScript for remove class on html body on scroll top behavior and add class on scroll down behavior which is most used in mobile responsive web designs to show and hide site navbar. We can further hide and show the navbar with some CSS3 transitions (for make attractive) by using with the help of that class which is adding and removing with the help of JavaScript.

**JavaScript snippet.**

```
// javascript for remove class on scroll top and add on scroll down 
var lastScrollTop = 0;
var body = document.body;
window.addEventListener("scroll",function(){
var scrollTop = window.pageYOffset || document
.documentElement.scrollTop;
if(scrollTop > lastScrollTop){
    body.classList.remove("shownavbar");
}
else{
    body.classList.add("shownavbar");
}
lastScrollTop = scrollTop;
});
```
**on Scroll Top Behavior of JavaScript Screenshot**

![on Scroll Top Behavior of JavaScript Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t635p2y08ex7d8se3qlo.png)

**on Scroll Down Behavior of JavaScript Screenshot**


![on Scroll Down Behavior of JavaScript Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdvjhi2buw39b7i0qlu6.png)
Javascript Closure Tutorial | Closures Explained
Published: 2022-02-17 06:47:35

In this tutorial , I have tried to explain the concept of closure through multiple examples. 
Closures explained in this way may be easier to understand. Closure is often confused with lexical scope which is an important part of closure, but it is not closure itself.

Timeline :
00:00  Intro
00:20 Understand Lexical scope 
02:37 Closure 
05:38 Closure with JavaScript Visualiser
08:10 Use Case 1: Subscribe Now
11:13 Use Case 2: Game Over !!!
{%youtube sN1TaTrS8z4%}
PHP ERROR 
Tags: php, mysql
Published: 2022-02-17 06:05:13



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/78i10r684zikkdgo3jqa.png)
( ! ) Warning: mysqli_num_rows() expects parameter 1 to be mysqli_result, null given in C:\wamp64\www\Final-project\examiner\action.php on line 22