teleren/devto huggingface dataset:
Deploy your Vue aplication in less than 5 minutes.
Tags: vue, heroku, devops, beginners
Published: 2021-04-05 15:01:10

#Begin

Hey guys, performing a deploy tends to be a task commonly portrayed as problematic. Based on that, I wrote this article teaching how to do the same without major complications and in a short time.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u48rtb8q9sytq6jqs3ch.gif)

First of all it is important that you have an account at:

 - [Heroku](https://www.heroku.com)
 - [Github](https://github.com)

<br/>

### Starting with git.

*This article takes into account that you already have an instantiated vue project and just wanted to deploy it.*

Create an empty Git repository.


```
$ git init
```

After creating the project repository, we will create a connection between it and our local project.

```
$ git remote add origin https://github.com/user/repo.git
```

In your project, create the `static.json` file with the following content:

```
{
    "root": "dist",
    "clean_urls": true,
    "routes": {
      "/**": "index.html"
     }
}
```

Change these lines in the `package.json` file:

| change the line server to start

```
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
```


After that manages the build in the cli of your application:

```
$ yarn run build
```

*make sure you have removed the `/dist` directory from your .gitignore file*

All set, let's upload our application to github with the following commands:

```
$ git add .
$ git commit -m "build: heroku config"
$ git push 
```

### Heroku config

Create a app in heroku.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/197828t8nbwumd0p8vrs.png)

Select the github option and search for your project:

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

In the settings tab, press add buildpacks and enter the url:`https://github.com/heroku/heroku-buildpack-static`

*<b>Buildpacks</b> provide framework and runtime support for apps. Buildpacks typically examine your apps to determine what dependencies to download and how to configure the apps to communicate with bound services.*

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45fm8b5nomfsupivvlur.png)

*Lastly...*

Set enable automatic deploys and deploy branch.

If everything went well, the information that the deployment was successful will appear on your dashboard and your app will be ready for use.

<b>Time is very important, thanks for sharing a little bit of yours with me 😊.</b>


<a style="float: left;" href="https://github.com/devneto">![image](https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white)</a>

<a style="float: left;" href="https://twitter.com/_devneto">![image](https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white)</a>
react state lost
Tags: reactnative, draftjs, help
Published: 2021-04-05 14:56:48

```
Here's the state data structure:
projectData:
{
        projectCode: '',
        projectName: '',
        projectDescription: '',
        clientCode: '',
        clientName: '',
        officeCode: '',
        office: '',
        industryTypeName: '',
        statusName: '',
        statusCode: '',
        projectResources: []
}
```

Here's the reducer, when this gets executed all the state data is lost except projectResources

```
case "SET_PROJECTROLE":
            {
                const newResources = [...state.projectData.projectResources];
                newResources[action.payload.Index].ProjectRole = action.payload.ProjectRole;
                return {
                    ...state,
                    projectData:
                    {
                        ...state.projecData,
                        projectResources: [...newResources]
                    }
                };
            }
```
I created a VS Code theme 🔥️
Tags: vscode, webdev, theme, javascript
Published: 2021-04-05 14:53:19

Hi everyone!!
It's been too long since I wrote a post on dev.to, but hey, here I am back once again. I've been busy with my college stuff going on lately. Today I am going to talk about something that I thought was so hard (atleast for me) and amazing at the same time. I always wondered "How do they create a VS code theme/extension so wonderfully ??", and some days back I thought to give it a go and create something that I can be proud of!

So, I decided to create my own theme for VS Code. It's called **Martian Night**. (Don't worry, I will tell how I got the theme name idea). I watched some of the YouTube tutorials on how to create a vs code theme and got some idea. Basically, what I learned is that in order to create a vscode theme one has to edit a very large JSON file. At first, I was overwhelmed, but still I kept going. I thought may be not the whole JSON file, but I can definitely edit some of the settings in order to create a very basic theme. So I started reading VS Code extension API docs and setting colors for different components of the VS code as well as the tokens used in programming languages. I have done theming for HTML, CSS, JavaScript till now and I'll add more later.

### So, where did I get the theme idea 🤔️ ??
Have you ever seen **Sunset on planet Mars video captured by NASA's Curiosity Rover** on social media ?? I absolutely loved that video and that's where my theme is inspired from. The colors used in the theme as well as the name of the theme is inspired from that video. The theme uses a background of dark blue with light blue and white text on the foreground. Also, the color of the comments in the code is some what similar to the color of Martian soil i.e red.

