teleren/devto huggingface dataset:
I've made a React app.                                                         Should you stick around? 
Tags: typescript, showdev, react, firebase
Published: 2021-10-28 08:31:30

# Should you wait the credits? "Stick Around" will tell you.

Ever since the first Marvel movies came out it seems like in every movie there's the possibility of an extra scene hidden during or after the credits.

I grew tired of waiting through the entire credits just to find out there's nothing there, or even worse - leaving the theater to later realize I missed something.

To counter this I've decided to make a super simple app that simply tells you if you should wait the credits, with the press of a finger.

The app is open source, no ads or revenue whatsoever and made as a fan service.

![Stick Around Production screenshots](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1gmoagf362er3eye5jd.png)

## How did I make this app?

I Used [Figma](https://www.figma.com/) for designing and prototyping, [React](https://reactjs.org/) with Typescript for the frontend implementation, [Firebase](https://firebase.google.com/) as the backend and [Capacitor.js](https://capacitorjs.com/) for Android and iOS support. 

All in all, I managed to design, code and publish the app to Google Play in less then 3 weeks.

### Designing the user experience in Figma

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

I've started the UX design process with few goals in mind:
  1. Keeping it simple
  2. One press away from results
  3. Dark mode (to be used in theaters)

The app is divided into 3 main screens:

#### In Theaters

This screen is the first screen the user enters upon launching the app. It shows you the movies now in theaters (according to [TMDB](https://www.themoviedb.org/));

#### Search

On this screen, the user can search for older movies, not currently playing.

#### Movie Screen

This screen contains some general information about a movie, and mainly the card that tells the user whether or not they should wait for the end.

#### Voting Model
How user vote on the movie


### Implementation

The framework I eventually choose was React with [Capacitor.js](https://capacitorjs.com/) to build cross platform.

The app uses [TMDB](https://www.themoviedb.org/) to get movie information and
Firebase to collect user votes.
and a basic function that decides between them.

The rest is pretty straight forward with React and Scss for styling.
most of the bugs and troubleshooting came with Capacitor.

## Conclusion
If this interested you, or you have any questions or requests, I will be glad to answer.

*Edit: there's a known issue with the first time screen not showing the continue button to some devices. It's already fixed on the web but not yet updated in the Android App.

[Google Play Store - Stick Around](https://play.google.com/store/apps/details?id=com.stickaround.app)

[GitHub - stick-around](https://github.com/ItayLisaey/stick-around)

[Stick Around on Web](https://movies.lisaey.com)
Faster Docker builds with composer install ⚡
Tags: php, composer, docker
Published: 2021-10-28 08:17:11

---
title: Faster Docker builds with composer install ⚡
published: true
description: How to optimize your docker build time when using composer install
tags: #php #composer #docker
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmypywgix6l9f21x95t7.jpg
canonical_url: https://softius.net/faster-docker-builds-with-composer-install/
---

When working with PHP projects and Docker, it is a good practice to include all the third party dependencies coming from `composer install`.

This really helps to reduce the time needed to spin off a new container. However, when not done right, it can significantly increase the build time.

Throughout this post we will see how we can avoid this and optimize `composer install` for docker builds.

Consider the following simple example, where we copy our source code before executing `composer install`

```
WORKDIR /my-cool-app
COPY . ./
RUN composer install --no-dev --no-interaction --optimize-autoloader
```

While this works, there is a major flaw; we don't leverage Docker cache. Every time there is a change in our source code, the docker cache for `composer install` will be invalidated.

In real life, this will happen with almost every build, causing `composer install` to be executed even when there are no changes in our dependencies.

Not efficient, that's for sure. But how can we avoid this?  Consider the following example:

```
WORKDIR /my-cool-app
COPY composer.json ./
COPY composer.lock ./
RUN composer install --no-dev --no-interaction --no-autoloader --no-scripts
COPY . ./
RUN composer dump-autoload --optimize
```

Here, we are copying only `composer.json` and `composer.lock` (instead of copying the entire source) right before doing `composer install`. This is enough to take advantage of docker cache and `composer install` will be executed only when `composer.json` or `composer.lock` have indeed changed!

One downside is that we have to skip autoload generation and script execution since the source code is not available yet. Easy fix though. This can be done as the last step and it shouldn't affect the performance anyway.

As part of this post we saw how we can re-structure our Dockerfile for PHP projects and take better advantage of Docker cache. I hope that's helpful for your project!

Make sure to follow me on [dev.to](https://dev.to/iacons), [Medium](https://medium.com/@softius) or [Twitter](https://twitter.com/iacons) to read more about PHP, Docker and other dev topics.

Photo by [CHUTTERSNAP](https://unsplash.com/@chuttersnap?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/speed?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Use Copilot in VSCode Neovim
Tags: githubcopilot, neovim, vscode
Published: 2021-10-28 08:05:44

### Set Neovim mode in VSCode
 - Install Neovim Extension: [VSCode Neovim](https://github.com/asvetliakov/vscode-neovim)

### Set Copilot in VSCode
 - Install Copilot Extension: [VSCode Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)

### Usages

 - First suggestion
  - o/i(Insert Mode) --> tab/tab(Select)

 - Choosing alternate suggestions
  - o/i(Insert Mode) --> tab/space --> alt-[/] --> tab

 - Getting more suggestions
  - o/i(Insert Mode) --> tab/space --> ctrl-Enter --> Accept Solution

### Examples
 - Create a sample file of typescript
```ts
function calculateDaysBetweenDate(begin, end) {<tab>

function calculateDaysBetweenDate(begin, end) {
  <tab>
}
```
What is JWT? How does it work?
Tags: jwt, authentication, login
Published: 2022-11-01 06:39:02

---
title: What is JWT? How does it work?
published: true
date: 2021-10-28 08:03:58 UTC
tags: JWT, authentication, login
canonical_url: https://mojoauth.com/blog/what-is-jwt/
---

Introduction to JWT JWT, or JSON Web Token, is an open standard(RFC 7519) set of claims to share security information or authorization/authentication requests between a client and a server. Each JWT contains encoded JSON objects. JWTs are signed using a cryptographic algorithm by the token’s issuer to ensure that No one could alter the claims after the token is issued and later can be used by the receiving party to verify the token.

[Read On](https://mojoauth.com/blog/what-is-jwt/)
My First Hacktoberfest
Tags: hacktoberfest, beginners
Published: 2021-10-28 08:02:02

Hello World!! This is my first post on Dev.to and I'm gonna share my experience about the first Hacktoberfest I joined. 

I've recently enrolled myself in Software Engineering and currently going through the core concepts of the computing stuff. Apart from that I got the opportunity to learn web technologies like HTML, CSS, JavaScript and PHP and I can proudly say that I can make any Web App by just using these. But I didn't stop there and moved on to learning MERN stack and now a days I'm learning React and Node and will become a MERN developer in few months.

Now coming back to topic, last month I was watching random videos on YouTube where all of a sudden an Ad for the Hacktoberfest appeared. It sparked my curiosity, so I began researching it, and I was astounded to learn that this Fest has been held on a yearly basis for the past eight years. So I started looking for projects, and to be honest, I had no idea how Open-Source worked, so I chose beginner-friendly projects. I made a total of 9 PRs out of which  only 5 got approved.

Today I have placed my order for the T-shirt and also claimed my badge on DEV for completing Hacktoberfest 2021!

Conclusion: I've learned about the Open-Source and I will definitely be taking parts in different projects from now on. I think its really a great because you get to interact with different developers and learn from them while helping them. 

Thank you!
JULIA
Published: 2021-10-28 07:56:53

Julia is by far one of the most popular and fastest growing language in the coding community ,it is free and open source and is developed by MIT. It is expected to surpass all the current languages in the data science domain in next few years because it is more faster, dynamic and efficient. It also has foreign function interfaces for languages such as C, C++, Python, Java.
Julia is organising a hackathon this month do participate in it and contribute to the community here's the link https://julialang.org/
Introducing the EyeDropper API
Tags: codepen, css, javascript, webdev
Published: 2021-10-28 07:42:07

The **EyeDropper API** has landed in *Chrome 95*. This API opens up a *lot of* possiblities. A user can select colors from images, create her/his own color-theme, and much more.

Let's built a simple, ultra-small *ColorPicker*, using this new API.

First, we need a form with a large selection-area, a hue-slider, and an output:

```html
<form class="picker" id="app">
  <fieldset class="background" name="background">
    <div class="brightness"></div>
    <div class="saturation"></div>
  </fieldset>
  <label aria-label="hue">
    <input type="range" name="hue" max="360" value="0" data-blok="range">
  </label>
  <output name="hex" data-value="#ff0000"></output>
</form>
```

The selection-area consists of a `background` with the main color, as well as `saturation` and `lightness` layers, which are gradients *on top of* that color:

![Background with saturation and lightness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p9ths08yylf354u4t0p.png) 

The hue-slider is a regular `<input type="range">`, styled with 12 color-stops (360 degrees / 12 = a stop every 30 degree): 

![Hue-slider](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6mr1umzdkjxuzplgzde.png)

To update the hue as we drag the hue-slider, we need a bit of JavaScript, updating a simple custom property, `--hue`:

```js
app.elements.hue.addEventListener('input', () => app.style.setProperty('--hue', app.elements.hue.valueAsNumber));
```

Next, if the **EyeDropper API** is supported in the browser (currently **only** Chrome 95+), we'll add a click-listener to the selection-area:

```js
if ('EyeDropper' in window) {
app.elements.background.addEventListener('click', pickColor)
}
```

And finally, we'll invoke the *EyeDropper API* with the `pickColor`-function:

```js
async function pickColor() {
  const ED = new EyeDropper();
  const result = await ED.open();
  app.style.setProperty('--hex', result.sRGBHex);
  app.elements.hex.dataset.value = result.sRGBHex;
}
```

Now, try it out:

![EyeDropper](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxlh3q4ckfh6twepi9hq.png)
 
And that's it! A *ColorPicker* with approx **200 bytes** of JavaScript, when minified and gzipped. 

In a real-life scenario, you'd probably add a “selection”-circle, listen for `pointer-move`-events etc., but this should get you started.

Here's a Codepen-demo:

{% codepen https://codepen.io/stoumann/pen/VwzWrpV %}
Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db
Tags: nextjs
Published: 2021-10-28 07:34:27

While trying the run my server in NextJs, I encountered the below error. 

```
Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db
```


These following steps worked for me and I hope this help you out. 

Run the following commands, 

- rm -rf node_modules/
- yarn
- yarn upgrade caniuse-lite browserlist
- restart your server 

If you still encounter the same issue, try clearing your browser cache.
Hacktoberfest - 4th contribution
Tags: opensource, osd600
Published: 2021-10-28 07:29:35

For the last contribution in this Hacktoberfest, I decided to take this opportunity to learn a new technology - Vue.js. Therefore, I picked [GeekScore](https://github.com/DavidGolodetsky/GeekScore) as my starting point.

### The issue
The project originally used Vue.js 2 and is currently migrating to Vue.js 3. The [issue](https://github.com/DavidGolodetsky/GeekScore/issues/131) I picked was to do the migration for one of the components - `GamesEditDialog.vue`

### The fix
To resolve this issue, I imported `defineComponent` and `ref` from `composition-api` while removing `vuex`. An important change in Vue.js 3 is that both the data and methods will be set inside the `setup()` function. 
 
I had to remove any `this` instances because in the new `composition-API`, `setup()` does not resolve `this` anymore. Instead, `ref` is used to manage reactivity. In Vue 2, function `data()` returns one single object containing the data. However, in Vue 3, the data are defined in `setup()` with the use of `ref` to mark each them as a reactive and mutable object. Apart from the data, the two existing methods `submitGame()` and `updateTheGame()` were also moved inside this function. The function `setup()` will then return an object containing these data and methods so that the view can be automatically updated when reactive state changes. 

### Owner's feedback
The owner suggested that there was an instance where I should use `reactive` instead of `ref`. I looked for more explanations and found that while their main purpose is the same, the usage is a bit different. `ref` is mostly used to wrap non-object data while `reactive` only wraps an object. 
```
const toDelete = ref(false);
```

```
const fields = reactive({
      name: {
        label: 'Name',
        icon: 'dice-multiple-outline',
        value: game.value.name,
        rules: [...standardField, requiredField]
      },
      ...
});
```

Another suggested change was about the use of `props`. Instead of directly using `props`, the repo owner pointed out that I should use `toRefs` to restructure it to improve readability and maintain consistency.
```
const { game } = toRefs(props);
```

### Final thoughts
Learning a new technology can be confusing at first, but directly working on an existing project like this really gained me better understanding of the concepts. The comments from the project owner also pointed out the parts that I was missing while learning. Looking through them again, I was able to clarify any confusions between `ref`, `reactive` and `toRefs`. 
There is still a long way to learn about Vue.js but I believe this has been a good starting point already and I'm ready to go to the next step.

Issue-4 link: https://github.com/DavidGolodetsky/GeekScore/issues/131
PR-4 link: https://github.com/DavidGolodetsky/GeekScore/pull/202
How do DEV cover images work anyway?
Tags: meta, writing, blog, social
Published: 2021-10-28 07:25:09

There is something I don't get with DEV cover images.

I have prepared this image:

![Raw cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdc9mrwe4l258sscwh5u.png)

It is a 1200x630 image, [as expected by Facebook](https://developers.facebook.com/docs/sharing/webmasters/images/) and as supported by most social networks and messaging services. That's a 1.91 ratio. When I say "expected" and "supported", I mean that the image is displayed as is when my article is posted.

![Article when shared on Facebook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xddobv42a22slgueqxc0.png) 

But DEV does not work that way.

As I type this post, I can see the cover image I already assigned to it:

![Cover image as displayed by DEV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ae9trxhq2zlakr3gvsgs.png)

The top and bottom of the image are cropped. This is really how DEV displays cover images, with a 2.38 ratio.

![How DEV displays the cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8y13hn2chfm04pymjuo.png) 

How are we supposed to prepare cover images for DEV? Sure, it works pretty well with photos which remain consistent as long as you crop as much on one side as on the other.

But [many technical writers craft their own cover images](https://blog.philippebernard.dev/hashnode-writer-create-your-branded-cover-images). In this scenario, DEV makes it kind of a dilemma. The only solution I found was to add artificial padding.

This is the generic cover image I prepared for a previous article:

![Generic cover image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnx6taxqjrufn4l9fcrq.png)

When I wanted to publish it to DEV, I had to rework it a bit.

![Cover image for DEV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0daelzxjdg0grduy35l7.jpg)

DEV image is still 1200x630 / 1.91, with extra padding at the top and bottom, which DEV crops:

![Cover image displayed by DEV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5zwrxcl9dkax1pjwhje.png)

As a workaround, it should be possible to assign a specific Open Graph image in the Post Options. That would help people like me to craft perfect cover image for DEV *and* social networks.
Hacktoberfest 2021 with AppWrite
Tags: hacktoberfest, opensource, appwrite, beginners
Published: 2021-10-28 06:51:53


### _Why Hacktoberfest?_
       
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6qnbqctp5rv9qcdsd4gx.PNG)
 
Long Since 2019 I was curious about [Hacktoberfest](https://hacktoberfest.digitalocean.com/), but had never gotten around to participating in it. As I was overwhelmed by Open Source which seemed very complicated.. Branches,PRs, Merge conflicts, Open Issues.. 😵

2021 October came around and there were so many posts on Hacktoberfest and I wanted to give it a try.. The entire process was made Super Simple because there were soo events that explained How we can contribute to projects? How to find open issues ? And mainly WHY do we need to contribute to Open source?

So I hurriedly went through all exciting Companies mentioned on [Hacktoberfest Official Page](https://hacktoberfestswaglist.com/) (Not for the Swags.. No.. No.. Off course not!! 🤫) And lucky for me I got assigned my first issue by [AppWrite!!](https://hacktoberfest.appwrite.io/)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d113e3loctetu8tsg5zq.gif)
 
### _How I started to contribute to Appwrite?_
   
  After My first issue got assigned I did try to find other projects that I could contribute to.. but the kind reception by Appwrite's Community made me stay here longer...
(Also I was lazy to setup other projects 👀)

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

### _My Contributions so far..._

- [Appwrite API Blog Post](https://dev.to/pretty19/avatar-api-support-in-appwrite-fc1)
- [PHP Adapter that sends events] (https://github.com/utopia-php/analytics/pull/7)


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


### _My Takeaway from Hacktoberfest_

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en5xw044a7iwf51g21h1.gif)
 

Becoming a _member of Appwrite_ on Github, Connecting with _people_, Being part of the _community_ , _Helping_ people out, Learning through _Sessions_ , Finding satisfaction in _creating something on your own_ AND finally SWAGS are an added bonus... 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28thsioqs27xd9g1v9ju.png)
OSD600 - Hacktoberfest #1
Tags: opensource, hacktoberfest
Published: 2021-10-28 06:47:38

##
In October, I have a chance to contribute to **Hacktoberfest**, this is my first time ever joining to other's source code. Finding a first issue to work on might take me a few days. I finally comes up with [this issue](https://github.com/befreestudios-io/web-components-sandbox/issues/5) for my beginning.

##How I Get Start
Through my study, I have worked with some projects related to web, and I would love to know more about it, this is the reason why I choose this [repo](https://github.com/befreestudios-io/web-components-sandbox) to work on. The maintainer wants to have a playground for web components, which specifically helps me understand more about the web components. Even though I have learned about web development for 2 semester, I am still doubtful about this concept.

##How I Accomplish This
In this issue, I have to create an example of `Template`, it would firstly benefit myself because I have to do a lot of researches and read different articles about this, even though it is only one concept. But I will be able to know how to do the `HTML Template`, and when to use it. `<template>` enables users to write markup templates that are not displayed in the rendered page, and it also can be reused as many times as they want as the basic of a custom element's structure. Then I finally create my [pull request](https://github.com/befreestudios-io/web-components-sandbox/pull/7) for the maintainer.

##What I Have Learned
Web Components is a set-up of various innovations permitting you to make reusable custom components, with their usefulness epitomized away from the remainder of your code, and use them in your web applications. Moreover, I would apply this to my future program, reusing custom elements without the fear of code collisions. I am so delightful since I am able to know more about the concept I already learned, but never having chance to practice and use it
Passing Arguments to Docker windows container 
Tags: docker, windows, arguments
Published: 2021-10-28 06:37:29

Docker allows passing arguments to as build arguments using following syntax, however note that this is Linux container syntax to use the variables with $ sign within the docker file.

###Docker file for Linux container
``` Docker
FROM ubuntu:latest
ARG MYARG=defaultValue
RUN echo "The arg value is : $MYARG"
```

###Build command looks like
```
docker build --build-arg MYARG=ValueFromOutside
```

For windows container, the arguments are to be referred like below, i.e wrapped with % symbol. So the similar code as above looks like below when executing for windows container:

###Dockerfile for Windows container with default shell.
``` Docker
FROM mcr.microsoft.com/windows/servercore:20H2-KB4598242
ARG MYARG=PS
RUN echo "%MYARG%"

RUN powershell.exe -Command \
  $ErrorActionPreference = 'Stop'; \
  $ProgressPreference = 'SilentlyContinue'; \
  Invoke-WebRequest -Uri %MYARG% -Method Get -UseBasicParsing;
```

###Build command looks like
```
docker build --build-arg MYARG=www.bing.com .   
```

Note that it was able to print the value of variable as well as execute some PowerShell command using the argument's value.

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

Note that the logic depends completely on the shell that is configured to be used. By default the shell is bash for Linux and CMD for windows. Of course by using the [SHELL] statement in the Dockerfile, one can also set it to powershell in which case the argument will be accessed with following syntax: $env:VARIABLE_NAME. Refer [here](https://docs.docker.com/engine/reference/builder/) for more details.

``` Docker
FROM mcr.microsoft.com/dotnet/framework/aspnet:4.8-20210209-windowsservercore-ltsc2019
ARG SOMEURI=defaultvalue
RUN Write-Output $env:SOMEURI

RUN Invoke-WebRequest -Uri $env:SOMEURI -Method Get -UseBasicParsing;
```