teleren/devto huggingface dataset:
Starter using Vite + React + TypeScript + Tailwind CSS.
Tags: vite, react, typescript, tailwindcss
Published: 2021-03-21 09:32:20

I made this template repository: https://github.com/TeXmeijin/vite-react-ts-tailwind-starter.

It is starter using Vite + React + TypeScript + Tailwind. And already set up Prettier and ESLint.

## Motivation

Improve building your faster prototyping by using Vite, TypeScript, React, TailwindCSS.

## Vite

[Vite](https://github.com/vitejs/vite) is a fast frontend build tool. According to the [README](https://github.com/vitejs/vite/blob/main/README.md), it consists of two major parts:

- A dev server that serves your source files over native ES modules, with rich built-in features and astonishingly fast Hot Module Replacement (HMR).
- A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

## React

[React](https://github.com/facebook/react) is a JavaScript library for building user interfaces.

Due to its awesome renderer system, there are many [React Renderor](https://github.com/chentsulin/awesome-react-renderer). So React can be not used only Web, for example, used by [React Native](https://reactnative.dev/).

Let's dive into React and Vite can use with React.

## TypeScript

[TypeScript](https://github.com/microsoft/TypeScript) is a superset of JavaScript. It is just one of NPM library, but it provides an original compiler.

When you use TypeScript with React, you can write JSX with TypeScript, called TSX. Then you can develop views written by  **Type-Safe** template.

## Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) is modern utility-first CSS framework. It provides many CSS rules, but these are purged when production builds. So developers do not worry about CSS asset size for performance optimization.

In VSCode, I recommend to use [intellisense extension](https://tailwindcss.com/docs/intellisense).

Frequently, React developers are worried about how to write CSS in TSX(JSX) template. You must choose from CSS Modules, [styled-components](https://styled-components.com/), [linaria](https://github.com/callstack/linaria), and so on.
Additionally, CSS architecture is difficult about scoping, e.g. BEM, FLOCSS.

When you decide to use Tailwind, you only write utility-first CSS classes, you don't have to worry about them!

## Formatter and Linter

Already set up [ESLint](https://eslint.org/) and [Prettier](https://prettier.io/). You can customize the rules.

NOTICE: The template does not use [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) and [prettier-eslint](https://github.com/prettier/prettier-eslint). So I recommend that running commands individually. e.g. `prettier && eslint`.

Please read: https://prettier.io/docs/en/integrating-with-linters.html.
Learn Programming from Harvard for FREE!!
Tags: codenewbie, programming, javascript, python
Published: 2021-03-21 09:27:33

## Want to become a programmer? then why not learn from the best? 🚀

<br />
**As we all know Harvard is one of the most prestigious colleges in the ivy league. This Introduction to Computer Science course is taught by well-known David J Malan. He is an excellent professor and he does an excellent job in making this course. For now, there are three courses by Harvard available on the internet for free which are:**


1. CS50's Introduction to Computer Science.
2. CS50's Web Programming with Python and JavaScript.
3. CS50's Introduction to Game Development.

**CS50's Introduction to Computer Science.**

This course is an introduction to intellectual enterprise and the art of programming. An entry-level course taught by David J. Malan, CS50x teaches students how to think algorithmically and solve problems efficiently. Topics include abstraction, algorithms, data structures, encapsulation, resource management, security, software engineering, and web development. Topics covered :


- C
- Data structures and Algorithms
- Python
- SQL
- Html, CSS, and Javascript
- Flask


Link to the course:  [Introduction to Computer Science](https://www.edx.org/course/cs50s-introduction-to-computer-science) 

**CS50's Web Programming with Python and JavaScript.**

This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap. In this course, you'll learn about database design, scalability, security, and user experience. Through hands-on projects, you'll learn to write and use APIs, create interactive UIs, and leverage cloud services like GitHub and Heroku. By course's end, you'll emerge with knowledge and experience in principles, languages, and tools that empower you to design and deploy applications on the Internet. Topics covered :

- Git 
- Html, CSS
- Python
- Django
- SQL
- APIs
- Javascript
- Testing CI/CD
- Security

Link to the course:  [Web Programming with Python and Javascript](https://www.edx.org/course/cs50s-web-programming-with-python-and-javascript) 

**CS50's Introduction to Game Development.**

In this course, you'll learn about about the development of 2D and 3D interactive games in this hands-on course, as you explore the design of games such as Super Mario Bros., Pokémon, Angry Birds, and more. In a quest to understand how video games themselves are implemented, you'll explore the design of such childhood games as:

- Super Mario Bros.
- Pong
- Flappy Bird
- Breakout
- Match 3
- Legend of Zelda
- Angry Birds
- Pokémon
- 3D Helicopter Game
- Dreadhalls
- Portal

Link to the course:  [Introduction to Game Development](https://www.edx.org/course/cs50s-introduction-to-game-development) 

**I hope that you'll leverage these resources and also make sure to help others by sharing the article🔥. You can follow me on Twitter, where I post about web development and resources [Deveshb15](https://www.twitter.com/Deveshb15)**
Blank Terminal in VS Code (Ubuntu)
Tags: vscode, ubuntu
Published: 2021-03-21 09:20:56

<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rw43cm04h6zzsh537vvl.png" />


*Go to settings 
Search for Inherit Env and enable it.*

<img src = "https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43h8g69vquguq6mvlan8.png">

*Restart VScode and now you will not find the blank terminal screen ;)*
Angular in a Nutshell #Part1: MODULES
Published: 2021-03-21 08:52:33

In Angular, a module is a class marked by  @NgModule decorator that contains components, directives, pipes, and services.
An Angular application has at least one module.


```javascript
import { NgModule } from '@angular/core';

@NgModule({
  declarations: ...,
  imports: ...,
  exports: ...,
  providers: ...,
  bootstrap: ...
})

class MyModule {} 
```
* Declarations: List of components, directives, and pipes that belong to this module.

```javascript
declarations: [HelloComponent, TranslatePipe] 
```

* Imports: List of modules to import into this module. Everything from the imported modules (components, directives, pipes) is available to the declarations of this module.

```javascript
imports: [BrowserModule, SomeOtherModule] 
```
* Exports: List of components, directives, and pipes visible to modules that import this module.

```javascript
exports: [HelloComponent, TranslatePipe] 
```

* Providers: List of dependency injection providers visible both to the contents of this module and to importers of this module.

```javascript
providers: [ApiService, { provide: UserService }]  
```
* Bootstrap: List of components to bootstrap when this module is bootstrapped.

```javascript
bootstrap: [HelloComponent] 
```
JS Interview Problem : Create a new array by adding one element at the beginning and one element at the end of  an given array.
Tags: javascript, react, android, webdev
Published: 2021-03-21 08:24:22

let arr = [3,5,6,1]
Add 9 at the starting of arr and 19 at the end of arr using ES6.

This is very common problem statement which can be asked in Interview. Now a days questions from ES6 or higher is being asked to test latest knowledge of developer.

This Problem can be solved in one line with the help of javascript spread operator.



**Soluion**

let newArr = [9, ...arr, 19]

I have this will help someone


For more such question visit

{% youtube Eb6HXDGQoTI %}
Register form
Tags: vue, webdev, javascript, firebase
Published: 2021-03-21 06:34:42

---
title: Register form
published: true
date: 2021-03-21 06:34:00 UTC
tags: vue, webdev, javascript, firebase
series: Vue Full Application Build
canonical_url: https://hiltonmeyer.com/articles/series/pantry/8-register-form.html
---

_Code for this can be found in the [Github Branch](https://github.com/bikingbadger/pantry/tree/8-register-form)_

This is a continuation from the registration functionality that I [setup up in Vuex](https://dev.to/iarehilton/register-user-to-firebase-4n5e). This post will now create a simple form for registering the user in firebase using that function.

`src/views/Register.vue`

```
<template>
  <div>
    <label for="username">Username</label>
    <input type="text" name="username" id="username" v-model="username" />
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" name="email" id="email" v-model="email" />
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" name="password" id="password" v-model="password" />
  </div>
  <button @click="registerUser">Register</button>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  data() {
    return {
      username: '',
      email: '',
      password: '',
    };
  },
  methods: {
    ...mapActions('auth', ['register']),
    registerUser() {
      const userData = {
        username: this.username,
        email: this.email,
        password: this.password,
      };

      this.register(userData);
    },
  },
};
</script>

```

Other than the standard Vue features I'm using there is a cool little use of the spread operator and one of Vuex's best features. Instead of having to have to try and traverse the context and state I use `mapActions`. This is then added to the methods and I can use is as a normal method in the file. Pretty cool. This will register the user and on success re-direct the user back to the homepage.
Difference between let and var
Tags: javascript, react, webdev
Published: 2021-03-21 07:38:05

So I am here with a problem statement which is being asked in interview many times.

let a = 'some value'
var b = 'some other value'

what will the output of

window.a and window.b

So the answer is 

window.a will be undefined
window.b = 'some other value'


**Reason :** 

var creates properties of the window object when declared globally 

but let (same with const) does not create properties of the window object when declared globally


Difference between var and let

https://www.youtube.com/watch?v=e0QcsWWFXkc


Hope this helped somebody and thank you for reading!
Git commit message convention that you can follow!
Tags: github, webdev, productivity, git
Published: 2021-03-21 07:37:38

Motivation of this blog is to curate all information at one place and to make more people aware about standards followed by industry.

Let's get started.....

> A typical git commit message will look like
```
<type>(<scope>): <subject>
```

## "type" must be one of the following mentioned below!
* `build`: Build related changes (eg: npm related/ adding external dependencies) 
* `chore`: A code change that external user won't see (eg: change to .gitignore file or .prettierrc file)
* `feat`: A new feature
* `fix`: A bug fix
* `docs`: Documentation related changes
* `refactor`: A code that neither fix bug nor adds a feature. (eg: You can use this when there is semantic changes like renaming a variable/ function name)
* `perf`: A code that improves performance
* `style`: A code that is related to styling
* `test`: Adding new test or making changes to existing test

## "scope" is optional
* Scope must be noun and it represents the section of the section of the codebase
* [Refer this link for example related to scope](http://karma-runner.github.io/1.0/dev/git-commit-msg.html) 

## "subject"
* use imperative, present tense (eg: use "add" instead of "added" or "adds")
* don't use dot(.) at end
* don't capitalize first letter

[Refer this link for more practical examples of commit messages](https://github.com/eslint/eslint/commits/master)

#### References: 
* [https://www.conventionalcommits.org/en/v1.0.0/](https://www.conventionalcommits.org/en/v1.0.0/)
* [https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)
* [https://github.com/fteem/git-semantic-commits](https://github.com/fteem/git-semantic-commits)
pop() Array Method | JavaScript Array Method
Tags: javascript, programming, webdev, tutorial
Published: 2021-03-21 07:28:15

You can Prefer to Read or you can Watch on YouTube: 

{% youtube ddFY3NZPLLY %}

=> The pop() method removes the last element from an array
=> The pop() method returns the value that was "popped out"

Example:
```javascript
// Consider an array of Fruits
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();  // Removes the last element ("Mango") from fruits
```

Example:
```javascript
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // the value of x is "Mango"
```
Day 7 of 100 days of SwiftUI
Published: 2021-03-21 06:29:30

Day 7 of HackingWithSwift's 100 days of SwiftUI. Today I learnt about to use using closures as parameters when they accept parameters, returning a closure from a function, and capturing values in a closure.

In swift returning a closure from a function is written like this.
```
func returnClosure() -> (name: String) -> Void {
     return {
       print("Hello world \(name)")
     }
}

let action = returnClosure()
action("sanmi")
```
The code above creates a function that returns a closure. The first `->` is used to signify the return type of the function while the second `->` is used to signify the return type of the closure.

Capturing values in a closure means any external variable that is used inside of closure is stored alongside the closure and can be modified even if they don't exist anymore.

If you are interested in taking the challenge, you can find it at https://www.hackingwithswift.com/100/swiftui
See you tomorrow ;)
1721. Swapping Nodes in a Linked List (javascript solution)
Tags: javascript, algorithms
Published: 2021-03-21 06:18:59

###Description:
You are given the head of a linked list, and an integer k.

Return the head of the linked list after swapping the values of the kth node from the beginning and the kth node from the end (the list is 1-indexed).

###Solution:
Time Complexity : O(n)
Space Complexity: O(1)

```javascript
// We only need to switch the vals in the problem not the nodes.
// Create a dummy node at the front of the linked list.
// Move a pointer from the dummy up to the kth node and save the kth node to a variable called front.
// Create a new pointer at the dummy node call back.
// Continue moving the original pointer and the back pointer until the original pointer is null.
// Switch the values of back and front
var swapNodes = function(head, k) {
    let dummy = new ListNode(0, head);
    let front = dummy;
    let back = dummy;    
    let pointer = dummy;
    
    for(let i = k; i > 0; i--) {
        pointer = pointer.next
    }
    front = pointer
    while(pointer) {
        pointer = pointer.next
        back = back.next
    }
    
    const temp = front.val
    front.val = back.val
    back.val = temp
    
    return head;
};
```
Digital marketing course in hyderabad
Tags: digitalmarketinginameerpet
Published: 2021-03-21 06:13:00

Saisantosh technologies are the best digital marketing course institute in Hyderabad

our Syllabus

Youtube

Google Adsense

Affiliate marketing

Facebook earning

SEO

SEM

SMO

Google Search Console

Google Analytics

 

Our address

==============

SaiSantosh Technologies
Flat No: 5th-floor #510
Satyam Theatre Rd,
Annapurna Block,
Ameerpet, Hyderabad
Telangana, 500016.
Contact No: 91-9553428515

https://digitalmarketingcourseinhyderabad.in/
Geeks for Geeks College Chapter: Geek Week Local
Published: 2021-03-21 06:00:59

Recently I participated in a week-long event conducted by GFG-VIT Bhopal. It had daily challenges including weekly challenges also. We had to make a guild and then do the task. Overall it was a very exciting event for me. I got to learn new things and got to know new people with the same interests. I learned many things ranging from communities, development to games, it was like a wholesome package. So thanks GFG VIT Bhopal for conducting the event looking forward to more events like this.
Dynamic array
Tags: datastructures
Published: 2021-03-22 02:03:50

---
title: Dynamic array
published: true
date: 2021-03-21 06:00:00 UTC
tags: datastructures,datastructures
canonical_url: https://jsedano.dev/data-structures/2021/03/21/dynamic-array.html
---

My notes on `Dynamic array` with an implementation in Java.

You can find the complete code for this and other data structures here: [data structures and algorithms](https://github.com/jsedano/examples/tree/main/data-structures-and-algorithms)

A `dynamic array` is a `data structure` that uses a normal array but allows to increase the size (and in some cases decrease it) to hold more elements.

Common Operations for an array list includes:

| Operation | Complexity |
| --- | --- |
| get(indexOfElement) | O(1) |
| add(value) | O(1) |
| insert(index, value) | O(n) |
| delete(value) | O(n) |

This is the add operation

```
/**
* adds a value at the end of the array
* - puts a value at size and then increases size by 1
* - if size is equals to the inner array size we need to grow the inner
* array, we achieve this by instanciating a new array doubling the size
* of the previous array and we copy the elements to the array.
* O(1) amortised (because we dont enlarge at every insertion)
**/
public void add(T value) {
     if (size == innerArray.length) {
         T newArray[] = (T[]) new Object[innerArray.length * 2];
         System.arraycopy(innerArray, 0, newArray, 0, innerArray.length);
         innerArray = newArray;
     }
     innerArray[size] = value;
     size++;
}
```

And the remove operation

```
/**
* removes a value at any valid index and moves other values one position
* O(n)
**/
public void remove(int index) {
    if (index < 0 || index >= size) {
        throw new IndexOutOfBoundsException();
    }
    for(int i = index + 1; i < size; i++) {
        innerArray[i - 1] = innerArray[i];
    }
    size--;
}
```

Other operations are very similar to a normal array.

Download the complete code for this and other data structures here: [data structures and algorithms](https://github.com/jsedano/examples/tree/main/data-structures-and-algorithms)
Sashido Challenge
Published: 2021-03-21 05:55:20

Deployed my ML model in Sashido. I have deployed using free account due to that the the app is not available publicly. But here is my link to the app web base. You can view it from here.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttzpi9rgkm2dfmo4h3bz.png)
https://dashboard.sashido.io/products/apps/yekhPlburK-ml/settings/general
Geek Week local
Published: 2021-03-21 05:54:31

Geek Week Local

A great initiative by GFG Vit Bhopal Chapter. We were asked to be a part of the guild and then solve challenges.

The first thing of joining a guild was fun when we searched and interacted with people to join a team. It was really fun to do that and pitch others and persuade them to join the guild.

Then the tasks began and the first day was light. But then it was escalated. Day 2 brought some tougher and interesting challenges
Throughout everyday we learnt something new and improves upon ourselves.

I learnt a lot. Learnt to create Portfolio, Github , Bootsrap, firebase and what not.

So its a hell of a experience till now and expecting more such events by GFG.

geekweeklocal
7 exciting days
Tags: geekweeklocal, geeksforgeeks
Published: 2021-03-21 05:51:31

What to start with? This week has been nothing but an exciting adventure at the start of my career in computer science. From writing a simple 'Hello World' program at the start till programming Data-Structures towards the end. It has helped me to learn a lot.

Let's start with the best thing the organizing team has done for us:
It was giving tasks not only to be a computer geek, but also to become a socially active and cultural geeks too. The tasks were never always to write a code and bore yourself for the whole day, but also to take a break and enjoy yourselves with the music and memes too. The task were not only to learn the specials of computer science, but also to learn how to work as a team.

The outcomes of this week challenge has been great. I have learnt how to code without stressing yourselves. I have learnt how to enjoy whether by going live on the mini-event or by playing with the teammates. I have learnt that taking a break from daily work and listening to music or doing what you love can never be a distraction, it is always a relaxation. I have learnt that being a complete stranger does not mean you cannot be open and be yourself to your stranger teammates; after all, they too are your friends just that you haven't met them until now. And lastly, I have also learnt, it is fun competing to get on top by putting extra efforts.

Honestly speaking, this week has been a challenge as well as a perfect learning opportunity I grabbed in my whole life. A disease outbreak can never be a hindrance to what we want to learn. We are united by the internet, and ladies and gentlemen that unity gave us the chance to a very cool learning opportunity.
Understanding "warning: redefining module x" in elixir
Tags: elixir
Published: 2021-03-21 05:49:38


Take this article with a grain of salt.

This particular warning is telling you that even after loading the module, elixir is trying to recompile it.

There are different ways to clear such warning in the internet like removing the `_build` directory. It did not work for me initially.

In my case, I had an unused variable in my eex file. Since my project was configured to treat warnings as error in my credo setting, it failed to compile leaving me with a lot of "redifing module" warnings. And in that noise, another warning was hidden which pointed out on prefixing the unused variable.

After prefixing the unused variable and `mix do clean, phx.server`, those warnings went away
ABOUT ARTIFICIAL INTELLIGENCE
Published: 2021-03-21 05:44:25

Artificial intelligence is once again in the media spotlight. But what is it exactly? And how does it relate to developments in machine learning and deep learning? Below we spell out the various interpretations of AI and look back on how the technology has developed over the years.

The semantic quicksand
“The fundamental challenge is that, alongside its great benefits, every technological revolution mercilessly destroys jobs and livelihoods – and therefore identities – well before the new ones emerge.”

So said Mark Carney in a widely reported speech last week, as he referred to the potential impact of an oncoming wave of artificial intelligence.

We’ll pick up on his predictions another time, but for now it’s worth asking what we mean exactly by AI. How does it relate to machine learning and deep learning? And what separates innovations like chatbots from self-service checkouts, self-driving cars from search engines, and factory robots from automatic telling machines?

For all the hype and postulating, there is surprisingly little discussion about the technology itself and how it came to be. Try Googling ‘what is artificial intelligence?’ and you’ll find very little in the way of solid definitions.

This is not a dull point about semantics. If we don’t know what the technology is and how it is manifested, how do we expect to judge its potential effects? And how will we know which industries and occupations are most likely to be transformed?