Enough of the talk, let's take a look at the theme itself!!

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4hqsd825l0sqhz8fchwq.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12ppuks24shut12wcvsz.png)

I'd love you to install this theme and give your feedback, so that I can improve this in future !! Also, the GitHub Repo is mentioned below, just in case you want to contribute to this teme. Feel free to leave a 🌟️

GitHub Repo => https://github.com/shaan71845/martian-night-vscode-theme

Download the theme from here => https://marketplace.visualstudio.com/items?itemName=ShaanAlam.martian-night

My GitHub Profile => https://github.com/shaan71845
AutoMapper
Tags: csharp, dotnet
Published: 2021-02-28 01:36:59

In this part of the series, we'll take advantage of the AutoMapper package and create DTOs (data transfer objects) to manage the content which our endpoints expose.

We'll start by adding the package we need.

```
dotnet add package AutoMapper.Extensions.Microsoft.DependencyInjection
```

Next, we'll add the service to our application. At the top of the `ConfigureServices` method within 'Startup.cs', add the single line of code.

```csharp
public void ConfigureServices(IServiceCollection services)
{
    services.AddDbContext<Data.AppContext>(opt => opt.UseSqlite(Configuration.GetConnectionString("AppConnection")));

    services.AddAutoMapper(AppDomain.CurrentDomain.GetAssemblies()); // Add this

    ...
```

Now we'll add a new folder named 'Dtos' to the primary directory of our application, and we'll add a new file to that folder named 'UserReadDto.cs'.

```csharp
namespace AspNetCoreWebApiIntro.Dtos
{
    public class UserReadDto
    {
        public string FirstName { get; set; }

        public string LastName { get; set; }
    }
}
```

We'll add yet another folder to the primary directory named 'Profiles' and add a new file named 'UsersProfile.cs'.

```csharp
using AutoMapper;

using AspNetCoreWebApiIntro.Dtos;
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Profiles
{
    public class UsersProfile : Profile
    {
        public UsersProfile()
        {
            CreateMap<User, UserReadDto>();
        }
    }
}
```

Now, we simply need to revisit our users controller and ensure that our read actions return our DTOs which will be mapped from each user via AutoMapper.

```csharp
using AutoMapper; // New
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

using AspNetCoreWebApiIntro.Data;
using AspNetCoreWebApiIntro.Dtos; // New
using AspNetCoreWebApiIntro.Models;

namespace AspNetCoreWebApiIntro.Controllers
{
    [ApiController]
    [Route("api/[controller]")]
    public class UsersController : ControllerBase
    {
        private readonly AppRepo _repo;
        private readonly IMapper _mapper; // New

        public UsersController(AppRepo repo, IMapper mapper) // Change
        {
            this._repo = repo;
            this._mapper = mapper; // New
        }

        [HttpGet]
        public ActionResult<IEnumerable<UserReadDto>> Index() // Change
        {
            IEnumerable<User> users = this._repo.GetAllUsers(); // New
            return Ok(this._mapper.Map<IEnumerable<UserReadDto>>(users)); // Change
        }

        [HttpGet("{id}", Name = "Show")]
        public ActionResult<UserReadDto> Show(int id) // Change
        {
            User user = this._repo.GetUserById(id);

            if (user != null)
                return Ok(this._mapper.Map<UserReadDto>(user)); // Change
            return NotFound();
        }

        ...
```

Each endpoint will now return only the first and last name of each user as we have excluded that property from the read DTO.

In the next part of this series, we'll add PATCH and DELETE actions.
Android App Parameter Survey
Tags: android, survey, research
Published: 2021-04-05 14:34:36

Hi everyone!

We are running a 7-minute survey trying to understand developers' experience with parameters in Android apps. This is part of a research project at Purdue University studying the performance impacts of the parameters.

Please consider filling this out if you are an Android developer. The survey is anonymous. Thank you in advance!

https://purdue.ca1.qualtrics.com/jfe/form/SV_d6bEkkLrhq5ZI1M?source=dev
CSS Custom Properties with @property
Tags: css, webdev
Published: 2021-04-05 14:19:38

Have you heard about the CSS **@property** statement?

---

📣 @property is a **CSS Houdini** [at-rule](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule) that allows us to configure CSS custom properties by data type using the `syntax` field, default values using the `initial-value` field, and set if it allows inheritance.

