teleren/devto huggingface dataset:
React Native - Modern theming
Published: 2022-02-22 15:43:16

[](url)Good day, everyone! Today we'll talk about theme-csx, a new react native theming library that was created to alleviate the pain that developers may experience when attempting to add dark mode support to mobile apps.

**Github Link:** https://github.com/KJ-GM/theme-csx 

### Without further ado, let's get started: 

Theme-csx focuses on providing an easy and simple way to add dark mode support to our mobile apps. With three simple steps, your app will be set up and ready to go!

You may wonder what makes this library special than other libraries such as styled-components, react native paper...

1) Similar to standard react native styling

2) Light & Fast

3) Expo & React Native

4) Supports React Navigation

**System**: changes to the phone _`appearance`_ preference while the app is running will be applied dynamically. - **IOS:** changes will be shown immediately without the need to reopen the app
 
let's go over the steps very briefly: 

> **StyleSheet**

- Is similar to the usual styling format, but now you have additional props to make style themeable.

> **T() Function** - _Themed_

- Apply **only** your themed styles using the T() function wrapper.

> **TV() Function** - _Themed Value_

- Is an extra helper function that can be used to theme a specific value. (this becomes helpful with react navigation)

> **appearanceHook**

- Use the appearanceHook to switch theme from anywhere in your app.



## Usage ❓

```js
// Styles
import { StyleSheet, T, appearanceHook } from 'theme-csx';

// Components
import { Text, View } from 'react-native';
import { Button } from '@components/atoms';

const DemoComponent = () => {
  // Theme switch
  const switchTheme = () => {
    appearanceHook.switch(
      appearanceHook.activeTheme === 'dark' ? 'light' : 'dark'
    );
  };

  return (
    <View style={T(styles.THEMED_CONTAINER)}>
      <Text style={styles.NORMAL_TEXT}>Hey, I am normal text</Text>

      <Text style={T(styles.THEMED_TEXT)}>Hey, I am themed text</Text>

      <Button text={'Switch theme'} onPress={switchTheme} />
    </View>
  );
};

const styles = StyleSheet.create({
  THEMED_CONTAINER: {
    flex: 1,
    backgroundColor: 'white',
    backgroundDark: 'gray', // backgroundDark prop was added to make it themeable
    alignItems: 'center',
    justifyContent: 'center',
  },
  NORMAL_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'green',
  },
  THEMED_TEXT: {
    fontWeight: 'bold',
    fontSize: 14,
    color: 'black',
    colorDark: 'white', // colorDark prop was added to make it themeable
  },
});
```
Migratory Birds (HackerRank - JavaScript Solution)
Tags: algorithms, javascript, programming, codenewbie
Published: 2022-02-22 15:25:19

Given an array of bird sightings where every element represents a bird type id, determine the id of the most frequently sighted type. If more than 1 type has been spotted that maximum amount, return the smallest of their ids.


## Solution
```js
function migratoryBirds(arr) {
    // Write your code here
    
    let newArr = {}
    const uniqueVal = [... new Set(arr)]
    uniqueVal.forEach(elem => {
        const filterVal = arr.filter(val => val == elem)       
        const totalVal = filterVal.length
        newArr[elem] = totalVal
    })
    
    let result = Object.entries(newArr).sort(([,a], [,b]) => b-a)
    let final = result[0][0]
    return final
}
```
122 A - Lucky Division| Codeforces Lucky Division Solution| A2oj Ladders Div 2A.
Tags: cpp, codeforces, coding
Published: 2022-02-22 15:23:25

Petya considers the numbers which has 4 and 7 as lucky numbers. 
Considering all the permutations we get 12 different numbers. 

These are the 12 different permutations of numbers.
4,7,47,74,44,444,447,474,477,777,774,744

Petya also considers its almost lucky if it is divisible by some lucky number.

```
#include <stdio.h>
#include <iostream>
using namespace std;

int main()
{
    	int lucky_numbers[] = {4,7,47,74,44,444,447,474,477,777,774,744};
    	int n, count =0;
    	cin>>n;
    	for(int i =0;i<12;i++)
    	{
    	    if(n%lucky_numbers[i] == 0) count++;
    	    
    	}
    	if(count>0) cout<<"yes"<<endl;
    	else cout<<"no"<<endl;
    	return 0;
    
}
```
Hope this helps! 
Happy Coding
Here are a few ways to merge array
Tags: javascript, webdev, beginners, tutorial
Published: 2022-02-22 15:12:30

