teleren/devto huggingface dataset:
Androguard 
Tags: androguard, python, reverse
Published: 2022-01-07 15:58:37

Hi everyone.

Now i work on Android app analysis especially with static analysis. I need to generate callgraph and I am using Androguard. However, this library take a long Time to generate this at app scale and I cant focuses this step on a few part of the app. I need to speed up this process.

Do you have any advise to do this ?
AdonisJS Refresh Command
Tags: javascript, beginners, node
Published: 2022-01-07 15:50:28

The following command should exist in `commands/DatabaseRefresh.ts` and is executed like: `node ace db:refresh`

It will rollback migrations, run new migrations, then seed the database fresh.

```typescript
import execa from 'execa';
import { BaseCommand } from '@adonisjs/core/build/standalone';

export default class DatabaseRefresh extends BaseCommand {
	/**
	 * Command name is used to run the command
	 */
	public static commandName = 'db:refresh';

	/**
	 * Command description is displayed in the "help" output
	 */
	public static description = 'Rolls back migrations, migrates new, seeds database.';

	/**
	 * @return void
	 */
	public async run() {
		await execa.node('ace', ['migration:rollback', '--batch=0'], { stdio: 'inherit' });
		await execa.node('ace', ['migration:run'], { stdio: 'inherit' });
		await execa.node('ace', ['db:seed'], { stdio: 'inherit' });
	}
}
```
Secure your MySQL/MariaDB backups with GFS retention and encryption
Tags: mysql, backup, docker, security
Published: 2022-01-07 15:35:18