```css
@property --colorPrimary {
  syntax: "<color>";
  initial-value: magenta;
  inherits: false;
}

body {
  /* Fallback for browsers without @property support. */
  --colorPrimary: magenta;
}

.text {
  color: var(--colorPrimary);
}
```

🪄 The nicest aspect about **@property** is the capability to enhance CSS dynamics through high-level declarations with simplicity and certain performance enhancements.

🔬 Some use cases for **@property** statement are data type validation on CSS and animations.

```css
@property --status {
  inherits: false;
  initial-value: 0%;
  syntax: '<percentage>';
}

.progress-bar {
  width: var(--status);

  height: 5px;
  background: gold;
  animation: progress 2s forwards;
}

@keyframes progress {
  to {
    --status: 100%;
  }
}
```

😋 Really cool, right?
Automatically re-render the page when we save the file in the code editor
Published: 2021-04-05 14:08:03

TLDR: use `live-server` and we don't have to keep refreshing the webpage but the page would refresh itself when we change our code in the webpage.

I used to use Ruby or Python to spin up a local web server, for example, when rendering a webpage as local HTML file cannot support data fetch, but requires a web server.

And then, we always have to save the file, and go to the web browser, and refresh the page.

But there is a server that can automatically re-renders the webpage. The advantage is that we can stay in the code editor, and save the file, and the browser next to the code editor will re-render the page. If we have a big monitor, we can move the browser at the top left corner of the screen, and the editor at the center of the screen, and see the full page of re-rendered result on the browser.

The server is called `live-server`. We first have to install `node`, and then we can do

```bash
npm i -g live-server
```
and then we can just `cd` to our folder, and invoke
```bash
live-server
```
I usually like to not have any `index.html` file, so that http://127.0.0.1:8080 gives me a list of files I can choose in the current directory.

The way this is done is that `live-server` add some JavaScript at the end of our file, so that when we save any file or update any file in the folder, then the page would refresh itself.
Which Wordpress page builder is best you think??
Tags: developerkhaled, wordpress, woocommerce, elementor
Published: 2021-04-05 14:06:55

 Which Wordpress page builder is best you think??

Elementor. Elementor is available as a free plugin download, but you also have the option to pay for the Pro version. ...

GeneratePress with Sections. ...

Beaver Builder. ...

Divi. ...

WP Page Builder. ...

Page Builder by SiteOrigin. ...

Visual Composer
#developerkhaled #wordpress #woocommerce #developer #webdeveloper #webdevelopment
#webdesign
#woocommercewordpress #multivendor #ecommercebusiness #plugins
Most useful npm command
Tags: node, npm
Published: 2021-04-05 14:01:52

## Below is the list of the most useful npm command.

- 1. `npm init`: to generate the package.json file
- 2. `npm i` or `npm install`: to install all packages of the `package.json` file
- 3. `npm i -g`: install the package globally
- 4. `npm start`: It will execute the entry point script you added in the `package.json` file
- 5. `npm install npm@latest -g`: Upgrade the npm package to the latest version
- 6. `npm outdated`: list of all out date packages
- 7. `npm list -g`: list of all global npm packages
- 8. `npm uninstall "package name"`: it will uninstall the package
- 9. `npm publish`: This is used to publish the package at npmjs


Your suggestion much appreciated
I Hate My Code Again
Tags: javascript
Published: 2021-04-05 14:01:22


---
title: I Hate My Code Again 
published: true
description: 
tags: JavaScript
canonical_url: https://jessewarden.com/2021/04/i-hate-my-code-again.html
cover_image: 
---

- - - - - -

Good news, I hate my code again.

In 2005 I stopped hating the code I wrote. I felt I had reached a milestone in my career. After 5 years, I one day looked at some code I wrote 6 months ago and went “Man… I actually *like* this, and can understand it!” That often never happened. My gut instinct was to just rewrite. Suddenly I could start using things I wrote awhile ago in new projects, with confidence and only minor modifications.

Yesterday, rewriting an SDK I wrote 4 years ago, and I would not write it like that today. That tells me I’ve made a lot of progress and changed in 4 years. Skill progress! 😁