### Hello Folks 👋
What's up friends, this is **SnowBit** here. I am a young passionate and self-taught frontend web developer and have an intention to become a successful developer.

Today, I am here with a simple but important topic in JavaScript. In this article, I will discuss a few ways to merge arrays that you can use while merging arrays in your next project.

### 🌟 Introduction
Arrays are an ordered list, each value in an array is called **element** specified by an **index**. An array can store data in the following types: 
- numbers
- string
- boolean

```js
const fruits = ["Apple", "Mango", "Orange", "Strawberry"]
```

### Merging Arrays with the concat() method
![concat()](https://cdn.hashnode.com/res/hashnode/image/upload/v1645541368554/m4ki1IO6k.png)
- concat() method joins two or more arrays and returns a new array containing joined arrays without changing the original arrays.

```js
const fruitsOne = ["Apple", "Mango"]
const fruitsTwo = ["Orange", "Strawberry"]

const fruits = fruitsOne.concat(fruitsTwo)
```

### Merging with push() method
- The push method adds elements to the end of the existing array.
- Here, the items of an array is pushed to the original array which updates the original array.
- One can merge array using the push() method in two ways:
**1) Using spread operator and 2) using for loop.**

- Spread operator is the more preferred method since it keeps code clean and more efficient.

```js
fruitsOne.push(...fruitsTwo) // Spread Operator Method
```

- One can either use `for loop`; I don't suggest you to use that, for your knowledge I am showing the method.

```js
for(let i = 0; i < fruitsTwo.length; i++){
   fruitsOne.push(fruitsTwo[i])
}
```

---
So, this was it for this article, I hope this article helped you.

Thank you for reading, have a nice day!

**Your appreciation is my motivation 😊 - Give it a like**

