teleren/devto huggingface dataset:
The coding interview: !DOCTYPE
Tags: javascript, html, css, programming
Published: 2021-09-12 03:37:32

Hi, once again! 

Two years ago, I took my first job as frontend developer. Before that, I did workshops about STEAM for kids. And before at that I was studied Social Anthopology. So, a few months ago I applied to one of the big unicorns in LATAM, but I can't passed the proccess. My weakness: the theory.

For that reason, I have been studying and reviewing about programming fundamentals. And thats why I have been decided create a serie of posts about technical interviews. To help other new and future programmers to get their dream jobs. Or to help them to give their best in a future interview.

First we started with some of HTML. Why?, because, as a web developers the HTML is one of our three most important tools to create our projects. 

What is the !DOCTYPE?

In every html file we must put !DOCTYPE in the first line, but, why?. First the !Doctype is not a html tag, but it's a keyword. This keyword works as a declaration to the browser. I mean, with that we says to the browser what document type must to expect. In that case, an HTML 5 file.

The complete declaration must be like: 

<!DOCTYPE html>. 

Before HTML5, the declaration was more confused, because we had used some thing called Document Type Definition. But, don't worry, now, we dont have to use that. But other thing we have to know and help us in the future is about the case sensitive. The !DOCTYPE is not case sensitive. So, we can write with capitalize, uppercase, lowercase, camelcase ways. Not matters!.
Best VS Code Extensions 2021
Published: 2021-09-12 03:27:50

Hello and welcome developers in this post we are going to talk about Best VS Code Extensions. There are thousands of extensions available on Visual Studio code Marketplace. It provide you extinction for every type of development. If you want to do python development then you will get man is suitable extensions for it and if you want to do development in any other language of a work you will get a suitable extension for it. But there are some essential extensions that every developer require. Let’s get started and find out them.

#What are VS Code Extensions
Visual Studio code is not a complete IDE it is only a text editor. But with the help of extensions we can convert it into a completely suitable development workplace. Extensions in vs code will help you through to compile, debug and structure your code that you have written in any language. There is also a variant of Visual Studio code which is known as Visual Studio 2019 and it is a complete integrated development environment that do not require any plugins to be installed in order to work.

#How Extensions will be beneficial in VS Code
**Increase Productivity: –** Extensions in Visual Studio code will help you to increase your productivity.

**Developer Friendly Environment: –** With the help of extensions in Visual Studio code we can make it a developer friendly environment.

**Automating Tasks: –** They will also help you in automate several tasks which you you do regularly like running the code.

**Theme Enhancement: –** There are also several extensions that are themes for Visual Studio code and they will provide you a better working experience with better visual graphics.

#Best VS Code Extensions for Web Development
In this section we are going to talk about best Vs code extensions for web development.

**Prettier: –** [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) is a code formatting and autocompletion plugin. It supports HTML, CSS, JavaScript, TypeScript, JSON, Vue, Angular, YAML, GraphQL and Markdown. If you are a web developer then this extension it is very helpful for you. It will auto complete your cold when you right and once you have written your code you can use it to format your code and give it a perfect readable style.

![Prettier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79txc5wgry070vxdwrgc.jpg)