I’m glad I keep [the tactic I had in 2005](https://jessewarden.com/2005/08/arp-controller-vs-glorified-hashmap.html/comment-page-1#comment-2823), and that’s just keep doing what I’ve been doing and keep improving.

![](https://jessewarden.com/wp-content/uploads/2021/04/EyNvbGCWgAIRTKb-1024x334.png)
Do you have a little time to test your typing?
Tags: typing, react, javascript
Published: 2021-04-05 14:00:16

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vftzhn0nn17r653p5i6n.gif)

https://mintyping.vercel.app

A simple and minimal app to test your typing.

Made with Next.js with Vercel.
Getting Sidetracked
Tags: sideprojects, app, flutter, podcast
Published: 2021-04-05 14:22:08

---
title: Getting Sidetracked
published: true
date: 2021-04-05 13:55:02 UTC
tags: sideproject, app, flutter, podcast
canonical_url: https://justwriteapps.com/getting-sidetracked
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jyz70x85kqqu6ttereq.jpg
series: Wrenchly
---

{% spotify spotify:episode:7s1SGgvfg1c5ahVfTq4Boc %}

How do I stop my side-projects from getting sidetracked? I've started so many projects over the years with an honest intent on building a product, but very few have ever ended up fully working.

I only have a handful of exceptions to this. I built a screenwriting app, an Alexa Skill, and some dev tools for work. That's it.

The process is pretty familiar at this point. I have a moment of inspiration where I read something, or I'm using a tool and think it has a flaw that I could fix. Almost instantly I start designing and developing the idea--researching APIs and coding furiously for several weeks in my free time.

Eventually I'll run into some problem when I'm about 80% done. Or, sometimes, I just run out of motivation. Then the inevitable happens--I get inspiration for another project and the cycle starts again.

* * *

Now I'm working on ways to force myself to finish. One of those ideas is to start blogging about my projects. Hopefully making a public statement that I'm working on something will help keep me motivated.

Now for the actual update on Wrenchly, I've added some fuel efficiency graphs on the main page. There was a bug caused by how I was creating some widgets so I didn't make much progress on the service reminder functionality. I did learn a lot about the riverpod library which will help in future development.

![Screenshot_1617447574.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617447781685/5DQHRmulf.png)

* * *

Photo by [Gigi](https://unsplash.com/@ling_gigi?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/distracted?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Simple F&Q only using HTML & CSS
Tags: html, css, tutorial, webdev
Published: 2021-04-05 13:35:38

Hello, Guys thank you for your amazing support now I try to give you a better result with a new idea today I created f & q using HTML & CSS we are not using javascript in this post but if anyone wants f&q with javascript then comment below & if anybody has a good idea then share with me. 

so I hope you like also comments about your thoughts. For more content please follow me on Instagram [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you!
**Keep Supporting 🔥**


{% codepen https://codepen.io/NikhilBobade/pen/GRrEGoR %}
10 Input Types in HTML Every Web Developer Must Know in 2021 | HTML5 Input Types
Tags: html, css, webdev, codenewbie
Published: 2021-04-05 13:34:10

Related Queries:
**What is input type in HTML?**
**What are all the input types in HTML?**
**How do you input text in HTML?**
**What is input type text?**
**How do you limit text input in HTML?**
**What is form input?**
**How many types of HTML are there?**
**Does the form need input?**

##Description##

Hi, in this video we will learn the 10 input types in HTML web development programming, which every web developer must know. these 10 input types of HTML mostly used in HTML forms to take data from users. HTML forms are part of every website so these input types are used in every website to create beautiful HTML forms.

##10 HTML Input Types Every Developer Must Know##

{% youtube 8qBPKXRUOnk %}

We will cover the following html input types : 
1- Inpyt type text,
2- HTML input type password,
3- HTML input types submit,
4- HTML input type button,
5- HTML input types Radio,
6- Checkbox hTML input types,
7- Input types image,
8- HTML input type search,
9- Input type file in html,
10- HTML input type Reset,

Related Searches:
Related searches, input tag in html, html input dropdown, input type=text css, input type=number, input type=textarea, html input textarea, html form, html textarea tag,
-------------------------------------------------------------------------------------------------
Please have a look at my website for more details!
https://hmawebdesign.com
-------------------------------------------------------------------------------------------------

Suggested Videos:

How to Send Email to Client Using PHP Mail Function | Sending Email in PHP 2021 Tutorial
https://youtu.be/DeqOVJ-aXkg

$_POST | What is the Post Variable in PHP | How to Use Post Variables in PHP 2021
https://youtu.be/HO-TrXY4a1A

How to Define Variables in PHP | How to Create PHP Variables | (PHP tutorial-3) - 2021
https://youtu.be/bfqAa0Gm3YY

How to Start First PHP Web Project on Local Server/Localhost PHP Tutorial-2
https://youtu.be/18I7U4-nJb0

How to Start Web Project with Microsoft Visual Studio 2021 | Visual Studio Project
https://youtu.be/MLzuQ_pH9Ew

How to Get Start PHP Hello World Page on Live Web Server  |  PHP Tutorial - 1
https://youtu.be/Uc7uLD7Ur6M
-------------------------------------------------------------------------------------------------
Contact me through social media for web development work:

- Fiverr             https://www.fiverr.com/haaddison1?up_rollout=true
-  witter:          https://twitter.com/HmaWebdesign
- Facebook:    https://web.facebook.com/HmaWebdesign
- LinkedIn:      https://www.linkedin.com/in/engrmianayub/
- Instagram     https://www.instagram.com/hmawebdesign/
4 podcasts de desarrollo de software en Español 🎧
Tags: podcast, spanish, software, webdev
Published: 2021-04-05 13:30:03

#**Índice**   
1. [¿Qué es un podcast?](#id1)
2. [DevTalles](#id2)
3. [Código con Juan](#id3)
4. [Programar es una mierda](#id4)
5. [Unexpected News Podcast](#id5)
 

## ¿Qué es un podcast? <a name="id1"></a>
Los podcasts son audios donde se hablan de determinados temas de interés para un grupo de personas, muchas veces uno no tiene el tiempo para leer libros o ver tutoriales y es aca donde escuchar un podcast puede ayudarte, puedes escucharlo desde los tiempos muertos cuando estas en el transporte público hasta cuando caminas distraído por la calle. 

A continuación, les comparto algunos podcasts que considero bastante buenos y que en mi día a día me han servido:

## **DevTalles** <a name="id2"></a>
Es uno de los más recientes, con apenas 7 episodios, Fernando Herrera, un full-stack developer y profesor en línea con cientos de miles de alumnos, cuyo objetivo es que pasemos un rato agradable, vertiendo mis opiniones profesionales y experiencias que puede que te sirvan mucho en tu día a día como profesional en tecnologías de información y así ayudarte a formar mejores opiniones sobre diferentes temas. Uno de mis favoritos. 
* [Escuchado en Spotify](https://open.spotify.com/show/0jrfxcnCrD7N9tlA0BGJp5)
* [Escuchado en Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy80YzIyNzM3OC9wb2RjYXN0L3Jzcw?sa=X&ved=2ahUKEwjYu9rx8-XvAhWMlJUCHfm1DIgQ9sEGegQIARAE)

## **Código con Juan** <a name="id3"></a>
Juan de la Torre un reconocido ingeniero de sistemas en su podcasts habla de programación, desarrollo web, móvil, ecommerce, freelancing, carreras y todo lo relacionado a tecnología. Bastante recomendable.
* [Escuchado en Spotify](https://open.spotify.com/show/2xs4GOdFdivKrKfpVlejLI)
* [Escuchado en Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy80MTU0N2RlYy9wb2RjYXN0L3Jzcw?sa=X&ved=2ahUKEwjYu9rx8-XvAhWMlJUCHfm1DIgQ9sEGegQIARAF)

## **Programar es una mierda** <a name="id4"></a>
Podcast sobre desarrollo de software. Programar es muy divertido, pero a veces se vuelve un infierno. Mejor tomárselo con humor. Presentan Juan José Meroño y Àlex Ballesté
* [Escuchado en Spotify](https://open.spotify.com/show/6crvLebQZ7IS4WGpLPqudm)
* [Escuchado en Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly93d3cuaXZvb3guY29tL3BvZGNhc3QtcHJvZ3JhbWFyLWVzLW1pZXJkYV9mZ19mMTQzMjQ0NF9maWx0cm9fMS54bWw?sa=X&ved=2ahUKEwjYu9rx8-XvAhWMlJUCHfm1DIgQ9sEGegQIARAD)

## **Unexpected News Podcast** <a name="id5"></a>
Resumen de noticias semanales de JavaScript en español dirigido por Ivan Medina.
* [Escuchado en Spotify](https://open.spotify.com/show/10QbPaeLMdTMOEemPAXaA2)
* [Escuchado en Google Podcasts](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy8xM2M0OGRmNC9wb2RjYXN0L3Jzcw?sa=X&ved=2ahUKEwjYu9rx8-XvAhWMlJUCHfm1DIgQ9sEGegQIARAC)

---

![post](https://media.giphy.com/media/Y07aXAb9fNLYPeCsdK/giphy.gif)