teleren/devto huggingface dataset:
Setting up django should be fast and easy.
Tags: python, django, install, bash
Published: 2022-04-27 06:55:31

---
title: Setting up django should be fast and easy.
published: true
description: Sometimes, you need to be lazy. So I made a script to help us out.
tags: ["python", "django", "install", "bash"]
---

I am a freelance developer. Lately, I've been heavily using Django to make my development process faster.

Each time I needed to create a project, it was a pain for me to copy-paste code from previous projects on and on.

Fortunately, to help myself out, I made a little script.  I just run with a `curl` call alongside `bash`.  And Boom! Installed!  Everything I needed was there.

Hope this might help you too. You can fork it. Make it your own, and set up your own environment. It is not more repetitive.
Also, It will work with always the latest Django project. The project has no hardcoded Django version attached to it. :) + It has some goodies in it.

So, check it out!

{% embed https://github.com/theArtechnology/django-setup-template %}
What are some useful functions of JavaScript, which you like to show?
Tags: javascript, beginners, webdev, programming
Published: 2022-04-27 06:47:57

Usually I enjoy it a lot to look for posts here, which provide some standard functions of JS. With this I can extend my knowledge step by step and these can be useful many times. At least it feels to make more sense than learning more about a Framework or any other product, which I possibly will not use soon.

What are some funtions, which you would like to share with us?

Let me start as first contributor.

I like the JSON object's functions "parse" and "stringify", because the JS objects are very similar to the stringified representation of JSON. With "parse" you can easily create a JS object from a JSON string and with "stringify" you can do this the other way round. But for the latter you have to be careful: JS objects are more powerful, you will not be able to convert any object to JSON. More here: [Mozilla documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON). **Thanks for reading and any contribution in advance!**
Don't just follow for tutorials and not understand it
Tags: beginners, programming
Published: 2022-04-26 20:36:41

Please! 

Many people are always looking for tutorials or guide step by step on how to create something (even me! I need guide and tutorials! Dogfood me!). But there are many type of product, some products are niche (employee scheduling, monitoring, etc) and the other are easy to find the duplicate (e-commerce, inventory management, etc).

Software engineering is hard, no doubt. At first, you'll just follow many tutorials from the internet. But as time goes, and you're started building a product, there are many things that tutorial doesn't cover.

You'll start to tackle many problems that require thinking, even building a beautiful layout, complex animation or state-of-the-art algorithm that you only had a doctoral paper as a guide.

The key point of a tutorial is to show you how to do things step by step. First time I recommend you to remember it, like how to connect database, centre a `<element/>`, creating carousel etc. You do it countless time, you started to realize that there are more tiny steps in just connecting database. First you need your database setup, you need to know where it placed, and what driver that will help you to connect it.

So please, I can't stress this enough! Do it many times, understand the tiny step that lies when you're doing something. There is no easy path—just stay consistent.
Golang career in Switzerland
Tags: go
Published: 2022-04-27 06:41:03

Are you interested in joining OpenWT in Switzerland. We are looking for talented Go developers. 

The only 3 requirements:
-You have some Go backend development experience
-You are willing to learn and take on new challenges
-You speak German or French If you are interested? Then contact me or send your resume here: https://openwt.com/en/workable?url=https://openwt.workable.com/jobs/2180234
Remix and creating new posts
Tags: react, database
Published: 2022-04-27 06:33:22

Cool, so we just added Postgres to our Remix app. Let's see how we can add new posts to our database via the web interface.

The result of this article will be an excellent web form through which we can add a new post to our Postgres database.

## Creating the form

First, create a super simple route called `routes/posts/new.tsx`.

Inside create the form for now.

```js
import { Form } from '@remix-run/react';

const inputClassName = `w-full rounded border border-gray-500 px-2 py-1 text-lg`;

export default function NewPost() {
  return (
    <Form method='post'>
      <p>
        <label>
          Post Title:{' '}
          <input type='text' name='title' className={inputClassName} />
        </label>
      </p>
      <p>
        <label>
          Post Slug:{' '}
          <input type='text' name='slug' className={inputClassName} />
        </label>
      </p>
      <p className='text-right'>
        <button
          type='submit'
          className='rounded bg-blue-500 py-2 px-4 text-white hover:bg-blue-600 focus:bg-blue-400 disabled:bg-blue-300'
        >
          Create Post
        </button>
      </p>
      <p>
        <label>
          Content:{' '}
          <input type='text' name='content' className={inputClassName} />
        </label>
      </p>
    </Form>
  );
}
```

> Note how the `<Form>` tag is a remix module?

Let's run the app to see how it looks.

![Remix run form](https://cdn.hashnode.com/res/hashnode/image/upload/v1650203384921/xMPokoDlQ.png)

Nice, the form is there!

## Handling the data

And the cool part about using the Remix form is that it automatically comes with an action we can hook.

It would look like this:

```js
export const action = async ({ request }) => {
  // Do a action
};
```

In our case, this action is to create the post, for which we can leverage the `post.server.ts` file we already created.

```js
export const action = async ({ request }) => {
  const formData = await request.formData();

  const title = formData.get('title');
  const slug = formData.get('slug');
  const content = formData.get('content');

  await createPost({ title, slug, content });
  return redirect('/posts');
};
```

Here we get all the specific fields from the form and invoke the `createPost` method by setting all the props.

The function itself can look like this:

```js
export async function createPost(post) {
  return prisma.post.create({ data: post });
}
```

And yes, that will be all you need!

Rerun your app, fill out the form and see the magic happen.

> Note: It won't catch any error; I'll leave that to you to add.

You can find the completed code on [GitHub](https://github.com/rebelchris/remix-starter/tree/create).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Digital Visiting Card for developer's
Tags: javascript, nestjs, nextjs, prisma
Published: 2022-04-27 06:29:53

My Name is Omkar, and I am proud to launch the product that I have actually been working on for months now, **[Digital Visiting Card](https://vcard.plugio.in/)**.

I'm sure you're wondering: _What is a digital visiting card?_ _And more importantly, how can I use it?_

A **Digital Visiting Card** is just like a regular visiting card, but in digital form! That means it's even easier to pass along your contact information. It has all the information about you and your business that you can share with people who matter as well as those who don't.

You can create your Digital Visiting Card in just 3 steps...

1. Sign up on vcard.plugio.in

2. Create a VCard to enter your personal details like name, title, contact number, social handles, etc and save it.

3. Your Digital Visiting Card is ready! You can now share it on WhatsApp with just one click! Or share it via email or SMS by using the available options.

Here are some ways you can use Digital Visiting Cards:

- Share your contact information with potential clients using email or social media

- Use it as a signature when you post to forums and message boards

- Include it with your resume when applying to jobs

The best part? Your contact details will be updated in your recipient's phone book in just one click, so you don't have to worry about them entering your info manually.

My VCard  - [smaint.plugio.in/v/omkar](https://plugio.me/m5djk)

## VCard - Developed with "Love"

The VCard.plugio.in team is made up of a bunch of dedicated individuals who have worked really hard to bring this VCard —and they're not planning on stopping there! After all, the job is never done until it's finished, and this team is committed to adding features and updating the product until it meets your high standards for quality.


If you're interested in learning more about VCard, you can visit us online. And if you do decide to try us out, I invite you to share your feedback with us! We love hearing what our customers have to say.



![vcard plugio logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r13yqygodoruiraxnty2.jpg)
Return Statement in Javascript
Published: 2022-04-27 06:27:26

This is my first article , so apologies in advance! But today I wanted to share my analogy to understand **return** statement in Javascript.

Suppose you went to a shop to buy a bag of chips which costs $9 and you handed him a $10 currency note , you would get $1 in return right?? So let us translate this scenario to code!! 
Codepen here 👉 https://codepen.io/sougataghar47/pen/NWXQWoj
```
var potatoeChipsPrice = 9;
var moneyYouGave = 10;
function buyChips(itemCost, money) {
  //if you gave extra money to the shopkeeper
  if (money > itemCost) {
    var change = money - itemCost; //to calculate how much extra money you gave to shopkeeper

    return change; //think of it as your shopkeeper returning the extra money as change like you would expect in real life
  }

  //returns undefined if you don't match the above condition as undefined is the default return value if you do not specify what to return
}
var returnedMoney = buyChips(potatoeChipsPrice, moneyYouGave); //you went to the counter and gave 10 dollars and now you should get 1 dollar back

console.log("Returned Money in dollar(s) = " + returnedMoney); //if you check the console, you would see 1 dolar returned

```
And this is why return statements are useful because there could be cases where it would make sense to return a value like you wouldn't want a shopkeeper that returns nothing if you gave him extra money , right?

You can return any value such as array,object,number,string,boolean,etc.A function will always return undefined if you don't specify what to return. Don't be worried about it if you don't choose to specify.

Hope I made some sense with my analogy because I think its easier to understand code when you can relate to real life scenarios! Please let me know if you like my analogy as I may write more articles about how I think about coding and if people can relate :)!
I hit my first 100 followers! Thank you all for your support!
Tags: devjournal
Published: 2022-04-27 06:18:27

They say that the first 100 are the most precious followers.

Thank you for supporting me in my journey. Your support has been very motivating. I wasn't expecting a lot of people to listen to a student without any real-world experience, but here we are. People actually cared about these posts and got some help out of it. You guys rock.

Stay tuned for my beginner Go guides and more! Again, thank you for all your support.

- Jacob
dbForge Fusion for Oracle: Why should I use it?
Tags: oracle, visualstudio, development, database
Published: 2022-04-27 06:12:54


dbForge Fusion for Oracle is a dedicated plugin for Visual Studio that gets integrated with this system and enhances its functionality to allow the users to perform all operations they need without leaving Visual Studio. With the Fusion add-in, you can create Oracle databases and SQL queries of any complexity from within Visual Studio and work with the database data as you need. The integration is seamless, so you can use the familiar system and benefit from its improved functionality. 

Fusion for Oracle provides various options assisting in coding. Users can apply the powerful code auto-completion feature, code formatting, PL/SQL syntax check, and other options. The tool lets you execute the scripts and units of stored procedures step by step. A separate Query Profiler feature helps you to optimize queries. 

Users can design and reverse engineer Oracle databases in Visual Studio using detailed database diagrams. One more demanded option is the tool for comparing and synchronizing Oracle database schemas and database data. You can also import and export Oracle schemas when needed. 

By the way, there is a [video tutorial](https://youtu.be/Qxlk0lAIUaE) here.

Learn more about dbForge Fusion for Oracle at https://www.devart.com/dbforge/oracle/fusion/
Improve Web Performance With Web Workers
Tags: javascript, webdev, tutorial
Published: 2022-04-27 05:55:03

If your are looking to optimise or improve performance of your web application then you should definitely use web workers but still many people are unaware of it and don't know how to setup with web application. In this post i'll do my best to help you with web workers.

##What is Web Worker?

In simple terms web worker is nothing but a javascript file that is executed by the browser in background separate from your application javascript file.

##How Web Worker can increase your application performance?

As Web worker runs separate from the main javascript file you can put your computational intensive functions present in main javascript file into web worker file so main thread can run smoothly with no hiccups in user interface.

##How to setup web worker  

Create a javascript file named `worker.js` as shown below in your project directory.

```

// worker.js
console.log("Hello from web worker!")
this.onmessage = e => {
  console.log('worker.js: Message received from main script', e.data)
  this.postMessage('Hello main')
}

```

**onmessage** : It is used to listen to any messages sent by the main application thread.

**postMessage** : It is used send message to main application thread.

In `main.js` file you can instantiate worker object by passing `worker.js` path address to Worker class and then similarly you can use `onmessage` and `postMessage` function to communicate with the worker thread.


```
// main.js
const worker = new Worker('worker.js')
worker.postMessage('Hello Worker')
worker.onmessage = e => {
  console.log('main.js: Message received from worker:', e.data)
}
// if you want to "uninstall" the web worker then use:
// worker.terminate()

```
You can use `worker.terminate()` function to terminate your web worker execution.

With this simple steps now you can put your compute intensive functions in web worker and communicate with main application thread once it's executed.

Thank you for reading this article. Follow me on [Twitter](https://twitter.com/nikhiltatpati) if you are interested in web development and javascript content.
Easily changing the icon on list items
Tags: html, css, emoji, list
Published: 2022-04-27 05:19:57

Just a quick note, to change the way list items are styled and add cool icons (like emoji for example) do this:

`.foo {
  list-style: none; //removes old icons
}`

then add a new icon with `:before`

`.foo li::before {
  content: '🏷 ';
}`
Stop Removing Focus
Tags: css, a11y, webdev, programming
Published: 2022-04-27 03:54:46

You know that border around interactive items on a Web page? Links, form components (checkboxes, buttons, text fields), tags, pagination. That border that differs in the browsers you use and test in. The "ugly" outline that designers hate?

I've been seeing a lot of focus indicators being stripped or removed from sites with no forethought on the impact it will have on accessibility lately. We need to stop doing this because it is harmful and I'll tell you why.

## Why It's Bad

Whether it's `:focus{ outline: none; }` or the one that really makes an accessibility person's blood pressure rise, `* { outline: 0; }` the continued omittance of focus styles and indicators is bad for accessibility. Period.

## Reasons to Stop Removing Focus

![A red stop sign](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqugmd1q79o4pn5o94l0.jpg)

Photo by <a href="https://unsplash.com/@mrthetrain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joshua Hoehne</a> on <a href="https://unsplash.com/s/photos/stop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

1. Users with visual issues will not see where they are on a Web page when using the keyboard as a means of navigating. 
2. Sighted users (like myself) will also use the keyboard to tab through interactive items also.
3. Many blind and visually impaired people use keyboard interactions in order with their screen readers.
4. When an element receives focus it means that element is ready for interaction. You're removing the ability to interact visually with that element.
5. Visual indicators help people with executive dysfunction and other visual or processing related issues (light sensitivity, migraines, etc.) because it draws attention to one thing at a time which helps helps reduce cognitive load. 

**You're creating a barrier rather than removing one.**

## CSS Resets

The inclusion of `outline:0` in many CSS reset files, such as [Eric Meyer’s CSS Reset](https://meyerweb.com/eric/tools/css/reset/). It applies `outline:0` to all page elements. Eric clearly indicates that focus styles should be re-implemented;

```/* remember to define focus styles! */
:focus {
outline: 0;
} ```

Don't forget to add the focus style back in and make it visible with a high contrast _(at least 10:1)_.

## Browser Defaults

Default outlines in most cases are not good enough if the user cannot see the outline due to age, degenerating eyesight, glaucoma, astigmatism, other macular/visual degeneration.

Again, make them visible!

## Repeat After Me...

Don't remove focus indicators!





Header image photo by <a href="https://unsplash.com/@stefanbc?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Stefan Cosma</a> on <a href="https://unsplash.com/s/photos/focus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Widgets in Flutter — Flutter Basic Programming — Part 3
Tags: flutter, dart, mobile, beginners
Published: 2022-04-27 03:46:58

Hello guys, in previous story i’ve talk about installation in Flutter to prepare for today topic so that finally we can start to write code with Flutter. If you aren’t set up environment, please check previous story about [Flutter Installation](https://dev.to/hoangnguyen0403/flutter-installation-flutter-basic-programming-part-2-6i2). In this article i'll talk about Widgets and State. Please read it at [Medium](https://hoangnguyen0403.medium.com/widgets-in-flutter-flutter-basic-programming-part-3-38af9b070a90) story. Thanks!
2nd project finished
Tags: javascript, webdev, beginners, programming
Published: 2022-04-27 03:26:15

As you can see from the title I have finished the 2nd project using JavaScript! The folks from The Odin Project were serious about each project increasing in difficulty after each one. This project was heavily focused on DOM manipulation and events you would need to create an Etch-a-sketch toy project that takes user input and creates a grid based on the users' input (for example 4x4 grid= 16 sized grid with rows and columns using divs). For this project there were a few different methods that could be utilized that created a grid (float/clear, inline-block, flexbox, CSS Grid) I went with CSS Grid and it was challenging to say the least. I have not yet learned CSS Grid at the time so it just made it a lot more difficult for me but with persistence and a little grit, I somehow managed to make it work! With the help from The Odin Project community of course.

**What I've learned doing this project.**

- CSS Grid.

- Need to learn how to efficiently plan projects and not just attack them (Finding a balance between not planning at all and over planning).

- For loops.

- Getting a good grasp on DOM manipulation.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzjktmdp3pl17kxf4dz4.PNG)
COMMITS SEMÂNTICOS
Tags: frontend, backend, programming, developer
Published: 2022-04-27 03:18:34

A descrição de um commit bem estruturado consegue prevenir e corrigir possíveis bugs, e pra você que optou por usar commits semânticos eu trouxe um resumão pra sair logo do papel e botar logo em prática!

Trago aqui exemplos claros da diferença de um bom commit e um ruim.

exemplo de commit ruim❌
```
Ajustes
```

exemplo de commit bom✅
```
feat(banana): funcao-cortar-fruta.js

funcao de cortar uma banana
```

O exemplo de commit bom mostra o quão importante é ter um commit descrito de forma clara e objetiva. No futuro, quando precisar alterar o método "banana" você pode estar verificando esta alteração e entendendo o que ocorreu naquele commit.

REGRAS DE COMMIT

- feat: (novo recurso para o usuário)

```
feat(banana): funcao-descasca-fruta.js

funcao de descascar uma banana
```

- build: (adicao de dependencias)

```
build(package): adicionando moment
```

- perf: (alteração de código que melhora o desempenho)

```
perf(javascript): index.html

mimificando js para desempenho
```

- fix: (correção de bug para o usuário)

```
fix(banana): carrinho-frutas.js

implementei um método para adicionar a fruta banana no carrinho
```

- docs: (mudanças na documentação)

```
docs(readme): documentei a arquitetura do componente banana
```

- style: (formatação, falta de ponto e vírgula, etc)

```
style(banana): frutas.js

adicionei os pontos e virgulas
```

- refactor: (alteração sem perder a funcionalidade)

```
refactor(banana): frutas.js

alterei as condicionais if's para switch case
```

- test: (adicionar testes ausentes, refatorar testes)

```
test(banana): fruta-banana.spec.js

adicionando cobertura de teste na banana
```

- chore: (mudanças de configuração e bibliotecas que realmente não entram em produção)

```
chore(package): mudança de versão do eslint e jest
```

- env: (utilizado quando se modifica ou adiciona algum arquivo de CI/CD. Exemplo: modificar um comando do Dockerfile ou adicionar um step a um Jenkinsfile.)

```
env: banana-bucket.yml

adicionando mais uma etapa na pipeline
```

Seguindo a documentação [conventionalcommits](https://www.conventionalcommits.org/pt-br/v1.0.0-beta.4/) você pode encontrar mais sobre o assunto.