teleren/devto huggingface dataset:
1 - Agile - Seu autodesenvolvimento.mov
Tags: agile, career, leadership, devops
Published: 2022-01-23 23:40:57

[English version](https://dev.to/caju/1-agile-your-self-developmentmov-28gm)

Olá pessoal! Boa noite. Bora falar um pouco de **desenvolvimento profisional**.

Uma carreira para ser bem-sucedida, ela tem que ser compatível com sua personalidade, seus interesses, habilidades e ambições, se você quiser ter sucesso!

Muitas pessoas pensam na grana, o que de fato é importante, e às vezes, momentaneamente, não temos opções, mas lá no fundo, se quiser ter sucesso, crescer, você precisa fazer o que ama! Parece clichê, mas é a mais pura verdade.

É preciso gerenciar sua vida no trabalho para sempre, em paralelo a seu desenvolvimento pessoal e profissional.

Vamos entender uma coisa: a escalada profissional tradicional ficou no passado. Você não pode mais esperar que uma organização assuma total responsabilidade por seu desenvolvimento. Temos, agora uma carreira em labirinto, e cabe a você definir suas metas e encontrar maneiras de atingi-las. O que você quer da vida? Qual a sua arte? Qual a direção a ser alcançada?

Inicialmente, você deve desenvolver as habilidades certas, técnicas e interpessoais. Suas chances serão maiores se você construir um perfil (um avatar rs) pessoal, que o ajude a identificar a colocação organizacional adequada. Uma vez no novo emprego, há rotas específicas para o sucesso, e um plano de desenvolvimento pessoal indicará os caminhos que você possa trilhar.

Finalmente, quando um emprego não mais satisfazer, você terá de reconhecer a melhor hora de partir para outro.

Lembre-se: não existe um emprego pra sempre e sim uma carreira pra sempre.
Setting up Create React App with @emotion/react v11 and and TypeScript 4.5.5 (Bonus: replacing npm with yarn)
Tags: react, typescript, webdev, beginners
Published: 2022-01-23 23:01:52

# Intro

A quick, straightforward and (as of January 2022) up-to-date guide for setting up create-react-app with the latest versions of [emotion](https://emotion.sh) (11.7.1) and TypeScript (4.5.5).

This also documents the steps needed to migrate from `npm` to `yarn` v3, with offline cache, if you want.

1. initialize the project.
    ```
    npx create-react-app my-app --template typescript
    ```

2. install `@emotion/react`
    ```
    npm i @emotion/react
    ```

    emotion v11 includes `emotion-theming` (https://emotion.sh/docs/theming)

3. Add a property to `tsconfig.json`:
    ```
    "jsxImportSource": "@emotion/react"
    ```

4. Add `jsxImportSource` pragma to _top_ (important) of each tsx file:
    ```
    /** @jsxImportSource @emotion/react */
    ```

Optionally, remove the react import.

# Bonus: `npm` to `yarn 3` migration

There aren't a lot of documentation about the latest (again, as of January 2022) version of yarn, `3.1.1`. Here's the steps I took to move from `npm` and enable offline cache.

1. Remove `package-lock.json` and `node_modules`.

2. add the following to `.gitignore` (I like to include a link for context):
    ```
    # https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
    .yarn/*
    !.yarn/cache
    !.yarn/patches
    !.yarn/plugins
    !.yarn/releases
    !.yarn/sdks
    !.yarn/versions
    ```

3. add to `yarnrc.yml` (create it if needed):
    ```
    nodeLinker: node-modules
    
    yarnPath: .yarn/releases/yarn-3.1.1.cjs
    ```

4. run `yarn`.

5. You're done! `yarn start` should start the dev environment as expected.

6. Optional: replace references to `npm` in the `README.md`. `npm run` -> `yarn`, `npm start` -> `yarn start`, `npm test` -> `yarn test`.
Telescope. w2
Tags: opensource, javascript
Published: 2022-01-23 21:31:44

# Introduction
For this week and before Thursday, 23, I have four goals and hope to accomplish them:

> help my team member @tcvan0707 with solving issue [#2650](https://github.com/Seneca-CDOT/telescope/issues/2650)
> make a fix for [issue](https://github.com/Seneca-CDOT/telescope/issues/2498#event-5925080891) 
> continue work on my research on [CloudFlare](https://github.com/Seneca-CDOT/telescope/issues/2648#event-5887895408)
> get in the team of React Native or Github Data Integration 

### Solving the existing issues

My team member Thanh Van and I  are trying to solve the incorrect Link on the main website slider inside the version "text."
We are still attempting to figure out how to fetch the correct commit name, but it seems like GitHub documentation might not be up to date. I don't know how we will fix this, but it doesn't matter. Maybe we will even make something with API.
I also have two uncompleted [issues](https://github.com/Seneca-CDOT/telescope/issues/2498#event-5925080891) & [Link](https://github.com/Seneca-CDOT/telescope/issues/1936#event-5925188568), but they look not that hard. (I hope)


### Cloudflare project research.

I feel[optimistic](https://github.com/Seneca-CDOT/telescope/issues/2648#event-5887895408)about this issue and hope to finish it asap.

### Personal project research.

I think there is no more enough time for me to choose between React Native team or Github or Cloud, so that's why I've decided to join the mobile development team, and I will try to start working as soon as possible.

#Conclusion

How is telescope fetch working(web-scraping) all the blog posts? I'm about to answer.

⚠️ Repo for future first work: here

#Links
🖇 git https://github.com/aserputov
🖇 Twitter https://twitter.com/aserputov\

p.s This post was made for my OSD class Lab 2 assignment
Empty Cache and Hard Reload in Chrome devTools
Tags: beginners, javascript
Published: 2022-01-23 21:29:13


Sometimes it is the little things. I was having a really hard time with some javaScript I was working on. It seemed like my code was correct but I couldn't get it to work. I added in some console.logs and they were not working either.🤷🏻

Then I discovered if you hold down the refresh icon at top of browser when you are in Chrome devTools, you will have an option to do a hard refresh and empty cache.💥

![screen shot from chrome dev tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxt5baob1lgvm8gycyus.png)
Consistent Frontend with CSS Variables
Tags: css, webdev
Published: 2022-01-23 21:12:39

When I create websites, I often set **global variables** in *CSS* file.  

For example,  

```css
/* style.css */
:root {
    /* Colors */
    --color-black: #222;
    --color-red: #e12;
    --color-white: #fff;

    /* Fonts */
    --font-family-roboto: 'Roboto', sans-serif;
    --font-family-opensans: 'Open Sans', sans-serif;
}
```

If you set variables in the **:root**, you can use these values anytime and anywhere in your frontend project.  

For example, 

```css
.wrapper {
    font-family: var(--font-family-roboto);
    color: var(--color-black);
}

a {
    font-family: var(--font-family-opensans);
    color: var(--color-red);
}
```

This makes your website theme more consistent and, above all, even easier to code.
wovoui-icons: Bootstrap 5 icons in Vue 3
Tags: bootstrap, vue, wovosoft, wovou
Published: 2022-01-23 21:08:47

# Bootstrap Icons

[wovoui-icons](https://github.com/wovosoft/wovoui-icons) are imported
from [Bootstrap 5 icons](https://icons.getbootstrap.com). There are almost 1522 icons.
And in the future, if Bootstrap provides some more icons, those will be available too as soon as possible.

[wovoui-icons](https://github.com/wovosoft/wovoui-icons) are wrapped in a separate package so that it's dependency can 
be optional.

## Getting Started

Of-course You can use the icons using the provided [methods](https://icons.getbootstrap.com/#install) of [Bootstrap 5](https://icons.getbootstrap.com). For example,

```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
```

```scss
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css");
```

```javascript
import "bootstrap-icons"
```

## Installation

### Using NPM

```shell
npm install @wovosoft/wovoui-icons 
```

### Using yarn

```shell
yarn add @wovosoft/wovoui-icons
```

## How to Use

```vue

<template>
    <Activity :size="5"/>
    <Alarm :size="5"/>
</template>
<script>
import {Activity, Alarm} from "@wovosoft/wovoui-icons";

export default {
    components: {Activity, Alarm}
}
</script>
```
Living Image (Game of Life Inspired)
Tags: codepen
Published: 2022-01-23 21:08:06

<p>This is an idea I've had for some time of a Conway's variant that uses rgba values of pixels as sort of a "genetic code".  And creates a living ecosystem that can be fed by dropping images into it or by clicking on the canvas. You can also switch between different rule sets in real time!
Feel free to fork and create your own rule sets! To change behavior, just change what happens in decidePixelsNextState()</p>

{% codepen https://codepen.io/harunpehlivan/pen/JjOPoYd %}
Game of Lifesweeper
Tags: codepen
Published: 2022-01-23 21:06:35

<p>Conway's Game of Life with a Minesweeper theme!</p>

<p>Numbers, mines, and flags each take on different meanings than the original</p>

<p>Cell numbers: how many neighbors are alive</p>

<p>Mines: this cell just died due to under/over-population</p>

<p>Flags: this cell just came alive due to reproduction</p>

<p>Pen forked from James N Wasson's Codepen Challenge submission for March 2020 week 2 </p>

{% codepen https://codepen.io/harunpehlivan/pen/wvPwBay %}
Metaverse
Tags: metaverse, nfts
Published: 2022-01-23 20:28:55

I did some research work on Metaverse and the concept of NFTs.  You can see some examples from the links below:

https://www.epicgames.com/fortnite/en-US/home

https://www.metapunk.co.uk/metablog/8-2021-metaverse-start-your-engines

Animus is the concept of genetic memory concept

https://assassinscreed.fandom.com/wiki/Animus

UnReal and Unity engines are the backend engines.

https://www.unrealengine.com/en-US/

http://www.unity.com

Second life ideas are borrowed in metaverse. See the link below for description of differences and commonalities.

https://www.theverge.com/2022/1/13/22881864/metaverse-second-life-decentralized-moderation-patent-virtual-reality

https://www.roblox.com

https://spectrum.ieee.org/metaverse-second-life

Facebook and Microsoft have their own metaverses..
https://www.indiatoday.in/technology/features/story/what-is-metaverse-and-why-facebook-and-microsoft-are-talking-about-it-1882075-2021-11-29
Core Web Vitals Mastery Requires a Multi-Disciplinary Team
Tags: cwv, google, seo, performance
Published: 2022-09-01 08:00:37

---
title: Core Web Vitals Mastery Requires a Multi-Disciplinary Team
published: true
date: 2022-01-23 20:11:26 UTC
tags: CWV, Google, SEO, Performance
canonical_url: https://theuxcto.com/digital-blitz/core-web-vitals-requires-a-multi-disciplinary-team/
---

When Google announced in 2020 that website performance was going to have a greater impact on search engine rankings, the whole industry started to take user experience very seriously.

I have seen that achieving great Core Web Vital scores is really a team effort. You need a multidisciplinary team of experts to achieve the highest results.

{%youtube 1NkwswiEh8w %}

> From a technical point, page experience is mostly defined by the speed and responsiveness of your website.

It means that to provide greater page experience to your visitors, you need to optimise both the source code and the hosting infrastructure.

- You need a web developer to optimise the frontend, HTML and JavaScript code
- You also need a DevOps engineer to optimise the caching, compression and storing the assets on CDN and so on.

To achieve scores in the high 90's, I really recommend you involve UX and UI designers as well as QA testers to really build a Core Web Vital dream team around your SEO & Analytics expert who should be leading this workstream.

That's it for today so if you have any question, [just get in touch](https://cyber-duck.co.uk). Don't forget to [subscribe to my YouTube channel](https://www.youtube.com/c/SylvainReiter) and [follow me on Twitter](https://twitter.com/sylvainreiter) to keep learning with me and grow your career in digital.

Until next time, stay safe and see you soon.
Tough PenTesting Questions
Tags: pentesting, ethicalhacking, hacking, cybersecurity
Published: 2022-01-23 20:05:59

I've tried numerous sites asking these questions and no response on most of them. Here they are!



1-What are the biggest mistakes you made or you see others make when learning about pen-testing? What are the most common mistakes at the pro level?

2-If you had to train me for 4 weeks for a zero to mastery competition on pen-testing, and 1 million dollars was on the line, what would that training look like? What about 8 weeks? What would your roadmap and sequencing be?


3- What do you think are the commonalities amongst the top TryHackMe/HackTheBox competitors? 4B- Which of these commanalities are not taught at TryHackMe/HackTheBox or online courses? 4C- Which neglected commonality (found in answer 4B) could I get good at abnormally quickly.

4- If you were to create a 'cheat sheet' that listed the most important principles or concepts in pen-testing, what would be on it?

5- What small projects would you recommend a new person to make to keep them motivated?

6- How do you retain your knowledge? Do you take notes with pen and paper or digitally? Do you prefer to remember through practice and building projects instead?
Software Portability and Optimization
Published: 2022-01-23 19:43:31

## Introduction 

Today, I will discuss my first experience working on [6502](https://wiki.cdot.senecacollege.ca/wiki/6502) Emulator.

The [6502](https://wiki.cdot.senecacollege.ca/wiki/6502) is an 8-bit processor with a 16-bit address bus. It is, therefore, able to access 64 kilobytes (216 bytes). Since each 16-bit address is comprised of two 8-bit bytes, memory can be viewed as 256 pages of 256 bytes each.

We have two tasks to do:

> Calculate how long it takes for the code to execute, assuming a 1 MHz clock speed?

> Calculate the execution time of the fastest version of this program that you can create?


### Calculate how long it takes for the code to execute, assuming a 1 MHz clock speed?

First of all, below, you can see the code I'm about to work with and count how long it takes to execute it.  
```
	lda #$00	; set a pointer at $40 to point to $0200
	sta $40
	lda #$02
	sta $41

	lda #$07	; colour number

	ldy #$00	; set index to 0

loop:	sta ($40),y	; set pixel at the address (pointer)+Y

	iny		; increment index
	bne loop	; continue until done the page

	inc $41		; increment the page
	ldx $41		; get the current page number
	cpx #$06	; compare with 6
	bne loop	; continue until done all pages
```

To calculate this code, we will need [special](https://www.masswerk.at/6502/6502_instruction_set.html#BNE) docs with the time of each command execution. 

I've decided to share my calculation via a photo of excel because it seems more informational.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkhgkhhyekii9earb204.png)

### Calculate the execution time of the fastest version of this program ?

I tried to optimize code and decided to see how different our professor did the same work in class. Code below.

```
	LDA #$00
	STA $10
	LDY #$02
	STA $11

	LDA #$07
	LDY #$00	

LOOP: 	STA ($10),Y
	INY 
	BNE LOOP

	INC $11
	LDX #$06
	CPX $11
	BNE LOOP
```

I didn't find what I could change to make the first code faster, but I think this code can execute in fewer cycles after I did small calculations. 

## Conclusion

While working on these experiments, I did solve a minor bug in Assembly Compiler. See the [Link](https://github.com/ctyler/6502js/pull/2) to the pull request.

> ⚠️ Open Source For Developers Blog Post: [Link](https://dev.to/aserputov/how-to-be-a-maintainer-of-the-huge-open-source-project-33ef)

## Links

> 🖇 git https://github.com/aserputov
> 🖇 twitter https://twitter.com/aserputov\

_p.s This post was made for my SPO class Lab 2 assignment_
Three useful tricks I learned with Pest testing in Laravel
Tags: php, laravel, pest, testing
Published: 2022-01-23 18:47:58

**When I started [monse.app](monse.app), my last project, I decided to make all tests with [pestphp.com](https://pestphp.com/) and now, three months later, I can say it was a good decision.**

Anyway, this post it's not about if it's a good testing framework or not, it's about some things I learn and makes my tests more readable and simple.

## 1. Adding helper functions

If you make a lot of tests you will see that you are going to need the same things over and over. To avoid duplicating code and also make the tests more readable a good practice it's to make helper functions.

You can add these functions in the `tests/Pest.php` file.

One that I use a lot it's the next one that helps me to get the current test class instance.

```php
function t(): ?TestCase
{
    return TestSuite::getInstance()->test;
}
```

## 2. Creating factories functions
When you use Laravel factories the IDE doesn't know the class model that it's returning from there and we lose autocomplete and other intentions.

We can do something like these, every time that we are creating a new model:

```php
/** @var User */
$user = User::factory()->create($data);
```

But I find it more useful and readable to create a new helper function with a typed return.

```php
function user(array $data = []): User
{
    return User::factory()->create($data);
}
```

## 3. You don't need closures

Usually, when we write a test we do something like:

```php
test('authentication when user is not created', function () {
    postJson('/api/login', getTestData())->assertCreated();
});
```

But with pest actually, you don't need to pass a closure if you don't need and you can write the same test just like this.

```php
test('authentication when user is not created')
    ->postJson('/api/login', user())
    ->assertCreated();
```
Out-of-Bounds: Generating and disposing of objects in Three.js and Cannon.js
Tags: codepen
Published: 2022-01-23 19:41:55

<p>Properly disposing of objects to free up memory is vital in a WebGL application.  As the balls fall over the edge, we rapidly and proportionally decrease their opacity, and when the opacity reaches zero, we dispose of the material and geometry and remove them from the physics world and render lists.</p>

{% codepen https://codepen.io/harunpehlivan/pen/gOXYOOb %}
Create a pull request from a reverted remote branch
Tags: git, github
Published: 2022-01-23 19:30:09

Recently I landed across the situation where I had made commits directly to `dev` branch (which happens to be our `release` branch) instead of `feature` branch.

The general process that is followed in my company (and perhaps many others) is that we make changes to our `feature` branch and raise a pull request against `dev` (release) branch which is then reviewed and finally merged.

Accidently I pushed commits directly to `dev` branch instead of `feature` branch & I quickly reverted those commits back by simple git command
```
git revert <revert-commit-hash>
git commit -m "reverting accidental commits"
git push 
```

After that I quickly checked out to my `feature` branch, made those changes again, pushed all changes to `feature` branch. As per next step, I had to raise PR of my latest changes against `dev` branch, and when I did that, I got message:
> There isn’t anything to compare.   
> dev is up to date with all commits from feature branch. Try switching the base for your comparison.

The problem here is `dev` branch is ahead of the `feature` branch (because of revert commit). You will notice that your previous work which was reverted will be gone! The solution to this is reverting the reverted commit!

I had to follow 4 steps to fix this problem which I read from this [awesome article](https://medium.com/@shanikae/create-pull-request-from-a-reverted-git-branch-27219cadf9b5)

**Step 1:** Create and checkout to a new branch tracking `dev` branch
```
git checkout -b temp-branch -t dev
```

**Step 2:** Revert the commit that was made by mistake (here commit will be reverted back from dev branch since our temp branch is tracking dev)
```
git revert <revert-commit-hash>
git commit -m "reverting the reverted commits"
git push -u origin temp-branch
```

**Step 3:** Checkout the original `feature` branch
```
git checkout feature-branch
```

**Step 4:** Raise PR against dev branch
```
git push -u origin feature-branch
```

### Pictorial representation of scenarios discussed above:

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1634319597245/4p44KUwbW.png)
Share the French Wordle grid
Tags: javascript, gamedev, wordle
Published: 2022-01-23 19:27:28

Until last Sunday, it wasn't very clear that we could share the results in my [French Wordle](https://www.solitaire-play.com/lemot/) game. Thankfully, I just need a simple screen to solve this problem.

![Share the LeMOT grid](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qv62g29njmbd0hav3le.png "Share the LeMOT grid")

At least now it is obvious for everyone that it's possible to share the result of his game. And even that you are strongly invited to do so :)

Before this update, I displayed a short message for 2 or 3 seconds that said "Bravo! Result copied to the clipboard". So you had to be a bit careful to understand that it was possible to share your result, like with the original [Wordle](https://powerlanguage.co.uk/wordle/).

Not to mention that it's better than automatically paste the grid into the clipboard, without notifying the player. But that's okay, at first I wanted to deploy quickly.

And it's not to brag, but I do feel that shares on Twitter have increased after this small improvment :)

So, don't be afraid to play [LeMOT](https://www.solitaire-play.com/lemot/ "French Wordle") and share your game!

---

This post was originally published on [blog.pagesd.info](https://blog.pagesd.info/2022/01/23/share-french-wordle-grid/).
One React testing tip
Tags: javascript, webdev, react, testing
Published: 2022-01-23 19:24:16

Use an API mocking library. That’s it, it will make your life easier, you’ll be able to test everything without mocking basically anything and make Kent C. Dodds happy.

But we know that sometimes that’s not possible...

---

Let’s say we have this:

```jsx
// App.js
function App(){
	return (
		<ContextProvider>
			<MainComponent />		
		</ContextProvider>
	)
}

// Context stuff omitted

// MainComponent.js
function MainComponent(){
	const contextValue = useContext();
	
	return (
		<div>
			{contextValue}
		</div>
	)
}
```

You probably saw, made, and/or had to test something like this.

And it might be as easy as just wrapping your testing “render” in the context provider or testing it indirectly, by never unit testing `MainComponent`.

But what if you really want/need to unit test `MainComponent`?

You certainly can think of a few ways to test it, but I’ll be offering one way that needs only a small refactor and that gives your unit testing superpowers.

```jsx
// MainComponent.js
function MainComponent({
	contextValue = useContext();
} = {}){
	return (
		<div>
			{contextValue}
		</div>
	)
}
```

That’s it!

You just put the useContext as a default parameter in `MainComponent` and in your tests you just:

```jsx
render(
	<MainComponent contextValue={/* anything you want */} />
)
```

This makes testing trivial. (and if the context `fetch` something, then no mocking is required... yay!)

And if you have more levels of components above `MainComponent`, then you can always mock `MainComponent`:

```jsx
// check your test framework, it’s pretty easy to do, just return something like:
const MockComponent = ({inputs, needed}) => {
	return (
		<div>
			<div>{something}</div>
			<div>{youWant}</div>
			<div>{toCheck}</div>
		</div>
	)
}
```

---

But before using it, remember: if you can, first made the code easier to test!

If you can’t, or if you’re playing with untested legacy code... then: Tests are better than no tests.

---

Cover Photo by [Girl with red hat](https://unsplash.com/@girlwithredhat?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/testing?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)