From 03a3e4196403aa0f155a1bce3393ba785ea67926 Mon Sep 17 00:00:00 2001 From: aleidk Date: Sun, 31 Mar 2024 18:01:39 -0300 Subject: [PATCH] Update from obsidian - Affected files: .obsidian/plugins/obsidian-omnivore/data.json .obsidian/plugins/update-time-on-edit/data.json 01. Projects/Im neurodivergent?.md Read Later/2024-03-06 - How to Build a Basic CMS with Google Sheets and React.md Read Later/2024-03-29 - Let's Save the (Git) Trees.md --- .obsidian/plugins/obsidian-omnivore/data.json | 4 +- .../plugins/update-time-on-edit/data.json | 2 +- 01. Projects/Im neurodivergent?.md | 4 +- ... Basic CMS with Google Sheets and React.md | 267 ++++++++++++++++++ ...2024-03-29 - Let's Save the (Git) Trees.md | 91 ++++++ 5 files changed, 364 insertions(+), 4 deletions(-) create mode 100644 Read Later/2024-03-06 - How to Build a Basic CMS with Google Sheets and React.md create mode 100644 Read Later/2024-03-29 - Let's Save the (Git) Trees.md diff --git a/.obsidian/plugins/obsidian-omnivore/data.json b/.obsidian/plugins/obsidian-omnivore/data.json index bd8de29..aaea31f 100644 --- a/.obsidian/plugins/obsidian-omnivore/data.json +++ b/.obsidian/plugins/obsidian-omnivore/data.json @@ -3,7 +3,7 @@ "dateSavedFormat": "yyyy-MM-dd HH:mm:ss", "apiKey": "ec3bba50-4770-471b-99b1-9953ca523d8c", "filter": "ADVANCED", - "syncAt": "2024-03-27T23:13:32", + "syncAt": "2024-03-31T18:00:54", "customQuery": "in:archive has:highlights", "template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n{{{text}}} \n{{#note}}\n\n> [!note]\n> {{{note}}}\n{{/note}}\n\n[source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n\n---\n\n{{/highlights}}\n{{/highlights.length}}\n## Original\n\n{{{ content }}}", "highlightOrder": "LOCATION", @@ -17,7 +17,7 @@ "version": "1.6.3", "isSingleFile": false, "frequency": 60, - "intervalId": 14, + "intervalId": 13, "frontMatterVariables": [], "frontMatterTemplate": "id: {{{ id }}}\ntitle: >\n {{{ title }}}\nstatus: {{{ state }}}\ntags:\n - read-later\n{{#labels.length}}\n{{#labels}} - {{{name}}}\n{{/labels}}\n{{/labels.length}}\ndate_added: {{{ dateSaved}}}\nurl_omnivore: >\n {{{ omnivoreUrl}}}\nurl_original: >\n {{{ originalUrl}}}" } \ No newline at end of file diff --git a/.obsidian/plugins/update-time-on-edit/data.json b/.obsidian/plugins/update-time-on-edit/data.json index cebff82..1c8f640 100644 --- a/.obsidian/plugins/update-time-on-edit/data.json +++ b/.obsidian/plugins/update-time-on-edit/data.json @@ -94,7 +94,7 @@ "99. Archives/Renuncia/README.md": "d72efa9247e5fe1926fe01df434a5510b2f8428cc3626f2b09026f1ff132cbef", "99. Archives/Renuncia/Renuncia.md": "229e5ad05c14f5ec54029a9baf1210909995012da6e3890deaf075f954c752f1", "99. Archives/Obtener pasaporte/Obtener pasaporte.md": "ddcc5038fb021c95e2fcf4184f816e14873feab6a417e4acfcf28bfcc80e43a1", - "01. Projects/Im neurodivergent?.md": "01ebfe329a46081d92371d7e9deb6f95d6b891dd055b3c02e24dbbcf2406ba07", + "01. Projects/Im neurodivergent?.md": "aae46173eb4dd17c91d43a52e1ad8264315be65925652aa862527d76b8ac53e1", "03. Resources/Mental Health/Coping Mechanisms.md": "1019140638c1fa7cbbf87080fa8355c6c50b15b4bbd16c5d373f89f9b5416bf8", "03. Resources/Productivity/Time Blocking.md": "3b7945ba9eebe6a943062f0faeb8d6175ca3df8bd9aa1ab9dfe96062f5e51655" } diff --git a/01. Projects/Im neurodivergent?.md b/01. Projects/Im neurodivergent?.md index 37f2a84..5d5de54 100644 --- a/01. Projects/Im neurodivergent?.md +++ b/01. Projects/Im neurodivergent?.md @@ -1,6 +1,6 @@ --- created: 2024-03-26 16:35 -updated: 2024-03-26 17:45 +updated: 2024-03-31 18:00 --- Possible symptoms: @@ -19,5 +19,7 @@ Possible symptoms: - the love of coffee?? - Difficult to function on my own - The need of structure +- I'm slowly but constantly losing interest in things + - I have to constantly tell me "this is fun", "this is how fun feels like" See all notes from [ADHD - a left handed brain](2024-03-25%20-%20noboilerplate-scripts-35-adhd-a-left-handed-brain.md%20at%20main%20·%200atman-noboilerplate.md) diff --git a/Read Later/2024-03-06 - How to Build a Basic CMS with Google Sheets and React.md b/Read Later/2024-03-06 - How to Build a Basic CMS with Google Sheets and React.md new file mode 100644 index 0000000..6c59c89 --- /dev/null +++ b/Read Later/2024-03-06 - How to Build a Basic CMS with Google Sheets and React.md @@ -0,0 +1,267 @@ +--- +id: 39278362-dbfc-11ee-8a2b-139ebfa11748 +title: | + How to Build a Basic CMS with Google Sheets and React +status: ARCHIVED +tags: + - read-later + - RSS +date_added: 2024-03-06 14:55:48 +url_omnivore: | + https://omnivore.app/me/how-to-build-a-basic-cms-with-google-sheets-and-react-18e158f0d8c +url_original: | + https://www.freecodecamp.org/news/how-to-build-a-basic-cms-with-google-sheets-and-reactjs/ +--- + +# How to Build a Basic CMS with Google Sheets and React + +## Highlights + +### Step 1: Set Up Your Google Sheets + +1. Go to your Google Sheets +2. Open the sheet you want to use or create a new one +3. Click on `Extensions` in the menu +4. Then click on `Apps Script` + +In the Apps Script editor, you can write a script to serve as your endpoint. Here's a script that returns the contents of a Google Sheet in JSON format: + +```kotlin +function convertRangeToJson(data) { + var jsonArray = []; + + // Check if data is empty or doesn't contain enough rows for headers and at least one data row + if (!data || data.length < 2) { + // Return an empty array or a meaningful message as needed + return jsonArray; // or return 'No data available'; + } + + var headers = data[0]; + for (var i = 1, length = data.length; i < length; i++) { + var row = data[i]; + var record = {}; + + for (var j = 0; j < row.length; j++) { + record[headers[j]] = row[j]; + } + + jsonArray.push(record); + } + + return jsonArray; +} +``` + +Then: + +1. Click `File` \> `Save`, and give your project a name +2. Click on `Deploy` \> `New deployment`. +3. Click on `Select type` and choose `Web app`. +4. Fill in the details for your deployment. Under `Execute as`, choose whether the script should run as your account or as the user accessing the web app. Under `Who has access`, choose who can access your web app. +5. Click `Deploy`. + +[source](https://omnivore.app/me/how-to-build-a-basic-cms-with-google-sheets-and-react-18e158f0d8c#d5dee3e3-c455-4623-952d-2b11f076c3fa) + +--- + +## Original + +![How to Build a Basic CMS with Google Sheets and React](https://proxy-prod.omnivore-image-cache.app/1640x924,siWfmlLH465K-bpxtdWL3BNzIim_TyPG4_WhZ94OLwBk/https://www.freecodecamp.org/news/content/images/size/w2000/2024/03/--1.png) + +In today's digital landscape, creating a content management system (CMS) that is both cost-effective and easy to maintain can be difficult, especially if you're operating on a tight budget. + +This tutorial will show you a solution that leverages Google Sheets as a makeshift database and React to build the frontend. This will let you effectively bypass the need for a dedicated server or traditional database system. + +This approach not only reduces the overhead costs associated with web development, but also simplifies content updates and management. It's an ideal solution if you're looking to launch your own simple CMS without substantial investment. + +This solution is suitable for freelancers at the beginning of their career and for clients who cannot invest much in their website. + +## Why Google Sheets? + +Opting for Google Sheets as the backbone of your CMS comes down to its simplicity, flexibility, and cost-effectiveness. + +Traditional web development requires a backend server to process data, a database to store information, and a frontend to display content. But each layer adds complexity and cost. + +Google Sheets, on the other hand, acts as a highly accessible and intuitive interface that eliminates the need for a server and a database. It lets your users update content in real-time, much like any CMS, but without the usual setup and maintenance costs. This makes it an excellent choice for individuals, small businesses, or anyone looking to deploy a web application quickly and with minimal expense. + +## Getting Started + +Before diving into the code, ensure you have Node.js and npm installed on your system. These tools will allow us to create a React application and manage its dependencies. + +Let's start with Google Sheets now. + +### ==Step 1: Set Up Your Google Sheets== + +1. ==Go to your Google Sheets== +2. ==Open the sheet you want to use or create a new one== +3. ==Click on== `==Extensions==` ==in the menu== +4. ==Then click on== `==Apps== ==Script==` + +==In the Apps Script editor, you can write a script to serve as your endpoint. Here's a script that returns the contents of a Google Sheet in JSON format:== + +```kotlin +function convertRangeToJson(data) { + var jsonArray = []; + + // Check if data is empty or doesn't contain enough rows for headers and at least one data row + if (!data || data.length < 2) { + // Return an empty array or a meaningful message as needed + return jsonArray; // or return 'No data available'; + } + + var headers = data[0]; + for (var i = 1, length = data.length; i < length; i++) { + var row = data[i]; + var record = {}; + + for (var j = 0; j < row.length; j++) { + record[headers[j]] = row[j]; + } + + jsonArray.push(record); + } + + return jsonArray; +} +``` + +==Then:== + +1. ==Click== `==File==` ==>== `==Save==`==, and give your project a name== +2. ==Click on== `==Deploy==` ==>== `==New== ==deployment==`==.== +3. ==Click on== `==Select== ==type==` ==and choose== `==Web app==`==.== +4. ==Fill in the details for your deployment. Under== `==Execute== ==as==`==, choose whether the script should run as your account or as the user accessing the web app. Under== `==Who has== ==access==`==, choose who can access your web app.== +5. ==Click== `==Deploy==`==.== + +You may be asked to authorize the script to access your Google Sheets. Follow the prompts to do so. + +After deploying, you'll be given a URL for your web app. This is your API endpoint. + +To give you an idea of what you have done so far, this is your sheet structure: + +![Schermata-2024-03-04-alle-16.49.37](https://proxy-prod.omnivore-image-cache.app/2000x526,smPUKAPAEuUJbzcsC9y_OcXJLBnSw4Uxv4SK--sY8BIk/https://www.freecodecamp.org/news/content/images/2024/03/Schermata-2024-03-04-alle-16.49.37.png) + +How your sheet should currently look + +And this is the JSON you get when you call the endpoint: + +![postman_I](https://proxy-prod.omnivore-image-cache.app/2000x994,sR4WRCZpp3k8lz8LREev-BkSixXwiwIQ0OvBZbhT-3o4/https://www.freecodecamp.org/news/content/images/2024/03/postman_I.png) + +JSON + +### Step 2: Create Your React App + +With your Google Sheets API ready, it's time to create the React app that will fetch and display this data. + +First, go ahead and create a React app. Run the following command in your terminal to create a new React application: + +```dsconfig +npx create-react-app google-sheets-cards +cd google-sheets-cards +npm start +``` + +You can also [use modern build tools like Vite](https://www.freecodecamp.org/news/get-started-with-vite/) for this purpose, as CRA is no longer the recommended way of building a React app. + +Next, create the card component. Inside the `src` directory, create a file named `Card.js`. This component will be responsible for displaying each data record: + +```javascript +// src/Card.js +function Card({ title, content }) { + return ( +
+

