teleren/devto huggingface dataset:
Python Exercise 1 - Solution
Tags: python, programming, beginners, practice
Published: 2022-03-04 05:19:50

# Intro
Hello everyone welcome back to the Python Exercises series .
In previous post I asked you all a question and that was
**Make a python program to find cube, square and square root of a number given by user**
But after three days when I saw that no one has commented their answers I got disappointed . But its ok.

#Answer :
```python
#Python Code to print Square, Sqaure Root and Cube
#---------------------------------------------------

'''
The below is the basic method, I have only written the code to find Sqaure Root as other operations will be of same process

number = int(input("Enter the number: \n"))
sqrt = number ** 0.5 #or 1/2
sqaure = number*number
cube = number*number*number
print(f"The sqaure root of {number} is {sqrt}, The Square of {number} is {square} and the Cube of {number} is {cube}")
'''

# -------------------------------------------------------

'''
Below is the another method to do it and it is easy too,
by making a class it is easy to do this task, it also makes the code clean if we need
to add many operations
'''
#--------------------------------------------------------

class operations:
    def __init__(self,square,sqrt,cube): 
       self.square = square*square
       self.sqrt = sqrt**0.5 #or 1/2
       self.cube = cube*cube*cube
       
num = int(input("Enter a number \n"))
Result = operations(num,num,num)

print(f"The results are: Sqaure - '{Result.square}', Sqaure Root - '{Result.sqrt}', Cube - '{Result.cube}'")


input("") #So that the program doesn't exits

```
So this was the answer you all can use it .


That's it for today meet you soon, till then stay safe and do take very good care of yourselves .
What are the different BP video interview questions that are asked? 
Published: 2022-03-04 04:55:27

1. What are your weaknesses? 

When you are asked about your weakness do not get overly critical about yourself in the interview. Instead, choose one weakness of yours and see how you can improvise on it to make it seem like a strength.

2. Are you a good team player? 

