teleren/devto huggingface dataset:
This I still miss from VSCode
Tags: vscode, webdev
Published: 2021-09-04 04:23:41

Right now, there is not introduction to be made for VSCode. It's one of the most used code editors for web development, and out-the-box it provides an amazing experience. Yet, there a few things that I sill miss, and they are not provided, even with 3th party extensions.

## A better debugging bar

I have to say, that this is my list, and you may disagree with this, but I don't like the debugging bar. You know? That one that appears when you are debugging and has not space for its own? That's is one issue for me at least, every time it will be on top on other things, and you could say: Hey, but you can move it. And, I do. Every time. Because, it doesn't matter where I sent it to, I will need to interact with the thing under at some point. 

How would I improve it? Well, you have the Activity Bar, that would a good place for that. Or the Application Bar. That works for me. Even the status bar could be better. Well, maybe not, but you get my point.

The Debugging Bar can be moved only on top of the thing, and although you could use your CSS skills to place it elsewhere, you would need to do it each time you start your VSCode, or use a 3th party extension that allows you to rewrite the CSS on-the-fly. Not very convenient, if you ask me.

## A stop and restart buttons on the task list

There were once and open issue about this: [https://github.com/microsoft/vscode/issues/49738](https://github.com/microsoft/vscode/issues/49738), but is now closed. What can you do instead? Click the "Play" button again, and select either restart or stop. I really don't know this has been requested more, I think it would be so much better if you could have the restart and stop button instead of the play one.

## Favorites to the task list

With this new monorepo thing, and the fact that we like to put each task as an individual task in the `package.json`, finding tasks could be better. I mean, yeah, you can go and select "Run task" and then find the one you need, but lets be real, it would be easier for us to have a top list of the task we need. I mean, most of the time you will end up running the same 3 or 4 task, at the most. Even if you are working in a monorepo, with multiple projects and libraries, at the end, you need like: start the thing in dev mode, start storybook and start the test runner, so I think having them at the top of the list inside a favorite section would really improve my experience as a user.

## That's all folks!

I would like to know if you miss something from VSCode. I know my list is not long, but this is a list of things that I literally miss everyday, but I'm just too lazy to actually do something about this. SorryNotSorry. So, let me know in the comments, what do you would to see implemented or improved in VSCode?
Vocabulary Building Day7
Tags: gre, day7
Published: 2021-09-04 04:13:06

1. **galvanize**(verb): to excite or inspire to action
![alt text](https://thesaurus.plus/img/synonyms/a171/galvanize.png)
[Checkout Pronunciation](https://www.google.com/search?q=galvanize&oq=galvanize&aqs=chrome.0.69i59j0i512j0i433i512l2j0i512j69i60l3.4738j0j9&sourceid=chrome&ie=UTF-8)

2. **gregarious**(adjective) :to be likely to socialize with others
![alt text](https://assets.wordgenius.com/wordgenius/Word+of+The+Day+Images/Gregarious.jpg)
[Checkout Pronunciation](https://www.google.com/search?q=gregarious&oq=gre&aqs=chrome.0.35i39l2j69i60l3j69i65l2j69i60.4802j0j9&sourceid=chrome&ie=UTF-8)

3. **profligate**(adjective): spending resources recklessly or wastefully
![alt text](https://miro.medium.com/max/1200/1*y8zSe7TYOg1QDoQPm8JPNg.jpeg)
[Checkout Pronunciation](https://www.google.com/search?q=profligate&oq=profligate&aqs=chrome..69i57j0i433i512j0i512l8.3760j0j7&sourceid=chrome&ie=UTF-8)

4. **parsimonious**(adjective): extremely frugal; miserly
![alt text](https://learnbookme.files.wordpress.com/2016/11/parsimonious.jpg?w=640)
[Checkout Pronunciation](https://www.google.com/search?q=parsimonious&oq=parsimonious&aqs=chrome..69i57j0i433i512j0i512l8.8574j0j9&sourceid=chrome&ie=UTF-8)
5. **amenable**(adjective): easily persuaded
![alt text](https://thesaurus.plus/img/synonyms/117/amenable_to.png)
[Checkout Pronunciation](https://www.google.com/search?q=amenable&oq=amenable&aqs=chrome..69i57j0i433i512j0i512l8.8945j0j9&sourceid=chrome&ie=UTF-8)
I hope this helps you if you are preparing for GRE exams.
Task-force week-1 Outcomes
Published: 2021-09-04 03:44:50

First things first thanks to @awesomity and for putting together this task force. We have learned a lot, working with an amazing team, it was very exciting.

so let's start with the technical part.

Did you know that good user stories help a developer to develop websites, app and systems which are user friendly and makes it for the developer to understand what are the tasks the he/she have to work onto?
 
This week I was introduced to the best approaches of writing user stories that explains well what a user story should look like 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imj4mttzq2vcyn9zqd37.png)

And also developing them and meeting the expectations(Acceptance criterias).

As a developer you frequently will need to stand in front of either your bosses or sales team at your company explaining what you have developed how does it will it work when it get to the market right?

fun fact did you know that it is not about what you present but it is how you design your presentation and how you present what you have got, due to this I have been introduced to the following good presentation best Practices:
[*] Keep it simple.
[] practice your presentation before pitching
[] Do not exceed your given time
[] Have a well designed power point and points should be short

To sum up we learned a lot in this week and was very interesting excited for the next coming weeks

see you next week guys :)
TDD/Unit Testing with Laravel from a Real-life Project
Tags: php, laravel, phpunit, unittesting
Published: 2021-09-04 03:26:02

Hey guys,

I know for many developers out there, everybody always want to learn how to write unit testing, working with TDD (is basically code, write test, code, write test,....).

But the thing is, every time you Google "how to write unit test", you'll get a bunch of articles. But most of them are just telling you the "definition" with some BS examples, that's all, like:

- You need to write this test, that test,...
- Write a func `a + b = c` then write test for the func `assertEquals(2, plus(1,1))`
- ...

Right? As a newbie (in term of unit testing), how I suppose to write a freaking test with that?

We're living in the world where we write code that interacting with many things eg: Database, Services,... and `a+b=c` is not gonna help you anything.

To learn more about unit test (especially from scratch), the best way should be: Learning from a **Real-life Project**. 

So, I did prepare a simple Real-life Project using **Laravel** to help you guys learn unit testing.

## Meet KivaNote

Repository: https://github.com/sethsandaru/kiva-laravel-tdd

A simple application which provides APIs for Simple Note app.

### Test definition in KivaNote
- Unit Test
    - Where we're going to test methods of the Class
- Quick Test
    - Same as Unit, but this test won't involve database, all we need to do is mocking then testing.
- Feature Test
    - HTTP Test to test the endpoints, checking the results,...

### What did I cover?
- All endpoints
- Mostly all methods that the application is gonna use

Coverage is **87%**, which is absolutely high and would give us a lot of confident.

### Where should I start?

- First let's have a overall look at the project
    - Routes
    - Controllers
    - Requests
    - Services
- Second, let's read the test cases, you would know what you need to test and how to write tests

### Future improvements
Yes of course, I'm going to find more external services to integrate with the project so I can write more tests (testing external services)

KivaNote has integrated with ImgBB, but seems like it's too easy haha. But it'll help.

## Final words

Thanks, hope you guys enjoy it and give it a ⭐ on GitHub if it helps.

Nice day guys!!
My Favourite Library For Providing Logging In & Logging Out With Google Functionalities In My React Apps
Tags: javascript, react, webdev, beginners
Published: 2021-09-04 00:40:53

Hi I'm [Aya Bouchiha](developer.aya.b@gmail.com), I decided to share with you my favorite react library for providing logging in and logging out with google functionalities in my react apps which is _react-google-login_.

## react-google-login

-   [demo](https://anthonyjgrove.github.io/react-google-login/?path=/story/google-login-button--default-button)
-   [github](https://github.com/anthonyjgrove/react-google-login)

### installation

```shell
npm i react-google-login
```

```shell
yarn add react-google-login
```

## Login code
If you don't have a client Id, please check this article: [how to get google client id and client secret](https://www.balbooa.com/gridbox-documentation/how-to-get-google-client-id-and-client-secret).

```jsx
import GoogleLogin from 'react-google-login';

const Login = () => {
	const handleSuccess = (response) => {
		console.log(response);
		alert("you're logged in successfully!");
	};
	const handleFailure = () => {
		alert('something went wrong');
	};

	return (
		<>
			<GoogleLogin
				// you client Id
				clientId={process.env.CLIENT_ID}
				buttonText='Login'
				onSuccess={handleSuccess}
				onFailure={handleFailure}
				// for calling onSuccess callback when the page load to keep the user logged in.
				isSignedIn={true}
			/>
		</>
	);
};
```

## Logout code

```jsx
import { GoogleLogout } from 'react-google-login';
const Logout = () => {
	const handleLogout = () => {
		alert("you're logged out!!!");
	};
	return (
		<GoogleLogout
			clientId={process.env.CLIENT_ID}
			buttonText='Logout'
			onLogoutSuccess={handleLogout}>
        </GoogleLogout>
	);
};
```

Have a nice day
Does blogging make you a better developer?
Published: 2021-09-04 00:40:12

Why should you start a blog as a developer? Does it actually have any benefits, or is it just one of those things people tell you to do to feel productive? Like making your bed. Although at surface level it seems scary and not worth the effort, there are actually quite a lot of benefits from doing so. There's a quote that floats around the internet and it goes.

If you can't explain it simply, you don't understand it well enough.

This means the opposite is also true, if you can explain it simply, then you do understand it. Having to sit down and write about a topic really highlights what you do understand about it and what you don't. This is great for finding what you excel at and what you need to buckle down and study.

Feynman Technique

There is a technique out there called the Feynman Technique, which is to write out the thing you're trying to learn as simply as possible. As if you were trying to explain it to a 12yr old. Then read back over it and find any flaws within the explanation, or any over technical jargon, and simplify it even further.

This process really highlights what you know about a certain topic, as well as if you understand the concept behind it or just the surface-level jargon. The funny thing about this technique is that it is incredibly similar to writing a blog. A simpler explanation about overly technical topics, condensed into an easy to read format.

Communication

Another reason to start a blog is to increase your writing communication skills. There's no such thing as being too good at communication. As you slowly develop your skills and start making the transition into a professional job, being able to sell yourself in written format will become crucial.

As well as being able to articulate your ideas and get them down on paper. Into a presentable form for that board meeting or startup pitch, you've been meaning to do. Communication is one of the most important skills someone can have, and having somewhere to practise it, such as a blog, is important.

Future Prospects

Future employers also want to see your work and ideas beforehand. Building a name for yourself. Showing that you are willing to put in the effort to educate not only yourself on a given topic but others. Taking a risk and putting yourself out there. These are all things employers look for in potential employees.

So take that risk, and start putting your pen to paper. Whats the worst thing that could happen?
Planning vs short feedback loops
Tags: architecture, bduf, tdd
Published: 2021-09-17 10:47:31

---
title: Planning vs short feedback loops
published: true
date: 2021-09-04 00:00:00 UTC
tags: architecture,bduf,tdd
canonical_url: https://jhall.io/archive/2021/09/04/planning-vs-short-feedback-loops/
---

My wife and I are in the middle of a bathroom reonnvation right now.

![](https://jhall.io/archive/images/bathroom-rennovation.jpg)

This afternoon the installer asked me to verify the placement of the new lighting fixtures, and I commented “I’m glad you’re doing this work instead of me. There are a lot of details I would miss.”

His response I found interesting.

“It’s just a matter of planning everything out. Then testing it every step of the way!”

* * *

I hear a lot of talk from two different schools of thought when it comes to software and IT systems design.

To over-simplify, one school of thought says “We should spend some extra time planning our system before we dive in” and the other says “We should work in small iterations, and let the overall design emerge.”

Both are right, of course. These aren’t actually mutually exclusive concepts. My bathroom installer has a plan (which my wife and I helped design). But every day he has a new question, as new constraints become discovered.

Short iterations, and practices like TDD, are not excluslive of good architecture (or even [BDUF](https://en.wikipedia.org/wiki/Big_Design_Up_Front), not that I recommend it). Short iterations are simply a way to verify frequently that you’re still moving along the right track, and an opportunity to adjust course at the earliest sign of trouble, before it’s more difficult.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to add a boolean type annotation to a variable or a constant in TypeScript?
Tags: typescript
Published: 2021-09-04 00:00:00

---
  title: How to add a boolean type annotation to a variable or a constant in TypeScript?
  published: true
  tags: TypeScript
  date: Sat Sep 04 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/add-boolean-type-annotation-to-variables-constants-in-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-20c2b659bd91cf382b3719741afd66ef.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/add-boolean-type-annotation-to-variables-constants-in-typescript)
  
To add a boolean type annotation to a variable or a constant, you can declare the variable or constant followed by a `:` (colon) symbol and then the type `boolean` in TypeScript.

For example, let's say we have a variable called `isPerson` and want to only have the `boolean` type as the values. To do that we can annotate the type `boolean` to the `isPerson` variable like this,

```ts
// add boolean type to a variable
let isPerson: boolean;
```

After initialization, let's assign a boolean value of `true` to the variable `isPerson`. It can be done like this,

```ts
// add boolean type to a variable
let isPerson: boolean;

// assign a boolean value to the isPerson variable
isPerson = true; // ✅ allowed
```

As you can see from the above code TypeScript allowed us to assign the boolean value of `true` to the variable `isPerson` since the allowed type for the `isPerson` variable is `boolean`.

Now let's try to assign another value of `string` type `Hello World!` to the `isPerson` variable to see what happens,

```ts
// add boolean type to a variable
let isPerson: boolean;

// assign a boolean value to the isPerson variable
isPerson = true; // ✅ allowed

// assign a value of type other than a boolean
isPerson = "Hello World!"; // ❌ not allowed. Type 'string' is not assignable to type 'boolean'.
```

As you can see that the TypeScript will throw an error saying that the `Type 'string' is not assignable to type 'boolean'.` which is also what we want to happen.

### Bonus

Most of the time TypeScript will try to infer the type of the variable from the value it is assigned.

For example, let's declare a variable called `myFavBool` and assign the `boolean` value of 'true' without actually declaring the type `boolean` as we did above. It can be done like this,

```ts
// Typescript infers the type from
// the value it is assigned
let myFavBool = true;
```

Now if you hover over the variable `myFavBool` we can see that TypeScript has automatically got that type of the variable `myFavBool` is of type `boolean`.

Since the TypeScript has already got the type is of `boolean` value and whenever we try to reassign a value other than the type `boolean`, The compiler will throw errors like from the above.

See the execution of the above codes live in [codesandbox](https://codesandbox.io/s/add-boolean-type-to-variables-in-typescript-iu2rv?file=/src/index.ts).

That's all 😃!

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

---
Code Splitting With Dynamic Imports
Tags: react, webpack, performance, javascript
Published: 2021-09-03 23:44:04

## Benefits

* **Better UX**
  * Breaks your JavaScript bundle into multiple modules that intelligently load only when a user uses that functionality. 
  * Loading and wait times are improved application-wide.
* **Hosting-Costs** - Lowers overall "Bytes Transferred" every month.

## How To

Dynamic Imports is already enabled by default in WebPack. All you need to do is make a small change to your "import" lines, and wrap the component in React's `<Suspense>` component. Eg:

```javascript
import React, { Suspense } from 'react';

const SubComponent = React.lazy(() => mport('./SubComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <SubComponent />
      </Suspense>
    </div>
  );
}
```

I had to comment out this line of our `tsconfig.json` or I got an transpile error. This makes it default back to "CommonJS", which is an older JS standard, but that had no effect on our compiles. Our large React/TS application compiled fine. This is an Output setting; not an Input setting. It only changes the format of JS files that are output to the browser.

```json
{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "lib": ["es6", "dom"],
    // "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5",
    "types": ["jest", "node", "react", "@testing-library/jest-dom"],
    "esModuleInterop": true
  },
  ...
}
```
You can see in CDT, this caused two additional "chunk.js" files to be created, and these files only loaded when that user clicked on that functionality - opened a modal in this case.

![Screenshot of Chrome Dev Tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gcvu2mjsfoowcw09ijox.png)

Have you team continue to adopt this import syntax, and gradually your JS code will be split into smartly loading modules.
Kubernetes Master Class: HA Rancher Managing EKS, GKE and AKS
Tags: kubernetes
Published: 2021-09-03 22:58:58

A multi-cluster model is common in an enterprise context. These different clusters either run unique workloads or represent a specific application environment (i.e. dev, test, production). Whatever the case, there is a real challenge of alignment and standardization across these clusters. This challenge is exacerbated when companies adopt a multi-cloud strategy.

In this Master Class session, we will focus on some of the challenges that exist when trying to create consistent alignment across multi-cloud clusters, and then demonstrate how SUSE Rancher can be used to not only close the gaps, but optimize standardization for managing multiple clusters (specifically Amazon EKS, Google Cloud Platform GKE and Microsoft Azure AKS) at scale.


Join us for this free Kubernetes Master Class with your instructor Luke Mwila, Technical Evangelist in the SUSE & Rancher Community.

Please register at [Crowdcast](https://www.crowdcast.io/e/ha-rancher-eks-gke-aks/register?utm_campaign=MCHARancher&utm_source=MN&utm_medium=event).
Building Spotify with Elm-00
Tags: elm, html, css, design
Published: 2021-09-03 22:29:56


In this series I’ll be making a copy of the front end of Spotify using Elm and Scss. The main goal is to improve my skills, but also teach others and create a habit of making blog posts, while improving my writing in English. Before I start, I don’t know how long it will take to finish this project, but I’ll try to finish it within three weeks.

## Why Spotify? And what will be built?

So, I love the Spotify interface, it’s really beautiful, clean and have one of the best ''dark sites'' in my opinion (I love dark sites). Really, you just take a tiny peek at the site and think that this was made by very good designers.

The plan is to make the views (Elm-Html), Stylesheet (Scss) and also add some functionalities to the site, such as:

1. Pages (Home, Playlist, Your Library, Search).
2. Change playlist pages.
3. (SPA) Single page application with elm.
4. The bottom player.
5. And... Idk with time I'll figure it out what I need to do. 

## How will I execute it?

Everyday I’ll write about the progress of the project. The posts will be short and they will have a list of resources in the end.

I’ll be following the best practices (that I Know) of Elm and Scss.

## What are the tools that I will use for this project?

The technologies that I will use:

- Elm 
  
  - ^0.19.1 
  - Do I need to explain why?

- Docker 
  
  - ^20.10.8 
  - To make our life easier

- Git 
  
  - Because it’s the git

- VSCode or any IDE that you like

Yes! Just that for today.

## How can you help?

- [Open issues](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm/issues) for suggestions of better approaches or ideas for the site.
- Connect [Discord](discord) Johann Pereira#7150
- Star the [Github](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm) repository.
- Follow me on [Github](https://github.com/Johann-Goncalves-Pereira/Spotify-Elm).

### Source:

Author: Johann Gonçalves Pereira
Reviewed by: Nathali Thiemy Motooka
[Blog Inspiration](https://medium.com/@adityadroid/60-days-of-flutter-building-a-messenger-from-scratch-ab2c89e1fd0f)