teleren/devto huggingface dataset:
What's your definition of success?
Tags: life, success, watercooler, discuss
Published: 2020-08-04 11:35:38

The meaning of success can be different for everybody.

I would consider myself successful when I have the following:

1. Financial freedom
2. Automated income
3. Enough savings and investment
4. Work from anywhere
5. Healthy lifestyle
6. Work-free weekends
7. More family time
8. More travel

If you give enough thought on these points, you would realize that the following two points can help in achieving the rest:

1. Automated income
2. Work from anywhere

I haven't achieved any of the above yet. Once I do, I shall consider myself successful.

So what's your definition of success?

Do you think you are already successful? Or do you think you are close enough/far-away?
How to Connect a MySQL Database to a JavaScript Chart Using PHP
Tags: javascript, database, datascience, beginners
Published: 2020-08-04 11:23:29

For beginners, visualizing data from an SQL database in a JS chart usually looks quite challenging. JavaScript is a client-side solution and querying an SQL database requires a server-side approach due to security reasons — you just can't store database login and password in your front-end JS code. But things are never as bad as they seem.

Actually, everything is pretty straightforward and there are many workarounds out there involving PHP, Ajax, Node.js, etc. [This](https://www.anychart.com/blog/2020/08/04/mysql-database-php-js-chart/) just-published tutorial explains how to use PHP to load data to a JS chart from a MySQL database, providing clear instructions covering the following steps:

1. Create a PHP script.
2. Declare MySQL database variables.
3. Connect to the database.
4. Query the database.
5. Create data from the query.
6. Encode data to the JSON format.
7. Close the connection.
8. Draw the chart in JS.

Code samples are also available along the tutorial.

See the full tutorial [here](https://www.anychart.com/blog/2020/08/04/mysql-database-php-js-chart/). Feel free to ask questions there or here if anything remains unclear.
What book I have on my desktop...
Tags: beginners, dotnet, codenewbie, books
Published: 2020-08-04 10:35:59

Every week, I'll allow myself time to review one book, one online tutorial or any resource that I have used and I feel could help others to improve as developers, or even to have a different approach and may even like that approach.
Now this book being reviewed is called Adaptive Code via C#, but I would say a Java person or even a typescript person could use it. Specially the Agile process section is agnostic to what language you maybe using right now.
There is also a brief section on Git and continuous integration. Both chapters can be applied to any developer, no matter what tool you use. 
Now, have you ever wondered how could you associate SOLID principles to coding scenarios? How could adapt to Agile processes? What is an artifacts, roles? How do you organise dependencies when you are thinking of a system?

This book enables your knowledge of SOLID principles to become visualised in your head. The book gives a developer, solid foundations and the right approach to understanding the coding and design principles needed to build software the way it was intended.
It is available on Amazon UK @ £30.99 the paperback version - if like me you prefer to feel the papers! The US version is priced between $36-49. 
Highly recommended. Enjoy! and hope it helps someone!
CSS-in-JS - styled vs css prop 
Tags: discuss, react, css, help
Published: 2020-08-04 10:12:45

CSS-in-JS lovers, please help me understand why I should prefer using styled over CSS prop.

Not knowing immediately if it's a "real" React component or just an HTML element (and which one) is driving me nuts. 😰

```jsx
// MyComponentStyles.js
const Styles = {
  item: css`
    color: tomato;
  `,
};

const Item = styled.div`
  color: tomato;
`;
```

```jsx
// MyComponent.js
return (
  <ul>
    {/* Approach #1 - I can easily tell what's the HTML tag
                      and spot any markup mistakes */}
    <div css={Styles.item}>Pizza</div>

    {/* Approach 2: - Can't tell if it's an actual component or
                      just a "css wrapper". */}
    <Item>Pizza</Item>
  </ul>
);
```
How to 'fix' nodemon giving EADDRINUSE when changing a file
Tags: node, express, debugging, nodemon
Published: 2020-08-04 10:08:21

TLDR: upgrade to [nodemon](https://github.com/remy/nodemon#nodemon) 2.0.4 or higher.

# Background
This was a '4 tabs problem' yesterday, posting this here to save you the trouble. I found quite a few solutions, including a recent one that were not as simple as just upgrading. What happened? I installed a starter kid for node.js, from someone else. It would serve my tiny experimental API just fine, but I'd get "Port already in use" after each server restart. Nodemon reloaded my server.js just fine, but it seemed the application port wasn't shut down soon enough.

# Solution
Set `"nodemon": "2.0.4"` in package.json and you should be good to go.

# Bonus - I learnt about 'fuser'

One of the [incomplete solutions](https://github.com/standard-things/esm/issues/676#issuecomment-653371336) mentioned [fuser](https://www.digitalocean.com/community/tutorials/how-to-use-the-linux-fuser-command), a handy linux command to work with open ports and files. `fuser -k <YOURPORT>/tcp` will kill the process using `YOURPORT` (adjust number to taste). It can do similar things for open files, as well as list them.

It does happen some times that I have development servers open, and can't use a port, but forgot which app is using that port, `fuser` is a quick way to find out which program it is, and if necessary kill it.
Share your code lessons for developers 🔥
Tags: discuss
Published: 2020-08-04 09:53:32

---
title: Share your code lessons for developers 🔥
published: true
tags: discuss
---

Hello, developers! Share you code lessons for developers and I feedback you 🔥🔥🔥

I'll start first! 
Recently I started doing small lessons for Node JS developers who would like to try doing something trading. 
I've already done two lessons: 
https://gaserd.xyz/?go=all/how-create-stock-screener-on-node-js-ep2-alpacaapi-date-fns-and/ 
https://gaserd.xyz/?go=all/how-create-stock-screener-on-node-js-ep1/

I also did a lesson for my react native developers: https://dev.to/gaserd/small-trick-for-your-app-to-react-native---side-menu-with-overlay-52be

And there is a very old lesson from me on how to make your Google low-cost: 
https://dev.to/gaserd/how-to-create-small-search-engine-for-your-awesome-project-40m
How to enable two-factor authentication in Laravel Orchid
Tags: laravel
Published: 2020-08-04 09:43:21

## Two-factor authentication

Two-factor authentication provides your users with additional account security, requiring them to provide a token at login time in addition to their username and password.

## Laravel Orchid - what is it?

This is a package for building administration-style applications using the Laravel framework. It is most often used to build back-office applications, admin panels, and content management systems. You can see the differences from Nova, Voyager, BackPack, QuickAdminPanel [on the description page](https://orchid.software/en/docs/)


## Configuring

By default, the TOTP algorithm is used as the two-factor authentication provider. To enable it, you need to call a static method in the service provider:

```php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Orchid\Support\Facades\Dashboard;

class AppServiceProvider extends ServiceProvider
{
    public function boot()
    {
        Dashboard::useTwoFactorAuth();
    }
}
```

Now the login form adds a token validation for the accounts upon authorization.

Now let's go to the profile page:

![Edit User](https://dev-to-uploads.s3.amazonaws.com/i/frgu4cjqln3c6loeafqy.png)

In the settings, select the "Two Factor Authentication" item, a modal window opens:

![Two Factor Authentication](https://dev-to-uploads.s3.amazonaws.com/i/9rgqdqd9oxyp9o36irga.png)

At this stage, we need an application that supports TOTP, for example, Google Authenticator (Available on iOS and Android)

Scan the offered QR code or manually enter the TOTP code.
The app now generates short temporary codes:

![Google Authenticator](https://dev-to-uploads.s3.amazonaws.com/i/lopuprad83ab2auecgf2.jpg)

To enable, it remains only to enter the code from the phone into the modal window.

Now, when entering the panel, a temporary code will be requested:

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

That's all. This way we made our application safer. Even if someone receives a login and password for an account, they will also need physical access to your phone to enter the time code.
for of loop
Tags: javascript, react, node, webdev
Published: 2020-08-04 09:26:27

The new `for of` loop is designed to work exclusively with iterable objects. The loop calls the `next` function behind the scenes and exits when the `done` property is `true`.

```js
for ( let n of [1,2,3] ) {
  console.log(n);
}
// 1
// 2
// 3
```

As long as the object implements the iterable interface it can be looped with the `for of` loop. This includes arrays, maps and sets.

```js
var map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let pair of map) {
  console.log(pair);
}
// [a,1]
// [b,2]
```

Arrays, sets and maps also expose the `entries`, `keys` and `values` functions for returning specialised iterators. The `keys` iterator loops over only the keys, the `values` iterator only the values, and the `entries` iterator the key/value pairs.

```js
var map = new Map();
map.set('a', 1);
map.set('b', 2);

for (let key of map.keys()) {
  console.log(key);
}
// a
// b
```

In ES6 strings also implement the iterable interface.

```js
for (let char of 'foo') {
  console.log(char);
}
// 'f'
// 'o'
// 'o'
```
Python Lambda expression
Tags: python
Published: 2020-08-04 09:18:25

I recently re-discovered python's version of anonymous functions, lambda, and have been happily using it again as much as possible. Lambda is useful in making your code more concise and allows for brevity when using methods such as map and filter. So what is lambda exactly

###What is Lambda Exactly and why use it
Lambda is a method of writing simple functions in a one-liner fashion that can be used in so many different ways. 
```
def square(num):
    return num**2
#or 
def square(num): return num**2
```

The function above is a prime candidate for lambda, due to the ease in writing it on one line. Since most functions have a return value and will have the def keyword when using lambda these parts of the function declaration are done for you. So the function above can be written as:
```
lambda num:num**2
#or
t = lambda num:num**2
```
So the question here is why should you care? Well for example when using it with map, instead of having to declare a small function in your code and then using said function to modify a list, you can do this:
```
lst = [1,2,3,4,5]
list(map(lambda num:num**2,lst))
#[1, 4, 9, 16, 25]
```
Do you see the beauty in this? In two lines of code, I declared a list and then squared its elements; I could then print them out or save them to a new list, the possibilities are endless. Another awesome use for lambda is the filter method

##Another Awesome Use of Lambda
When using the filter function with lambda filtering out lists and sets can easily be accomplished on one line.
So, for example, let's say I wanted to filter out the list above to only include numbers greater than 2:
```
list(filter(lambda num:num>2, seq))
#[3,4,5]
```
Again using lambda I accomplished this in one line, and with that, I will leave you with one question. Could you imagine using this with a large dataset, and easily filtering all the data in one line of code?  :)
Django: reset auto-increment id to 1
Tags: django
Published: 2020-08-04 08:32:13

The discussion in stackoverflow [here](https://stackoverflow.com/questions/27735375/django-model-instances-primary-keys-do-not-reset-to-1-after-all-instances-are-de/27735430) gave a clear view of how to handle the problem, which many argue and I do agree that the id should not be reset since it is unique and should not be recreated.

Anyway, for the clarity of my database id, I still tend to do so. Simply erase table data from SQLiteStudio, or run `objects.all().delete()` does not reset the id. The answer provided in the above stackoverflow for sqlite is to run a sql command
```
-- reset index

DELETE FROM <table_name>; 
DELETE FROM SQLite_sequence WHERE name='<table_name>';
```

---

UPDATE:
It also works when adding data to table with existing data.
In a senario where you import the wrong data, you can remove the data by the following:
```
-- delete certain rows (only keep rows that are between)

DELETE FROM <table_name>
WHERE id NOT IN (SELECT id FROM <table_name> WHERE id BETWEEN <int> AND <int>)
```
Then run the previous reset index command to let the index remain consistent before import another data.
How do you 'Save for later'?
Tags: webdev, discuss, productivity
Published: 2020-08-04 08:23:00

---
title: How do you 'Save for later'?
published: true
description: 
tags: webdev, discuss, productivity
cover_image: https://media.wired.com/photos/5926c9cd8d4ebc5ab806b7bd/master/w_2400,c_limit/GettyImages-535621328-s.jpg
---
Let's say you find an awesome article somewhere across the web, but you don't have time to read it. You need to save it for later.

So far I've tried only [Pocket](https://getpocket.com/). What are your solutions to this?
FOSS Hack 2020 - India
Tags: opensource, india, hackathon
Published: 2020-08-04 08:22:51

Announcing the biggest FOSS hackathon in India - Great opportunity to start a new project or contribute to an existing one. 12th and 13th September 2020. 

Prize Money ₹ 10,00,000 💥

Register at https://fossunited.org/hackathon
Rules: https://fossunited.org/hackathon/rules

#FreeSoftware #OpenSource
Live Webinar On Netsuite
Tags: netsuite, netsuitewebinar, livewebinar
Published: 2020-08-04 08:21:29

Are you interested to learn more about #Netsuite ?- then regesister
our free live #webinar 
at : https://hkrtrainings.com/webinars
#Netsuite #Netsuitewebinar #Livewebinar #SuiteAnalytics #SuiteFlow #SuiteCloud #HKRTrainings
Building a custom card in flutter
Tags: flutter, android
Published: 2020-08-04 07:55:13

I was working on a project that demands me to build a custom cards to suit the project UI so here is how I built it.

Stage 1: 
I believed you know how to create a flutter project, so here is how I structured my libs folder; model, screens, utils...

In the model folder I have a file named reusable_card.dart. 

Part1: Create a card
In this part we gonna create card.
What are local variables and global variables in Python?
Tags: python
Published: 2020-08-04 07:50:43

Global Variables:

Variables declared outside a function or in global space are called global variables. These variables can be accessed by any function in the program.

Local Variables:

Any variable declared inside a function is known as a local variable. This variable is present in the local space and not in the global space.

Example:

1
2
3
4
5
6
a=2
def add():
b=3
c=a+b
print(c)
add()
Output: 5

When you try to access the local variable outside the function add(), it will throw an error.

Meet the Experts For better Guidence : https://nareshit.com/python-online-training/
What is external CSS file?
Tags: css, html, beginners, webdev
Published: 2020-08-04 07:31:23

This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#what-is-external-css-file

---

{% youtube npqVp8X-B68 %}

Planning the structure of the project and how we want to solve most cases should be done when we start the project.

One of the issues that we need to solve in the front-end project is "how to add styling".

There are a few possibilities of adding styles to make our layout looking well.

Of course, there are many more of them when we use 3rd party packages or some frameworks, but when we use pure HTML and CSS, there is a bit less.

We can write styles directly in the HTML file in the "style" tag, we can do inline styles, write some js script that adds styling to our elements, or use external CSS files.

An external CSS file is just the ".css" extension file, that we write CSS code inside, next, we can import that file into the front-end template, where we need to use that code.

In some cases, like using CSS frameworks like bootstrap, Antd, Bulma, or something else, we can import external CSS files from the remote CDN instead of handling them in our local directories.

The way of adding styles into the external CSS file is a very popular solution in the pure HTML/CSS/js projects, but not only.

Even when we build projects with frameworks like React, Angular, or Vue, we can use external CSS files, and it's a perfect solution, especially with the bigger projects or projects where our UI is separated from the front-end logic.

Let's see the code example below, where I've created a simple CSS file.

```css
body {
  background-color: #fefefe;
  color: #444;
}

.container {
  width: 80%;
  margin: auto;
}

.card {
  border-radius: 15px;
  padding: 10px;
  background: white;
}

```

<a href="https://www.duomly.com/?code=lifetime-80">![Duomly - Programming Online Courses](https://dev-to-uploads.s3.amazonaws.com/i/bde89cw4h64z765g2l4r.png)</a>

Thank you for reading,
Radek from Duomly
🤦‍♂️ Weekly fail (32/2020)
Tags: fail, lessonslearned, video, unresponsive
Published: 2020-08-04 07:26:56

My computer started being unresponsive while editing a video in Adobe Premiere. When there is not enough RAM, Premiere uses hard drive space and calls that a “scratch disk.” I got to a point when it was impossible to save the project due to the scratch disk being full. I only allowed my primary SSD to be used as a scratch disk and - surprisingly - the drive had insufficient free space. I did not have anything “easily deletable” on the SSD, so I decided to add my other - SATA - drive as another scratch disk. 🤦‍♂️ Not the best idea. It enabled me to save the project, but it took several minutes. I could not continue working though.

Then I got another great idea. Maybe freeing up some space on the SATA drive would help. So I started the move of 30GB worth of videos from the drive to cloud. 🤦‍♂️ The disk usage maxed out and all that was left for me to do was to get out and walk my dog.

*Lesson learned:* **Always use SSD as scratch disks/not-enough-RAM-disks and if you’re editing videos, do just that and don’t multitask.**
C# basic indexer question
Tags: beginners, help, csharp
Published: 2020-08-04 07:13:40

Learning C# and this is bit embarrassing but I wanted to make sure I understand everything and not skip over things I do not understand.

is the line with the following code initializing "Roles" as a property on an instance of the Employee Class?
 
```
 public Employee() => Roles = new ProjectRoles(); 

```




```
        class ProjectRoles
        {
            readonly Dictionary<int, string> roles = new Dictionary<int, string>();
            public string this[int projectId]
            {
                get
                {
                    if (!roles.TryGetValue(projectId, out string role))
                        throw new Exception("Project ID not found!");

                    return role;
                }

                set
                {
                    roles[projectId] = value;
                }
            }
        }

        class Employee { 
            public int EmployeeId { get; set; } 
            public string FirstName { get; set; } 
            public string LastName { get; set; } 
            public ProjectRoles Roles { get; private set; } 
            public Employee() => Roles = new ProjectRoles(); 
}

    }
```


Probably painfully obvious to you but I just wanted to confirm thank you.
DOM Element ID as Global Variable
Tags: javascript, webdev, productivity, tutorial
Published: 2020-08-04 06:58:57

Hey Developers,
> I have created a detailed explanation video about how global variables are created when the dom elements are having id attribute.
{% youtube Tdx8RBmvqiQ %}

### Introduction
   * Javascript is a client and server side programming language which basically makes the webpages as dynamic.
   * In Javascript, HTML DOM elements can be accessed by an object called document.
   * Javascript variables will be created to access the dom elements by their id, tagname, classname, css selectors by using the respective methods inside the document object, which is accessible in Javascript.
   * Instead of creating the variables, the html element can also be accessed if it has id attribute.

### Explanation
   * The value of the id attribute for all elements are made available as properties of the global window object. Since window is the global object in the browser, it is accessible as a global variable.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x83pc6pvsk5hthvkczjg.png)
   * Website I refered - https://www.tjvantoll.com/2012/07/19/dom-element-references-as-global-variables/

### Final thoughts
   * The **advantage** of this technique is If you are having more number of dom elements, then you need to create as much as variables. But, you can directly access the dom elements by without creating any external variables.
   * The convention for accessing dom elements is only by creating variables. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agytaoz05ai5g27ga5j2.png)
   * One more factor is you can rename the variable and create any number of variable for the single dom element with the different variable name.

* Thank You.

### Support Me
* [Youtube - Vuelancer](https://www.youtube.com/channel/UC0hmXRqXYVO0mocVt5D3GkQ)

* [Github - Vuelancer](https://github.com/vuelancer)

* [Scrimba](https://scrimba.com/@selvakumardhivakar)

* [Vuelancer - Patreon](https://patreon.com/vuelancer)
How to add watermark on an image in Laravel 5.8 Step by Step
Tags: laravel, php, tutorial
Published: 2020-08-04 06:46:41

In this blog post, we will learn, how to add watermark to an image in Laravel 5.8 application, to add watermark to images we will use the intervention image composer package in Laravel 5.8. we can add images or text as a watermark on the image in Laravel. For more docs, you can follow them.
[Intervention Image](http://image.intervention.io/).

To make a watermark on an image. we will install intervention/image package and then we will create one simple route to adding image watermark in the Laravel app. so let’s follow the below step to add image watermark in Laravel 5.8.

##Step:1 Install intervention/image Package.

In the first step, I install an intervention/image composer package for adding watermark to the image in Laravel 5.8. to install a package using the following command.

`composer require intervention/image
`
After installation, we need to set providers and alias, to do that we need to follow some steps… go to your project and search.
### config/app.php

```php
‘providers’ => [
Intervention\Image\ImageServiceProvider::class
]
‘aliases’ => [
 ‘Image’ => Intervention\Image\Facades\Image::class
]
```

### Step:2 Add Watermark to image

Here, I created a controller(you can use a simple route) to add a watermark to the image. so you need to add two images on your public “images” folder for testing purposes.

Here I use two images one for the main image and a second image for watermark so I have a **main.png** and **watermark.png** image on your images folder for demo.

```php
public function addWatermark(){
   $img = Image::make(public_path('images/main.png'));    
   $img->insert(public_path('watermark.png'),'bottom-right',10, 10); 
   $img->save();
}
```
So here we completed tutorials on How to Add Watermark on an Images in Laravel 5.8 step by step.