teleren/devto huggingface dataset:
Day 135: Frontend work again
Published: 2022-08-22 22:05:51

Hi!

Today I focused more on the frontend designs and actually accomplished alot and created my most beautiful pages and I got a lot of motivation to even redesign some of the pages that I designed poorly before and I think it's currently going smoothly. I also continued working on The UX project and I completed the second week curriculum which is going great as well

Tomorrow I will try to add all required content and work on some responsiveness if I would be able to get it done by today I will be on a great track for the week

Let's- take some rest for now

Signing off...
Root vs la obsolescencia programada
Published: 2022-08-22 21:01:00

Ligas básicas para rootear equipos antiguos:


## Kingoroot

Una de las formas mas facilies de hacer root, pero no siempre funciona, en mi experiencia personal, en android anterior a 5 funciona perfecto, pero en mis mas nuevos android nunca me ha funcionado, en los foros hay toda una controversia entre si es muy buena herramienta que hace el root donde las demas no pueden y quienes dicen que esta llena de spyware. 

https://www.kingoroot.net/download
http://www.kingoapp.com


## TWRP Team win recovery project

Para evadir el problema de la gallina y el huevo, yo uso el proceso de fast boot recovery install, que requiere tener una windows pc con un adb instalado. 

https://twrp.me/


https://en.droidwiki.org/wiki/TeamWin_Recovery_Project

## Magisk

Magisk manager puede hacer un tipo de root que se llama sytem less.

https://magisksu.com/

https://forum.xda-developers.com/t/guide-root-install-magisk-without-root-and-recovery.3900475/

https://www.getdroidtips.com/stock-rom-blu-advance-l5/


## Lineageos

El heredero del legendario firmware alternativo cyanogenmod

https://lineageosroms.com/huawei/

https://download.lineageos.org/

https://adb.clockworkmod.com/

## Foros y Recursos adicionales

En caso de duda, recomiendo usar reddit y o xda-developers y buscar el procedimiento especial para nuestro equipo

Clock work mod

https://www.xda-developers.com/how-to-install-clockworkmod/

En la siguiente pagina puedes encontrar las instrucciones con la marca y el modelo de tu celular:

https://www.tecnoloart.com/como-rootear-android-facil/
How to learn ReactJS on a low spec PC
Tags: react, javascript, webdev, beginners
Published: 2022-08-22 21:36:37

Let me guess something.

You started learning Frontend web development on a low spec pc, you reached a point where you know Javascript well enough, you decided to start learning reactJS, as soon as start creating react app you see you pc freezing, you open Task Manager and see what? Ram and cpu usage touching sky!

I've been in that situation and i am here to tell you how i managed using react on that damn slow pc.

One advice will be, yeah invest in a new pc or upgrade the one you have, It will be needed in future. But if you can't, let me help you.

