teleren/devto huggingface dataset:
Svelte + Tailwind + Firebase Auth
Tags: webdev, svelte, firebase, tailwindcss
Published: 2022-11-27 18:48:39

## 👋 Hi guys!

I just released a Svelte, Firebase and Tailwind starter.

This is a great way to learn Svelte routing and Firebase authentication. 

Not perfect but I will improve it soon 🔥 

Feel free to create PR or issues if needed!

[Example](https://svelte-tailwind-firebase.vercel.app)

[Repository](https://github.com/neiwad/svelte-tailwind-firebase)
VS Code Most Used Extensions : Part - 1
Tags: vscode, extensions
Published: 2022-11-27 18:27:27

## Auto Close Tag

![img-1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjxp840x0mgbacagta6h.png)

Name: Auto Close Tag
Id: formulahendry.auto-close-tag
Description: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
Version: 0.5.14
Publisher: Jun Han
VS Marketplace Link: [https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)

## Auto Rename Tag

![img-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xg7dq6ybkodmr3rkgp4.png)

Name: Auto Rename Tag
Id: formulahendry.auto-rename-tag
Description: Auto rename paired HTML/XML tag
Version: 0.1.10
Publisher: Jun Han
VS Marketplace Link: [https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)

## Code Runner

![img-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2m4rzie7wgnduyrydyq.png)

Name: Code Runner
Id: formulahendry.code-runner
Description: Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, [VB.NET](http://vb.net/), Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell, Nim,
Version: 0.11.8
Publisher: Jun Han
VS Marketplace Link: [https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

## ****ES7+ React/Redux/React-Native snippets****

![img-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/llo1kfe1zcrvny4k5mwp.png)

Name: ES7+ React/Redux/React-Native snippets
Id: dsznajder.es7-react-js-snippets
Description: Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
Version: 4.4.3
Publisher: dsznajder
VS Marketplace Link: [https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)

## ESLint

![img-5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gihshcmnqmqebqfqd74j.png)

Name: ESLint
Id: dbaeumer.vscode-eslint
Description: Integrates ESLint JavaScript into VS Code.
Version: 2.2.6
Publisher: Microsoft
VS Marketplace Link: [https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

### More Coming Soon…
What is The Best Graphics Assets Plugin For WordPress?
Tags: wordpress, wordpresseditor, plugin, webdev
Published: 2022-11-27 18:21:39

[Graphicsly](https://graphicsly.net/) is The Best Graphics Assets Plugin For WordPress. Simple and Professional Graphic Usage For Your Blogs or Website. With Graphicsly you can choose from thousands of free and premium graphics sources, customize them completely and add them to your website. 

All of our graphics are high quality as we collect them from public domains, creative commons and more, meaning your site will have the highest possible quality!
Ready to use repository for your next startup idea
Tags: webdev, programming, codenewbie
Published: 2022-11-27 18:20:14

Hi, I am shrey, I am a developer with 4 years of industry experience. I am currently running a website [iHateReading](ihatereading.in), writer, freelancer and designer.

I am doing a survey regarding an idea so it would be very helpful if you can give your vote.

**Will you buy the [ready-to-use](ihatereading.in/customrepo) repository for your next startup idea**

- Answer in the comment section
- [Answer on Twitter](https://twitter.com/treyvijay/status/1596929233603166209)

Keep developing
Shrey
Corner Cases VS Edge Cases
Tags: akash, kandukuru, codenewbie, beginners
Published: 2022-11-27 18:17:09

A corner case is when multiple unique conditions are at play. 
For instance, finding a bug that only occurs on iPhones is an 
**edge case.**

But a bug that only occurs on iPhones when music is playing and the user has cleared their notifications, that's a **corner case.**

SOURCE : https://airfocus.com/glossary/what-is-an-edge-case/#:~:text=A%20corner%20case%20is%20when,notifications%2C%20that's%20a%20corner%20case.

Thank You <3
A better way for passing Django context
Tags: django, python
Published: 2022-11-27 16:19:05

---
title: A better way for passing Django context
published: true
date: 2022-11-27 16:13:59 UTC
tags: Django,Python
canonical_url: https://www.rockandnull.com/django-template-variable/
---

 ![A better way for passing Django context](https://images.unsplash.com/photo-1610926950521-ab7e8b45f377?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwxMTc3M3wwfDF8c2VhcmNofDJ8fGNvbnRleHR8ZW58MHx8fHwxNjY5NTY1NDMx&ixlib=rb-4.0.3&q=80&w=2000)

I like Python as a language and Django as a framework. They are super practical and let you create incredible things in no time.

But if there's one thing I dislike is the use of dictionaries everywhere. I am mainly referring to the Context object that requires a dictionary to be passed to render a Django template. I find this to be extremely ugly. For instance, if you need to render the template in multiple places, you would need to repeat the dictionary keys when constructing the dictionary. You could save the dictionary keys in some variables and use those in the dictionary, but this is not that elegant.

The solution I prefer in this situation is to use data classes for each template, and convert that data class to a dictionary when needed. With this approach, I get the type of safety, elegance, and DRY (Don't Repeat Yourself) principle quickly and easily.

For instance, take this use case:

```
[...]
return render(request,
              template_name='template.html',
              context={
                  'key1': 'value1',
                  'key2': 42
              })
```

If you have to use this template in another View, then you would need to repeat those keys. Instead, you could create a data class for the context and convert that to a `dict` when needed:

```
@dataclass # 1.
class MyViewContext:
    key1: str # 2.
    key2: int 

    def dict(self): # 3.
        return asdict(self) 

[...]
return render(request,
              template_name='template.html',
              context=MyViewContext(key1='value1', key2=42).dict()) # 4.
```

1. [Data classes](https://docs.python.org/3/library/dataclasses.html) were introduced in Python 3.7. A data class comes with the basic functionality needed to initialize and compare a class. Its aim is just to contain data in an object-oriented manner.
2. Data types are optional but highly recommended.
3. `asdict` converts a data class into a dictionary with the variable names as keys. Here we create a convenience member method to make that conversion.
4. Initialize the data class, and convert that to a dictionary!

Hopefully, you would prefer this approach when creating context objects for rendering Django templates.

Happy coding!
Login Form in HTML and CSS
Tags: html, css
Published: 2022-11-27 17:58:26

in this video tutorial, we will learn how to create a login form using html and css. Basically, It's very easy and simple way to do that, but you should know how to manage the input fields and also form area using HTML, CSS.

I've explained everything from scratch you can learn step by step usage of HTML and CSS3 to create a login form in html and also CSS3.

It's project for beginners, you can get the ideas from it, and then you will use your own tactics to make  a attractive and also professional login form. You can use use same thing to make a registration form as well. 

{% embed https://www.youtube.com/watch?v=JsJaG3Co0jM %}
Frameworks (React, Angular, and Vue) vs HTML, CSS, and JavaScript
Published: 2022-11-27 17:33:15

There are many frameworks like React (React is a JavaScript library for building user interface), Angular (Angular is a Typescript based free and open-source web application framework), Vue (Vuejs is a front-end framework for building single page application). 
I would like to discuss this topic by categorizing web and mobile apps into three categories.

1.A simple and a basic webpage 

If you want to create a simple static webpage or website. You don’t even need JavaScript. Most likely you don’t need a framework.

2.Small in size but interactive web-app

For a website with three to four pages, most of the tasks can be simply achieved by using HTML, CSS, and JavaScript. If you really want, you can use a framework. But if you use a framework there will be a lot of coding that can also make the website load speed, go down. Therefore, it is wise to use HTML, CSS, JavaScript to make small interactive websites. 

3.A complex web app

Suppose you need to make an E-commerce website. As we know this E-commerce website consists of many functionalities such as a search bar, cart, login and signup button. It is evident that this type of website can be created using HTML, CSS, JavaScript. However, frameworks come with boilerplate code, and commonly used functions that will help to build app more effectively with fewer resources. Frameworks consist with predefined folder structure that would help to manage websites and various component easily. The best option to create a complex web-app is using frame works.
Create a package-based Monorepo with Nx
Tags: webdev, javascript, typescript, programming
Published: 2022-11-27 16:33:46

###What is a Monorepo?
A Monorepo or Monorepository is a code management and architectural concept where you keep all your code in one super repository instead of managing multiple smaller repositories — like a single repository for your website and libraries

###About NX
Nx is a smart, fast and extensible build system with first class monorepo support and powerful integrations.

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

package-based repo with or intergrated repo that has pre-configured setup.

###Getting started
To begin with Monorepos, I suggest newcomers to choose the package-based way. So we can learn how to build things our way and easy to do modifications.

###Create a new workspace
We run this command:

```
npx create-nx-workspace@latest package-based --preset=npm
```

Then we will have the following structure

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

In the `packages` folder, we can set up every package with any framework you want to, for example, I will create 2 React packages, one for my app, and one for my UI and utilities kit


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

###Linking our packages
Now you can import files from other packages like every other library. For instance, I will import constants and components from my common-ui package:

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

Easy right ? To optimize our monorepo, we need to understand my `web` package has a dependency is `common-ui` that we have to install it first. But what if `common-ui` hasn’t been build yet ?

To make sure `common-ui` has to be built before `web` builds, we put this into our `nx.json`

```
{ 
 targetDefaults: 
  { build: { 
    dependsOn: 
      ['^build'] 
    } 
  } 
}
```

So every `web` dependencies has to be built before `web` builds

Nx cached everything
My `package.json`


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

We can decide which package to build, or build them all. If you run `nx run many` , Nx will cache the results to reduce build time

###Conclusion
This is just a simple guide, I hope this can help you speed up your existing workflow with minimum effort. You can check out [my source code here.](https://github.com/leduc1901/monorepo-nx-treeshaking)

###Last Words
Although my content is free for everyone, but if you find this article helpful, you can [buy me a coffee here](https://www.buymeacoffee.com/kylele19)
The Difference Between the Java & Javascript
Tags: javascript, java
Published: 2022-11-27 16:31:18

## Introduction 

With the release of the Java 8, it’s time to revisit the differences between Java and JavaScript. In this post, we’ll take a look at the syntax, semantics, and differences in the way these two languages handle types.

Java is a statically typed language, meaning that variables must be declared with a specific type before they can be used. JavaScript is a dynamically typed language, meaning that variables can be used without being declared with a type.

[Java](https://scientyficworld.org/programming/java/) is a class-based language, meaning that code is organized into classes and objects. [JavaScript](https://scientyficworld.org/tag/javascript/) is a prototype-based language, meaning that code is organized into prototypes.

Java is a compiled language, meaning that code is converted into machine code that can be executed by a computer. JavaScript is an interpreted language, meaning that code is executed by a JavaScript engine.

Java is an object-oriented language, meaning that code is organized into objects. JavaScript is a multi-paradigm language, meaning that it supports object-oriented, functional, and imperative programming paradigms.

## Syntax

Java uses a traditional block-style syntax, meaning that code is organized into blocks delimited by curly braces. JavaScript uses a C-style syntax, meaning that code is organized into functions.

JavaScript has a more permissive syntax than Java.JavaScript allows undeclared variables, whereas Java requires all variables to be declared before they can be used.

JavaScript also allows functions to be defined inside of other functions, whereas Java requires all functions to be declared at the top level.

## Types

Java is a statically typed language, meaning that all variables must be declared with a type before they can be used.

Java has a rich type system that includes primitive types, reference types, and array types.

Java also supports type inference, meaning that the type of a variable can be inferred from the type of the expression that is assigned to the variable.

JavaScript is a dynamically typed language, meaning that variables can be used without being declared with a type.

JavaScript has a limited type system that includes primitive types, reference types, and object types.

JavaScript does not support type inference, meaning that the type of a variable must be explicitly declared.

## Differences

One of the most significant differences between Java and JavaScript is that Java is a statically typed language and JavaScript is a dynamically typed language.

Another significant difference is that Java is a class-based language and JavaScript is a prototype-based language.

Java is a compiled language and JavaScript is an interpreted language.

Finally, Java is an object-oriented language and JavaScript is a multi-paradigm language.
Plan first, then implement
Tags: opensource, beginners, webdev, programming
Published: 2022-11-27 16:27:37

Hi,

For this week, I will be working on 3(or more) issues for 2 projects: 

1) Designing the logo for the [photohub](https://github.com/humphd/my-photohub) project.

2) Enhancing the UI for the [novel project](https://github.com/thevahidal/novel)

## Issue #1

In the [issue](https://github.com/humphd/my-photohub/issues/14) I started talking with project maintainers and listened to their preferences.

## Understanding what client wants ✍

Firstly, before designing a logo, I need to understand what kind of project developers are working on. After that, I need to think of the audience (people who will visit the website).

Hence, I need to think of the colors that would match the audience. For searching the best color match I will use [color pallete ](https://www.canva.com/colors/color-palettes/)from Canva.

There, I can see what colors work together.

_It's crucial not to fail here_ No matter how your logo is creative, if you find a great match, it's half work done.


## Software to use 🖥️

I will use **Adobe photoshop** for creating a logo.


## Project # 2

For second project, I will take multiple issues from the project and improve the UI. Also, I might work on the backend as well, if the contributor will allow me to do that.

For now I'm assigned for a couple of issues: [Issue#1](https://github.com/thevahidal/novel/issues/7), [Issue#2](https://github.com/thevahidal/novel/issues/17).

_I'm waiting for project maintainer to create a guidance to run the project locally._

## More improvements 🔥

There are a lot of ideas how to improve the [website](https://thenovel.netlify.app/) from the UI perspective. Since, I have some experience in web design, I might be useful. 

I will file more issues, that I think could make a project look more appealing later.

## Floating labels 🔥

For example, let's consider making floating labels on the input. I think you saw something like that before.

When we click on input, the placeholder moves above the input smoothly and creates great UX.

![input labels](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3z7rzoolyh201p3zro0d.png)

## Appealing modal window  🔥

When not logged in user clicks on create a story button, he sees the regular alert:


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

This could also be improved. First, I would design a modal window in Figma and then create one.

I will be working on these projects for the following 2 weeks. I will make a new post regarding the progress and potential issues that could reveal 💯

**Have a wonderful day and let's keep up!**

[Buy me a coffee](https://www.buymeacoffee.com/mnosov622N)
Fancy Text Generator 𝕐𝕠𝕦𝕣 𝕋𝕖𝕩𝕥 (𝓬𝓸𝓹𝔂 𝓪𝓷𝓭 𝓹𝓪𝓼𝓽𝓮)
Tags: webdev, javascript, beginners, tutorial
Published: 2022-11-27 16:09:31

Fancy Text Generator 𝕐𝕠𝕦𝕣 𝕋𝕖𝕩𝕥 (𝓬𝓸𝓹𝔂 𝓪𝓷𝓭 𝓹𝓪𝓼𝓽𝓮)

We designed Fancy Text Generator simple and easy to use.

Click here to test [𝓕𝓪𝓷𝓬𝔂 𝓣𝓮𝔁𝓽 𝓖𝓮𝓷𝓮𝓻𝓪𝓽𝓸𝓻](https://softcodeon.com/fancy-text-generator)
Can I not use Opensea API to fetch Opensea NFT?
Tags: nft
Published: 2022-11-27 16:01:51

Opensea API is not feasible enough because of the approval process. 
Is the any other fetch NFT API can fetch Opensea NFT?

Given that Moralis is already one big API provider but it still could not fetch Opensea NFT.

Any alternative we have?
Encode, Encrypt, and Hash
Tags: programming, security, codenewbie
Published: 2022-11-27 15:49:19

In general, the meaning of **encode is to convert something into code, something into a different format**. We usually do kind of encode for Personal Identifiable Information (PII) because it contains confidential data such as password, card number, etc.

## Encoding

Simply said, encoding process happens as transforming a number from base 10 (decimal) into base 2 (binary) format. Usually, the algorithms used is in the form of rigid pattern such as conversion table of ASCII, Unicode, Base-64, and URL-encoding.

Encoding technique is reversible. Anyone who knows the algorithm could decode the encoded data in order to retrieve the original data. 

## Encryption

Similar to encoding, encryption technique is reversible but more secure. **Encryption can protect data from unauthorized person**. A key is also needed to encrypt and decrypt the data, not only the algorithm.

This key-based encryption algorithms is classified into **symmetric-key algorithm** and **asymmetric-key algorithm**. As the naming, the symmetric means that the key for encryption and decryption is equal, and the asymmetric is different. In asymmetric algorithm, public key is a name for the key to encrypt and private key is for to decrypt.

Below is an example functions to do encryption-decryption:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cosci1ptgnae96q742ug.png)

## Hashing

On the other hand, hashing can not do that kind of decode. **Hashing is irreversible and more secure than encryption**. Once you hash something, you can not know what the "something" really is. Even though it literally hashes your data, I would say that you still could know what kind of thing the "something". Just imagine a criminal scene: you got potential suspects and blood of suspect in the crime scene. Here, the blood is the result of hash the potential suspect. By comparing the DNAs, we could know that the blood comes from the suspect.

Hashing usually is implemented for password. Although programmer who creates the program, **programmer is not allowed to know user's password**. A program must be designed to save user's password in the form of hashed password in database. None of way to decode it. 

The following is **example of hashing-comparing implementation**:

![hashing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/551w9jk0cn7klp4vmlys.png)

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


---

**References:**
1. [https://auth0.com/blog/hashing-passwords-one-way-road-to-security/](https://auth0.com/blog/hashing-passwords-one-way-road-to-security/)
2. [https://auth0.com/blog/encoding-encryption-hashing/](https://auth0.com/blog/encoding-encryption-hashing/)
How to access AWS services from EKS
Tags: kubernetes, aws, devops, sre
Published: 2022-11-27 15:37:20

In-depth guide about different solutions to access AWS APIs from Kubernetes...
- Kube2IAM
- KIAM
- IRSA (IAM Role for Service Account)

https://faun.pub/how-to-access-aws-services-from-eks-ab5fa003a1b6?source=friends_link&sk=ac00ca0fad44b7e7363d63c35dc4f0fc


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvt6qc4of8uwdfvs7tmj.png)
Best Roadmap become 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘀𝘁 for 𝗙𝗥𝗘𝗘
Tags: webdev, datascience, beginners, programming
Published: 2022-11-27 14:50:47


𝟭 - **𝗘𝘅𝗰𝗲𝗹:** 
- Start with Excel, Analyzing Data in Excel empowers you to understand data through detailed visual summaries, trends, and patterns.

- 𝗘𝘅𝗰𝗲𝗹 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dp4jp-ke


𝟮 - **𝗣𝗿𝗼𝗴𝗿𝗮𝗺𝗺𝗶𝗻𝗴 𝗟𝗮𝗻𝗴𝘂𝗮𝗴𝗲:** 
- Choose 'Python' or ' R ', any one language for your journey, Python may be the ideal choice if you want to transition to machine learning.
- 𝗣𝘆𝘁𝗵𝗼𝗻 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/diuCU_4H
- 𝗥 𝗳𝗼𝗿 𝗗𝗮𝘁𝗮 𝗔𝗻𝗮𝗹𝘆𝘀𝗶𝘀: If you're passionate about the statistical computation and data visualization aspects of data analysis, R could be a good fit for you.
- '𝗥' 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dx6DEk35


𝟯 - **𝗗𝗮𝘁𝗮𝗯𝗮𝘀𝗲𝘀:** 
- Learn both SQL & No SQL databases
- MySQL Resources: https://lnkd.in/dPZuDM57
- Mongo DB: https://lnkd.in/dQ325DHB


𝟰- **𝗦𝘁𝗮𝘁𝗶𝘀𝘁𝗶𝗰𝘀 & 𝗣𝗿𝗼𝗯𝗮𝗯𝗶𝗹𝗶𝘁𝘆:** 
- Master the concepts of Descriptive Statistics and Inferential Statistics
- 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲: https://lnkd.in/dtr7YSzz


𝟱 - **𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗲 𝗗𝗮𝘁𝗮 𝗩𝗶𝘀𝘂𝗮𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗧𝗼𝗼𝗹𝘀:** 
- Learn Tableau or Power BI:
- [Power BI] Resource: https://lnkd.in/d2xnsGMr
- [Tableau] Resource: https://lnkd.in/dAds5Jfa
Git Clone using Init-container | Kubernetes
Published: 2022-11-27 14:37:05

An `Init-container` is a special kind of container, which will run before the actual application. Init containers always run to completion.

A pod can have several init-containers. Init containers execute in a sequential manner. Each init-container must be completed successfully before the next one starts to execute.

[Read Full Article](https://faun.pub/git-clone-using-init-container-kubernetes-b49535be6968)