teleren/devto huggingface dataset:
[Summary] Chapter#01 'The Internals of PostgreSQL' Book (Part-02).
Tags: postgres, apacheage, age, bitnine
Published: 2023-06-22 00:18:45

## Internal Layout of a Heap Table File

PostgreSQL divides data files into fixed-length blocks, with a default of 8192 byte (8 KB). Block numbers are numbered sequentially from 0. If the file is filled, PostgreSQL adds a new empty page to increase the file size.

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

Page within tables contains three kinds of data described as follows:
**Heap tuple:** It records data itself and is stacked in order from the bottom of the page. Tuple describes Concurrency Control and WAL in PostgreSQL is required.

**Line pointer:** A 4 byte long line pointer holds a pointer to each tuple which is also called item pointer. Line pointers form a simple array and each index numbered sequentially from 1 and called offset number. New line pointer is pushed when a new tuple is added.

**Header data:** Header contains general information about the page and it is 24 byte long, and it is located at the beginning of the page. 
Major variables of structures are:

- Pd_lsn: It is an 8-byte unsigned integer related to the WAL mechanism, It stores last changes in this page.
- pd_checksum: This variable contains checksum values.
- pd_lower and pd_upper: pd_lower points the end of line pointer and pd_upper to the beginning of the newest heap tuple
- pd_special: This variable for indexes and In the page within tables it points to the end of the page.

## The Methods of writing and reading Tuples
**Writing Heap Tuple: **

When a table with one page and the lower pointer points to the first line pointer, while the line pointer and pd_upper point to the first heap tuple. And when inserting a second tuple the second line pointer is pushed onto first pointing to the second tuple, and pd_lower and pd_upper change to point to the second line pointer.

**Reading Heap Tuple:**
There are two methods, Sequential Scan and B-tree index scan

Sequential Scan: 
All tuples in all pages are sequentially read by scanning all the pointer in each page

B-tree index scan: 
PostgreSQL can read the desired heap tuple without unnecessary scanning in the pages by using the Index key and TID pointer. If the index tuple with the key that you are looking for has been found PostgreSQL reads the desired heap tuple using the obtained TID value.