{title}

+

{content}

+
+ ); +} + +export default Card; +``` + +Now it's time to fetch and display your data in App.js. Modify the `App.js` file to include logic for fetching the data from your Google Sheets API and using the Card component to display it: + +```javascript +// src/App.js +import React, { useEffect, useState } from 'react'; +import Card from './Card'; +import './App.css'; // Make sure to create some basic styles for the cards in App.css + +function App() { + const [data, setData] = useState([]); + + useEffect(() => { + fetch('YOUR_ENDPOINT_URL') // Replace with your actual endpoint URL + .then(response => response.json()) + .then(data => setData(data)) + .catch(error => console.error('Error fetching data:', error)); + }, []); + + return ( +
+

Data from Google Sheets

+
+ {data.map((item, index) => ( + + ))} +
+
+ ); +} + +export default App; +``` + +Next, you can style your cards. Go ahead and add the below CSS in `App.css` for basic card styling: + +```css +.card { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + margin: 10px; + padding: 10px; + display: inline-block; + background: #f9f9f9; +} + +.cards-container { + display: flex; + flex-wrap: wrap; + justify-content: center; +} +``` + +### Step 3: Run Your React App + +With everything set up, you can now run your React application and see the data from Google Sheets displayed in your browser. To do this, follow these steps: + +First, start the React app. In your terminal, navigate to the root directory of your React app if you're not already there. Run the following command to start the development server: + +```coffeescript +npm start +``` + +This command compiles your React application and opens it in your default web browser. You should see a webpage with a title "Data from Google Sheets", and below that, a series of cards, each displaying a title and content fetched from your Google Sheets data. + +Here's, in fact, what we get: + +![Schermata-2024-03-04-alle-16.52.22](https://proxy-prod.omnivore-image-cache.app/2000x412,sYriejk47X_q9wHSncPygJqjh7czNfP7109TVVFRq0vY/https://www.freecodecamp.org/news/content/images/2024/03/Schermata-2024-03-04-alle-16.52.22.png) + +Data from Google Sheets and Card 1, Card 2, and Card 3 displayed on the screen + +Now you can view your data. Each card on the page corresponds to a row in your Google Sheets, with the title and content fields displayed as specified in your Card component. If you make any updates to your Google Sheets data, you can refresh the web page to see the changes reflected immediately. + +You can deploy your React app to one of the many services you can find online such as Github Actions or Netlify. This is a simple and effective way to host your frontend application for free with significant performance. + +## Conclusion + +Congratulations! You've created a dynamic web application that fetches data from a Google Sheet and displays it using React. + +This approach offers a flexible and straightforward way to manage your application's content without needing a backend server or database. + +Google Sheets serves as an accessible and collaborative platform for managing data, while React allows you to build a responsive and interactive user interface. Together, they provide a powerful combination for creating web applications that can be quickly updated and easily maintained. + +--- + +--- + + Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/) \ No newline at end of file diff --git a/Read Later/2024-03-29 - Let's Save the (Git) Trees.md b/Read Later/2024-03-29 - Let's Save the (Git) Trees.md new file mode 100644 index 0000000..f98449b --- /dev/null +++ b/Read Later/2024-03-29 - Let's Save the (Git) Trees.md @@ -0,0 +1,91 @@ +--- +id: 228a5a0a-eded-11ee-9840-8b8ae5e4b6f0 +title: | + Let's Save the (Git) Trees +status: ARCHIVED +tags: + - read-later + - Newsletter +date_added: 2024-03-29 13:55:23 +url_omnivore: | + https://omnivore.app/me/let-s-save-the-git-trees-18e8b23331a +url_original: | + https://omnivore.app/no_url?q=b542dc42-874d-446c-84a7-6c02bf819f29 +--- + +# Let's Save the (Git) Trees + +## Highlights + +We start using something called **interactive rebase** on our feature branches. It’s really just a way to clean up our commit history before we merge it into the main branch. This might change the history, but since it’s just on our own feature branches, it doesn’t mess up anything for everyone else. + +[source](https://omnivore.app/me/let-s-save-the-git-trees-18e8b23331a#0f14f09a-7965-46bd-bc32-d4eede7e821c) + +--- + +Here’s a quick guide on how to do it: + +1. **Start on Your Feature Branch:**`git checkout -b my-feature` +2. **Grab the Latest Main Branch Updates Without Switching:**`git fetch origin main:main` (using `main:main` is a trick to fetch remote main changes to the local copy without switching back and forth) +3. **Interactive Rebase Time:**`git rebase main --interactive` \- This lets us pick and choose which commits to keep or squash, change the commits you want to `s` to make sure git squashes them into the parent commit, while keeping the changes. +4. **Safely Update the Remote Branch:**`git push --force-with-lease` \- This flag makes sure we don’t accidentally overwrite anyone else’s work. +5. **Prepare to Merge:**`git checkout main` +6. **Merge Without Extra Commits:**`git merge --ff-only -` \- Keeps our history straight by avoiding merge commits. +7. **Push it Up:**`git push` \- And we’re done! + +[source](https://omnivore.app/me/let-s-save-the-git-trees-18e8b23331a#abe6a553-9d96-4f41-aba2-73ad21e3e86a) + +--- + +## Original + +Hi friends, + +You know how companies use merge commits when working on projects? + +Just go to one of your work projects and checkout the history of the main branch. It may look tidy (or not) but it’s bad for the environment (the real-world one 😉) + +![](https://proxy-prod.omnivore-image-cache.app/736x0,sn6ke9p9cjtm0zRALZCJRPzmHZdOxUQdTT0Px1KRIPF8/https://embed.filekitcdn.com/e/9nyiJQ9d9Gw31fuefbZ9U7/4fPPnSnnwR4NjuHxwiBW7a/email) + +Lots of merge commits + +While that’s pretty standard, it actually makes things messy. + +Every time we do this, it stops us from keeping our commit history nice and clean all the way through from development to production. + +Here’s why that’s a bit of a problem: if we’ve already **built and tested** a commit, **installing dependencies** in the process and **storing** all its details, there’s really no need to go through all that again. + +It’s like doing the same work twice, which wastes time and resources, which translate to environmental effects that compound and another financial waste if that’s not enough. + +Plus, a cleaner git history makes it easier for us to figure out issues. It helps us use tools like `git bisect` much more effectively to find bugs. But we’ll talk more about that another time. + +So, what’s the solution? + +==We start using something called== **==interactive rebase==** ==on our feature branches. It’s really just a way to clean up our commit history before we merge it into the main branch. This might change the history, but since it’s just on our own feature branches, it doesn’t mess up anything for everyone else.== + +![](https://proxy-prod.omnivore-image-cache.app/800x0,s741uz372LXRlTbpdIp7thFQOHpb2HEwyoZVuS7eHYHU/https://embed.filekitcdn.com/e/9nyiJQ9d9Gw31fuefbZ9U7/gPjnSdTmfGoapQrSBNky7e/email) + +Rebasing 3 commits into one with interactive rebase + +==Here’s a quick guide on how to do it:== + +1. **==Start on Your Feature Branch:==**`==git checkout -b== ==my====-feature==` +2. **==Grab the Latest Main Branch Updates Without Switching:==**`==git== ==fetch== ==origin== ==main====:main==` ==(using== `==main:====main==` ==is a trick to fetch remote main changes to the local copy without switching back and forth)== +3. **==Interactive Rebase Time:==**`==git rebase main== ==--interactive==` ==- This lets us pick and choose which commits to keep or squash, change the commits you want to== `==s==` ==to make sure git squashes them into the parent commit, while keeping the changes.== +4. **==Safely Update the Remote Branch:==**`==git push --====force====-====with====-lease==` ==- This flag makes sure we don’t accidentally overwrite anyone else’s work.== +5. **==Prepare to Merge:==**`==git checkout main==` +6. **==Merge Without Extra Commits:==**`==git== ==merge== ==--ff-====only== ==-==` ==- Keeps our history straight by avoiding merge commits.== +7. **==Push it Up:==**`==git== ==push==` ==- And we’re done!== + +By making this part of what we do every day, our git trees will stay clean and easy to work with. + +Hope you find this helpful! Always happy to hear your thoughts or answer any questions. + +Enjoy your weekend! + +_**Whenever you’re ready, here’s how I can help you**_ + +* ​[Follow me on X / Twitter](https://click.convertkit-mail2.com/qduo9vo0l2f7h7pwe7eulhnpxowkk/wnh2hghw84rpw8h7/aHR0cHM6Ly90d2l0dGVyLmNvbS9kZXZvcHN0b29sYm94) for the occasional tips and tricks on better workflows +* ​[Building a Second Brain with Neovim in Under 90 Minutes ​](https://click.convertkit-mail2.com/qduo9vo0l2f7h7pwe7eulhnpxowkk/reh8hoh0n7qr0ka2/aHR0cHM6Ly9sZWFybi5vbWVyeHguY29tL2NvdXJzZXMvc2Vjb25kLWJyYWluLW5lb3ZpbQ==)My first course, discussing the basics of building a second brain using the PARA and CODE methods, combined with Obsidian and Neovim as an editor. Join 200+ enrolled students here + +[![Built with ConvertKit](https://proxy-prod.omnivore-image-cache.app/190x36,suXlFZIrn56v5wQ2wJrgXmN-MetSTl33uHiVXRY6NE5Y/https://cdn.convertkit.com/assets/light-built-with-badge.png)](https://click.convertkit-mail2.com/qduo9vo0l2f7h7pwe7eulhnpxowkk/08hwh9hdqxm5dvul/aHR0cHM6Ly9jb252ZXJ0a2l0LmNvbS9mZWF0dXJlcy9lbWFpbC1tYXJrZXRpbmc%5FdXRtX2NhbXBhaWduPXBvd2VyZWRieSZ1dG1fY29udGVudD1lbWFpbCZ1dG1fbWVkaXVtPXJlZmVycmFsJnV0bV9zb3VyY2U9ZHluYW1pYw==) \ No newline at end of file