[bp interview](https://www.cronj.com/blog/bp-interview-questions/) questions asked around this area include if you can communicate with people from heterogeneous backgrounds and can motivate them. The other question that the recruiter can ask is if you can mediate conflicts and handle people who are a bit difficult to get along with.

3. Tell us something about yourself

Make sure that you are not beating around the bush. A good answer will talk about things that give the recruiter a better insight into the personality of the candidate in the BP video interview questions while making sure that the information is relevant to the job.

4. Do you consider yourself successful?

You need to be very careful about how you handle this question. Overplaying what you have achieved might come across as arrogant. This is why it is advised that you enumerate the goals that you had set and talk about how you achieved them and how you are still in the process of achieving them.

5. What do you know about our company? 

Make sure that you have familiarized yourself with the company. It will come off as very strange if you say that you are passionate about working for the company without knowing anything about the company. Understand how its position is in the market and who its major competitors are.
100 días de código: 80, aprendiendo mas sobre nodejs y express.
Tags: spanish, 100daysofcode, webdev, mern
Published: 2022-03-04 04:40:03

¡Hey hey hey!

He comenzado a aprender mas sobre el backend con node.js y express creando una api REST para notas. Es un ejemplo simple y yo lo considero la idea vieja pero confiable.

En los siguientes días intentare crear un proyecto de chat que involucre el stack MERN aunque, por supuesto, todavía me hace falta practicar bastante el backend con Node.js. 

Me siento bastante motivado y creo que en el transcurso de la semana intentare aplicar a alguna propuesta de empleo para comenzar a familiarizarme con el proceso y su duración mientras continuo desarrollándome como todo buen desarrollador.

Ahora vayamos con las cosas que hice...
### Hoy
- Aprendí mas sobre los códigos de respuesta y sobre cuales utilizar con cada una de las peticiones mas conocidos y usadas como son get, post, delete, put y patch.
- Practique Touch Typing.
- Cree una API REST con node.js y express para una aplicacion de notas.

Pronto veré la forma de implementar servidores de nodejs en la web y realizare una integración con mongoDB.

Espero que tengan mucho éxito con sus proyectos y ¡suerte en todo!

Hasta la próxima!

Foto del cover de [Jed Villejo](https://unsplash.com/@jmvillejo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/friends?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText).
Editada por mi.
First post, please ignore
Published: 2022-03-04 04:33:40

So, the question on my mind is... why have I signed up for yet another social media site?  It's a good question, and it's good to think about what am I hoping to get out of this experience.

I think the first hope is getting back to a place where I am writing about things that interest me.  Specifically technical things.  I've largely gotten out of the habit of doing more medium to long-form writing, and it's something I should get back to.

The second hope is probably that it will give me some motivation to work on some projects for the sake of practicing some skills I want to get better at, and some that I want to get started with.

The third hope, I suppose, is that maybe I will be able find a community that is focused on developing software that I can be a part of.  I have a gained a broad base of skills and experiences throughout my life, and the communities I am a part of now reflect that variety.  None are really focused so directly on programming though.

We'll see how things go.
Here we go!
Tags: webdev, codenewbie, bootcamp
Published: 2022-03-04 03:58:35

Hey! Welcome to my blog! Not much to see here yet, but I intend for this to be my platform for journaling my formal journey into the Full-Stack development world with the Flatiron school.

My name is Nic and I live in the beautiful Pacific Northwest with my wife and two daughters. I love traveling, photography, road trips, flying airplanes, music, food and, of course, anything technology related.

I recently left my career of 10+ years as a Systems Engineer in the aviation industry to pursue my interests in coding and web development. During that time I found myself playing around with Raspberry Pi’s, microcontrollers and self-hosting smart home services (thanks HomeAssistant!).

Thanks for reading!
Make Visual Studio Code Pretty
Tags: visualstudiocode, vscode, codeeditor
Published: 2022-03-04 03:53:05


Save your eyes from cluttered editor. Make Visual Studio Code more pleasing to look at. This is similar to my "[Make Sublime Text 3 Pretty](https://dev.to/doncadavona/make-sublime-text-3-pretty-3037)" setup.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gjw32spsurcvia1p6r7.jpg)

The original looks okay. But, it looks cluttered. To make it prettier, copy and save this settings to your `settings.json`:

```json
{
    "breadcrumbs.enabled": false,
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 14,
    "editor.lineHeight": 1.75,
    "editor.lineNumbers": "off",
    "editor.minimap.showSlider": "always",
    "editor.padding.bottom": 10,
    "editor.padding.top": 10,
    "editor.wordWrap": "on",
    "explorer.autoReveal": false,
    "explorer.openEditors.visible": 0,
    "workbench.activityBar.visible": false,
    "workbench.colorTheme": "Material Theme Palenight",
    "workbench.statusBar.visible": false
}
```

Also, you need to install [Material Theme](https://material-theme.site/) in Visual Studio Code and [Fira Code](https://github.com/tonsky/FiraCode) in your Operating System.
Why We're Focusing on Browser Tools in 2022
Published: 2022-03-04 03:11:58

My biggest source of frustration earlier in my dev career was just how unbearably adhoc all the work was. Working at early stage startups meant constantly gluing disparate code together in unpredictable one-off ways: convert [HTML to Pug](https://masteringjs.io/tutorials/node/html-to-pug) here, build a [Webpack config](https://masteringjs.io/tutorials/webpack/config) to compile a special script for a client there. It was a nightmare to try to find a working npm module and figure out how to use it.

### What is a Browser Tool?

A tool that runs directly in your browser. No npm packages to install, no docs to read. Just type in Google, click link, copy/paste problem, and get solution.

Web UIs are _ideally_ more intuitive, don't require installing anything, and get you from problem to solution faster.

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

Browser tools aren't great when you need to solve a problem as part of an automated process. You don't want to have to copy/paste your code into a browser for tasks that you need to do repetitively, like linting and compiling. But converting some HTML you got off of Fiverr into Pug, or converting a config from [JSON to YAML](https://masteringjs.io/tutorials/tools/json-to-yaml), or converting [decimal to binary](https://masteringjs.io/tutorials/fundamentals/decimal-to-binary)? We definitely prefer browser tool to CLI.

The Mastering JS mantra has always been _devs solve problems by Googling_. Browser tools help developers get from problem to solution faster using their preferred method.

### Challenges of Building Browser Tools

UI/UX is the primary goal. Specifically, get you from problem to solution as fast as possible, while minimizing any mental overhead. Performance is key to this goal, which is one of several reasons why we avoid adding a server component to our tools where possible. Most of the time, we can get away with just using [Webpack](https://masteringjs.io/webpack) to bundle an npm package to do what we want to do.

We're still learning the right UI/UX patterns, so please let us know what you think of our tools in the comments.
Laravel 8 Socialite Login With Google Account
Tags: laravel, laravel8, socialite, google
Published: 2022-03-04 03:40:12

In this tutorial, we will see laravel 8 socialite login with google account. Also, you can gain knowledge about how to socialite login with google account in laravel 8 jetstream. Laravel also provides a simple, convenient way to authenticate with OAuth providers using laravel socialite.

Laravel socialite currently supports authentication with Facebook, Twitter, LinkedIn, Google, GitHub, GitLab, and Bitbucket. 

So, in this laravel 8 login with google example we are using the OAuth process and integrating google API in laravel.

So, let's see laravel socialite google login.

```
Step 1 : Install Laravel 8

Step 2 : Install JetStream

Step 3 : Install Socialite

Step 4 : Create Google App

Step 5 : Add Database Column In User Table

Step 6 : Create Route

Step 7 : Create Controller

Step 8 : Edit Login Blade File
```

---

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

---

> **_[Read More : Laravel 8 Socialite Login With Google Account](https://techsolutionstuff.com/post/laravel-8-socialite-login-with-google-account)_**
Skia - First Look Part 1
Tags: flutter, skia, cpp, android
Published: 2022-03-04 03:37:51

  Skia 是 Flutter 2D渲染引擎的底層框架，並應用於 Android、Google Chrome、Chrome OS、Chromium OS、Mozilla Firefox、Firefox OS以及Sublime Text、LibreOffice 。

:sparkles: Feature 
- CPU 軟體點陣圖計算
- GPU 加速渲染
- 透過 ANGLE 轉編譯 OpenGL 至 Native Api DirectX, Vulkan, Metal
- PDF / XPS / SVG 格式輸出

  可惜的是目前按照官網的方式嘗試多次都無法正常運行，~~所以原本寫的一篇文章就廢掉了:sob:~~

```bash
bin/gn gen out/Static
python2 tools/git-sync-deps
bin/gn gen out/Release  --args='is_debug=false'
ninja -C out/Release
```

->  <mark> failed! </mark>

**其他苦主 ->**
https://bugs.chromium.org/p/skia/issues/detail?id=12765&q=SkPDFSubsetFont&can=2

  參考其他大多數的文章都已經過時老舊，索性有大神在去年分享了在Windows的做法，但使用 Skia 在 github上最新的版本編譯出的程式碼並無法正常在 VS 中運行，目前只能靠以下 github 中已經編譯好的 dll檔案進行測試。

> https://github.com/nightelf3/FirstSkiaApp/tree/example

輕鬆點開我們的 Solution 就可以開始測試 Skia 的強大功能，

程式主要是 C++ WinApi 框架所開發的視窗程式範例，透過 Layer 將多個範例放入到我們的主程式中 !

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

透過 \<Tab\> 切換我們的範例

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

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

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

透過 \<z\> / \<x\> 可以切換 Raster 與 OpenGL

### Raster
![Raster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yrft1kjc9jez03zu16x8.png)

### OpenGL
![OpenGL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ikuooy3h31izz0s4epvl.png)

## Conclusion
  無法從原始碼編譯成功還是覺得有點小可惜，希望未來官方可以再補足文件，讓更多人有機會透過 Skia 進行開發。
  
  未來的章結會再根據 Skia 開發進行更深入的說明，可能會搭配 OpenGL / Vulkan / Meta 等圖像庫一起進行研究 !


:mega: 大力祈求有其他先進好手能提供完整的 SKIA 建置教學 ! :mega:

## Reference
https://skia.org/docs/user/build/
https://chromium.googlesource.com/skia.git/+/chrome/m42/site/user/sample/hello.md
https://blog.csdn.net/yujunyu12/article/details/100859127
https://blog.csdn.net/var_Rain/article/details/79318208
https://github.com/cisen/blog/issues/464
https://kyamagu.github.io/skia-python/install.html
https://www.youtube.com/watch?v=lEj_GfH8is8&ab_channel=EngineeringCommunity
VS Code User Interface Browser
Tags: vscode, hacker, webdev, react
Published: 2022-03-04 03:15:37

## Simple Browser inside VS Code Editor

---

**CONTEXT**

Did you know that you can open a simple browser inside the VS Code editor? No, I don't mean the type of browser that you run for live server. But an actual browser inside the VS Code User Interface Editor. I thought I'd bring this up because it took me weeks to look for this method online with no success. 

It could have been, that I wasn't looking up the information correctly, but what happens when you don't know what to call it and by "IT" I mean the issue you are having. Today, it just hits me. Do a search for VS Code Browser. 


![Mind bLown](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwfguey8g24k2cnohaph.gif)

Little did I know to look it up that way. OK! I get it. lol

Here's a how-to! Its super simple!

Inside VS Code: 

 Command + Shift + P (Mac users) or  Control + Shift + P (Windows Users)

inside the search type `browser`, scroll down and click on where you see something that says `Simple Browser`. Click on that!

Inside Simple Browser type `http://localhost:3000/`.


![Simple Browser Inside VS Code User Interface](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1nwkvqg0p3n9bbsy0nec.png)

YOURE WELCOME!!

Now you can access a browser within VS Code. Why even care about something like this?

Well dudes - dudettes.. if you have a laptop, and you are like me and are working in web development, I do not like tabing into the chrome broswer to look at my work, this is perfect! Its just something super simple for me to access quickly as I code, to make sure Im correctly coding something. Of course if you need to get more technical, I highly recommend using Mozilla Firefox Browser. It has some of the the best developer tools you can use in your coding journey.

---
March 3rd, 2022: What did you learn this week?
Tags: weeklyretro, weeklylearn, discuss
Published: 2022-03-04 02:54:36

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}
<!-6-
And remember, if something you learned was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{%link https://dev.to/devteam/what-was-your-win-this-week-3p1o %}

<center>

![Someone feeling like "Yaaas!"](https://media.giphy.com/media/zBhZiVNNQjfTG/giphy.gif)
</center>
-->
angular | sync session storage between multiple tabs using local storage event
Published: 2022-03-04 02:43:17

## Who need this?
- Want to find a solution to sync data in sessionStorage between multiple tabs

## Solution
- Create session storage service `ng g s session-storage`
```js
// session-storage.service.ts
import { Injectable, OnDestroy } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class SessionStorageService implements OnDestroy {
  constructor() {
    window.addEventListener('storage', this.handleStorageEvent, false);

    this.requestSyncSessionStorage();
  }

  handleStorageEvent = (event: StorageEvent): void => {
    if (event.key === 'requestSyncSessionStorage') {
      console.log('handleStorageEvent - requestSyncSessionStorage', event);
      localStorage.setItem('sessionStorage', JSON.stringify(sessionStorage));
      localStorage.removeItem('sessionStorage');
    } else if (event.key === 'sessionStorage') {
      console.log('handleStorageEvent - sessionStorage', event);
      const sessionStorage = JSON.parse(event.newValue || '{}');
      for (const key in sessionStorage) {
        window.sessionStorage.setItem(key, sessionStorage[key]);
      }
    }
  };

  requestSyncSessionStorage(): void {
    console.log('requestSyncSessionStorage - sessionStorage', sessionStorage);
    if (!sessionStorage.length) {
      const current = new Date().toLocaleTimeString();
      console.log('requestSyncSessionStorage - request', current);
      localStorage.setItem(
        'requestSyncSessionStorage',
        'request session storage' + current
      );
    }
  }

  getToken(): string {
    const tokenStr = window.sessionStorage.getItem('token') || 'null';
    const token = JSON.parse(tokenStr);
    console.log('getToken', token);
    return token;
  }

  setToken(): void {
    const token = {
      username: 'Hey It me',
      token: '123456789',
      timestamp: new Date().toLocaleTimeString(),
    };
    console.log('setToken', token);
    window.sessionStorage.setItem('token', JSON.stringify(token));
  }

  removeToken(): void {
    window.sessionStorage.removeItem('token');
  }

  ngOnDestroy(): void {
    window.removeEventListener('storage', this.handleStorageEvent, false);
  }
}
```

```html
// app.component.html
<h1>Demo Share data between token storage service</h1>
<button (click)="sessionStorageService.setToken()">Set Token</button>
<button (click)="sessionStorageService.getToken()">Get Token</button>
<button (click)="sessionStorageService.removeToken()">Remove Token</button>
```

```js
// app.component.ts
import { Component } from '@angular/core';
import { SessionStorageService } from './session-storage.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(public sessionStorageService: SessionStorageService) {}
}

```

## What are we gonna do?
- Step 1: Check session storage, if it null or empty => do step 2
- Step 2: Ask another tab: hey, have you got session storage? > send it to me (using localStorage event)
Unit Testing (React + Typescript)
Tags: testing, react, typescript, jest
Published: 2022-03-04 02:27:04

## What is Unit Testing?
Unit testing, a testing technique using which individual modules are tested to determine if there are any issues by the developer himself. It is concerned with functional correctness of the standalone modules.

The main aim is to isolate each unit of the system to identify, analyze and fix the defects.

**Unit Testing - Advantages:**

- Reduces Defects in the Newly developed features or reduces bugs when changing the existing functionality.
- Reduces Cost of Testing as defects are captured in very early phase.
- Improves design and allows better refactoring of code.
- Unit Tests, when integrated with build gives the quality of the build as well.

For testing our app, first of all, we need a test runner. 
_When we create a new react app, the create-react-app provides us a test runner which is called **Jest**._

At first, we have to create react app:
`npx create-react-app my-app-name --template typescript
yarn create react-app my-app-name --template typescript`

Now, we can get two file as naming App.tsx and App.test.tsx
In App.test.tsx we have to ensure that the App component renders a link.

```
test('renders learn react link', () => {
  render(<App />);
```

Let's go understand unit testing anatomy.

## Unit Testing (AAA)
We describe what we want to test.
- Arrange: prepare the testing environment, render the component;
- Act: try to find expected value;
- Assert: we compare function results with expected results, if they are equal the function worked correctly.

**_Unit testing sample_**

Say, we have a divided function, we expect the correct result and we also know that if we divided by 0, it's not valid. So, it will throw an error. If we set (10/5) and we expect the value=2, that's quite possible. But if we set (10/5) and we expect the value=3, it will throw an error. We will test our App.tsx component in our App.test.tsx

```
// ...

it("should return a division result", () => {
  // Arrange: prepare function arguments
  // and the expected division result.
  // In this example 10 / 2 === 5:
  const [a, b, expected] = [10, 2, 5];
  
  // Here we use array destructuring 
  // to assing `a === 10`, `b === 2`, 
  // and `expected === 5`.
  
  // Act: use the `divide` function 
  // to get an actual function result.
  const result = divide(a, b);
  
  // Assert: compare expected result
  // with a function result.
  expect(result).toEqual(expected);
});

```

In our case we use .toEqual method to check if the expect argument is equal to toEqual argument, i.e. if the expected result is equal to actual result.

Now, it is time to check if our test is working, open the console and run:

`yarn test`

You will see that all the tests are passing:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk3cyqnj3vkxfzlusp9j.PNG)
K16 is hiring, remote app devs
Tags: jobs, jsdevjob, hiring
Published: 2022-03-04 02:20:38

Friends!
If you’re looking for a great job, with great teammates and room to grow, please read this and tell Mary I sent you!
 #Devjobs #jobhiring #greatplacetowork 
K16 Solutions is seeking a back-end developer role to join our growing team.  We are a completely remote team...by design. Our tech stack is AWS with Node.js, Postgres, and other JavaScript frameworks.
Here is the position in LinkedIn: https://lnkd.in/eBKSZ5Bj
If you're interested in exploring the opportunity, Mary Ritter (VP of HR) will be happy to speak with you this week.