Snippets

Creating new branch in git

Some helpful steps to create a new branch in git and then pushing the changes. Can also stage specific files by adding them, instead of all of them at once.

git checkout main
git pull origin main
git checkout -b feature-branch
git add .
git commit -m "Message"
git push origin -u feature-branch

Filtering in SwiftUI

A way to filter a list with any kind of filter key and any kind of entity from CoreData. Snippet from 100 Days of SwiftUI.

FilteredList.swift

import CoreData
import SwiftUI

struct FilteredList<T: NSManagedObject, Content: View>: View {
    @FetchRequest var fetchRequest: FetchedResults<T>

    // this is our content closure; we'll call this once for each item in the list
    let content: (T) -> Content

    var body: some View {
        List(fetchRequest, id: \.self) { singer in
            self.content(singer)
        }
    }

    init(filterKey: String, filterValue: String, @ViewBuilder content: @escaping (T) -> Content) {
        _fetchRequest = FetchRequest<T>(sortDescriptors: [], predicate: NSPredicate(format: "%K BEGINSWITH %@", filterKey, filterValue))
        self.content = content
    }
}

Masonry Layout

There's quick way to do it with Tailwind CSS: columns-2. But the problem with this method is it doesn't sort the dates from left to right. React Masonry CSS by Paul Collett helps solve this problem.

npm i react-masonry-css

Add this block of code to the tailwind.css file.

tailwind.css

/* to see list of all values, go to the React Masonry CSS link above */
.my-masonry-grid {
  display: flex;
  width: auto;
  margin: -10px; /* gutter size offset */
}
.my-masonry-grid_column {
  padding: 10px; /* gutter size */
  background-clip: padding-box;
}

/* style items */
.my-masonry-grid_column > div { /* change div to reference elements in <Masonry> */
  margin-bottom: 20px;
}

Then add this to your react component.

index.tsx

import Masonry from 'react-masonry-css'

const breakpointColumnsObj = {
  default: 2, // default number of columns
  768: 1, // breakpoint of going to 1 column
}

<Masonry
  breakpointCols={breakpointColumnsObj}
  className="my-masonry-grid"
  columnClassName="my-masonry-grid_column"
>
...
</Masonry>

Using calc()

I used calc() to help me calculate height of viewport with navbar/footer. Useful snippet for width and height calculations in Tailwind CSS.

// x is in pixels
h-[calc(100vh-x)]
w-[calc(100vw-x)]

// use for mobile screens dvh = dynamic viewport height
supports-[height:100dvh]:h-[calc(100dvh-x)]