[Reference](https://www.interdb.jp/pg/pgsql01.html)
C++, Delete(erase) item from vector in O(1) time
Tags: cpp, vector, erase, fast
Published: 2023-06-22 00:03:16

Deleting an item in the middle of a large vector is expensive because all items after the deleted item must be shifted to the left.
In case the index of the item/the order is  not important, we can delete the item in O(1) time.

```cpp
void fast_erase(vector<int>& v, int idx){
    if(idx < v.size()){
        v[idx] = std::move(v.back());
        v.pop_back();
    }
}
```
iOS Full Height HTML
Tags: todayilearned, ios, html
Published: 2023-07-31 12:15:00

---
title: iOS Full Height HTML
published: true
date: 2023-06-22 00:00:00 UTC
tags: til, iOS, html
canonical_url: https://coreyja.com/til/ios-full-height-html
---

Today I was working on getting this site ready to launch, and I was adding the footer that you see on the bottom of the page. I wanted it to do the 'standard' footer thing of filling the screen when there wasn't much content, and scrolling as content was added.

My first try was to add the `min-h-screen` tailwind class, which sets `min-height: 100vh`, on the `body` element. This worked great in desktop browsers but not so well in iOS. See in iOS the viewheight includes the top and botton OS overlays, which means that my footer was behind the address bar when I loaded up my homepage.

I found a fix for this, but this one seems specific to iOS only. Mobile Android will likely have a different solution, so hopefully we can explore that soon too. But for iOS support you can use`-webkit-fill-available` instead of `100vh`. For I added this small tailwind override to my css:

```
/* Override for iOS Full Height Viewport */
@supports (-webkit-touch-callout: none) {
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
}
```

And now my usages of `min-h-screen` are working great on my phone!
Leave Implementation Details to Implementation Time
Tags: agile, programming
Published: 2023-06-21 23:57:45

## An Observation at Planning Meetings

**Assuming it's a mix of Engineers and non-Engineers (Product, PMs, Design, etc):** When Engineers get rabbit holey with implementation details trying to come to consensus on the specs, the non-techies in the room:

* **Eyes glaze over.**
* **Get quiet.** There's obviously not much they can contribute. They're non-engineers.

👆This is time they could have spent doing their actual work. Tech talk is tedious to non-technicals. Now we're just wasting their time.

Then the Engineers rush to find those spots in code, live during the meeting, and try to quickly come to consensus. This 2 minutes is almost never enough time to arrive at such important details.

## Significant Events Between Planning and Coding

A number of important things happen between Planning meetings and us writing the code, even in a couple days:

* **More public information is available now.** The Internet is growing at an astronomical rate.
  * Posts
  * Comments
  * Documentation
  * Newer versions of libraries released
  * Some libraries may have been deprecated since
  * Best practices on how to do it right
  * Posts on pitfalls
  * Better alternative libraries
  * Better alternative way of doing it
* **More Internal information** now exists in your Corporate Knoweledgebase.
* **More lore has been exchanged between brains** - Verbal, Slack, etc.

Most Engineers I know do a quick Googling to validate their assumptions, before beginning any fairly significant changeset. During that first hour of coding, you almost always find things that could never possibly have been discovered at Planning Meetings.

I can't count the times I've started coding a ticket and go, "Oh, there's some new library or pattern that does that way better."

Now those Implementation Details on the ticket are invalid.

I've heard some devs defend this by saying, "The Planning Meeting **_is_** implementation time."

Let's look at [the definition](https://www.techtarget.com/searchcustomerexperience/definition/implementation).

> Implementation is the **execution** or practice of a plan.

Otherwise known as "doing the work" (writing the code).
"Universal" is a clean and stylish theme for corporate websites
Tags: hugo, jamstack, tutorial
Published: 2023-06-21 22:51:49

The following are the features of Hugo's "Universal" theme.

## Feature

Universal is a theme for corporate websites.
The large number of images and carousels give the viewer a bright corporate image.
A full set of interactive functions for users, such as site search with Google, a commenting system with Disqus and a contact form with Formspree, are built in, allowing you to quickly build a full-fledged corporate site.

![Example of Universal screen](https://ayaco.gitlab.io/zerogravity/en/docs/theme/universal/feature.png)

## Official site

| Site | URL |
| --- | --- |
| Hugo theme introduction | https://themes.gohugo.io/themes/hugo-universal-theme/ |
| Sample/Demo  | https://devcows.github.io/hugo-universal-theme/ |
| Documentation | https://github.com/devcows/hugo-universal-theme/blob/master/README.md |
| Repository  | https://github.com/devcows/hugo-universal-theme |
Decentralised IP Marketplace for Software Creators
Published: 2023-06-21 22:32:52

Introducing MintyCode, a Techstars backed Decentralised Marketplace for Software Developers.

Mintycode has emerged as a beacon of opportunity for software developers seeking a platform tailored to their specific needs. Unlike traditional marketplaces, Mintycode's decentralized nature ensures transparency, autonomy, and fairness for both developers and clients. It champions a peer-to-peer approach, eliminating intermediaries and fostering direct collaborations that benefit all parties involved.

Join our Telegram community:https://t.me/mintycodedao
Twitter: https://twitter.com/MintyCodeDao
Day 767 : Understand
Tags: hiphop, code, coding, lifelongdev
Published: 2023-06-21 22:15:50

_liner notes_:
- Professional : Got up early to sit in a talk prep session for a team member in the UK. Went back to sleep and work up a couple of hours later and started working. Mostly went through verifying the responses that came back from a new endpoint and updating the docs when need to.

- Personal : Went through some tracks for the radio show last night. Started a tutorial to help me learn more about the Canvas API for my side project. I've used the Canvas element before, but I was just hacking stuff together. I want to understand it better so I can really know what's possible.

![Looking up at the Matterhorn, a large stone mountain range with clouds surrounding it, in Switzerland from a forest.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b534xtw1t1yyp9e12mxc.jpg)

Going to finish the canvas tutorial. Also want to go through tracks for the radio show. The new "Secret Invasion" show just started so I want to watch the first episode.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube yku2x51-jwE %}
How to deploy a smart contract in Rust
Tags: smartcontract, rust, blockchain, opensource
Published: 2023-06-21 21:58:51

Soroban contracts are small programs written in the Rust programming language. In this tutorial we'll walk you through setting up your local environment so that you're ready to build Smart Contracts in Rust. If you're wondering why Rust and not Solidity, read [this](https://soroban.stellar.org/docs/fundamentals-and-concepts/migrating-from-evm/introduction-to-solidity-and-rust) to compare the platforms.

To build and develop contracts you need only a couple prerequisites:

- A [Rust](https://www.rust-lang.org/) toolchain

- An editor that supports Rust

- Soroban CLI

- Install Rust

If you use macOS, Linux, or another Unix-like OS, the simplest method to install a Rust toolchain is to install rustup. Install rustup with the following command.

`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`

If you use Windows, or need an alternative method of installing Rust, check out:
[https://www.rust-lang.org/tools/install](https://www.rust-lang.org/tools/install)

## Install the target

Install the wasm32-unknown-unknown target.

`rustup target add wasm32-unknown-unknown`

## Configure an Editor
Many editors have support for Rust. Visit the following link to find out how to configure your editor:
[https://www.rust-lang.org/tools](https://www.rust-lang.org/tools)

A popular editor is Visual Studio Code:

[Visual Studio Code ](https://code.visualstudio.com/)editor.
[Rust Analyzer](https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer) for Rust language support.
[CodeLLDB](https://marketplace.visualstudio.com/items?itemName=vadimcn.vscode-lldb)for step-through-debugging.

## Install the Soroban CLI
The Soroban CLI can execute Soroban contracts in the same environment the contract will execute on network, however in a local sandbox.

Install the Soroban CLI using cargo install.

`cargo install --locked --version 0.8.0 soroban-cli`

_INFO
Report issues and share feedback about the Soroban CLI [here](https://github.com/stellar/soroban-cli/issues/new/choose)_.

## Usage
Run the soroban command and you should see output like below.

`soroban`

```
❯ soroban
Build, deploy, & interact with contracts; set identities to sign with; configure networks; generate keys; and more.

Intro: https://soroban.stellar.org
CLI Reference: https://github.com/stellar/soroban-tools/tree/main/docs/soroban-cli-full-docs.md

Usage: soroban <COMMAND>

Commands:
  contract    Tools for smart contract developers
  config      Read and update config
  events      Watch the network for contract events
  lab         Experiment with early features and expert tools
  version     Print version information
  completion  Print shell completion code for the specified shell

Options:
  -h, --help     Print help (see more with '--help')
  -V, --version  Print version
```

Here's a video to help guide you through the process. 
{% youtube jSLJEHVEMQA %}

Once you've completed the initial setup, check out the Hello World contract deployment documentation [here](https://soroban.stellar.org/docs/getting-started/hello-world).
toggle button with react
Tags: cdn, react, helloworld, vite
Published: 2023-06-21 21:52:45

---
title: toggle button with react
published: true
description: a step to step guide to start React application using jsx
tags: cdn, react, helloworld, vite
series: react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q36hjd69yhmjpp1vjs9y.png
---

## overview

I've created same post years ago in the same serie. Before I created 25 videos about react and some other about NextJs. Also, .. before meet vite. This is an updated version of an old article about toggle button creation with react.

## requirements

You just need npm installed to run the following command

```terminal
npm create vite@latest
cd app_name
npm install
npm run dev
```

## src/App.tsx

Replace src/App.tsx file with this:

```tsx
import { useState } from 'react'
import './App.css'

function App() {
  const [pressed,setPressed] = useState(false)
  const label = pressed?'pressed':'unpressed'
  return (
    <>
      <h1>Toggle button</h1>
      <button onClick={() => setPressed(!pressed)}>{label}</button>
    </>
  )
}

export default App
```

![preview of toggle button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q36hjd69yhmjpp1vjs9y.png)

## Conclusion

Study is better. Now React have hooks. Install with cdn is fine but create app with vite is cool.
🎶🖥️ The Harmonious Blend of Music and #Code: How #Developers Find #Inspiration 🎙️💻
Tags: webdev, programming, productivity, discuss
Published: 2023-06-21 21:19:46

Today we are celebrating #WorldMusicDay 🎵 When it comes to the creative process, inspiration can strike from the most unexpected sources. For many developers, the melodic blend of music and code creates a unique atmosphere that fuels their creativity and boosts productivity. In this post, we'll explore how developers find inspiration through music. 

🎼 Some interesting facts about how music affects of our #productivity:

🎸 Enhanced Focus: Many studies have shown that listening to music while working or studying can improve concentration and focus. 

🎸 Increased #Motivation: Upbeat and energetic music can boost motivation levels and productivity. Stress Reduction: Music has the ability to alleviate stress and promote relaxation, which can have a significant impact on our productivity. 

🎸 Memory Enhancement: Certain types of music, particularly classical compositions, have been linked to improved memory and cognitive performance.

🎸 Mood Regulation: Music has the power to influence our emotions, which in turn can impact our productivity. 

🎸 #Creativity Boost: Music has long been associated with creativity, and it can act as a catalyst for inspiration and innovative thinking. 

🎸 Personal Preference Matters: It's important to note that the impact of music on productivity can vary from person to person. Experimenting with different genres and styles is key to finding the music that best suits your personal working style and enhances your productivity.

🎹 So where do you find inspirational playlists? Top Music Streaming Apps: 

🥁 Spotify
Developed by: Spotify AB
#Programming Language: Java, Python, and JavaScript. 

🥁 Shazam
Developed by: Shazam Entertainment Limited (acquired by Apple Inc. in 2018)
Programming Language: Python and Scala, Swift for iOS and Kotlin for Android.

🥁 SoundCloud:
Developed by: SoundCloud Limited
Programming Language: Ruby on Rails and Go. 

🥁 YTMusic (YouTube Music):
Developed by: Google LLC
Programming Language: Java, C++, and Python. iOS and Android are built using Swift and Kotlin

🥁 Apple Music:
Developed by: Apple Inc.
Programming Language: Java, C++, and some components in Swift. 

So, the next time you sit down to work, consider adding a touch of music to your routine. Let the melodies guide your focus, uplift your spirits, and create a harmonious backdrop for productivity. Embrace the symphony of music and work, and unlock the potential for enhanced performance and satisfaction in your endeavors. Let music be the soundtrack that propels you towards your goals and helps you achieve your best work.  

What genre or style of music do you find most #effective for maintaining focus and productivity during #coding sessions? Do you have a specific coding playlist that you find enhances your efficiency and concentration? If so, what are some of the songs or artists on that playlist? 
Share it with [Devler.io](https://devler.io/) in the comments below, we’d like to listen it too  🎻🎵
INTRODUCING GITHUBVIEWER
Tags: webdev, github, softwareengineering, programming
Published: 2023-06-21 21:18:23

*Are you tired of spending hours navigating through different repositories and profiles on Github?*

**_Look no further!_**

I am thrilled to introduce you to GithubViewer, a web app designed to simplify and enhance your Github experience.

[GithubViewer](https://oluwadamilolarache.wixsite.com/githubviewer) provides a user-friendly interface that allows you to _seamlessly navigate through repositories, explore user profiles, and access project details in a fraction of the time._  

> In the vast realm of software development, managing and showcasing projects on GitHub is crucial for developers. However, navigating through numerous repositories and users can be time-consuming and overwhelming. That's where GitHubViewer comes in. 

<h4>Key Features</h4>
GithubViewer offers a range of features to enhance your GitHub exploration experience:

- **Repository Search**: Easily search for repositories based on keywords, topics, or specific users to find projects that align with your interests.

![Input user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyhyw6q6vb1zr2bix4hp.png)

- **Developer Profiles**: Dive into detailed profiles of developers to learn more about their contributions, repositories, and followers.

![User Info](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s3c98yjhr7h4g99ilev.png)

- **Project Insights**: Get comprehensive insights into repositories, including the number of stars, forks, issues, and pull requests.


![Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xeplgyf0vex7xiqsyaw.png)
- **User-Friendly Interface**: Enjoy a clean and intuitive interface that makes browsing, searching, and navigating through repositories a breeze.

``I invite you to visit [GithubViewer](https://oluwadamilolarache.wixsite.com/githubviewer) today and start your GitHub exploration journey like never before. Stay tuned for regular updates, tutorials, and tips on getting the most out of the platform.

- Let dive into Github repo for this project [Here](https://github.com/JO-YE/GithubViewer)
Navigating the XY Problem in Software Development
Tags: xyproblem, realworld, solving, communication
Published: 2023-06-21 20:48:33

## What is it 

The XY problem is focusing on your attempted solution rather than your actual (root) problem.

## Real world scenario

Imagine a software developer named Alice who is working on a web application. Alice encounters an issue where the application is running slow when processing large data sets. She wants to optimize the performance of the application (X), but she is not sure how to approach it.

Alice begins researching and stumbles upon a blog post that suggests using a specific caching mechanism (Y) to improve performance. Without fully understanding the problem or considering alternative solutions, Alice decides to ask for help on an online forum, specifically requesting assistance with implementing the caching mechanism.

Other developers on the forum, however, are confused by Alice's request since the caching mechanism seems unrelated to the root cause of the slow performance. They begin asking questions to better understand the problem and suggest potential alternatives to address the underlying issue.

After several back-and-forth interactions, it becomes apparent that Alice was experiencing performance problems due to inefficient database queries and not due to a lack of caching. The caching mechanism would have provided little to no benefit in this scenario.

In this situation, Alice fell into the XY problem trap by focusing on a specific solution (Y) without clearly communicating the actual problem (X) she was facing. As a result, both Alice and the developers on the forum wasted time and effort discussing and exploring an ineffective solution. 

## Solution

By sharing the broader picture from the start, including details about the slow performance issue and any attempted solutions, Alice could have received more targeted advice and solutions from the community. This would have helped her identify the real problem and resolve it efficiently, rather than getting caught up in an unnecessary detour.

This example highlights the importance of effectively communicating the underlying problem and being open to alternative perspectives when seeking assistance as a software developer. By avoiding the XY problem, developers can streamline the problem-solving process, save time, and arrive at optimal solutions more effectively.