Read the complete post at = [https://crunchythings.xyz/best-vs-code-extensions-2021/](https://crunchythings.xyz/best-vs-code-extensions-2021/)

If you like my content then please follow me on [instagram](https://instagram.com/sushant102004)
Keep filling your toolbox (100 Bytes Of Wisdom: Day 69)
Tags: career, journey, advice
Published: 2021-09-12 02:00:40

---
title: Keep filling your toolbox (100 Bytes Of Wisdom: Day 69)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Keep filling your toolbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvoqz7ky5ckrnvu8e9sj.png)

As a developer, the more and more tools you experience the better. Each one will have benefits and drawbacks. They'll have times where they're the most appropriate and times where they shouldn't be considered whatsoever.  Each tool you learn gives you a new perspective on how we can solve problems. Perhaps one tool exists with one technology, but doesn't for others. Ruby gems inspired npm which inspired cocoapods. Keep learning, keep trying and you'll be a better developer for it.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
Sinatra ActiveRecord Ecommerce App
Published: 2021-09-12 01:15:04

#Introduction
##Requirements
-Build an MVC Sinatra application.
-Use ActiveRecord with Sinatra.
-Use multiple models.
-Use at least one has_many relationship on a User model and one belongs_to relationship on another model.
-Must have user accounts - users must be able to sign up, sign in, and sign out.
-Validate uniqueness of user login attribute (username or email).
-Once logged in, a user must have the ability to create, read, update and destroy (CRUD) the resource that belongs_to user.
-Ensure that users can edit and delete only their own resources - not resources created by other users.
-Validate user input so bad data cannot be persisted to the database.
-BONUS: Display validation failures to user with error messages. (This is an optional feature, challenge yourself and give it a shot!)
TLTR: Feel free to get the [source code](https://github.com/mwpenn94/sinatra-content-management-system-app).

##App Design
The overall plan for this app was to design a web site with a full-stack design, using Sinatra back-end, and ERB files to display the front-end.

Based on the requirements the site includes a user account model which allows the end user to create, read, update, and delete their own orders secure from other users.

##Security
To handle the security of the user model, this app utilizes the bcrypt gem to secure the session_secret.

##Data Design
The database design is fairly simple. First the [users table](https://github.com/mwpenn94/sinatra-content-management-system-app/blob/main/db/migrate/20210825024333_create_users.rb) contains fields for username, email and password_digest as the password field.



Each [orders table](https://github.com/mwpenn94/sinatra-content-management-system-app/blob/main/db/migrate/20210825024353_create_orders.rb) belongs_to a User based upon each orders user_id.

##Controller Design
The [application_controller](https://github.com/mwpenn94/sinatra-content-management-system-app/blob/main/app/controllers/application_controller.rb) controls the app. It includes the security setup, sets the root path, and includes a few helpers methods for the user model. Specifically, the current_user method which is used to compare the user and session_id to orders later in the source code.

The [users_controller](https://github.com/mwpenn94/sinatra-content-management-system-app/blob/main/app/controllers/users_controller.rb) concerns validating the user account creation and login.

The [orders_controller](https://github.com/mwpenn94/sinatra-content-management-system-app/blob/main/app/controllers/orders_controller.rb) concerns orders creation, reading, updating, and deleting for the respective user to which they each belong.
How to add a number type to function return value in TypeScript?
Tags: typescript
Published: 2021-09-12 00:00:00

---
  title: How to add a number type to function return value in TypeScript?
  published: true
  tags: TypeScript
  date: Sun Sep 12 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-number-type-to-function-return-value-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-acfd89e16bb822e44a4b1f23c8eb5311.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-number-type-to-function-return-value-typescript)
  
To add `number` type to function return value first, declare the function, then add a `:` symbol (colon) after the parameters opening and closing brackets `()` and then type the word `number` to indicate that the function's return value is of `number` type.

### TL;DR

```ts
// simple function with return
// value of number type
function getNum100(): number {
  return 100;
}
```

For example, let's say we have a function called `getNum100()` and on calling the function should return the number value `100`.

It can be done like this,

```ts
// simple function
function getNum100() {
  return 100;
}
```

This is fine. But what if we need to enforce that the return value of the `getNum100` function should only return the value of `number` type. To do that we can add the function return type like this,

```ts
// simple function with return
// value of number type
function getNum100(): number {
  return 100; // ✅ allowed
}
```

After defining the return type as a `number`, we must return a value of the `number` type or it may show an error.

Now Let's also try to return a value other than the `number` type like this,

```ts
// simple function with return
// value of number type
function getNum100(): number {
  return "Hey!"; // ❌ not allowed. Type 'string' is not assignable to type 'number'.
}
```

As you can see from the above code the TypeScript compiler is not allowing us to return the value and shows us an error saying `Type 'string' is not assignable to type 'number'.` which is what we want to happen.

See the above codes live in [codesandbox](https://codesandbox.io/s/add-number-type-to-function-return-value-in-typescript-tq6uc?file=/src/index.ts).

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Invest in flexibility
Tags: flexibility, realoptions, abstraction
Published: 2021-09-17 10:47:16

---
title: Invest in flexibility
published: true
date: 2021-09-12 00:00:00 UTC
tags: flexibility,realoptions,abstraction
canonical_url: https://jhall.io/archive/2021/09/12/invest-in-flexibility/
---

To round out my thought series on [real options](https://jhall.io/archive/2021/09/09/real-options/), today I want to talk about a third approach to handling options (for reference, the first two are to [defer commitment](https://jhall.io/archive/2021/09/10/defer-commitment/) and [make reversable decisions](https://jhall.io/archive/2021/09/11/make-reversable-decisions/)).

Sometimes a decision absolutely must be made, but we know we don’t have all of the necessary information. Therefore, deferring commitment is not possible, and some decisions aren’t easily reversable. This is where the third option of investing in flexibility comes in.

A prototypical example might be “Should we store data on the file system or in a database?” And the prototypical example might be “Use a data access layer so you can swap storage backends more easily.” With the proper data access layer in place, it becomes less difficult to swap between a filesystem store and a database store (or potentially any other store—S3 anyone?)

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Week 1 Projects
Tags: javascript, beginners, 100daysofcode
Published: 2021-09-11 23:34:04

This week I created and pushed 5 simple projects to my [github repo](https://github.com/rkhalife/30Days30Projects):
1. A simple [progress bar](https://codepen.io/rkhalife/pen/oNwYZeb) that goes from 0 to 100 using setInterval.
2. A [random password generator](https://codepen.io/rkhalife/pen/dyRNppy) using Math.floor.
3. A button that [randomly generates](https://codepen.io/rkhalife/pen/jOwyovo) a new background color.
4. A simple [to do list](https://codepen.io/rkhalife/pen/bGRqxgw) project
5. A [whac-a-mole game](https://codepen.io/rkhalife/pen/dyRWjdJ) based on a youtube tutorial I followed a few months ago. I decided to recreate it without re-watching the video. It took me some time and I think there's lots of room for improvement, especially on the CSS side of things but I was able to get it done. Please watch @ania_kubow's [video on youtube](https://youtu.be/rJU3tHLgb_c) if you're interested.
ICU formatted messages (strings)
Tags: react, reactnative, flutter, angular
Published: 2021-09-11 23:27:17

When dealing with strings we often experience challenges to insert some placeholders or to completely replace the string content depending on some variables.

One of the best solutions I have found for this is using **ICU message format**. It allows us to define:

- **placeholders**, in a common way `{name}`
- **plural**, with `{count, plural,
    one{1 apple}
    other{{count} apples}}`
- **custom selects**, with `{gender, select,
    male{His}
    female{Her}
    other{Their}}`

Plurals are especially important, those can not be easily defined programmatically with `if` conditions since plural rules differ among languages. Using ICU message plurals allow us to define only those plural variations that are applicable for the given language, and the framework/package automatically applies those variations depending on the variable (`count` in our case).

Luckily, ICU messages are supported in some popular frameworks or packages:

- [react-intl](https://formatjs.io/docs/react-intl/)
- [Flutter's ARB file](https://localizely.com/flutter-arb/)
- [Angular i18n](https://angular.io/guide/i18n)

And I see more packages is starting to support it.
Although ICU formats can vary a bit among those implementations, the foundation is the same.

The only disadvantage that I have found with ICU messages is that sometimes it can be a bit hard to spot errors in its structure. For instance, missing second closing curly bracket for plural, missing comma, or similar. Using online editor for [ICU message format](https://devpal.co/icu-message-editor/) can detect such issues, or make it pretty printed for easier editing.
However, I couldn't find a better way to define those plural and select cases that are easier to maintain than with this structure.

I believe many of you are aware of ICU messages, but I still see some developers use `if` conditions in the code for plurals which does not work, concatenate a string that contains variables, or similar. ICU messages make it much easier.
StackOverflow: Debug Java annotation processors using Intellij and Maven
Tags: java, maven, intellij
Published: 2021-09-11 22:59:32

I've been working on a new annotation processor in Log4j in order to support the new plugin dependency injection system. Inspired by the configuration performance gains in frameworks like Micronaut, I hoped to emulate part of the idea by generating metadata at compile time that can be queried at runtime to determine which plugins and beans to bother loading. This can save a decent amount of startup time on reflection and class path scanning, and it allows for caching more metadata in the future.

However, annotation processors in Java are notoriously finicky. I had initially tried to debug the code using logging, but the complexity of our Maven build makes it difficult to properly surface those debug logs without reducing build performance. Eventually, I looked into how I might be able to just set a breakpoint in my annotation processor and experiment with some live data to figure out why the API wasn't returning metadata I'd normally expect from the equivalent reflection APIs. This fantastic explanation from StackOverflow covers how to set up debugging.

In the end, most of my confusion in the annotation processing API resulted from a misunderstanding of how the `@Inherited` annotation works. In particular, annotations on an interface are _not_ inherited regardless of what you try. In fact, this annotation only applies when used on annotations placed on class definitions. As it turns out, projects like Spring have a _lot_ of boilerplate to support its fancy meta-annotations and inheritance system.

{% stackoverflow 31358366 %}
Untrack existing Git file
Tags: git, webdev, tutorial, github
Published: 2021-09-11 22:59:27

How would you stop tracking future changes in an existing Git repository file, but do not want to delete that file from the repository? 
`git rm --cached` is the command that’ll do the trick, however, it needs to be done in following way.

**Syntax**
```SHELL
git rm --cached filename
```
**Steps with example**

Update the `.gitignore` file to include the filename, stage and commit `.gitignore` file.
```SHELL
ak@--mac git-useful-commands % echo "db.config" >> .gitignore
ak@--mac git-useful-commands % git add .gitignore 
ak@--mac git-useful-commands % git commit -m "Update .gitignore"
```
Now make some edits and stage the file that you want to remove from future tracking. Later, remove the file from staging and commit it

```SHELL
ak@--mac git-useful-commands % git add db.config 
ak@--mac git-useful-commands % git rm --cached db.config
ak@--mac git-useful-commands % git commit -m "untrack db config file"
```
Now, the file will remain in the repository, but future changes won't be tracked.

**Happy Coding!**
Advanced TypeScript - typing JSON/Resource files.
Tags: typescript, json, internationalisation, i18n
Published: 2021-09-11 22:11:16

---
title: Advanced TypeScript - typing JSON/Resource files.
published: true
description: How to get types for JSON imports and different ways to add these types to your i18n solution.
tags: TypeScript, JSON, Internationalisation, i18n
//cover_image: https://direct_url_to_image.jpg
---
By setting `resolveJsonModule` in your `tsconfig` to true, TypeScript will attempt to get the type/shape of the JSON for you.

We can use this to provide better type safety and auto complete for functions that use the JSON files.

For example typing i18n/resource. Either for custom solutions, library wrappers, or for libraries themselves.

## Using existing/static imports.
Static imports are the usual imports you see at the top of the file.

If we are already statically importing our JSON resource, we can use `typeof` & `keyof` to get its type and keys.

```ts
import Resources from './resource.json';
type ResourceKeys = keyof typeof Resources;

// Index to keys path if complex.
// type ResourceKeys = keyof typeof Resources['path']['to']['key']

...

function translate(key: ResourceKeys): string { ... }
```
## Using Dynacmic Imports
If we are worried about the import cost, then we can use dynamic imports for our actual code & type imports for the TypeScript types.

```ts
// Type only import.
// Stripped when transpiled
import type Resources from './resource.json';
type ResourceKeys = keyof typeof Resources;

async function connect(...) {
  // Dynamic import
  const resource = await import ('./resource.json');
  ...
}

...

function translate(key: ResourceKeys): string { ... }
```

If your version of TypeScript does not support typed imports, then we can extract out the types to separate file.

```ts
// ResourceTypes.ts
/*
  Import is only used for type (no JS code).
  This file only contains types.
  > Will get transpiled to an empty file
  > Will be tree shaken out of bundle.
*/
import Resources from './resource.json'
export type ResourceKeys = keyof typeof Resources
```

## Using Declaration Files
Finally we could modify/use declaration files. This is great if you are using a library E.g. [i18next docs](https://react.i18next.com/latest/typescript).

## Conclusion
We have successfully used this to provide auto-complete & type safety. We have even spotted missing or misspelled keys!

One caveat is that we had to restart our TS server if our resources were modified or new keys were added. I think this was due to our large resources, or maybe due to caching done on the TS server?  
But a relatively small price to get this type safety.
Using CSS to debug strange paddings/margins
Published: 2021-09-11 21:59:14

This is something I learnt  recently while working on [makerflow](https://arndom.hashnode.dev/maker-flow-all-your-favorite-creative-dev-tools-and-links-in-one-place) (shameless plug 🤷‍♂️).

Anyway, I was having this strange padding issue which was caused by some animation which I didn't know at first because the inspector wasn't finding it :

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631395455750/rL9Vl0uZu.png)

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631395364430/0cjYTCAFh.png)

#### Solution ✔:
So after some googling I came across this code:

```
/* PLACE IN YOUR index.css or whatever your root styling file is*/
*{
  outline: 1px solid #f00 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
``` 

And it helped me find where the bug was coming from and move on to other things:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631395310704/mkITVMC0k.png)



## 👋

 This could be pretty useful in some instances. Anyway, I hope you find this helpful, bye.