teleren/devto huggingface dataset:
Laravel 8 Preview Image Before Upload
Published: 2020-10-06 10:54:49

Laravel 8 image upload with preview tutorial. In this post, i will share with you on how to upload image with preview using jQuery in laravel 8.

As well as display preview of image and validate image file data on server side before upload to database.

In this post example, i will create image upload form with preview in laravel. And display preview of image before upload to database with validation in laravel 8.


### Laravel 8 Preview Image Before Upload

Simple steps to preview image before upload in laravel 8 app:

Step 1 – Install Laravel 8 Application
Step 2 – Configuring Database Details
Step 3 – Create Image Model & Migration
Step 4 – Create Routes
Step 5 – Creating Controller
Step 6 – Create Image Upload Preview Form
Step 7 – Link storage/app/public/image Directory
Step 8 – Start Development Server
Step 9 – Run Laravel 8 Image Upload with Preview App On Browser

[https://laratutorials.com/laravel-8-image-upload-with-preview-tutorial/](https://laratutorials.com/laravel-8-image-upload-with-preview-tutorial/ "https://laratutorials.com/laravel-8-image-upload-with-preview-tutorial/")
Custom Sort in C++ vs Python (With and Without Lambda Functions)
Published: 2020-10-06 10:46:52

# Custom Sort in C++ v/s Custom Sort in Python3

Eg: Sorting a list of tuples where sorting is to be done in descending order of the second value of the tuple.

### IN C++

```cpp
//header files above
bool compare(pair<int, int> a, pair<int, int> b) {
	return a.second > b.second;
}

int main() {
	vector<pair<int, int>> arr; // a list of tuples
	// Method 1 (With lambda function - C++11 onwards)
	sort(arr.begin(), arr.end(), [&](pair<int, int> a, pair<int, int> b) {
		return a.second > b.second;
	}); 
	// Method 2 (Without lambda function)
	sort(arr.begin(), arr.end(), compare);
}
```

### IN PYTHON3

```python
a = [(1, 2), (2, 3), (3, 4), (4, 5)];

def compare(x):
	return -x[1]

# Method 1 (With lambda function)
sorted_a = sorted(a, key=lambda x: -x[1]) #can also use : sorted(a, lambda x: x[1], reverse=True)

# Method 2 (Without lambda function)
sorted_a = sorted(a, key=compare)
```
Follow Up
Tags: reflections
Published: 2020-10-06 10:29:38

---
title: Follow Up
published: true
description: Following up and following through is a well known formula for success. Yet people don't do it. Why?
tags: Reflections
slug: follow-up
canonical_url: https://www.swyx.io/follow-up
---

> "You’d be surprised how far you’ll get by just doing what you say you’ll do." - [Sahil Lavingia](https://twitter.com/shl/status/1311235651795214336)

## Follow up

To dramatically improve the probability of feedback, level up fast, and become a partner and then a peer to people you look up to, [**Pick Up What They Put Down**](https://www.swyx.io/learn-in-public-hack/). Even if it is to say you appreciate what they do. [It](https://twitter.com/swyx/status/1275220693307674624?s=20) [never](https://twitter.com/wesbos/status/927966276261171201?s=20) [gets](https://twitter.com/jjacobs22/status/1286396277194985484?s=20) [old](https://twitter.com/ashleydavis75/status/1275262643817734144?s=20).

## Follow up more

Want a job? Want to raise money? Want to hire someone? [Cold emailing](https://paigefinndoherty.com/2020/03/25/a-cold-outreach-workshop/) is inevitable. Because it's cold, you may get ignored. **Follow up**. Some in-demand people automatically ignore all first emails as a desire filter. Others are busy or don't have their shit together. Judge them all you like. 

In all cases, following up improves your chances of getting what you want.

## Follow Through

**Following Through is just Following Up on your past self.**

Many [Obligers](https://lifegoalsmag.com/how-to-say-no-as-an-obliger-personality/), like me, try not to let others down, but let ourselves down way too easily. 

You fall in love with ideas, you underestimate difficulty, you find it hard to say no to other people's hopes and expectations, you get lazy and change your mind. You write a check your future self can't cash. Then you [build an identity of someone who doesn't follow through](https://jamesclear.com/identity-votes). This becomes self-fulfilling.

Less promising. More doing.

## Don't Flake

The old adage is "[If you want something done, give it to a busy person](https://quoteinvestigator.com/2018/01/30/busy/)". 

That's too indirect. 

**If you want something done, give it to a person who gets things done.** Guess what kind of people get more opportunities?

> "If you want to stand out, set yourself apart in the world: When you say you're gonna do something, do it. **Don't flake and I will bring you business for the rest of my life.**" - [Jerod Santo](https://twitter.com/swyx/status/1193466435177082880)

## So What

You have good [reasons to not follow up](https://twitter.com/swyx/status/1313364849095655425). Health. Family. [Fear of looking spammy](https://twitter.com/latviancoder/status/1313430624624095235?s=20). Distractions. Anxiety. Lack of confidence. Cynicism. Fatalism. [Resistance](https://en.wikipedia.org/wiki/Resistance_(creativity)).

So do people who follow up. Many had more privilege than you. Some had less. They overcame it. The difference? 

They understood the value of following up.
What apps do you use for planning your week?
Tags: webdev, discuss, planning, productivity
Published: 2020-10-06 10:28:37

---
title: What apps do you use for planning your week?
published: true
description: 
tags: webdev, discuss, planning, productivity
cover_image: https://cdn.business2community.com/wp-content/uploads/2016/05/Google-Calendar.png.png
---
The success of our day is largely dependent on the quality of our planning. Some people prefer to make a list of upcoming tasks in a notebook, while others have long started using digital technology solutions.

Do you use some calendar app like [Google Calendar](https://calendar.google.com/), [Apple Calendar](https://www.icloud.com/calendar), [Fantastical](https://flexibits.com/fantastical) that sync across all you devices and plan tasks like that? 

Or maybe you prefer note taking apps like [Notion](https://www.notion.so), [Evernote](https://evernote.com/) or [Trello](https://trello.com/) to track you tasks and their execution?

Or do you still use the traditional block-note approach as for some people no app will ever be as flexible and easy to use as pen and paper?
Semantic Commit Messages
Tags: git, sourcecontrol
Published: 2020-10-06 10:17:31

#ปัญหาของ commit message 

โดยปกติแล้ว เวลาเรา commit code เข้า source control ถ้าไม่ได้มีการตกลงกันว่าจะใช้ commit message รูปแบบไหน ก็จะออกมาแนวตัวอย่างด้านล่าง

```
13be475b2 - 3 weeks ago : change tutorial banner
0559f19c6 - 3 weeks ago : Add hours ago for unlockerView
31f7893eb - 3 weeks ago : Fix barrier constraint
ba2a7b935 - 3 weeks ago : Update build version
```

จะเห็นได้ว่าอ่านได้ยากพอสมควร เนื่องจากแต่ละ message ไม่มีความชัดเจนว่าเป็นงานแบบไหน จึงควรมี format ที่เป็นตัวกลางสักตัวที่ทุกคนในทีมเวลา commit code จะได้เขียนเหมือนๆ กัน

#Semantic Commit Messages

ข้างล่างนี้จะเป็นรูปแบบของ message ที่ชื่อว่า [Semantic Commit Messages](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)

###ความหมาย
* **feat:** feature ใหม่สำหรับผู้ใช้ เช่น เพิ่มให้ผู้ใช้เซฟรูปภาพลงเครื่องได้
* **fix:** แก้บั๊กต่างๆ ก็เขียนแปะไว้ว่าที่เราแก้ไปมีบั๊กเรื่องอะไรบ้าง
* **doc:** ใช้สำหรับอัพเดทพวก document ประกอบ ใน git เราสามารถใส่ document ของ project เราลงไปได้เช่นพวก README.md
* **style:** แก้พวก code style พวก spacebar ลืม semicolons หรือปรับ format ต่างของ code ที่ไม่กระทบกับการใช้งานของผู้ใช้
* **refactor:** refactor code รวมถึงเรื่องเปลี่ยนชื่อ function หรือตัวแปรต่างๆ
* **test:** ใช้เวลาแก้ code ในระบบ test ที่ไม่กระทบการใช้งานของผู้ใช้ เช่น เพิ่ม test หรือ refactor test
* **chore:** แก้ไข build script ต่างๆ ที่ไม่เกี่ยวกับตัว source code 

โดยหลังจากเปลี่ยนแล้วไปใช้ format เดียวกันแล้วตาม comment ตัวอย่างข้างบนเราจะได้ออกมาตามด้านล่างนี้

```
13be475b2 - 3 weeks ago : feat: change tutorial banner
0559f19c6 - 3 weeks ago : style: Add hours ago for unlockerView
31f7893eb - 3 weeks ago : fix: barrier constraint
ba2a7b935 - 3 weeks ago : chore: Update build version
```

###สรุป
การที่เราใส่ commit message ให้เป็นไปตามรูปแบบที่ตกลงกันไว้ เวลาเราย้อนกลับมาดูหรือเวลา review code กัน มันช่วยให้ทีมสื่อสารกันได้ง่ายขึ้น จะมาหาอะไรเราก็สนใจที่หัวข้อก่อนได้เลย
How to get the distance of closest element while dragging over?
Published: 2020-10-06 10:07:31

I'm trying to create a sortable tree in which when I drop an element ender another one it will resort ender and when I drop it above it will be sorted above, and when it dropped on the element it will resort as a child element. I create the following formula, but it is no reliable because  offset=the distance between mouse position and between the original position of the dragged object.
```
const box = draged.getBoundingClientRect()
const offset = e.clientY - box.top - (box.height / 2)
```
# So, how to get the relative option of between the dragged element and the draggedOver element.
[fullcode] (https://stackoverflow.com/questions/64223550/how-to-get-the-distance-of-closest-element-while-dragging-over)
Sharknado principle: Do not be afraid to talk
Tags: devlive, productivity
Published: 2020-10-06 10:07:27

In my career I attended way too many meetings where there was around 10 people sitting in a conference room but only few were talking. If the person leading a meeting is good they will ask questions directly aimed to those who do not speak. But way too often it ended up just two people talking, rest of them just sitting there. This is bad. Those people usually have opinions/solutions etc.. they are just afraid to say them because they may be wrong, unreal, etc… 

# People want to hear you 

If your brainstorming session ends up as discussion of two members of the team why even bother doing the meeting. If the person initiating that meeting wanted opinion of the second person and only that opinion they would ask them directly. They want opinion of the whole team. 


Let’s see the Sharknado movie. Yes, that crazy movie about tornado full of sharks. At one point there have to been meeting about what they will invest in/film next. And there has to be person that were not afraid to talk about tornado full of shard, guy with chainsaw and all the other crazy stuff. That person was not afraid to throw that idea out there. Even though it seemed stupid as hell. 


So what if your solution will not be picked, you contributed to the discussion and possibly provided another set of opinions. 


One too many times we had a discussion about a problem that we wanted to solve in the backend, designing features that would take days to implement just of our frontend dev to tell us that he can do this in thirty minutes in frontend. He could be afraid to talk as we here talking about complex stuff in the backend, estimating weeks etc.. In his head his solution could work, but he could be afraid he is missing something. He said it anyway. And that is how it should be. 


# Be careful on the other side as well

As the person leading the meeting, or one of the discussion participants be careful to accept the ideas of other. Do not dismiss them without considering them. Do not dismiss them without further discussion. Instead of say: “Nah it will not work.” Say: “I think this will not work because of X…, did you consider that?” Fuel the discussion, chances are it will help you find the best solution. 

Ask questions directly. Instead of “Everybody agrees?” Ask: “What about you Patrik? What do you think?” 

My biggest struggle is not to overpower the meeting. I have a lot of idea, quick thoughts and I am not afraid to talk. Be careful and create the space for others to talk. 

---

You can follow me on [twitter](https://twitter.com/pavel_polivka) to get more stuff like this.
Regular expressions, Eloquent Javascript
Tags: 100daysofcode, books, javascript
Published: 2020-10-06 10:05:48

> Regular expressions are a way to describe patterns in string data
~Marijn Haverbeke

#### Declaring regular expressions.
Using `RegExp()`:
```javascript
let exp1 = new RegExp("xyz");
```
Using a forward-slash:
```javascript
let exp2 = /xyz/;
```

#### Character groups
`\d` digit character
`\w` alphanumeric character 
`\s` whitespace character
`\DA` character that is not a digit
`\WA` nonalphanumeric character
`\SA` non-whitespace character
`.` Any character except for a newline

#### Characters and their use in regular expressions
`+` indicates that the element may be repeated more than once
`*` indicates that the element may be repeated more than once or omitted.
_You have to use parenthesis in an expression that uses `+` or `*` more than once_
`{n}` defines the number of times a pattern should occur. You can specify a range such as:
* `{3}` - should occur exactly 3 times
* `{1, 3}` - should occur at least once and at most thrice
* `{3,}` - should occur at least three or times

`-` indicates a range of characters.
`^` matches the start of the input string
`$` matches the end of the input string
`|` used to define a choice of two expressions

To include some characters in a regular expression such as + you have to include a backslash.
```javascript
let exp2 = /\+/;
```
#### Regular expression Methods.
`exec` returns a match if found or null if no match is found. The value returned has an `index` property that indicates the position where the match was found.
`test` returns a boolean indicating whether the string contains the pattern.

_Day 82 Done and dusted_
GoogletransX update!
Tags: go, webdev, opensource, showdev
Published: 2020-10-06 10:05:16

---
title: GoogletransX update!
published: true
description: Translate interface{} by parameters, ordered BulkTranslate results
tags: go, webdev, opensource, showdev
cover_image: https://www.pinclipart.com/picdir/big/57-579569_go-lang-gopher-clipart.png
---

https://github.com/yuriizinets/googletransx

Hi guys! :)
A bit earlier, I published my extended version of **Googletrans** (check [**here**](https://dev.to/yuriizinets/googletransx-free-unlimited-translation-pia)). And now, I'd like to introduce to you some changes

## Interface translation

From now, with `TranslateInterface` you can translate your structured data directly! Without handling fields getting and setting by yourself. It supports all the features, that `github.com/stretchr/objx` provides (nested interfaces, slices, etc)

Example is here:
```go
package main

import (
    "github.com/yuriizinets/googletransx"
)

func main() {
    input := map[string]interface{}{
        "A": map[string]interface{}{
            "B": "I'm a test",
            "D": []string{"Example", "Example"},
        },
        "C": "Example",
    }
    params := TranslateParams{
        Src:  "en",
        Dest: "ru",
    }
    fields := []TranslateField{
        {
            Src:    "A.B",
            Dest:   "A.B_ru",
            Params: params,
        },
        {
            Src:    "A.D",
            Dest:   "A.D_ru",
            Params: params,
        },
    }
    output, err := TranslateInterface(input, fields)
    if err != nil {
        t.Fatal(err)
    }
    fmt.Println(output) // Will be map[A:map[B:I'm a test B_ru:Я тест D:[Example Example] D_ru:[пример пример]] C:Example]
}
```

## Ordered results from bulk

It wasn't in the plans, but `TranslateInterface` requires correctly ordered results from `BulkTranslate`. So, UID field is added for `TranslateParams` struct. It's optional, you can just leave it as-is, BulkTranslate will put UIDs for you.


## Summary

I hope, that changes will be useful for you.
**Thank you for your attention, and good luck!**

## P.S.
Don't forget to check my another articles and packages!
- [Go private packages](https://dev.to/yuriizinets/go-private-packages-3bo)
- [GoPlaces: Go Algolia Places API Wrapper](https://dev.to/yuriizinets/goplaces-go-algolia-places-api-wrapper-3lk6)
Enhanced Code Splitting with Webpack 5
Tags: webpack, tutorial, javascript, webdev
Published: 2020-10-06 10:03:15

Webpack 5 is introducing a new feature called *Code Splitting*, which offers an easier and more customizable way of splitting JS code. However, it is still possible to combine the new method with the Split Chunks plugin.

> 🇨🇿 V češtině si lze článek přečíst na [kutac.cz](https://www.kutac.cz/weby-a-vse-okolo/vylepseny-code-splitting-ve-webpacku-5)

---

Split chunks plugin is very powerful, especially for [SPA](https://en.wikipedia.org/wiki/Single-page_application)s. But I made an information system in the old way with HTML templates. I'm using [Bootstrap 4](https://getbootstrap.com/docs/4.5/), [Datatables](https://datatables.net/), [EasyMDE](https://easymde.tk/), and [Magnific popup](https://dimsemenov.com/plugins/magnific-popup/) for historical reasons. I want to load each library only when is really needed. So splitting the whole codebase just into `app.js` and `vendors.js` is not satisfying.

# Splitting is based on multiple entry points

The main idea of splitting the code is based on multiple entry points with a definition of dependencies. It is basically very easy yet powerful. The code is split just like the developer wants. Each entry point has a name (the key), a path to JS file, and a dependOn attribute specifying the dependency.

> As mentioned above, the Split chunks plugin is not removed from Webpack and can be used together with code splitting. A great tutorial is in 4 minutes long [video on YouTube](https://www.youtube.com/watch?v=sX_6ezKfvn0).

See the code below with comments inside to get the basic idea of code splitting. More can be found in [the documentation](https://webpack.js.org/guides/code-splitting/).

```javascript
const path = require('path');

module.exports = {
  entry: {
    // The final file vendors.js contains only jQuery and popper.js
    'public/js/vendors': ['jquery', 'popper.js'],
    // main.js contains all imports like Bootstrap etc...
    // But does not include anything already contained in  vendors.js file, because of dependency
    'public/js/main': {
      import: './resources/assets/js/main.js',
      dependOn: 'public/js/vendors',
    },
    // DataTables are dependant on main.js because of Bootstrap
    // Everything included in main.js or vendors.js will not be included again
    'public/js/datatables': {
      import: './resources/assets/js/datatables.js',
      dependOn: 'public/js/main',
    },
    // Magnific popup needs only jQuery, it is enough to depend on vendors.js only
    'public/js/magnific-popup': {
      import: './resources/assets/js/magnific-popup.js',
      dependOn: 'public/js/vendors',
    },
    // EasyMDE does not contain anything from files above
    'public/js/easymde': './resources/assets/js/easymde.js',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './'),
    publicPath: '/',
    ecmaVersion: 5,
  },
};

```
ReactJS developers are in demand?
Tags: react, reactnative, learning, career
Published: 2020-10-06 09:20:57

What is ReactJS:

React JS is a javascript library mainly used for building a user interface. React is widely used for building single-page applications. React JS and React Native are the two technologies that are being used widely in web development and mobile development. This is introduced by Facebook to simplify the development process and give a better user experience. Our React JS Online Training Module is designed by Industry experts, this helps you in being trained on Fundamental concepts, React components and its architecture. From this React JS Online Training, you will learn all the Concepts with real-time cases & live examples by professionals.

Are react developers in demand?

React.js is one of the most demanding frameworks in the market;31.3% of worldwide specialists are currently utilizing this technology. And not only can they easily integrate the frameworks into legacy systems, but the systems can also be scaled time and again if required. Thus, not only can React JS make the legacy system relevant to the current business requirements, but they can also make the legacy system future proof.

In 2019, React. js was the most loved web framework by developers worldwide, according to the most recent survey done by StackOverflow. ... js questions on the same website and 111,612 npm packages, meaning that the future of React. js in 2020 is brighter than the sun.

Naresh I Technologies provides you the 100% assurance on your ReactJS Online Course with Success. Our ReactJS online training Course focuses on practical oriented training. You can now learn React JS online training from the real-time developers of the IT industry. Join us today to experience the best of best Online React JS Training! With React JS, you can create dynamic web applications that deliver amazing user-interface to the users. That is the reason why today most of the companies prefer to use ReactJS.

For more details please visit: https://nareshit.com/reactjs-online-training/
Manage Categorial Data of Dataset
Tags: machinelearning, datascience
Published: 2020-10-06 09:08:01

#encoding categorial data
#import LabelEncoder Class of Sklearn
from sklearn.preprocessing import LabelEncoder

#create object of LabelEncoder
labelencoder_X = LabelEncoder()

#labeling the object
labelencoder_X.fit_transform(X[:, 0])

# now put it into the country column
X[:, 0] = labelencoder_X.fit_transform(X[:, 0])

#Then Print 
print(X)
Get information from Stripe API with no server
Tags: stripe, livecoding, javascript, tutorial
Published: 2020-10-06 08:58:10

---
title: Get information from Stripe API with no server
published: true
description: How to get information from Stripe without creating a backend application
tags: 
  - stripe
  - livecoding
  - javascript
  - tutorial
//cover_image: https://direct_url_to_image.jpg
---

Hello,

I just published a live coding session part of a project I'm working on.

In this video, I go through the steps to integrate Stripe Checkout and extract information from the Checkout session to display a confirmation page based on the Stripe product created.

{% youtube ISa20JdwOFo %}