- Follow me on Twitter - [@codewithsnowbit](https://twitter.com/codewithsnowbit)
- Subscribe me on YouTube - [Code With SnowBit](https://www.youtube.com/channel/UCNTKqF1vhFYX_v0ERnUa1RQ?view_as=subscriber&sub_confirmation=1)
How to create a complete wikipedia search engine using python
Tags: python, showdev, webdev, productivity
Published: 2022-02-22 15:04:04

Hello i created wikipedia search using python.You can get it from my github.It is awesome because you get half of the result show by the wikipedia.Important thing you need to do is install wikipedia python library to install it use this command-"pip install wikipedia"

Project source code-https://github.com/sripadhs/Python_wiki/
Escalando Ethereum en 2022 ¿Qué se viene?
Tags: web3, blockchain, ethereum, crypto
Published: 2022-02-22 14:57:13

---
title: Escalando Ethereum en 2022 ¿Qué se viene?
published: true
description:
tags: #web3 #blockchain #ethereum #crypto
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5pr5ruw6rhke34lwgoy.png
--- 

La alta demanda de uso de Ethereum han elevado los gas fees a niveles que antes hubiesen sido inimaginables. En este video exploramos qué están haciendo los desarrolladores de Ethereum y otros protocolos para mitigar este problema. Hablaremos sobre diferentes temas relevantes para nosotros los usuarios, creadores y desarrolladres en web3. Temas como sharding, PoS (proof of stake), rollups (optimistic y zk rollups), el trilemma, etc...

{% youtube wplecTro6EI %}

**¡Gracias por ver este video!**

Sígueme en dev.to y en [Youtube](https://www.youtube.com/channel/UCNRB4tgwp09z4391JRjEsRA) para todo lo relacionado al desarrollo en Blockchain en Español.
Glances can watch docker processes
Tags: python
Published: 2022-02-22 14:26:10

---
canonical_url: https://waylonwalker.com/til/glances-docker/
published: true
tags:
- python
title: Glances can watch docker processes
series: til
---

Glances is a system monitor with a ton of features, including docker processes.

I have started using portainer to look at running docker processes, its a great heavy-weight docker process monitor.  glances works as a great lightweight monitor to just give you the essentials, ( Name, Status, CPU%, MEM, /MAX, IOR/s, IOW/s, Rx/s, Tx/s, Command)

## install

You will need to install glances to use the glances webui.  We can still use
`pipx` to manage our virtual environment for us so that we do not need to do so
manually or run the risk of globally installed package dependency hell.

``` bash
pipx install glances pipx inject glances "glances[docker]"
```

You will be presented with this success message.

``` bash
  injected package glances into venv glances
done! ✨ 🌟 ✨
```

## results

Now running glances will also show information about your running docker containers.

![running glances with docker installed will show your docker processes](https://images.waylonwalker.com/glances-docker.png)


## Links

* [glances docker](https://glances.readthedocs.io/en/catest/docker.html)
* [pipx](https://pypa.github.io/pipx/)
* [website](https://nicolargo.github.io/glances/)
* [docs](https://glances.readthedocs.io/en/latest/index.html)
* [github](https://github.com/nicolargo/glances)
A simple drawing program using 6502 Emulator - LAB3 part 1
Tags: spo600, lab
Published: 2022-02-22 14:46:42

Hi this is Tecca, in this post I'll be working on writing a drawing program in assembly language that runs on 6502 Emulator.

The user will be able to draw pixels on the screen using arrow keys on keyboard.

**Source code**

```
; zero-page variable locations
define	ROW		$20	; current row
define	COL		$21	; current column
define	POINTER		$10	; ptr: start of row
define	POINTER_H	$11

; constants
define	DOT		$03	
define	CURSOR		$04	


setup:		lda #$0f	; set initial ROW,COL
		sta ROW
		sta COL

draw:		lda ROW		; ensure ROW is in range 0:31
		and #$1f
		sta ROW

		lda COL		; ensure COL is in range 0:31
		and #$1f
		sta COL

		ldy ROW		; load POINTER with start-of-row
		lda table_low,y
		sta POINTER
		lda table_high,y
		sta POINTER_H

		ldy COL		; store CURSOR at POINTER plus COL
		lda #CURSOR
		sta (POINTER),y

getkey:		lda $ff		; get a keystroke
		beq getkey

		ldx #$00	; clear out the key buffer
		stx $ff

		cmp #$43	; handle C or c
		beq clear
		cmp #$63
		beq clear

		cmp #$80	; if not a cursor key, ignore
		bmi getkey
		cmp #$84
		bpl getkey

		pha		; save A

		lda #DOT	; set current position to DOT
		sta (POINTER),y

		pla		; restore A

		cmp #$80	; check key == up
		bne check1

		dec ROW		; ... if yes, decrement ROW
		jmp done

check1:		cmp #$81	; check key == right
		bne check2

		inc COL		; ... if yes, increment COL
		jmp done

check2:		cmp #$82	; check if key == down
		bne check3

		inc ROW		; ... if yes, increment ROW
		jmp done

check3:		cmp #$83	; check if key == left
		bne done

		dec COL		; ... if yes, decrement COL
		clc
		bcc done

clear:		lda table_low	; clear the screen
		sta POINTER
		lda table_high
		sta POINTER_H

		ldy #$00
		tya


done:		clc		; repeat
		bcc draw


; these two tables contain the high and low bytes
; of the addresses of the start of each row

table_high:
dcb $02,$02,$02,$02,$02,$02,$02,$02
dcb $03,$03,$03,$03,$03,$03,$03,$03
dcb $04,$04,$04,$04,$04,$04,$04,$04
dcb $05,$05,$05,$05,$05,$05,$05,$05,

table_low:
dcb $00,$20,$40,$60,$80,$a0,$c0,$e0
dcb $00,$20,$40,$60,$80,$a0,$c0,$e0
dcb $00,$20,$40,$60,$80,$a0,$c0,$e0
dcb $00,$20,$40,$60,$80,$a0,$c0,$e0


```

Result:
At start it will show the cursor at the center of the bitmap indicating where the drawing begins.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8dzywu02cfmrobydi28.png)

Then it is waiting for user's keyboard action and checks which keystroke did the user press on to make drawing.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ho1dpspw3h9lhm7pipg7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4h4qknkk41q7cmivnrr.png)
 
This is a simple drawing program that runs on 6502 emulator and I plan on to create a kaleidoscope drawing program base on this in the next post....to be continued..
INVALID_INPUT in Athena query
Tags: athena, dynamodb
Published: 2022-02-22 14:29:47

Hi, 
In AWS I have tried to connect Athena to DynamoDB following the guidelines [here:](https://dev.to/aws-builders/finally-dynamodb-support-in-aws-quicksight-sort-of-2lbl).
But when I start a query in Athena all I get is "INVALID_INPUT" without any detailed message describing the invalid input.
Could anyone please help me how I can solve this problem?
Your help is highly appreciated.
Kind regards, Reyer, The Netherlands
Create Your First Laravel 9 CRUD Application Step By Step
Tags: laravel9, laravelcrud, laravel
Published: 2022-02-22 14:24:58

In this post we will give you information about Laravel 9 CRUD Example – Laravel 9 CRUD Beginners Tutorial. Hear we will give you detail about Laravel 9 CRUD Example | Laravel 9 CRUD Beginners Tutorial And how to use it also give you demo for it if it is necessary.

In this post we will give you information about Laravel 9 CRUD Example – Laravel 9 CRUD Beginners Tutorial. Hear we will give you detail about Laravel 9 CRUD Example | Laravel 9 CRUD Beginners Tutorial And how to use it also give you demo for it if it is necessary.

In this post we will give you information about Laravel 9 CRUD Example – Laravel 9 CRUD Beginners Tutorial. Hear we will give you detail about Laravel 9 CRUD Example | Laravel 9 CRUD Beginners Tutorial And how to use it also give you demo for it if it is necessary.

[Create Your First Laravel 9 CRUD Application Step By Step](https://www.codecheef.org/article/create-your-first-laravel-9-crud-application-step-by-step)
Frontend: Node.js &&/|| EJS?
Tags: node, ejs, javascript, frontend
Published: 2022-02-22 14:07:44

**So, you are a frontend developer?**
Or better yet, you may actually be a junior frontend developer right now and can provide some insight?
Perfect. 

Over the past weeks I have been talking to friends and friends of friends to see if I could get a proper answer to the question "Do you actually use _Node.js_ and/or _EJS_?".

It might not come as a shock that what I found out was far from a unanimous result. 
Whether you are required to have some knowledge about _Node.js_ and/or _EJS_ simply seem to come down to where you work and what you are working on. 

To extend this inquiry, I'd like to ask the fine people of this community what your experiences and thoughts are on the topic.

I'm looking forward to your comments :)

Thank you for your time!

//Sonny Stark
Pasting screenshots takes way longer than pasting image files
Tags: javascript, performance, discuss
Published: 2022-02-22 14:04:22

**Update**. The demo was previously broken, now it's fixed.

---

Let me show you;

1. Take a screenshot using an utility that dumps the image directly to your clipboard, so you can paste it. Like the `PrintScreen` key on Windows/Linux or `Cmd+Shift+3` on macOS.
2. Open this up https://eivfjo.csb.app.
3. Paste with `Ctrl+V` on Windows/Linux or `Cmd+V` on macOS.
4. Now copy an existing image from your computer—perhaps a screenshot saved to disk.
5. Go back to the page and paste it.
6. See any difference?

Here's how it worked out for me (I'm using Chrome on Windows, by the way);

- The first paste, of the screenshot just taken, **took about 500ms**—I'm on a 4k display, your mileage may vary.
- The second one, of a file from my computer, **took 0ms**.

Now I'll reveal it to you. We're doing nothing. Okay, it's not technically nothing. But we're not really doing anything useful or that should take too long for that matter.

So what gives?

Below there's the whole code you just tested. You can also [check it over on CodeSandbox](https://codesandbox.io/s/paste-file-blocking-handler-eivfjo).

```
document.addEventListener("paste", (event) => {
  const now = performance.now();
  void event.clipboardData.files; // This line is the culprit.
  document.body.textContent = `It took ${performance.now() - now}ms`;
});
```

If you're not familiar or need a refresher, `void` simply [evaluates the expression and returns undefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void). That's it. We might as well omit it. I only added it for dramatic purposes. The important bit is you have to access the `files` property on the `clipboardData` object carried by the event.

If you're curious why that is it's because the `files` array is a shim, its content is gathered in the property accessor `get files()` in the `DataTransfer` interface. You can [read more on the spec](https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-files-dev).

The odd part is **why the difference** between pasting a screenshot and pasting a file.

[MDN doesn't say anything](https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer). The spec has some curious bits but didn't explain it either.

My wild guess is that it isn't the browser's fault. Perhaps the underlying implementation on the OS captures the screen as a simple bitmap and then lazily encodes it to more suited format line PNG as it's read? I don't know.

It's a problem in any case because for one I can't even show the user some feedback that something's going on since event handlers block—the next frame doesn't start until it returns, so any changes to DOM, like adding a `loading` class to an element, will have to wait—but it's also freezing up the whole page for that period. Yikes! :( 

Any ideas?
State of Frontend 2022
Tags: javascript, webdev, react, programming
Published: 2022-02-22 13:58:31

**Will you spare 8 minutes of your time to fill in a survey about frontend?**

https://tsh.io/state-of-frontend/

It’s been a couple of weeks since our frontend survey went online, and so far we have collected over 2500 opinions from frontend developers around the world to create a community report: **State of Frontend 2022.** But the more surveys we fill in, the better the final results will be, that's why I am here.

We’ve received a lot of support from frontend people, even Kent C. Dodds himself took part and will comment on the results later! So you know it's legit ;)

Every developer in our teams owes so much to the community, and we just want to give back a bit. So the report will be published in full for free in a few weeks so everyone is able to check it out and analyze the results. It will not only present current results but also compare them with the first, 2020 edition. A lot of cool data!

I'm very grateful for each and every contribution!

Link -> https://tsh.io/
Checkout my new project🎀
Tags: javascript, typescript, nextjs, react
Published: 2022-02-22 13:50:51

Presenting [liveboard](https://live-board.vercel.app)🎃

A live board canvas sharing application made on top of nextJS and socket.io.

![Project screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/csnkhobye10b8i9cpgdt.png) 

Liveboard makes use of socket.io to send the coordinates to draw on the canvas using socket and using HTML canvas to draw the stroke. It also contains tools to change stroke color and stroke width. 

I also tried to implement the Figma-like UI to show users in the lobby in the header along with Figma-like pointer sharing.

Ending note, there are still some finishing to be done and there is always scope for improvement. Constructive criticism is welcomed🎏

Tech stack:
Next Js + Socket.io client hosted on vercel
Express + Socket.io hosted on heroku

Code: https://github.com/agarwalamn/liveboard 
PS: I won’t mind if you leave a star😁

Peace out☮
<img src="https://emojipedia-us.s3.amazonaws.com/content/2017/09/21/animoji-alien-emojipedia.gif" width="400"/>
Paracetamol.js💊| #61: Explica este código JavaScript
Tags: javascript, spanish, beginners, webdev
Published: 2022-02-22 13:49:17

## **Explica este código JavaScript**

**¿Cuál de estos métodos modifica el array original?**

```js
const emojis = ['✨', '🥑', '😍']

emojis.map(x => x + '✨')
emojis.filter(x => x !== '🥑')
emojis.find(x => x !== '🥑')
emojis.reduce((acc, cur) => acc + '✨')
emojis.slice(1, 2, '✨') 
emojis.splice(1, 2, '✨')
```


-     A: Todos los anteriores
-     B: `map` `reduce` `slice` `splice`
-     C: `map` `slice` `splice`
-     D: `splice`

Respuesta en el primer comentario.

---
How To Add Additional Variation Images for WooCommerce
Published: 2022-02-22 13:43:02

**Setup and Configuration**

1. Go to: WooCommerce > Products.
2. Select one of your Variable products.
3. Select the Variations tab in the Product Details box.
4. Find the Add Additional Images link and click. This link allows you to add any number of additional images for each variation.

**Delete or order images**
Delete an image by clicking on it.
Reorder images by clicking and dragging it to the desired location.

**Troubleshooting**
First check if it is a theme compatibility issue. Switch to a WordPress default theme such as the Twenty Twelve or Twenty Fifteen theme and re-test. If it does not work still, try disabling all plugins except WooCommerce and Additional Variation Images and test again.


**Reference Blog**
[How To Add Additional Variation Images for WooCommerce](https://www.gomahamaya.com/add-additional-variation-images-woocommerce/)
GraphQL - Is it the successor to REST API? What to use?
Tags: graphql, rest, java, api
Published: 2022-02-22 13:36:54

{% youtube 254HeBauDCI %}

Hi! Some backend topics today: let's talk about GraphQL. Can we name GraphQL as the future successor to REST API? Which of these two approaches should we use in our application? Przemek, our Senior Java developer, will explain all the details.

Enjoy! You can also read the article at [Frontend House](https://frontendhouse.com/experts-zone/graphql-is-it-the-successor-to-rest-api-what-to-use-experts-zone-15).