While there are plenty of existing Docker images to backup MySQL/MariaDB databases with a rotating scheme, I needed GFS retention scheme. GFS as in [Grandfather-father-son](https://en.wikipedia.org/wiki/Backup_rotation_scheme#Grandfather-father-son), with several backup cycles: daily, weekly, monthly, yearly.

So I created this image for my own use at first, then I published it with MIT license.

{% github williarin/secure-mysql-backups %}

## Features

### Swarm-ready

All configuration variables can be sourced from a file. This is ideal when deploying with Docker Swarm, as you can source your passwords from Swarm secrets.

### GFS backups with 2 retention schemes

**Normal GFS mode**

In this mode, you'll have:

* A backup for every day of the last week (6)
* A backup for every week of the last month (4)
* A backup for every month of the last year (12)
* A backup for every previous year (unlimited)

**SuperSafe mode**

In SuperSafe mode, you'll have:

* A backup for every day of the last month (28~31)
* A backup for every week of the last year (48)
* A backup for every previous year (unlimited)

### AES256 encryption and decryption

Archives can be encrypted and decrypted with AES-256-CBC algorithm.

### Single or multiple databases backups

You can either create an archive with all your databases inside, or one archive per database.

### Parallelized compression

If your server has multiple CPUs, compressing the archives will use them all. You can configure the number of CPUs to be used to avoid saturating your server.

### Manual backups

You can also trigger a backup manually.

### Future proof

This image has been tested with multiple unit and functional tests that cover all the code.

## Next steps

Learn more about how to use this image on the [Github repo](https://github.com/williarin/secure-mysql-backups).

What other features would you like to see in this image?
Menghemat waktu membaca buku dengan getAbstract secara gratis untuk Mahasiswa
Tags: student, education, selfdevelopment, tutorial
Published: 2022-01-07 15:34:03

Kalian seorang mahasiswa yang sangat suka membaca buku ? ingin membaca buku tapi tidak mempunyai waktu karena sibuk ? **getAbstract** bisa membantu kalian untuk membaca buku secara efisien!.

## Apa itu getAbstract ?

**getAbstract** adalah aplikasi ringkasan buku yang dapat membantu kalian menghemat waktu untuk membaca, dan belajar secara efisien.

Kalian bisa membaca berbagai kategori buku pada getAbstract, beberapa diantaranya adalah tentang leadership, manajemen, karir, personal development, dll.

![The 7 Habits of Highly Effective People Summary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adx2624db3cvm5sx1yze.png)

Sebagai mahasiswa kalian bisa mendapatkan 5000 ringkasan buku secara gratis.

## Cara mendaftar

1. Masuk ke halaman [mendaftar getAbstract sebagai mahasiswa](https://www.getabstract.com/id/subscribe/students)

2. Klik *Get Started* pada plan *GET THE BASICS*
![Memulai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0latj50sojl8xstr2jg.png)

3. Isi data diri lalu klik *Continue*
![Isi data diri](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il1517vxb8mi3portkwx.png)

4. Upload dokumen yang menyatakan statusmu sebagai mahasiswa aktif, harus mengandung nama depan dan nama belakang, nama universitas, dan tanggal terbitnya dokumen. Kalian bisa mengupload Kartu Rencana Studi (KRS).
![Upload dokumen verifikasi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1ukmdlq37fh3dfzudp5.png)

5. Tunggu balasan email dari getAbstract untuk mengetahui apakah pendaftaran berhasil. Jika kalian mendapatkan balasan seperti di bawah ini
![Balasan email berhasil](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2ryfk4wks1880xzpzw4.png)

Itu artinya pendaftaran kalian di getAbstract sebagai mahasiswa berhasil dan bisa segera mulai membaca.

---

Selamat membaca dan semoga kalian makin rajin membaca :)
Search Component gotcha in ReactJS
Tags: react, javascript, reacthooks
Published: 2022-01-07 15:23:43

Sometimes back I was working on a typeahead component that was fetching data from an API and **I observed that search query was different from the value in the search field**. 

{% gist https://gist.github.com/akshaymohite/51bf73a4c67c046e38df9cf8b005be89 %}

After some investigation I realized that this is happening because the setter from the `useState` is asynchronous, so fetch is happening before the value is set.

```javascript
const handleSearch = (e) => {
    setQuery(e.target.value);
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }
```


After some exploration I realized that making a fetch call on the event is the wrong approach, rather we should fetch data as a side effect of the query, which means when the value of `query` changes in the component.

{% twitter 1125041041063665666 %}

We should use `useEffect` to solve this issue. When the value of `query` changes `useEffect` will fetch data from the API.
```javascript
const handleSearch = (e) => {
    setQuery(e.target.value);
  }
  
  useEffect(() = > {
    fetch(`http://example.com/users.json?query=${query}`)
      .then(response => response.json())
      .then(data => setRecords(data));
  }, [query]);
```

In this case, we are setting the value of `query` in the event handler and fetch is happening inside the `useEffect` block.

For complete solution - 
https://gist.github.com/c0d3b1n/469016b05c8020d0b20f130a8bdf94aa
Spinning Loader in pure CSS!
Tags: css, tutorial
Published: 2022-01-07 15:22:26

Hey **fellow creators**

Learn how to create a *spinning loader in pure CSS* in less than a minute!
 
If you prefer to watch the video **version**, it's right here :

{%youtube bXd1owK3arY%}

##1. The HTML structure.
Start by creating an empty div:
```html
<div class"circle"></div>
```

&nbsp;
##2. Create this circle in CSS.
```css
.circle{
	margin: 100px auto 0;
	width: 275px;
	height: 275px;
	border-radius: 50%;
	border: 6px solid crimson;
}
```
This will create a large red circle in the middle of your page.

&nbsp;
##3. Modify the colours of your circle!
Modify the colours as shown below so that only the top and the bottom of the circle are red, and the rest is transparent:
```css
.circle{
	...
	border: 6px solid transparent;
	border-top-color: crimson;
	border-bottom-color: crimson;
}
```

&nbsp;
##4. Add the animation!
Create the animation so that your loader spins:
```css
.circle{
	...
	animation: spin 1s ease-in-out infinite;
}

@keyframes spin{
	to {
		transform: rotate(360deg);
	}
}
```
&nbsp;
You could replace *ease-in-out* by *linear* if you like. You can also play with the thickness of the border! It's up to you ;)


&nbsp;
Come and take a look at my **Youtube channel**: https://www.youtube.com/c/TheWebSchool

*See you soon!*

Enzo.
How To Access Windows Folder/Files On MacOS
Tags: windows, mac, virtualbox
Published: 2022-01-07 15:20:50

---
title: How To Access Windows  Folder/Files On MacOS
published: true
description: Access Folder on Mac from windows
tags: #windows #mac #virtualbox
//cover_image: https://direct_url_to_image.jpg
---
##1 Create a Shared Folder
Create a folder on your local drive, click on properties > sharing.
Search for more >>> [https://www.makeuseof.com/tag/how-to-easily-share-files-across-mac-windows-computers/amp/]

##2 Get Your Windows IP Address
Press _Windows button + x_.
Click to open command prompt as administrator.
Type _ipconfig_ and note the IPv4 address.

##3 Get Your Windows Username
On command prompt, type _echo %username%_.

##4 Access Windows Files on Mac
Open the Finder app. In the menu bar at the top of the screen, select Go > Connect to Server. Type either smb://[windows IP address] and press Enter. You will be prompted to enter your Windows username and password. Click on Connect.
Ding Dong - Your shared windows folder and files.
How I created URL shortener using Serverless and MongoDB
Tags: atlashackathon
Published: 2022-01-07 15:16:21


### Overview of My Submission
For my hackathon project I decided to create a URL shortener, using two serverless technologies: Serverless Framework and MongoDB Atlas.

### Submission Category: 
Choose Your Own Adventure


### Link to Code
My application is separated into two different repositories:
- Backend for handling entry creation and redirects
- Frontend for displaying form and utilising API

#### Backend
Backend is created with Serverless Framework and is using NodeJS as a runtime. It is hosted on AWS Lambda.
{% github https://github.com/timotej-avsec/mubo-backend %}

#### Frontend
Frontend is created with NuxtJS framework and is hosted on GitHub pages.
{% github https://github.com/timotej-avsec/mubo-frontend %}


### Additional Resources / Info

Project is available on https://www.mubo.one.

![Screenshot](https://i.imgur.com/H4hmQiq.png)
Android.js - build android apps from nodejs
Tags: javascript, webdev, beginners, tutorial
Published: 2022-01-07 15:10:02

![android.js](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR0Hvu9K0WdyyIblGyuYVe0hGtG4fRK9g4lIQ&usqp=CAU)
If You Can Build A Website, You Can Build An Android App!
Android.js simple takes your node.js website and puts it into a WebView.

Yeah, i know that's a lot of disadvantages there but it also provides different APIs for you to interact with.

an android.js application isn't only a WebView like a front end of a site, it can also interact with the backend and interact with files and much more!

### installation
![install it](https://c.tenor.com/0JFK3s1Xr8IAAAAC/loading-downloading.gif)
To install [Android JS](https://android-js.github.io/) binaries, use npm.
``` bash
npm install androidjs
```

Install [Android JS](https://android-js.github.io/) project generator and builder
``` bash
npm install -g androidjs-builder
```

### initialize
``` bash
mkdir AndroidApp
cd AndroidApp
androidjs g
npm install
```

it will generate a sample project inside `AndroidApp` directory.

Which will look like:

```
AndroidApp
    |__ assets
    |       |__ ipc, css, js
    |
    |__ views
    |       |__ index.html
    |
    |__ main.js
    |__ package.json
```

- `main.js` is the main file or we can say it is back process of your app which execute all the code written in node, so you have to write all the node js code inside main.js
- `index.html` is the first view which is render by app initially
- `package.json` to keep track of all your node packages
- `assets` to store all assets of your app

### time to build
![let's go building](https://i2.wp.com/archeyes.com/wp-content/uploads/2016/04/01_egypt_twitter.gif?ssl=1)
``` bash
cd AndroidApp
androidjs b
```
it will generate apk file inside dist folder

if this `build` command fails or generated any error, try to build with `force command`
``` bash
androidjs b -f
```

### Why _not_ to use it
Android.js isn't better than [react-native](https://atordvairn.netlify.app/react-native-javascript-is-everywhere)
But, at least you can (somewhat) throw your existing code in it and generate an API to work on a device just like android application.
[React native](https://reactnative.dev/) stays the best way to make Android applications with react (JavaScript).

### other resources
[docs](https://android-js.github.io/docs/) - documentation for android.js

[Sample apps](https://github.com/android-js/sample-app) - some sample apps to go with..

### conclusion
Android.js is an amazing framework if you don't know react

But if you know react, react native comes in handy at the first place.


## originally published [here](https://atordvairn.netlify.app/android-js-making-android-apps-with-pure-javascript) at my blog
Make sure you're subscribed to [the high dose javascript newsletter](https://www.getrevue.co/profile/atordvairn)

of course I can't _make_ you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!
react native- JavaScript is everywhere
Tags: javascript, reactnative, webdev, beginners
Published: 2022-01-07 15:05:12

![react native runs on both iOS and Android as well as windows](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRVFBkWp7_5N74ZmGP0LHudxWhuN-EBCICxMA&usqp=CAU)
Welcome [react native](https://reactnative.dev/), now JavaScript runs on Android, Windows and iOS like anywhere!

Being a JavaScript developer, making mobile apps was just a WebView with our site running.
But now, we have [react native](https://reactnative.dev/) which takes a but different approach and makes the application feel like a truly native application. It's having components to make android and iOS like UI.

And the code actually resembles the react code.
That means that you can make native apps with a little knowledge of [react native](https://reactnative.dev/).

### install
``` bash
npm install -g create-react-native-app
# OR
yarn add -g create-react-native-app
```
### initialize
``` bash
create-react-native-app myReactiveApp
```
This will install and configure react-native in a directory.

### the cli!
the cli comes pretty handy in react-native. Install it with:
``` bash
npm install -g react-native-cli
# OR
yarn add -g react-native-cli
```

#### using the cli
use yarn run to see available commands for your project:
``` bash
yarn run
```


### basics
React-native is really easy if you know some react
You can quickly [learn the basics here](https://reactnative.dev/docs/tutorial) if you have a good knowledge of react.

### why react native ?
![it's good :)](https://c.tenor.com/fjdrDuVtEkAAAAAM/confused-look.gif)
React native comes with a lot of advantages for a JavaScript developer
- open source
- free
- great community
- easy to learn ( if you know react a lill )
- lots of components!

### any alternative ?
Yes!, See my next article for intro to android.js which ships your nodejs application to and Android app!

### wrapping up
Always bet on JavaScript.


## originally published [here](https://atordvairn.netlify.app/react-native-javascript-is-everywhere/) at my blog
Make sure you're subscribed to [the high dose javascript newsletter](https://www.getrevue.co/profile/atordvairn)

of course I can't _make_ you, but it take me a considerable amount of time to write these..

tweet this if you like it.
thanks!
Fundamentos de TypeScript 🦆| #5: Objetos
Tags: typescript, beginners, webdev, spanish
Published: 2022-01-07 14:54:02

## **Objetos en JavaScript**
Como ya sabemos los objetos son una estructura de datos muy usada en JavaScript que consiste en pares clave-valor.

Por ejemplo:
```js
const perro = {
   nombre:"Boby",
   edad:5,
}
```
Es posible añadir nuevas propiedades así:
```js
const perro = {
   nombre:"Boby",
   edad:5,
}
perro.color = "negro";
/*
const perro = {
   nombre:"Boby",
   edad:5,
   color:negro,
}
*/
```

## **Objetos en TypeScript**
En TypeScript un objeto se escribe exactamente igual que en JavaScript, pero con una gran diferencia en cuanto a funcionalidad:

```js
const perro = {
   nombre:"Boby",
   edad:5,
}
```
Este objeto tiene una *estructura implícita* que TypeScript hace que el dev deba respetar, podemos ver que el objeto solo tiene 2 propiedades: `nombre` de tipo `string` y `edad` de tipo `number`, ergo la estructura sería la siguiente:

```js
const perro: {
  nombre:string;
  edad:number;
} = {
   nombre:"Boby",
   edad:5,
}
```
Como notas, en vez de indicar un tipo de dato a la variable `perro`, la inicializamos con un objeto que dará estructura al objeto per se.
Esta sintaxis de objeto es explícita puesto que somos nosotros quienes debemos indicar los campos del objeto con sus correspondientes tipos. Se aconseja usar la sintaxis implicita, ya que TypeScript es lo suficientemente inteligente para *inferir* dicha estructura con solo proporcionar las claves y los valores.

Por ende, ambos objetos se consideran el mismo en TypeScript.

```js
const perro = {
   nombre:"Boby",
   edad:5,
}

const perro: {
  nombre:string;
  edad:number;
} = {
   nombre:"Boby",
   edad:5,
}
```
> *Ambos objetos son iguales en cuanto a sintaxis*

## **Accediendo a propiedades que no existen**
En Javascript al intentar acceder a un propiedad inexistente de un objeto obtenemos un `undefined`:

```js
const perro = {
  nombre:"Boby",
  edad:5,
}

console.log(perro.nombre); // "Boby"
console.log(perro.sexo); // undefined
```
Y al intentar añadirla basta con hacer lo siguiente:

```ts
const perro = {
  nombre:"Boby",
  edad:5,
}
perro.sexo = "macho"

/*
const perro = {
  nombre:"Boby",
  edad:5,
  sexo:"macho"
}
*/
```

En TypeScript hacer esto ya no es posible, si lo intentamos obtendremos un error como el siguiente:

```js
const perro = {
  nombre:"Boby",
  edad:5,
}
perro.sexo = "macho"
```
> *Property 'sexo' does not exist on type '{ nombre: string; edad: number; }'.*

Nos indica que el el objeto `perro` nunca declaramos una propiedad `sexo`, por ello no es posible agregarla.

Del mismo modo no tendremos un error similar si intentamos acceder a una propiedad que no existe.

---

## **Conclusiones**
- Los objetos en typescript pueden declararse con una sintaxis implícita o explícita.
- Es recomendable usar una sintaxis explícita y dejar que typescript infiera los tipos de datos que se usan en el objeto.
- Ya no es posible añadir directamente propiedades a un objeto ni acceder a propiedades que no existen sin que antes el editor te lance un error.


## **Referencias**
{% youtube BwuLxPH8IDs %}
Making a Textual Widget from a Rich Renderable
Tags: python, cli
Published: 2022-01-07 14:45:37

---
canonical_url: https://waylonwalker.com/til/simple-textual-widget/
cover_image: https://images.waylonwalker.com/til/making-a-textual-widget-from-a-rich-renderable.png
published: true
tags:
- python
- cli
title: Making a Textual Widget from a Rich Renderable
---

Once you have made your sick looking cli apps with rich, eventually you are going to want to add some keybindings to them.  Currently Textual, also written by [@willmcgugan](https://twitter.com/willmcgugan), does this extremely well. Fair Warning it is in super beta mode and expected to change a bunch.  So take it easy with hopping on the train so fast.

## Get the things

Install them from the command line.

``` bash
pip install textual
pip install rich
```

Import make a .py file and import them in it.

``` python
from textual.app import App
from textual.widget import Widget
from rich.panel import Panel
```

## Make what you have a widget

If you return your rich renderable out of class that inherits from `textual.widget.Widget`, you can then dock this inside of an app class inheriting from `textual.app.App`.

``` python
class MyWidget(Widget):
    def render(self):
        my_renderable = Panel("press q to quit")
        return my_renderable

class MyApp(App):
    async def on_mount(self) -> None:
        await self.view.dock(MyWidget(), edge="top")
        await self.bind("q", "quit")
```

## run it

You've made a TUI (text user interface).  Run the classmethod `run` to display the it in its full screen glory.

``` python
MyApp.run(log="textual.log")
```

## Final result

At this point It probably does not look much different, but it can be interactive by binding keys to any method on your app that starts with the word `action_`, this includes the built-in actions such as `action_quit`.

``` python
from textual.app import App from textual.widget import Widget from rich.panel import Panel


class MyWidget(Widget):
    def render(self):
        my_renderable = Panel("press q to quit")
        return my_renderable


class MyApp(App):
    async def on_mount(self) -> None:
        await self.view.dock(MyWidget(), edge="top")
        await self.bind("q", "quit")


if __name__ == "__main__":
    MyApp.run(log="textual.log")
```
Understanding CSS variables
Tags: css, webdev, frontend, html
Published: 2022-01-07 14:43:27

One of the reasons why years ago I started to use SCSS in favour of basic CSS was the ability to use variables, as I do in other programming languages.
But since then CSS added a pletora of new features, and one of those are CSS variables.
Here I'm going to explain in simple terms how you can use them and how they work.

## How to create a variable

A variable works exactly as any other CSS properties, you still define them as a property of an element or pseudoelement, and the only difference is that the name must start with a `--`, something like this:

```css
:root {
  --main-bg-color: green;
}
```

## The variable scope and the `:root` pseudoelement

As you noticed I used a pseudoelement `:root`, this is used to cast the variable to the entire document, but if you want you could define a variable only to a specific element, for example:

```css
p {
  --paragraph-color: red;
}
```

So with the above, if you try to use the variable above, it will work only on that specific element, but not on others, like a `div` or `h1`.

But the idea of having variables is reusability, and limiting the scope of action of a variable to a single element kinda defeats the purpose of variables all together in my opinion, but there could be cases where it could be useful.

## How to read a variable

To read a variable is rather simple, you just need to use the `var()` function, and the syntax is `var(<name-of-variable>, [fallback-value])`.

As you see it takes the variable name as first argument, and you can also pass a secondary value which is the default value, in case the variable is undefined.

Here a few examples:

```css
:root {
  --bg-color: white;
  --font-color: blue;
  --heading-color: #AAA;
}

body {
  background-color: var(--bg-color);
  color: var(--font-color);
}

h1 {
  color: var(--heading-color);
}

p {
  color: var(--paragraph-color, red); /* Red if --paragraph-color is not defined */
}
```

You could also chain the default value in case you need to check against multiple variables, for example:

```css
p {
  color: var(--does-not-exists, var(--neither-this-one, blue));
}
```

> Here a link to a [JSFiddle](https://jsfiddle.net/darkmavis1980/xtnb4vay/18/) if you want to play around it.

## But can I use it?

Of course you can! The only browser that doesn't support them is IE, which is now defunct, and unless you live in the past and this is 2012, you can start to to use it right now!

And that's pretty much it!
If you want to read in more details you can read the [MDN docs about it](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).