Today I Learned

Explore quick insights and updates on cybersecurity, DevOps, web development, and front-end technologies.

React Native

#React Native
#Android and iOS
#Expo
Do

React Native and Expo: Mobile Development Made Easy

React Native and Expo are powerful tools that have revolutionized mobile app development. Let's take a quick look at what they are and how they work together.

React Native: React Native is an open-source framework developed by Facebook. It allows developers to build mobile applications using JavaScript and React.

Key features:

  • Cross-platform development: Write once, run on both iOS and Android
  • Native components: Uses the same design as regular iOS and Android apps
  • Hot reloading: See changes instantly without losing app state

Expo: Expo is a set of tools and services built around React Native, making it easier to develop, build, and deploy mobile apps.

Key features:

  • Managed workflow: No need to touch native build config
  • Expo SDK: Access to device features without native code
  • Over-the-air updates: Push updates without app store approval

Why Use React Native with Expo?

  1. Rapid development: Get started quickly without complex setup
  2. Simplified workflow: Expo handles many complexities of mobile development
  3. Easy deployment: Build and publish apps with simple commands
  4. Access to native features: Use device capabilities without writing native code

Kubernetes

#Kubernetes
#CloudComputing
#VPS

Official Docs

Do
    Install Docker
    Install Kubernetes Components
    Disable Swap
    Initialize Kubernetes
    Configure kubectl
    Install a Pod Network Add-On
    Join Additional Nodes
Terminal
UTF-8

Fuzzing for Hidden dir and files

#Fuzzing
#ffuf
#bugbounty
ffuf -H User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36 -w in/recursively-cat-all-1/output.txt -u in/file-splitter-1:item -r -sf -ac -t 50 -o out/ffuf-2/item/output.txt
sh
UTF-8

Official Docs

Do
    ffuf: A fast web fuzzer written in Go.
    -u: This is the URL to fuzz.
    -w: This is the wordlist to use.
    -X: This is the HTTP method to use.
    -e: This is the extension to use.
    -H: This is the header to use.
CSS
UTF-8

Tailwind CSS !important modifier

#tailwindcss
#css

Make any utility important by adding a ! character to the beginning:

<p class="font-bold !font-medium">
  This will be medium even though bold comes later in the CSS.
</p>
HTML
UTF-8

Official Docs

nested backdrop-filter

#css

Backdrop filter tidak akan berhasil jika parent memiliki efek backdrop-filter juga.

issue — workaround

pre overflow: scroll inside flex

#css
#pre
#flex

Pernah pake overflow-x: scroll pada pre element tapi ngga ngaruh, malah parent yang ada scrollnya?

Mungkin parentnya didalem display: flex. Kalau iya, coba tambahin min-width: 0 pada parentnya.

Credit

import mdx file sebagai component

#react
#mdx

Import mdx file di component, caranya mirip seperti import component biasa:

import Contents from '@/mdx/Contents.mdx';

// Penggunaan
<Contents />

Ternyata ada di dokumentasinya. Biasakan membaca dulu ya gais jangan kaya saya wkwk.

:not() pseudo-class

#css
#selector

Pake :not() ini emang agak tricky, salah penggunaan hasilnya juga bisa ngga sesuai harapan.

Contoh, styling inline code dimana bukan children dari pre ataupun .code-block. Penggunaannya:

Don't
:not(pre), :not(.code-block) {
  > code {
    background-color: 'red';
  }
}
Do
:not(pre, .code-block) {
  > code {
    background-color: 'red';
  }
}

Python

#python
#python-cli
print("Hello, World!")

Python is a versatile and readable programming language known for its simplicity and wide-ranging applications.

HTML, CSS and JS

#html
#css
#js

Stay updated with short notes on HTML for structure, CSS for style, and JavaScript for interactivity.


<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
<style>
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin-top: 50px;
}
.message {
  font-size: 24px;
  color: #333;
}
</style>
</head>
<body>
<div class="message">
<p>Hello, World!</p>
</div>
<script>
// JavaScript code
console.log("Hello, World!");
</script>
</body>
</html>
HTML
UTF-8