teleren/devto huggingface dataset:
Introducing LinkIn Customizable self hosted link tree app
Tags: showdev, nextjs, react, selfhosted
Published: 2021-06-20 13:03:19


![tile](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bzv5h5m4zbfeldqcchrp.png)

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0rd15xyfh4701y61jg6n.png)

![dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llj14zqnygfeytqwesy0.png)

### What is LinkIn?
LinkIn is a self-hosted link tree app that you can customize to create your own link tree page.

### Why LinkIn ?
There are many Link tree platforms available, but they do come with a price. either they include their branding or limit customization for various pricing plans. But LinkIn is totally free, you host it, you own it.

### Can i see a demo ?
Sure http://linkindemo.vercel.app/ 
 - Demo username = `admin`
 - Demo password = `linkin123`

### Is LinkIn OpenSource ?
Absolutely yes

{% github rizkyrajitha/linkin %}

### what LinkIn is made of ?

linkin is made using [Next.js](https://nextjs.org/) , and [Postgres](https://www.postgresql.org/) as the database. [Bootstrap 5](https://getbootstrap.com/) for UI components.

### how to get my own LinkIn page ?

visit [LinkIn GitHub page](https://github.com/RizkyRajitha/linkin) and use the one-click deploy buttons to spin your own LinkIn page.

{% github rizkyrajitha/linkin %}

linkin currently supports hosting in [vercel](https://vercel.com/) and [heroku](https://www.heroku.com/) platforms. you have to connect LinkIn with your own Postgres database instance and start making your link tree. LinkIn currently supports fonts from a external url (example - [google fonts](https://fonts.google.com/)) , icons from [fontawesome](https://fontawesome.com/) , and avatar image from external url (example - [cloudinary](https://cloudinary.com/) ) . 

### I have some experience in web dev. can I customize it on my own ?

Yes. LinkIn has a single component for the link tree. so you can add your own styles that LinkIn doesn't support and create your very own link tree.

LinkIn is in pretty early stages so you might find some hiccups along the way .you can visit [linkin Github repo](https://github.com/RizkyRajitha/linkin) and create issues. 

### What do you think about Linkin? Share em in the comment section.
<br>
### cheers 🥂
SPA with Springboot+JWT+Vue.js+Web socket 
Tags: java, showdev, vue, webdev
Published: 2021-06-20 12:59:06

As I wrote before, I made a [SPA with Springboot+JWT+Vue.js+Web socket](https://dev.to/lechatthecat/spa-with-springboot-jwt-vue-js-web-socket-48c4), but only a few people tested it, maybe because, to test the project, people needed to prepare Postgresql by themselves. It is really tiring to install and init DB. Even worse, it is also tiring removing DB once it is installed.

So, today, I moved the Postgresql DB in docker container. And if you want to test my project, you can do the preparation almost automatically. And it is very easy to remove containers after testing.

You can test the project from here:
https://github.com/lechatthecat/JavaChatSPA

## How to test the project
Prerequisites
- Java 11
- Maven 3.*
- Docker 20.10.6
- Docker-compose 1.29.1

How to run:
```
$ git clone https://github.com/lechatthecat/JavaChatSPA.git
$ cd JavaChatSpa
$ docker-compose up -d --build
$ npm i
$ npm run build
$ mvn clean package
$ mvn spring-boot:run
```

Working example:
https://chatboard.page/boards/lounge/0
Full Page scroll views in flutter(TikTok effect)
Tags: flutter, beginners, dart, tiktok
Published: 2021-06-20 12:38:27

You must have seen that the Ui flow between "Tiktok" and Instagram reel are similar, both of them have the full-page scroll view effect based on user swipe.
![instargram](https://im3.ezgif.com/tmp/ezgif-3-191e2cd68913.gif)
So we are going to write code for a basic component app with a full-page scroll view on display.
![image](https://im3.ezgif.com/tmp/ezgif-3-4373facaa85b.gif)

Firstly we declare a page controller that would handle the state for our pageview widget.
```
PageController controller =PageController(initialPage: 0);
```

We declared the page view widget with a vertical scroll direction and created a list of pages which we would be scrolling through as children.
```
PageView(
          controller: controller,
          scrollDirection: Axis.vertical,
          children: [
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.blue,
              child: Center(child: Text('page 1'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.red,
              child: Center(child: Text('page 2'),),
            ),
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: Colors.yellow,
              child: Center(child: Text('page 3'),),
            ),

          ],
        ),
```
That is all, this is a building block for an app like TikTok and Instagram where another component would be added on top.

[Github](https://github.com/cyiboy/-Full-Page-scroll-Flutter)
How to Fix Nodemon (nodemon.ps1) Cannot Be Loaded Because Running Scripts is Disabled on This System.
Tags: node, nodemon, webdev
Published: 2021-06-20 12:25:36

#This is a simple solution for solving this error on windows
```
>nodemon : File C:\Users\hp\AppData\Roaming\npm\nodemon.ps1 cannot be loaded because running scripts is disabled on this system. For more information, see 
about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
At line:1 char:1
+ nodemon app
+ ~~~~~~~

```
**First Step**
First search and run PowerShell as administrator

**Second Step**
If you read through the error message you will see this error was generated from **Execution_Policies**. In you powershell window type and enter the get execution policiy command.
```
Get-ExecutionPolicy

```
**Final Step**
After running the command it will return restricted as the result. We have to set the execution policy to unrestricted using the Set-ExecutionPolicy command.
```
Set-ExecutionPolicy Unrestricted

```
After this you will get a prompt message. Press Y to change it.
To be sure you have changed the get execution policy you can simply run it again to check the result. You'll get the output 'Unrestricted'

Now you can use nodemon on your machine.
Laravel 8.x Cursor Based Pagination Example
Published: 2021-06-20 11:53:21

###Introduction

Hello Developer, In this blog, I will teach you the Laravel 8.x cursor-based pagination example. The Laravel team released 8.41 with cursor pagination, a new eloquent method to update models quietly, a new string method, and the latest changes in the 8.x branch:

Cursor pagination works by constructing "where" clauses that compare the ordered column values ​​in the query, providing the most efficient database performance available amongst all of Laravel's pagination methods. This method of pagination is particularly well-suited for large data sets and "infinite" scrolling user interfaces. Unlike offset-based pagination, which includes a page number in the query string of the URLs generated by the paginator, cursor-based pagination places a "cursor" string in the query string.

There is no pagination for the Laravel cursor. So solving those issues Laravel team released 8.41 with cursor pagination. See the below example of how we can create cursor pagination.
Example

```
$users = User::orderBy('id')->cursorPaginate(10);
```

Given the above pagination call for ten records, here's an example of the response if we were to return this instance in a controller:
```
{
  "data": [
    {
      "id": 1,
      "name": "Nona Wilkinson",
      "email": "stephen68@example.com",
      "email_verified_at": "2021-05-12T23:21:19.000000Z",
      "created_at": "2021-05-12T23:21:19.000000Z",
      "updated_at": "2021-05-12T23:21:19.000000Z"
    },
    {
      "id": 2,
      "name": "Titus Feeney Sr.",
      "email": "oklein@example.com",
      "email_verified_at": "2021-05-12T23:21:19.000000Z",
      "created_at": "2021-05-12T23:21:19.000000Z",
      "updated_at": "2021-05-12T23:21:19.000000Z"
    },
    {...}
  ],
  "path": "http://127.0.0.1:8000/users",
  "per_page": 10,
  "next_page_url": "http://127.0.0.1:8000/users?cursor=eyJpZCI6MTAsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0",
  "prev_page_url": null
}
```
Thank you for reading this blog.
React hook to persist state of a dialog in URL
Tags: react, ux, typescript, javascript
Published: 2021-06-20 11:39:43

---
title: React hook to persist state of a dialog in URL
published: true
date: 2021-06-20 11:28:57 UTC
tags: react,ux,typescript,javascript
canonical_url: https://stereobooster.com/posts/react-hook-to-persist-state-of-a-dialog-in-url/
---

Inspired by [Braid Dialog](https://seek-oss.github.io/braid-design-system/components/Dialog#development-considerations):

> It’s recommended that you connect the Dialog’s open state to your router so that it can be closed via the browser’s back button.

When I saw this sentence - I thought what a cool idea. It was tricky to implement hook to capture all edge cases.

Basic example:


```tsx
const [showModal, setShowModal] = useState(false)

<Button onClick={() => setShowModal(true)}>Open dialog</Button>

<Dialog
  title="Dialog Title"
  description={<Text tone="secondary">Optional description</Text>}
  open={showModal}
  onClose={() => setShowModal(false)}
>
  <Placeholder height={100} width="100%" />
</Dialog>
```

## Now let’s see what we can do

When **dialog is opened** we need to push to history new item, let’s say `?dialog=true`. Using query param instead of path is easy, because we don’t need to configure router for it, but we also need to preserve other parameters in URL.

When **user navigates back** , we need to listen to history change and update state (e.g. `showModal`).

When **dialog is closed** we need to pop one item from the history. Alternatively we can push one more item or replace current item, but all this will pollute browser’s history.

When **user navigates directly** to the dialog link (e.g. `https://example.com/some-path?dialog=true`), hook needs to set starting value of `showModal` to true.

When **user closes dialog** after visiting direct link we need to use push instead of pop, otherwise browser will show blank page.

**Dialog may have precondition** when it can be showed, for example, we have a list of items with checkboxes, user suppose to select some items in order to delete them and after confirmation dialog will be shown. So we can’t show dialog if there are no items selected.

When **user navigates directly** to the dialog link and precondition is `false`, hook suppose to use history replace in order to remove flag from the URL and do not create new history items.

When **user opens dialog** , then navigates back, then navigates forward but precondition is `false`, hook suppose to redirect user back - pop one item from the history.

## Whew

Good UX needs attention. Hook looks like this:

```tsx
const [showModal, setShowModal] = useUrlToggle(
  "dialog",
  false
  /*, precondition is optional third param */
);
```

I implemented prototype of this hook [here](https://github.com/stereobooster/useful-react-snippets/blob/main/useUrlToggle/useUrlToggle.ts). Maybe not the best code, but my goal was to make proof of concept to see if it is possible.
How to write in markdown and benefit from LaTeX styles and features
Tags: markdown, latex, pandoc, docker
Published: 2021-06-20 11:21:51

---
title: How to write in markdown and benefit from LaTeX styles and features
published: true
description: Prefer markdown to LaTeX, but need those scientific formulae, and bibliography features? Here's a template and tool you can use.
tags: markdown, latex, pandoc, docker
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zf57wncjptjyc06kpk4.png
---

> The things I'll do to avoid learning LaTeX...

Personally, I'd rather not learn LaTeX. I prefer markdown for just about everything these days, as it's so much simpler and more intuitive... but I want my write-ups to benefit from the styles and features that LaTeX offers.

I've built a template and tool to help you do that. It'll give you a bit of structure, you can write markdown across multiple files to help manage and marshal your content, and the output is a single PDF that looks like an authentic LaTeX scientific paper - complete with citations, footnotes, figures and formulae.

You're welcome to use it for your own work, too.

**Full details at:** [instantiator.dev](https://instantiator.dev/post/markdown-thesis-template/)

Read on for a quick summary and steps to getting started...

## A template thesis

I've created a template you can use for your own write-up too.

Write your content in markdown, and a dockerised instance of `pandoc` will build it all into a PDF, in the style of a LaTeX paper. It has support for:

* A cover page
* Figures
* Footnotes
* Numbered sections
* Mathematics and formulae
* Bibliography and citations

## A dockerised tool

I containerised `pandoc` and few other tools so it can run whatever your computing environment. All you'll need is an installation of [Docker](https://www.docker.com/products/docker-desktop) to get going.

If you're interested to see how it works, check out:

* [Dockerfile](https://github.com/instantiator/markdown-thesis-builder/blob/main/Dockerfile)
* [scripts/build.sh](https://github.com/instantiator/markdown-thesis-builder/blob/main/scripts/build.sh)

## How to get started

* Ensure you have Docker running.
* Make a copy of the [markdown-thesis-builder](https://github.com/instantiator/markdown-thesis-builder) template.
* `git clone` it to your machine (or download the zip from GitHub).
* Modify any of the markdown files in the `source/` directory.
* Run: `./build-project.sh`

A successful build ends with a line telling you where to find the output PDF:

```text
Output document: source/build/Sample-Project_Your-Name.pdf
```

See: [The sample PDF](https://github.com/instantiator/markdown-thesis-builder/blob/main/sample/Sample-Project_Your-Name.pdf)

_Thanks so much for reading. If you found this helpful, or if you have comments, questions, improvements, or issues feel free to let me know!_

**Full details at:** [instantiator.dev](https://instantiator.dev/post/markdown-thesis-template/)
How to Recover Unsaved\Deleted Microsoft Excel File 
Tags: excel, office365, msoffice
Published: 2021-06-20 11:00:15

How to recover excel files, that you forgot to save or can't find that file anymore or deleted. I hope you find this video helpful. If you cannot recover your excel files then you might have to try data recovery software.

This method is only help you if you have Microsoft Office 2013 and above and also this video instruction has been demonstrated on Windows 10 using Microsoft Excel 2013.

{% youtube tCKEzgGcqFA %}

If you still cannot recover your word file that means MS Office auto save could not save your files. However, you can try professional data recovery software for your operation system type - Windows, Mac, iOS or Android.

You can follow text based instruction on [how to recover excel file](https://tubemint.com/recover-ms-excel-file/).
Source Maps
Tags: webdev, beginners, sourcemap
Published: 2021-06-20 10:58:25

One of the easiest and effective performance wins you can gain for your website is to combine and compress your JavaScript and CSS files. But it will be really difficult and frustrating to debug the code within those compressed files. There is a solution for this and it goes by the name of **source maps**.

A source map provides a way of mapping code within a compressed file back to it’s original position in a source file. This means with the help of a bit of software, you can easily debug your applications even after your assets have been optimized. Most of the browsers (Chrome, Firefox, etc.) developer tools comes with built-in support for source maps.

Original main.css

```css
body {
  background-color: rgb(27, 150, 199);
  color: white;
}
```

Optimized main.min.css

```css
body{background-color:#1b96c7;color:#fff}
/*# sourceMappingURL=main.min.css.map */
```

Source map main.min.css.map

```css
{"version":3,"sources":["custom/main.scss"],"names":[],"mappings":"AAEA,KACE,wBAAmC,CACnC,UAJgB","file":"main.min.css","sourcesContent":["$font-color: white;\r\n\r\nbody {\r\n  background-color: rgb(27, 150, 199);\r\n  color: $font-color;\r\n}\r\n"]}
```

There are plenty of free plugins are available to optimize styles,  scripts and create source maps for them.
[Optimize styles](https://www.npmjs.com/package/cssnano)
[Optimize Scripts](https://www.npmjs.com/package/terser)
[Create Sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps)

Source maps allows developers to maintain a straight-forward debugging environment while at the same time optimizing their sites for performance.
Don't Read ! if you are a happy coder. 
Tags: motivation, productivity, discuss, programming
Published: 2021-06-20 10:28:04

Not all days are green days, when your days are giving output like 100%. Amid studies, then job and the millions of youtube channels and of course Netflix, it gets difficult, to keep your coding journey continue (excluding the job work). You start doing a project and then stop in a week and then again start after 2 weeks... and sometimes after month, and then we start questioning ourself, criticizing and start sinking deep down.
I want to tell you...

**It's alright !**

From outside it feels like, only you are not doing enough and   rest are like, geeks and nerds typing at the speed of light, solving and tossing the best products in the market. Yeah! it's true. But not for absolutely everyone. Everyone struggles with almost same surroundings and reasons to keep you off goals, unless you are a psychopath and antisocial. But Yes, people find the way out. They solve it to pave their path towards something, a tangible result. You can't feel bad if you keep on repeating the same half cooked cycle.

Remember, it is simple. It's like a ritual. Our mom does prepare food without fail, as a ritual. It takes hours for her. A painter does paint, puts  his/her creativity like crazy. Similar should be like us, the developers. It is our ritual. I know , not the best examples, but I hope you get what I'm trying to convey.

It should be like a ritual, keep it continuous. The pace doesn't matter until you keep it going. Discipline is must, first if it is acquired, work on the pace and the commitment(delivery). Discipline doesn't mean do it everyday without fail, It means to be sensible and intelligently aware towards it. Figure out a plan, draft, distribute the work and then work on it.

It is fine, if you feel like "you are not good enough", not everyone could have the absolutely every knowledge. Tech is crazily vast. Take a warrior for example, He can't be adept in all of the weapons. He has to choose his sword and skill, same goes to us. Don't rush into multiple techs. Choose depth over width. If you still feel , you are not good enough, remember hard work outweighs talent.
 
One more things, Github is good, Jira is good, todo list is fine but nothing can replace pen and journal. Keep a light track of your daily workings. This kind of handwritten stuff gives a different kind of vision and satisfaction altogether.

You know what does a Doctor says when we miss out on our med? Take it as soon as you remember. Follow that. It's never too late. Accept the flaws, realize it but don't settle. work!!

![good](https://media1.giphy.com/media/qR6Sxkb8fp7ZS/giphy.gif?cid=ecf05e47v32l5204pu76l5db596i9eewukngq0uk9ui5ate8&rid=giphy.gif&ct=g)

Good luck!!
Happy vibes!!
Athena - Question regarding 'Create a table' options
Tags: help
Published: 2021-06-20 10:25:00

I have just started learning AWS Athena through an online course and have been following it up with the official aws documentation. I understand that Athena uses the Hive as an underlying mechanism to issue ddl queries, so it is basically the Hive syntax which we use.

From their documentation, I have trouble understanding these things :

*  [COMMENT table_comment]
Creates the comment table property and populates it with the table_comment you specify.

**What is the comment table property and how does it helps us ? do we have any specific usage of this**

*  [STORED AS file_format]

Specifies the file format for table data . *By specifying this we would instruct how the data obtained from querying a resource should be saved in the output s3 file*

But for this option, specifically 
INPUTFORMAT input_format_classname OUTPUTFORMAT output_format_classname

from where would we get the input_format_classname and output_format_classname ?


[reference](https://docs.aws.amazon.com/athena/latest/ug/create-table.html)

Any leads to an alternative reference or documentation would be appreciated :)
What is it like to be a data scientist at Accenture
Tags: algorithms, database, machinelearning, programming
Published: 2021-06-20 10:09:43

Accenture is an exceptionally well known Fortune 500 MNC that sells counseling and handling administrations across the world. It's anything but a significant lump of representatives in India, a lot bigger than the USA and Australia, and is focused on giving the best advantages to its workers. Data Scientist is the hottest occupation on the planet, as per HBR. On the off chance that you are intending to join Accenture as a Data Scientist, I recommend you go on, as per the worker's audits, Accenture is perhaps the best organization to work for, gives you a fair compensation, offers balance between fun and serious activities, great work-culture, and so on And everything relies upon the undertaking which you get. A decent venture gets great experience and terrible tasks acquire productive focuses that you could work out. 

When you join Accenture as a Data Scientist, whenever discovered you are deficient with regards to specialized skill, you should go through preparing by means of Big Data Academy which highlights coursework and tests, and you need to finish and meet all requirements to turn into a Data Scientist inside Accenture. And you could get yourself prepared and qualified, to upskill yourself, at customary stretches, and you will have probably the most demanding preparing to go through. In any case, in the end, your experience changes with projects. 

On the off chance that you wish to fill in as a Data Scientist, get yourself prepared in it. And the most ideal approach to do so will be to try out a [Data Science in India](https://intellipaat.com/data-scientist-course-training-india/) course from Intellipaat