So First thing is you have to stop using VS Code Editor :(
I know it will be hard because VS Code is ♥️, but you gotta pay some price, nothing comes for free.
Here's few replacement:-

Sublime Text - Really lightweight but less beginner friendly, i suggest what installation tutorials.

Or,

Online IDEs - Basically a code editor that runs in a browser, use [Stackblitz.io](url) for react development as it saves time and resources. Super helpful for low End PCs.
(This is basically for learning not for personal project, as you files will be public)

There are more options like github codespace, vscode online, etc you should try everything and choose for yourself which one fulfils your purpose.

And lastly, if you're gonna watch tutorials or follow alongs just play the video on phone and code in pc, don't run any app when react project is running.

That's all folks, hope i could help you with this post, Keep learning!
Using Apollo GraphQL and SSR
Tags: go, graphql, typescript
Published: 2022-08-22 21:21:37

This is a short post about how to add a JWT Authentication flow to a golang backend with a Next.js (typescript) front end that utilizes Server Side Rendering (SSR).
While utilizing Next Auth for single sign on authentication flow for the front end to ease the user's experience, I found myself in a pickle due to not being able to pass headers to my JWT authentication flow on a backend hosted on golang with graphql.
Part of the issue arises when using SSR as one cannot simply pass the JWT via a request header by accessing session (or local) storage in the browser. Thus via a bit of creativity, and scouring other examples online I came up with an adjustment to exporting an apollo client.
At first I attempted to create an apollo client via the below code and accessing the JWT token from useSession, sessionStorage, localStorage, etc. 
```
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
 const authLink = setContext(async (_, { headers }) => {
        return {
            headers: {
                ...headers,
                Authorization: context ? context : "",
            }
        }
    });

const client = new ApolloClient({
        link: authLink.concat(httpLink),
        ssrMode: typeof window === 'undefined',
        cache: new InMemoryCache()
    });
}

export default client;
```
I found I was still unable to access any sort of context associated with the application, without running into callback issues. Thus with the client created and returned asynchronously below:
```
import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

const httpLink = createHttpLink({
    uri: process.env.GRAPHQL_URI,
    credentials: "include"
})
const createClient = async (context: any) => {
    console.log('client context', context)
    const authLink = setContext(async (_, { headers }) => {
        return {
            headers: {
                ...headers,
                Authorization: context ? context : "",
            }
        }
    });
    return new ApolloClient({
        link: authLink.concat(httpLink),
        ssrMode: typeof window === 'undefined',
        cache: new InMemoryCache()
    });
}

export default createClient;
```

We're now able to access the session data in an SSR call by passing the session data (via setting a JWT cookie parameter) like below:
```
 const client = await createClient(sessionData?.Authorization);
```
After which point we can now pass our JWT similar to how we would using the client side session storage or local storage.
Hopefully this helps out fellow peeps who want a separation of concerns with respect to backend /frontend apis and maintain their own authentication flows.
Timing is Everything
Tags: adventofcode, algorithms, computerscience, programming
Published: 2022-08-22 21:18:42

## [Advent of Code 2016 Day 15](https://adventofcode.com/2016/day/15)

## Part 1
1. A LCM puzzle?
2. What better way than to just try counting up?

### A LCM puzzle?
LCM: Least Common Multiple
- The smallest number shared by several numbers as that which they evenly divide by

`3,5 = 15`
`2,5 = 10`

In this case, the numbers may be some combination of the time passed, the total positions, and the current position of each disc.

### What better way than to just try counting up?
```
Create a variable, answer
Create a counter, starting at 0
Do as long as answer has no value
  Determine whether each disc would be at position 0 when reached
  If so
    Set answer to counter
  Else
    Increment counter
```

What is the equation I'll use to determine whether a disc is at position 0?
```js
(time + disc number + position) % positions == 0
```

For example:
![Animation of my planned algorithm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2r9efwxr93cokkrckqqp.gif)

So, as long as each disc's equation becomes 0 for a time, then I found a winning time!

This algorithm seems easy enough to write.

Here I go!

...

It worked!

## Part 2

### Easiest Part 2 ever?
- If I am reading this correctly, I just need to alter my puzzle input so it includes an extra disc
- Then run my algorithm again...hoping that this extra disc doesn't cause the first time to press the button to become a number in the billions or trillions

After adding this line to my puzzle input:
```
Disc #7 has 11 positions; at time=0, it is at position 0.
```

And running my algorithm again...

It almost immediately generated a number.

It is the correct answer!

## I did it!!
- I solved both parts!
- Way faster - and with far less code and confusion - than I expected!
- Perhaps because I deduced the equation so quickly!

I'm delighted that this Day 15 puzzle took me under 15 minutes to solve both parts!

Though, given the effort required of me to solve the last few puzzles, I'm a bit bummed that I probably won't remember this one among after moving on.
What is an atom in Elixir?
Tags: elixir, webdev, beginners, tutorial
Published: 2022-08-22 21:10:00

According to the [Elixir documentation](https://hexdocs.pm/elixir/Atom.html), an Atom is a constant whose value is own name. To some Ruby developers like me, an `:atom` is like a **:symbol**.

In Elixir, it is common to use atoms on **lists**, **tuples**, and **maps**:

```Elixir
defmodule Example do
  def example_params do
    # tupla
    tuple = {:ok, "This is a tuple"}
    
    # list
    list = [:slug, :title]
    
    # map
    map = %{
      name: "Diego",
      age: 35,
      country: "Brazil"
    }
  end
end
```

A curiosity in Elixir is that the boolean `true` and `false` also is **:atoms**:

```Elixir
iex> true == :true
> true

iex> false == :false
> false

iex> is_atom(false)
> true

iex> is_boolean(:false)
> true

```

In Elixir, we usually use **atoms** as a reference status for a given request:

```Elixir
defmodule ExampleController do
  #...
  
  def delete_person(conn, %{"id" => id}) do
    person = Person.get_person!(id)
    
    {:ok, _person} = Person.Repo.delete(person)
    
    conn
    |> put_flash(:info, "Person deleted successfully.")
    |> redirect(to: person_path(conn, :index))
  end
end
```

In the example above, the atom `:ok` indicates that the delete request was executed successfully. And then a  **"flash message"** was triggered with status `:info` indicating that **"the person was deleted successfully"** and, after, redirected to `:index`.

I hope that this content helps and makes sense to you!

**Contacts**
Email: contato@diegonovais.com.br
LinkedIn: https://www.linkedin.com/in/diegonovais/
Github: https://github.com/dnovais
Twitter: https://twitter.com/diegonovaistech
Meme Monday! (Or Tuesday? 🥲)
Tags: discuss, watercooler, jokes
Published: 2022-08-22 20:58:31

Welcome to another **Meme Monday** post! Today's cover image comes from [last week's thread](https://dev.to/ben/meme-monday-4a5d).

This post is going out a few hours later than usual, which heightens the chance that you're seeing this _on Tuesday_. Such is life.

DEV is an inclusive space! Humor in poor taste will be downvoted by mods.
Loading Modal in React Native with Activity Indicator
Tags: reactnative, axios, javascript, loading
Published: 2022-08-22 20:48:00

Loading modals are basically a wrapper to tell our user that something is happening and restrict them to tap anywhere else.

Common example - while uploading something..

It is a most common used widget in Mobile dev industry and I don’t know why React Native doesn’t really provide one.

> Edit - I have made a package for it as [react-native-loading-modal](https://www.npmjs.com/package/react-native-loading-modal) , In case you want to use it.

So that's why we are making a fully customisable Loading Modal in React Native using Activity Indicator from `react-native`

## JSX Code for Custom loading modal

> don’t worry code is available  at [here](https://snippetsauce.tech/snippet?title=Loading+Modal+in+React+Native+%7C+React+Native+loading+modal+with+activity+indicator&sauce=rnv344967)


![JSX code for custom loading modal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51rmahw4s155gnz5s6pf.png)


## Styling for Custom Loading modal using Stylesheet


![Styling for Custom Loading modal using Stylesheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qj7h1qyruu3hteiadjiy.png)





That's it, now you can call your Loading modal simply by doing

```jsx
<LoadingModal modalVisible={true}/>
```

or with custom task or label

```jsx
<LoadingModal modalVisible={true} task={'Your task'} />
```




That's it for this blog ❤️, If you guys want source code here's the link to the code website -> [click here](https://snippetsauce.tech/snippet?title=Loading+Modal+in+React+Native+%7C+React+Native+loading+modal+with+activity+indicator&sauce=rnv344967)

`


Let me know your thoughts comments and share it with your friends ! 

With love Suyash ❤️🧑🏻‍💻
I started learning Laravel, about 5 days ago and I've hit a small bump
Tags: php, laravel, web, webdev
Published: 2022-08-22 20:46:36

Hi, I'm a php developer with a few projects under my belt. I decided to build an ecommerce website, while learning Laravel, I've not gone very far and I've hit a small bump... I'd like some help in solving this small issue, If you guys don't mind.

I ran "php artisan migrate" on command prompt and i got this error "SQLSTATE[HY000] [2054] Server sent charset unknown to the client. Please, report to the developers
   (SQL: select * from information_schema.tables where table_schema = sleekfashion and table_name =
  migrations)".

I use PHP 8.0.13 & MYSQL 8.0.23. I've tried several solutions that I've come across, If not all of them on stackoverflow and various programming communities. 

I decided to try my luck here. Please if you come across this problem before, I'd really appreciate your help. 

Simply tell me, how you solved the problem.

Thanks for you help, in anticipation.
Split Array separated by...
Tags: ios, swift, beginners
Published: 2022-08-22 20:44:40

Hi,
my way to split one array (of String) in two or more **var**

sometimes you have a Date() in a String format, and you want only the year.

you can use **.components(separatedBy: "/")**

```
func splitArray() {
    
    let myARRAY = "20/09/2021"
    let SplittedArray = myARRAY.components(separatedBy: "/")
    
    let DAY = SplittedArray[0]
    let MONTH = SplittedArray[1]
    let YEAR = SplittedArray[2]
        
        print("\(DAY), \(MONTH), \(YEAR)")
    }
```
Setup Flutter on Linux / Ubuntu without Android Studio
Published: 2022-08-22 19:54:10

This Guide will walk you through to the installation of Flutter to your Linux Machine. We are not installing Android Studio, we will set flutter up to Visual Studio Code. Basically we need - Flutter , Java JDK , Andoid SDK Toolchain. So let's install.

**[Download Flutter 3.0.5](https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.0.5-stable.tar.xz)**
**[Download Android SDK Tools](https://drive.google.com/drive/folders/1IR4YvJ3O7xYc7j1rtwPkinoZA12xa9pt?usp=sharing)**

Our all resources downloaded successfully. So first we will install Java Developement Kit (JDK) 17. For that, install synaptic package manager. It will help us to install JDK 17. 

> sudo apt install synaptic

Now open Synaptic and search Open JDK 17 and install it. 

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

Now on your User Home Directory create a new folder and name it **Android**

Extact those resourse inside Android folder like this.

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

## Set Path for Flutter and Android SDK

Let's set path to use Flutter and SDK globally. On user home directory , show hidden files from setting and find the **bash.rc** file and open it on a text editor and paste those line at the bottom, then save it and restart your PC.

`#Path provided with Orkitt  Stracture
export PATH="$PATH:$HOME/Android/flutter/bin"
export ANDROID_HOME="$HOME/Android/Sdk"
export ANDROID_TOOLS="$HOME/Android/android-sdk/cmdline-tools/latest"
export ANDROID_PLATFORM_TOOLS="$HOME/Android/android-sdk/platform-tools"
PATH=$PATH:$ANDROID_HOME:$ANDROID_TOOLS:$ANDROID_PLATFORM_TOOLS:`

**Install Adb and Linux Toolchain and VS Code**

> sudo apt-get install adb clang cmake ninja-build libgtk-3-dev git -y

**[Download Visual Studio Code Editor](https://code.visualstudio.com/docs/?dv=linux64_deb)**

## Verify Flutter Installation
To verify our installation run this command.

> flutter doctor

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bn8kvtqsjsxiej15y4la.png)
If you are facing any issue , please leave us a comment , we will help you. Read Flutter related article **[@Orkitt](https://www.orkitt.com/2022/07/install-flutter-linux.html)**
Deploy Multiple NodeJS Apps on single Server with SSL, Nginx, PM2 - Part 2
Tags: javascript, node, tutorial, devops
Published: 2022-08-22 19:23:00

## Prerequisites
Please Read Part 1 of the series [here](https://dev.to/ranjan/deploy-multiple-nodejs-apps-on-single-server-with-ssl-nginx-pm2-part-1-4841). 


We have already setup NGINX, PM2 and SSL for the First APP and we are going to setup a new NodeJS APP.
There is very few steps we need to do to get the new app up and running

## Step 08 - Clone New Project Or Create New with file
It's quite similar to the step 02 we are just going to create a new folder and create new app and run it on different Port No.

```sh
mkdir App2
cd App2
```
now just create a new file called index.js
```sh
nano index.js
```
now paste following code in index.js

```javascript
const http = require('http');

const hostname = 'localhost';
const port = 4000; //make sure this port no is different from the first one

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello Everyone from APP 2 !\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

## Step 09 - Start the App With PM2
we are going start the app with PM2 and give it a Name that is optional 

```sh
pm2 start index.js --name "APP 2"
```
this will start the app at port no 4000 we can also see all running app with PM2 by following
```sh
pm2 list
```
this will give you list of all running apps you can start/stop/restart using id or Name aswell.

## Step 10 - Adding Reverse Proxy with NGINX
we need to add server config one more time for this app aswell.
To update server First open the config

```sh
sudo nano /etc/nginx/sites-available/default
``` 
and add this new block in **location** part of the server block
```
    server_name yourdomain2.com www.yourdomain2.com;

    location / {
        proxy_pass http://localhost:4000; 
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
```
if you are planing to host secound app on **subdomain** just replace `yourdomain2.com ` with subdomain like `api2.yourdomain.com`

then check and restart the NGINX 

```
# Check NGINX config
sudo nginx -t

# Restart NGINX
sudo service nginx restart
```
if domain is pointed you should see your app live on port 80 there is one more step to go adding SSL.

## Step 11 - Adding SSL for Second APP
we already have certbot installed so adding additional domains are not an issue 
```sh
sudo certbot --nginx -d yourdomain2.com -d www.yourdomain2.com
``` 
or for **Subdomain**
```sh
sudo certbot --nginx -d api2.yourdomain.com
```
that's all your New app also should be Live on New domain with SSL.

Thanks for reading Cheers.
Here we go!
Published: 2022-08-22 19:06:52

Hello! I am new to this, but very excited to learn from you. I hope to someday be fluent in the language of coding. This being my first post, I will have no information to share except that I am glad to be starting this journey! As part of my first assignment I am to share what I learned from the articles I have read, so please... don't stop me if you've heard this one.
Magic of window.open in browsers
Tags: javascript, webdev, programming, beginners
Published: 2022-08-22 19:06:00

The `window` object is supported by most modern browsers. It represents the browser window. The `window` is the root object and every other javascript object, function, variables are members of it.

It has some properties and methods. Here, we are going to see about window.open which we mostly use when we want to open a new window to perform some action.

**Window.open()** - open a new window and returns the `windowProxy` object which is the wrapper on the window object.

**Syntax:**

`window.open(?url, ?target, ?features)` - all three params are optional.

`url` - url to navigate for.

`target` - window name - it opens a new window if a window with that name doesn't exist otherwise simply focus the existing and reloads.

`features` - browser features like width, height etc.

// -> Opens up a pop-up with  the mentioned URL with name `JS_Articles` (Its not a browser title)

`const windowObj = window.open('https://dev.to/urstrulyvishwak', 'JS_Articles', 'popup');`

// -> Focus window - if the 'JS_Articles' window is behind the current browser then it will get focused.

`windowObj.focus();`

// -> blur window - out focus the window as opposed to focusing.

`windowObj.blur();`

// -> Count of windows opened in current window starting with index 0.

`windowObj.length;`

// -> close - to close the window

`windowObj.close();`

// -> closed - it returns boolean and tells whether the window has opened or closed.
`windowObj.closed;`

Using these properties we can completely deal with a new window that we opened. 

You can follow me here: https://twitter.com/urstrulyvishwak

Thank you :). Happy reading.