Compare commits
No commits in common. "pages" and "main" have entirely different histories.
493 changed files with 1053908 additions and 1629 deletions
3
.domains
3
.domains
|
|
@ -1,3 +0,0 @@
|
||||||
blog.panconpalta.win
|
|
||||||
personal-page.aleidk.codeberg.page
|
|
||||||
pages.personal-page.aleidk.codeberg.page
|
|
||||||
42
.forgejo/issue_template/01-content-update.yml
Normal file
42
.forgejo/issue_template/01-content-update.yml
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
name: Content update
|
||||||
|
about: Content creation or edition
|
||||||
|
title: '[Content]: '
|
||||||
|
ref: 'content-update'
|
||||||
|
assignees:
|
||||||
|
- aleidk
|
||||||
|
labels:
|
||||||
|
- Priority/Low
|
||||||
|
- Severity/Low
|
||||||
|
- Status/Pending
|
||||||
|
- Type/Content
|
||||||
|
body:
|
||||||
|
- type: dropdown
|
||||||
|
id: topic
|
||||||
|
attributes:
|
||||||
|
label: "Topic:"
|
||||||
|
multiple: true
|
||||||
|
default: 0
|
||||||
|
options:
|
||||||
|
- Garden
|
||||||
|
- Blog
|
||||||
|
- Devlog
|
||||||
|
- Other
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: content
|
||||||
|
attributes:
|
||||||
|
label: "Content description:"
|
||||||
|
description: Brief ideas of what this content is about.
|
||||||
|
placeholder: Lorem Ipsum...
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: extra
|
||||||
|
attributes:
|
||||||
|
label: "Extra data and references:"
|
||||||
|
placeholder: Lorem Ipsum...
|
||||||
|
validations:
|
||||||
|
required: false
|
||||||
60
.forgejo/issue_template/02-feature.yml
Normal file
60
.forgejo/issue_template/02-feature.yml
Normal file
|
|
@ -0,0 +1,60 @@
|
||||||
|
name: Feature request
|
||||||
|
about: Request a new feature to be added
|
||||||
|
title: '[Feature]: '
|
||||||
|
ref: 'development'
|
||||||
|
assignees:
|
||||||
|
- aleidk
|
||||||
|
labels:
|
||||||
|
- Priority/Low
|
||||||
|
- Severity/Low
|
||||||
|
- Status/Pending
|
||||||
|
- Type/Feature
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
We appreciate your feedback on how to improve this project. Please be sure to include as much details and any resources if possible!
|
||||||
|
|
||||||
|
- type: dropdown
|
||||||
|
attributes:
|
||||||
|
multiple: false
|
||||||
|
label: Type of Feature
|
||||||
|
default: 0
|
||||||
|
options:
|
||||||
|
- "✨ New Feature"
|
||||||
|
- "📝 Documentation"
|
||||||
|
- "🎨 Style and UI"
|
||||||
|
- "🔨 Code Refactor"
|
||||||
|
- "⚡ Performance Improvements"
|
||||||
|
- "✅ New Test"
|
||||||
|
- "🪢 Architecture"
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: description
|
||||||
|
attributes:
|
||||||
|
label: Description
|
||||||
|
description: Give us a brief description of the feature or enhancement you would like.
|
||||||
|
placeholder: As <who> <when> <where>, I want <what> because <why>
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: completion-criteria
|
||||||
|
attributes:
|
||||||
|
label: Completion criteria
|
||||||
|
description: Tell us what this feature needs to do to be considered completed using verificable items.
|
||||||
|
placeholder: |
|
||||||
|
- [ ] Read the configuration file using the yaml format
|
||||||
|
- [ ] Fetch data from an the json-placehoder API
|
||||||
|
- [ ] Save the data in the database
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: additional-information
|
||||||
|
attributes:
|
||||||
|
label: Additional Information
|
||||||
|
description: |
|
||||||
|
Please leave any additional information on the feature request that could be helpful! like proposed solutions, examples, links, screenshots, etc.
|
||||||
93
.forgejo/issue_template/03-bug-report.yml
Normal file
93
.forgejo/issue_template/03-bug-report.yml
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
name: Bug report
|
||||||
|
about: Something isn't working as expected
|
||||||
|
title: '[Bug]: '
|
||||||
|
ref: 'development'
|
||||||
|
assignees:
|
||||||
|
- aleidk
|
||||||
|
labels:
|
||||||
|
- Priority/Low
|
||||||
|
- Severity/Low
|
||||||
|
- Status/Pending
|
||||||
|
- Type/Bug
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
We appreciate your feedback on how to improve this project. Please be sure to include as much details and any resources if possible!
|
||||||
|
|
||||||
|
- type: checkboxes
|
||||||
|
id: terms
|
||||||
|
attributes:
|
||||||
|
label: Before submitting, I checked...
|
||||||
|
options:
|
||||||
|
- label: The [issue tracker](../) in case this has been reported before
|
||||||
|
required: true
|
||||||
|
- label: The severity of the bug
|
||||||
|
required: true
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: expected
|
||||||
|
attributes:
|
||||||
|
label: "Expected behavior:"
|
||||||
|
description: A clear and concise description of what you expected to happen. Include screenshots and/or logs if relevant.
|
||||||
|
placeholder: As <who> <when> <where>, I want <what> because <why>
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: current
|
||||||
|
attributes:
|
||||||
|
label: "Current behavior:"
|
||||||
|
description: A clear and concise description of what actually happened. Include screenshots and/or logs if relevant.
|
||||||
|
placeholder: As <who> <when> <where>, I want <what> because <why>
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: reproduce
|
||||||
|
attributes:
|
||||||
|
label: "Steps to reproduce:"
|
||||||
|
description: Anambiguous set of steps to reproduce this bug. Include code snippets if relevant.
|
||||||
|
placeholder: |
|
||||||
|
1. Use x argument / navigate to
|
||||||
|
2. Fill this information
|
||||||
|
3. Go to...
|
||||||
|
4. See error
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: dropdown
|
||||||
|
attributes:
|
||||||
|
multiple: false
|
||||||
|
label: Is this a regresion?
|
||||||
|
description: Did this behaviour used to work in the previous version?
|
||||||
|
default: 0
|
||||||
|
options:
|
||||||
|
- "I don't know"
|
||||||
|
- "This is a new feature"
|
||||||
|
- "Yes"
|
||||||
|
- "No"
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: environment
|
||||||
|
attributes:
|
||||||
|
label: "Your environment:"
|
||||||
|
description: Tell us details about the environment you experienced the bug in. A minimal/isolated enviroment to reproduce would be apreciated.
|
||||||
|
placeholder: |
|
||||||
|
- Version used:
|
||||||
|
- Browser Name and version:
|
||||||
|
- Operating System and version (desktop or mobile):
|
||||||
|
- Link to your project:
|
||||||
|
validations:
|
||||||
|
required: false
|
||||||
|
|
||||||
|
- type: textarea
|
||||||
|
id: additional-information
|
||||||
|
attributes:
|
||||||
|
label: "Additional Information:"
|
||||||
|
description: |
|
||||||
|
Please leave any additional information on the bug that could be helpful! like proposed solutions, examples, links, screenshots, etc.
|
||||||
65
.forgejo/workflows/build-docker-image.yaml
Normal file
65
.forgejo/workflows/build-docker-image.yaml
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
name: Publish image
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
workflow_dispatch:
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
create-docker-images:
|
||||||
|
runs-on: host
|
||||||
|
steps:
|
||||||
|
- name: Set up Docker Buildx
|
||||||
|
uses: docker/setup-buildx-action@v3
|
||||||
|
|
||||||
|
- name: Login to Docker Hub
|
||||||
|
uses: docker/login-action@v3
|
||||||
|
with:
|
||||||
|
registry: git.alecodes.page
|
||||||
|
username: ${{ vars.CONTAINER_REGISTRY_USER }}
|
||||||
|
password: ${{ secrets.CONTAINER_REGISTRY_TOKEN }}
|
||||||
|
|
||||||
|
- name: Build and push
|
||||||
|
uses: docker/build-push-action@v6
|
||||||
|
with:
|
||||||
|
platforms: linux/amd64,linux/arm64,linux/arm/v7
|
||||||
|
push: true
|
||||||
|
tags: |
|
||||||
|
git.alecodes.page/alecodes/page:latest
|
||||||
|
git.alecodes.page/alecodes/page:${{ github.sha }}
|
||||||
|
|
||||||
|
deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs:
|
||||||
|
- create-docker-images
|
||||||
|
steps:
|
||||||
|
- name: Checkout code
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
- name: 'Docker Stack Deploy'
|
||||||
|
uses: https://github.com/cssnr/stack-deploy-action@v1
|
||||||
|
with:
|
||||||
|
host: ${{ vars.DOCKER_SWARM_HOST }}
|
||||||
|
port: ${{ vars.DOCKER_SWARM_PORT }}
|
||||||
|
user: ${{ secrets.DOCKER_SWARM_USER }}
|
||||||
|
ssh_key: '${{ secrets.DOCKER_SWARM_SSH_KEY }}'
|
||||||
|
file: 'docker-stack.yaml'
|
||||||
|
name: 'personal_page'
|
||||||
|
|
||||||
|
rebase:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
needs: deploy
|
||||||
|
if: success()
|
||||||
|
steps:
|
||||||
|
- name: Checkout repository
|
||||||
|
uses: actions/checkout@v4
|
||||||
|
with:
|
||||||
|
fetch-depth: '0'
|
||||||
|
ref: content-update
|
||||||
|
|
||||||
|
- name: Update branch
|
||||||
|
run: |
|
||||||
|
set -x
|
||||||
|
git config --global user.name "robo"
|
||||||
|
git config --global user.email "robo@alecodes.page"
|
||||||
|
git rebase origin/main
|
||||||
|
git push origin content-update --force-with-lease
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
0
.gitmodules
vendored
Normal file
0
.gitmodules
vendored
Normal file
8
.justfile
Normal file
8
.justfile
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
lint:
|
||||||
|
zola check --drafts
|
||||||
|
|
||||||
|
dev:
|
||||||
|
@zola serve --port 3000 --fast
|
||||||
|
|
||||||
|
build:
|
||||||
|
@zola build
|
||||||
57
404.html
57
404.html
File diff suppressed because one or more lines are too long
40
CHANGELOG.md
Normal file
40
CHANGELOG.md
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
## 0.3.0 (2024-03-15)
|
||||||
|
|
||||||
|
### Feat
|
||||||
|
|
||||||
|
- **Style**: change layout to allow navbar to expand the whole width
|
||||||
|
- **Style**: add animations and effects to landing page
|
||||||
|
- **Navbar**: apply sticky style to the main navbar
|
||||||
|
|
||||||
|
### Refactor
|
||||||
|
|
||||||
|
- **Components**: move offcanvas from navbar to it's own component
|
||||||
|
|
||||||
|
## 0.2.0 (2024-03-13)
|
||||||
|
|
||||||
|
### Feat
|
||||||
|
|
||||||
|
- **Style**: Apply responsive design
|
||||||
|
|
||||||
|
### Refactor
|
||||||
|
|
||||||
|
- **Style**: add SASS to reduce style repetition
|
||||||
|
|
||||||
|
## 0.1.0 (2024-03-13)
|
||||||
|
|
||||||
|
### Feat
|
||||||
|
|
||||||
|
- Apply some elevation to landing components
|
||||||
|
- Apply skeleton of new design to landing page
|
||||||
|
- **Layout**: add loading spinner component and to layout
|
||||||
|
- **Layout**: apply view transition to page navigation
|
||||||
|
- **components**: add carousel components
|
||||||
|
- **components**: Add lightgallery library
|
||||||
|
|
||||||
|
### Fix
|
||||||
|
|
||||||
|
- **woodpecker**: incorrect yaml syntax
|
||||||
|
|
||||||
|
### Refactor
|
||||||
|
|
||||||
|
- move submodule into this repo
|
||||||
9
Dockerfile
Normal file
9
Dockerfile
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
FROM --platform=linux/amd64 ghcr.io/getzola/zola:v0.19.2 AS builder
|
||||||
|
|
||||||
|
COPY . /project
|
||||||
|
WORKDIR /project
|
||||||
|
RUN ["zola", "build"]
|
||||||
|
|
||||||
|
FROM ghcr.io/static-web-server/static-web-server:2
|
||||||
|
WORKDIR /
|
||||||
|
COPY --from=builder /project/dist /public
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) [year] [fullname]
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
39
README.md
Normal file
39
README.md
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
# Personal Webpage
|
||||||
|
|
||||||
|
This is a static site created for personal information and content serving such
|
||||||
|
as blog and others.
|
||||||
|
|
||||||
|
## Dependencies
|
||||||
|
|
||||||
|
One of the objective of this project is to use as few dependencies as possible
|
||||||
|
(the ones used are intended for easier and faster development), and try to do
|
||||||
|
everything from scratch.
|
||||||
|
|
||||||
|
Here is the list of main code dependencies:
|
||||||
|
|
||||||
|
- Astro Website framework.
|
||||||
|
- ReactJS for interactive components.
|
||||||
|
- Sass for stylesheets generations.
|
||||||
|
- [Gardevoir](https://github.com/krshoss/gardevoir) for CSS reset and normalization.
|
||||||
|
- [astro-i18next](https://github.com/yassinedoghri/astro-i18next) for translations.
|
||||||
|
|
||||||
|
And here is a list of color schemes used for this project:
|
||||||
|
|
||||||
|
- [Catppuccin](https://github.com/catppuccin/catppuccin)
|
||||||
|
|
||||||
|
## Reference
|
||||||
|
|
||||||
|
Cool websites for inspiration:
|
||||||
|
|
||||||
|
- [Noel Berry](https://noelberry.ca/)
|
||||||
|
- [Heidy Motta](https://www.heidy.page/)
|
||||||
|
- [Zea Slosar](https://zeaslosar.com/)
|
||||||
|
- [Harrison Gibbins](https://harrisongibbins.com)
|
||||||
|
- [The Messenger Game](https://themessengergame.com/)
|
||||||
|
- [Sabotage Studio](https://sabotagestudio.com/)
|
||||||
|
- [Eva Decker](https://eva.town/)
|
||||||
|
- [Cory Hughart](https://coryhughart.com/)
|
||||||
|
- [Brad Frost](https://bradfrost.com/)
|
||||||
|
- [dvlpr](https://dvlpr.pro/#home)
|
||||||
|
- [Gwern Branwen](https://gwern.net/)
|
||||||
|
- [Maggie Appleton](https://maggieappleton.com/)
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
import"./hoisted.yTqMwub7.js";import"./index.hcp1Nv56.js";document.addEventListener("astro:page-load",()=>{document.querySelector(".btn-back")?.addEventListener("click",()=>{history.back()})});
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
import"./hoisted.yTqMwub7.js";import"./index.hcp1Nv56.js";document.addEventListener("astro:page-load",()=>{document.querySelector(".btn-back")?.addEventListener("click",()=>{history.back()})});
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
._wrapper_ph0uq_1{--bg-color: var(--prj-input);--text-color: var(--prj-input-text);position:relative;padding:var(--prj-spacing-1);background-color:var(--bg-color);color:var(--text-color);display:flex;gap:var(--prj-spacing-1)}._input_ph0uq_14{width:100%;display:flex;gap:var(--prj-spacing-1);font-size:.8em}._selectedItem_ph0uq_22{background-color:var(--prj-surface-3);color:var(--prj-text);font-size:.9em}._selectedItem_ph0uq_22>*{padding:var(--prj-spacing-1)}._deleteItem_ph0uq_32:hover{background-color:var(--prj-danger)}._optionList_ph0uq_36{position:absolute;left:0;top:120%;width:100%;padding:var(--prj-spacing-1);text-align:start;background-color:var(--bg-color);color:var(--text-color)}._optionItem_ph0uq_50{display:block;width:100%;border:none;background-color:transparent;text-align:start;padding:var(--prj-spacing-1)}._optionItem_ph0uq_50:disabled{color:var(--prj-disabled-text)}._optionItem_ph0uq_50:not(:first-child){margin-top:var(--prj-spacing-1)}._optionItem_ph0uq_50:not(:disabled):hover{background-color:var(--prj-accent-bg)}._table_19042_1 th,._table_19042_1 td{padding:.25rem 1rem;border:1px solid white;text-align:center}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1 +0,0 @@
|
||||||
const t="_wrapper_ph0uq_1",e="_input_ph0uq_14",o="_selectedItem_ph0uq_22",p="_deleteItem_ph0uq_32",s="_optionList_ph0uq_36",_="_optionItem_ph0uq_50",c={wrapper:t,input:e,selectedItem:o,deleteItem:p,optionList:s,optionItem:_},n="_table_19042_1",i={table:n};export{i as a,c as s};
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
const l=new Set,a=new WeakSet;let s,d,u=!1;function S(e){u||(u=!0,s??=e?.prefetchAll??!1,d??=e?.defaultStrategy??"hover",g(),m(),p())}function g(){for(const e of["touchstart","mousedown"])document.body.addEventListener(e,t=>{c(t.target,"tap")&&f(t.target.href,{with:"fetch",ignoreSlowConnection:!0})},{passive:!0})}function m(){let e;document.body.addEventListener("focusin",o=>{c(o.target,"hover")&&t(o)},{passive:!0}),document.body.addEventListener("focusout",n,{passive:!0}),v(()=>{for(const o of document.getElementsByTagName("a"))a.has(o)||c(o,"hover")&&(a.add(o),o.addEventListener("mouseenter",t,{passive:!0}),o.addEventListener("mouseleave",n,{passive:!0}))});function t(o){const r=o.target.href;e&&clearTimeout(e),e=setTimeout(()=>{f(r,{with:"fetch"})},80)}function n(){e&&(clearTimeout(e),e=0)}}function p(){let e;v(()=>{for(const t of document.getElementsByTagName("a"))a.has(t)||c(t,"viewport")&&(a.add(t),e??=w(),e.observe(t))})}function w(){const e=new WeakMap;return new IntersectionObserver((t,n)=>{for(const o of t){const r=o.target,i=e.get(r);o.isIntersecting?(i&&clearTimeout(i),e.set(r,setTimeout(()=>{n.unobserve(r),e.delete(r),f(r.href,{with:"link"})},300))):i&&(clearTimeout(i),e.delete(r))}})}function f(e,t){const n=t?.ignoreSlowConnection??!1;if(!y(e,n))return;if(l.add(e),(t?.with??"link")==="link"){const r=document.createElement("link");r.rel="prefetch",r.setAttribute("href",e),document.head.append(r)}else fetch(e).catch(r=>{console.log(`[astro] Failed to prefetch ${e}`),console.error(r)})}function y(e,t){if(!navigator.onLine||!t&&h())return!1;try{const n=new URL(e,location.href);return location.origin===n.origin&&(location.pathname!==n.pathname||location.search!==n.search)&&!l.has(e)}catch{}return!1}function c(e,t){if(e?.tagName!=="A")return!1;const n=e.dataset.astroPrefetch;return n==="false"?!1:t==="tap"&&(n!=null||s)&&h()?!0:n==null&&s||n===""?t===d:n===t}function h(){if("connection"in navigator){const e=navigator.connection;return e.saveData||/(2|3)g/.test(e.effectiveType)}return!1}function v(e){e();let t=!1;document.addEventListener("astro:page-load",()=>{if(!t){t=!0;return}e()})}export{S as i};
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
import{i}from"./index.hcp1Nv56.js";i();
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 172 KiB |
5
_master_wiki/.gitignore
vendored
Normal file
5
_master_wiki/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
.obsidian/wokspace.json
|
||||||
|
.obsidian/workspace-mobile.json
|
||||||
|
.env
|
||||||
|
.obsidian/workspace.json
|
||||||
|
.trash
|
||||||
13
_master_wiki/03. Resources/Design/Content Creators.md
Normal file
13
_master_wiki/03. Resources/Design/Content Creators.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-14 12:43
|
||||||
|
updated: 2024-04-15 20:56
|
||||||
|
---
|
||||||
|
- [Carmen Ansio](https://www.youtube.com/@CarmenAnsio)
|
||||||
|
- Marina Aísa
|
||||||
|
- Sarah Drasner
|
||||||
|
- [Kevin Powell](https://www.youtube.com/@KevinPowell)
|
||||||
|
- Miriam Suzanne
|
||||||
|
- [Manz Dev](https://www.youtube.com/@ManzDev)
|
||||||
|
- [Una Kravets](https://www.youtube.com/@UnaKravets/videos)
|
||||||
|
- [Serudda](https://www.youtube.com/@serudda/videos)
|
||||||
|
- Josh Comeau
|
||||||
66
_master_wiki/03. Resources/Design/Design.md
Normal file
66
_master_wiki/03. Resources/Design/Design.md
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
---
|
||||||
|
created: 2023-08-17 10:05
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
Diseñar está completamente fuera de mi zona de confort, así que estudiar como hacer, y hacer el esfuerzo de planear como diseñar la página antes de tirarme de hocico a hacerlo ha sido una experiencia bastante satisfactoria
|
||||||
|
|
||||||
|
Pensar que debo realizar, que quiero comunicar y como lo quiero comunicar ha enrutado el diseño y permitiendo que sea más facil
|
||||||
|
|
||||||
|
el feedback tambien ha sido satisfactorio, porque me ha hecho entender mejor que debo hacer y que no, tambien algúnos comentarios han contradecido completamente lo que yo creería que sería mejor, lo cuál ha enfocado mejor el diseño final en lo que realmente debe (y como debe) ser la página
|
||||||
|
|
||||||
|
## Cómo enfatizar un elemento
|
||||||
|
|
||||||
|
Para hacer que un elemento destaque del fondo, debemos ocupar _**Elevación**_,esto hará que el elemento parezca estar más cerca de la pantalla, haciendo que resalte de lo demás y atrapando la atención del usuario.
|
||||||
|
|
||||||
|
La manera de lograr esto depende del tema:
|
||||||
|
|
||||||
|
### Light Theme
|
||||||
|
|
||||||
|
Contrastar el contorno del elemento con su entorno, para esto podemos:
|
||||||
|
|
||||||
|
- Utilizar sombras, esto destaca el contorno de un elemento y su grado de elevación.
|
||||||
|
- sombras más pequeñas y definidas indican mayor proximidad al fondo.
|
||||||
|
- sombras más grandes y difuminadas indican mayor lejanía del fondo.
|
||||||
|
- Distintos colores diferencian elementos pero no proveen su grado de elevación.
|
||||||
|
- Opacidad muestra los contornos de los elementos y su solapamiento, pero no su grado de elevación.
|
||||||
|
- Podemos oscurecer el fondo para destacar un elemento sobre todo lo demás, esto ofrece una gran, pero no especifica cantidad de elevación.
|
||||||
|
|
||||||
|
### Dark Theme
|
||||||
|
|
||||||
|
- Utilizar colores claros para denotar el grado de elevación:
|
||||||
|
- Utilizar colores directamente. mientras más claro sea el color, más elevado estará un componente.
|
||||||
|
- Aplicar un _"overlay"_ de un color claro, con distintos grados de transparencia. Mientras menos transparente más elevado estará el componente. No aplicar este esto a los colores primarios o similares.
|
||||||
|
- _**NO**_ aplicar "light glows" en lugar de sombras oscuras para expresar elevación, porque no logran el mismo efecto.
|
||||||
|
|
||||||
|
### References of common elevations
|
||||||
|
|
||||||
|
| Component | Default elevation values (dp) | White overlay transparency |
|
||||||
|
| --------------------------------------------------------- | ----------------------------- | -------------------------- |
|
||||||
|
| Dialog | 24 | 16% |
|
||||||
|
| Modal bottom sheet Modal side sheet | 16 | 15% |
|
||||||
|
| Navigation drawer | 16 | 15% |
|
||||||
|
| Floating action button (FAB - pressed) | 12 | 14% |
|
||||||
|
| Standard bottom sheet Standard side sheet | 8 | 12% |
|
||||||
|
| Bottom navigation bar | 8 | 12% |
|
||||||
|
| Bottom app bar | 8 | 12% |
|
||||||
|
| Menus and sub menus | 8 | 12% |
|
||||||
|
| Card (when picked up) | 8 | 12% |
|
||||||
|
| Contained button (pressed state) | 8 | 12% |
|
||||||
|
| Floating action button (FAB - resting elevation) Snackbar | 6 | 11% |
|
||||||
|
| Top app bar (scrolled state) | 4 | 9% |
|
||||||
|
| Top app bar (resting elevation) | 0 or 4 | 0% - 9% |
|
||||||
|
| Refresh indicator Search bar (scrolled state) | 3 | 8% |
|
||||||
|
| Contained button (resting elevation) | 2 | 7% |
|
||||||
|
| Search bar (resting elevation) | 1 | 5% |
|
||||||
|
| Card (resting elevation) | 1 | 5% |
|
||||||
|
| Switch | 1 | 5% |
|
||||||
|
| Text button | 0 | 0% |
|
||||||
|
| Standard side sheet | 0 | 0% |
|
||||||
|
|
||||||
|
Reference:
|
||||||
|
|
||||||
|
- [Material Design - UI](https://m2.material.io/design/environment/elevation.html)
|
||||||
|
- [Material Design - Dark Theme](https://m2.material.io/design/color/dark-theme.html)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
1016699
_master_wiki/03. Resources/Design/Design_Cheatsheet.pdf
Normal file
1016699
_master_wiki/03. Resources/Design/Design_Cheatsheet.pdf
Normal file
File diff suppressed because it is too large
Load diff
BIN
_master_wiki/03. Resources/Design/IMG_20230722_120651_229.jpg
Normal file
BIN
_master_wiki/03. Resources/Design/IMG_20230722_120651_229.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
_master_wiki/03. Resources/Design/IMG_20230722_121658_512.jpg
Normal file
BIN
_master_wiki/03. Resources/Design/IMG_20230722_121658_512.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
_master_wiki/03. Resources/Design/IMG_20230722_123447_567.jpg
Normal file
BIN
_master_wiki/03. Resources/Design/IMG_20230722_123447_567.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
BIN
_master_wiki/03. Resources/Design/IMG_20230722_125137_501.jpg
Normal file
BIN
_master_wiki/03. Resources/Design/IMG_20230722_125137_501.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
6
_master_wiki/03. Resources/Design/Layouts.md
Normal file
6
_master_wiki/03. Resources/Design/Layouts.md
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-29 18:36
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
## Layouts
|
||||||
|
- [How to Properly Layout A Website (For Beginners)](https://www.youtube.com/watch?v=3C_22eBWpjg&t=604s)
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 851 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
147
_master_wiki/03. Resources/Design/Story Telling.md
Normal file
147
_master_wiki/03. Resources/Design/Story Telling.md
Normal file
|
|
@ -0,0 +1,147 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-03 12:11
|
||||||
|
updated: 2024-04-03 13:52
|
||||||
|
---
|
||||||
|
|
||||||
|
# Story Telling
|
||||||
|
|
||||||
|
## El Arco Narrativo
|
||||||
|
|
||||||
|
- Ir de un punto álgido a otro bajo y volver a subir es lo que have que una historia de la satisfactoria sensación de estar completa
|
||||||
|
- Una historia comienza con un _"llamado a la acción"_, el verbo mueve al sujeto.
|
||||||
|
|
||||||
|
## El Viaje Del Héroe
|
||||||
|
|
||||||
|
Se puede utilizar el patrón del _"viaje del héroe"_ en el diseño para guiar a los usuarios:
|
||||||
|
|
||||||
|
- Un incidente iniciante o una problemática que incita al "héroe" a moverse de donde está
|
||||||
|
- El "llamado a la aventura" es donde se incita al usuario a algo
|
||||||
|
- El "cruce del umbral", en donde el usuario entra en el otro sector (posiblemente hostil) en donde tendrá que pasar la "prueba de fuego"
|
||||||
|
- El camio de vuelta, donde regresamos al origen pero co algo nuevo ("regreso con el elixir")
|
||||||
|
|
||||||
|
## Story Boards
|
||||||
|
|
||||||
|
Los story boards son herramientas para planificar la acción transformadora de una historia.
|
||||||
|
|
||||||
|
Contar una historia en 6 fotogramas es una buena manera de contar los elementos esenciales de la forma narrativa
|
||||||
|
|
||||||
|
## Ingredientes De Una Historia
|
||||||
|
|
||||||
|
- **Arco**: la acción tiene un principio, un nudo y un final.
|
||||||
|
- **Cambio**: la acción transforma a un personaje o una situación.
|
||||||
|
- **Tema**: la acción se construye a partir de detalles concretos y relevantes.
|
||||||
|
- **Plausibilidad**: la acción es verosímil y sigue sus propias reglas.
|
||||||
|
|
||||||
|
## Regla De 3
|
||||||
|
|
||||||
|
Contar una historia en 3 pasos es una herramienta poderosa:
|
||||||
|
|
||||||
|
- 3 pasos da la sensación de facilidad y rapidez, aunque estos 3 pasos engloben más en secreto, agrupar tareas suele estar bien mientras no genere confusión
|
||||||
|
- Si se utilize de modo que el ultimo elemento es inesperado, puede sorprender y generar una sensación de satisfacción
|
||||||
|
- Ayuda a la memorización de elementos clave, sobre todo combinado con el item anterior
|
||||||
|
|
||||||
|
Esta regla se puede extender a 4 pasos, perdiendo cierta efectividad. Más de
|
||||||
|
4 pasos no suele set rentable, ya que da una sensación de set demasiado largo y "latero"
|
||||||
|
|
||||||
|
## Conexiones Forzadas
|
||||||
|
|
||||||
|
Aplicar conceptos e ideas, que en un principio pueden parecer contrarias o inconexas puede llevar a nuevas ideas y diseños interesantes, se puede emplear un concepto (Extraterrestre, colosal, vulgar, zoologico, etc) a un elemento a diseñar y ver que ocurre.
|
||||||
|
|
||||||
|
## Emoción
|
||||||
|
|
||||||
|
El diseño destinado a susitar emociones require pensar en como los usuarios anticiparán una experiencia y cómo la recordarán después.
|
||||||
|
|
||||||
|
>[!quote]
|
||||||
|
> "Las emociones son una palanca para la acción."
|
||||||
|
>
|
||||||
|
> "Los diseñadores necesitan adoptar estrategias para acceder a los contextos emocionales de los productos que tienen que diseñar, pensando en la gente que los usará."
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Economía De la Experiencia
|
||||||
|
|
||||||
|
Durante una experiencia, los usuarios generan significados y asociaciones que adquieren una mayor importancia que la del propio acontecimiento
|
||||||
|
|
||||||
|
Una experiencia es algo más de lo que se consume en el memento. Integra al consumidor en una representación teatral, creando un recuerdo perdurable y un lazo emocional.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Las experiencias se crean cuando los diseñadores deplazan el **foco** de los objetos a las acciones:
|
||||||
|
|
||||||
|
> [!info]
|
||||||
|
> Esto no necesariamente significa que el usuario realice algo, sino mover el principal elemento a una acción:
|
||||||
|
> - Auto -> conducir
|
||||||
|
> - Restaurant -> Cenar
|
||||||
|
> - Universidad -> Aprender
|
||||||
|
|
||||||
|
## El Viaje Emocional
|
||||||
|
|
||||||
|
Si una trama consiste en más de una series de sucesos que conforman una historia, un viaje emocional consiste en los sentimientos que esos sucesos despiertan
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
La forma en que concluye una experiencia afecta el juicio que los usuarios emitirán sobre el acontecimiento completo.
|
||||||
|
|
||||||
|
Prestar especial atención a la forma en la que concluyen las acciones, ofreciendo un extra de carga emocional para recompensar a los usuarios por su tiempo y esfuerzo.
|
||||||
|
|
||||||
|
## Cocreación
|
||||||
|
|
||||||
|
Los diseñadores trabajan junto a los usuarios, los cuales son considerados "un experto en el tema tratado".
|
||||||
|
|
||||||
|
## Técnicas Útiles
|
||||||
|
|
||||||
|
### Mapa De Palabras
|
||||||
|
|
||||||
|
Cada participante escribe un tema en el centro de una hoja, mediante un proceso de libre asociación, los participantes dibujan o escriben conceptos asociados para crear nodos de ideas
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Fuerzas Positivas Y Negativas
|
||||||
|
|
||||||
|
Crear una matriz de conceptos + y -
|
||||||
|
|
||||||
|
| | Pros | Cons |
|
||||||
|
| -------------------------------------- | -------------------------------------- | --------------------------------------------------- |
|
||||||
|
| Cómo hacer que más gente tome la micro | - ahorrar dinero<br>- Leer en el viaje | - Tiempo de viaje<br>- No hay lugar para bicicletas |
|
||||||
|
|
||||||
|
> [!question]
|
||||||
|
> Tendrá que ver con [[FODA]]??
|
||||||
|
|
||||||
|
### Asociación
|
||||||
|
|
||||||
|
Se le asignan emociones o personalidad a una idea
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Estudio De Personaje
|
||||||
|
|
||||||
|
Crear una planilla para un producto como si fuera una persona:
|
||||||
|
|
||||||
|
- Que edad tiene?
|
||||||
|
- En que trabaja?
|
||||||
|
- Cómo vive?
|
||||||
|
- Cómo viste?
|
||||||
|
- Donde pasará sus vacaciones?
|
||||||
|
|
||||||
|
Se puede partir tratando de imaginar al usuario que va dirigido el producto y simular su estilo de vida
|
||||||
|
|
||||||
|
Ej:
|
||||||
|
|
||||||
|
Perfile #1, Altavoz inalámbrico:
|
||||||
|
|
||||||
|
- Edad: 25
|
||||||
|
- Ocupación: Programador
|
||||||
|
- Vivienda: Depto. urbano
|
||||||
|
- Transporte: Bicicleta
|
||||||
|
- Ropa: Jeans y vintage
|
||||||
|
|
||||||
|
## Color Y Las Emociones
|
||||||
|
|
||||||
|
## References
|
||||||
|
|
||||||
|
- El diseño como STORYTELLING - Ellen Lupton
|
||||||
|
- [Design notes on pdf](Design_Cheatsheet.pdf)
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-28 13:18
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
|
||||||
|
| Library | Description |
|
||||||
|
| ----------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
|
||||||
|
| [shadcn/ui](https://ui.shadcn.com/) | Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. |
|
||||||
30
_master_wiki/03. Resources/Development/Devtools.md
Normal file
30
_master_wiki/03. Resources/Development/Devtools.md
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-15 20:56
|
||||||
|
updated: 2024-04-15 20:56
|
||||||
|
---
|
||||||
|
# Devtools
|
||||||
|
|
||||||
|
List of tools to solve common problems
|
||||||
|
|
||||||
|
## Tasks Runners
|
||||||
|
|
||||||
|
- [Overseer](https://github.com/stevearc/overseer.nvim): nvim task management
|
||||||
|
|
||||||
|
## Debugging
|
||||||
|
|
||||||
|
- [debugprint.nvim](https://github.com/andrewferrier/debugprint.nvim): manage print statements with useful information inside neovim
|
||||||
|
|
||||||
|
## Nvim Tools
|
||||||
|
|
||||||
|
### Focus Mode
|
||||||
|
|
||||||
|
- [Zen mode](https://github.com/folke/zen-mode.nvim): focus on the current portion of a file only
|
||||||
|
|
||||||
|
### Codebase Navigation
|
||||||
|
|
||||||
|
- Telescope
|
||||||
|
- [Graple](https://github.com/stevearc/overseer.nvim), bookmarks files to instant navigation in 1 key chord
|
||||||
|
|
||||||
|
### File Navigation
|
||||||
|
|
||||||
|
- [flash.nvim](https://github.com/folke/flash.nvim): jump to any place, enhances search, `f`,`F`,`t`,`T`, motions
|
||||||
17
_master_wiki/03. Resources/Development/Docker.md
Normal file
17
_master_wiki/03. Resources/Development/Docker.md
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
# Docker
|
||||||
|
|
||||||
|
## Publish Container Images
|
||||||
|
|
||||||
|
To easily create multi-arch containers and publish them to a registry, use this snipped (note you need to be logged in the registry):
|
||||||
|
|
||||||
|
Create builder container:
|
||||||
|
```bash
|
||||||
|
docker buildx create --name mybuilder --use --bootstrap
|
||||||
|
```
|
||||||
|
|
||||||
|
Build and publish image:
|
||||||
|
```bash
|
||||||
|
docker buildx build --push \
|
||||||
|
--platform linux/amd64,linux/arm64 \
|
||||||
|
--tag ghcr.io/<name-space>/<image>:latest .
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:39
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
When a feature or module is shipt, I need to asure the following things before submiting:
|
||||||
|
|
||||||
|
- Clean & readable code
|
||||||
|
- Linter without errors
|
||||||
|
- Design is as close as posible to the proposal
|
||||||
25
_master_wiki/03. Resources/Development/Fix messy commits.md
Normal file
25
_master_wiki/03. Resources/Development/Fix messy commits.md
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:27
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
tags:
|
||||||
|
- dev-tools
|
||||||
|
---
|
||||||
|
# Fix messy commits
|
||||||
|
|
||||||
|
Ya que estas opciones sobre escriben el historial de git, solo deben aplicarse en local y no commits publicados a un remote.
|
||||||
|
|
||||||
|
Como alternativa se puede intentar actualizar el historial remoto siempre y cuando el historial sea igual al local (osea, nosotros fuimos los últimos en actualizarlo y nadie ha hecho nada más). Para esto utilizamos `git push --force-with-lease`.
|
||||||
|
|
||||||
|
## Last commit
|
||||||
|
|
||||||
|
Si solo necesitamos agregar un cambio pequeño al ultimo commit (typo o correr el formatter), podemos aplicarlo con `git commit --ammend`, se puede sobre escribir el mensaje con `-m`.
|
||||||
|
|
||||||
|
## Mutiple commits
|
||||||
|
|
||||||
|
Se pueden arreglar el historial de commits con un `git rebase -i [since commit or branch]` y utilizar las estrategias de pick, squash, reword y drop.
|
||||||
|
|
||||||
|
En caso de que sepamos que haremos un commit que luego no necesitaremos, podemos hacer:
|
||||||
|
- `git commit --fixup [commit hash]` -> descarta el commit message de este commit y mantiene el del commit de referencia
|
||||||
|
- `git commit --squash [commit hash]` -> git juntará los mensajes de todos los commits a hacer squash y el commit de referencia.
|
||||||
|
|
||||||
|
Finalmente podemos hacer `git rebase -i --autosquash` y git eligirá las opciones necesarias a tomar en vez de tener que hacerlo de manera manual.
|
||||||
14
_master_wiki/03. Resources/Development/Git/Git.md
Normal file
14
_master_wiki/03. Resources/Development/Git/Git.md
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-13 22:36
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
tags:
|
||||||
|
- dev-tools
|
||||||
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 361 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
|
|
@ -0,0 +1,65 @@
|
||||||
|
# So You Think You Know Git Part 2 - DevWorld 2024
|
||||||
|
|
||||||
|
## Switch and Restore
|
||||||
|
|
||||||
|
Wrapper around the `checkout` command to make more sense. You can do:
|
||||||
|
|
||||||
|
- `git switch branch` instead of `git checkout bracnh`
|
||||||
|
- `git restore file.txt` instead of `git checkout file.txt`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Git Hooks
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
useful ones:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
uses:
|
||||||
|
|
||||||
|
- Commit message formatting
|
||||||
|
- package install
|
||||||
|
- update ctags
|
||||||
|
- submodule status
|
||||||
|
- tabs or spaces
|
||||||
|
- linting
|
||||||
|
- large files
|
||||||
|
- test passes
|
||||||
|
|
||||||
|
Helpers (installable external tools):
|
||||||
|
|
||||||
|
- pre-commits
|
||||||
|
- husky
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
|
||||||
|
run files through intermediates and diff that:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
echo '*.png diff=lexif' >> .gitattributes
|
||||||
|
git config diff.exif.textconv exiftool
|
||||||
|
```
|
||||||
|
|
||||||
|
## Fixup Commits
|
||||||
|
|
||||||
|
`git commit --fixup=<commit>`
|
||||||
|
`git rebase --autosquash`
|
||||||
|
|
||||||
|
## Rebasing Stacks
|
||||||
|
|
||||||
|
move dangling branches reference when doing a rebase
|
||||||
|
|
||||||
|
`git rebase --update-refs`
|
||||||
|
|
||||||
|
## Scaling Git
|
||||||
|
|
||||||
|
top level command `scalar`, it's only used to clone huge repositories.
|
||||||
|
|
||||||
|
## Worktrees
|
||||||
|
|
||||||
|
- working on more than one branch at a time
|
||||||
|
- provide a new working directory to each branch
|
||||||
|
|
||||||
|
|
||||||
24
_master_wiki/03. Resources/Development/Iframes.md
Normal file
24
_master_wiki/03. Resources/Development/Iframes.md
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:43
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
|
||||||
|
## How to make an Iframe 100% it's parent width while maintaining the aspect ratio
|
||||||
|
|
||||||
|
In this example, we need to wrap the iframe in a container class and provide the following styles:
|
||||||
|
|
||||||
|
```css
|
||||||
|
.container {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 56.25%;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:34
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
tags:
|
||||||
|
- dev-tools
|
||||||
|
---
|
||||||
|
## Revertir cambios
|
||||||
|
|
||||||
|
Si necesitamos _"deshacer"_ los cambios introducidos en uno o multiples commits, podemos utilizar `git revert --no-edit older_commit_hashˆ..newer_commit_hash`, donde:
|
||||||
|
|
||||||
|
- git realizará un nuevo commit con los cambios contrarios por cada commit en el rango
|
||||||
|
- utilizar `ˆ` en el `old_commit_hash` incluirá ese commit en la reversión de cambios, si no se agrega se empezará a revertir de un commit más adelante.
|
||||||
|
- `--no-edit` es utilizado para que git no nos pregunte por el message de cada nuevo commit
|
||||||
|
- primero debe ser el commit más antiguo, porque git creará nuevos commits en orden provisto y de hacerlo al revés aparecerán conflictos
|
||||||
|
- si solo se quiere revertir un commit, se puede especificar solo ese hash
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:35
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
# Buscar cuando un bug se introdujo
|
||||||
|
|
||||||
|
## Utilizar `git bisect`
|
||||||
|
|
||||||
|
`git bisect` hará un _"binary search"_ entre 2 commits, dejandonos señalar si este commit es _"bueno"_ (no tiene el bug) o _"malo"_ (tiene el bug), permitiendo encontrar el commit que introdujo el bug y facilitar encontrar la causa de este.
|
||||||
15
_master_wiki/03. Resources/Notetaking/12. Questions.md
Normal file
15
_master_wiki/03. Resources/Notetaking/12. Questions.md
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-10T18:24:25-03:00
|
||||||
|
modified: 2024-02-10T18:33:38-03:00
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
|
||||||
|
# 12. Questions
|
||||||
|
|
||||||
|
1. ¿Cómo puedo automatizar una tarea tediosa y/o que consume mucho tiempo?
|
||||||
|
2. ¿Cómo me puedo hacer la vida más sencilla?
|
||||||
|
|
||||||
|
|
||||||
|
> ‘You have to keep a dozen of your favorite problems constantly present in your mind, although by and large they will lay in a dormant state. Every time you hear or read a new trick or a new result, test it against each of your twelve problems to see whether it helps. Every once in a while there will be a hit, and people will say, “How did he do it? He must be a genius!”’
|
||||||
|
>
|
||||||
|
source: Tiago Forte, “[[Building a Second Brain]]”, p. 62
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 10:39
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
An Archipelago of Ideas separates the two activities your brain has the most difficulty performing at the same time: _choosing_ ideas (known as selection) and _arranging_ them into a logical flow (known as sequencing).
|
||||||
|
|
||||||
|
The goal of an archipelago is that instead of sitting down to a blank page or screen and stressing out about where to begin, **you start with a series of small stepping-stones to guide your efforts**. First you select the points and ideas you want to include in your outline, and then in a separate step, you rearrange and sequence them into an order that flows logically. This makes both of those steps far more efficient, less taxing, and less vulnerable to interruption.
|
||||||
|
|
||||||
|
To create an Archipelago of _Ideas_, you divergently gather a group of ideas, sources, or points that will form the backbone of your essay, presentation, or deliverable. Once you have a critical mass of ideas to work with, you switch decisively into convergence mode and link them together in an order that makes sense.
|
||||||
75
_master_wiki/03. Resources/Notetaking/CODE Method.md
Normal file
75
_master_wiki/03. Resources/Notetaking/CODE Method.md
Normal file
File diff suppressed because one or more lines are too long
10
_master_wiki/03. Resources/Notetaking/Dial down the scope.md
Normal file
10
_master_wiki/03. Resources/Notetaking/Dial down the scope.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 12:33
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
## Examples:
|
||||||
|
|
||||||
|
- If you want to write a book, you could dial down the scope and write a series of online articles outlining your main ideas. If you don’t have time for that, you could dial it down even further and start with a social media post explaining the essence of your message.
|
||||||
|
- If you want to deliver a workshop for paying clients, you could dial it down to a free workshop at a local meetup, or dial it down even further and start with a group exercise or book club for a handful of colleagues or friends.
|
||||||
|
- If you’d like to make a short film, start with a YouTube video, or if that’s too intimidating, a livestream. If it’s still too much, record a rough cut on your phone and send it to a friend.
|
||||||
|
- If you want to design a brand identity for a company, start with a mock-up of a single web page. Even easier, start with a few hand-drawn sketches with your ideas for a logo.
|
||||||
31
_master_wiki/03. Resources/Notetaking/Habits.md
Normal file
31
_master_wiki/03. Resources/Notetaking/Habits.md
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 11:14
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
# Habits to apply while notetaking process
|
||||||
|
|
||||||
|
In order to provide high quality work we need to be organized to be able to _go with the flow_ and have the less friction posible. But we cannot afford to stop everything in our life to organize our stuff, we need to continue delivering and taking care of the next _"important stuff"_ one after the other.
|
||||||
|
|
||||||
|
For this, we can borrow the _"mise en place"_ techniques of chef's:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
So, the following are habits to keep the [[second brain]] tied up while we are using it:
|
||||||
|
|
||||||
|
- [Project checklists](Project%20checklists.md)
|
||||||
|
- [Periodic reviews](Periodic%20reviews.md)
|
||||||
|
- Noticing other habits:
|
||||||
|
- Noticing that an idea you have in mind could potentially be valuable and capturing it instead of thinking, “Oh, it’s nothing.”
|
||||||
|
- Noticing when an idea you’re reading about resonates with you and taking those extra few seconds to highlight it.
|
||||||
|
- Noticing that a note could use a better title—and changing it so it’s easier for your future self to find it.
|
||||||
|
- Noticing you could move or link a note to another project or area where it will be more useful.
|
||||||
|
- Noticing opportunities to combine two or more Intermediate Packets into a new, larger work so you don’t have to start it from scratch.
|
||||||
|
- Noticing a chance to merge similar content from different notes into the same note so it’s not spread around too many places.
|
||||||
|
- Noticing when an IP that you already have could help someone else solve a problem, and sharing it with them, even if it’s not perfect.
|
||||||
|
|
||||||
|
## Some things to keep in mind:
|
||||||
|
|
||||||
|
- **There’s no need to capture every idea**; the best ones will always come back around eventually.
|
||||||
|
- **There’s no need to clear your inbox frequently**; unlike your to-do list, there’s no negative consequence if you miss a given note.
|
||||||
|
- **There’s no need to review or summarize notes on a strict timeline**; we’re not trying to memorize their contents or keep them top of mind.
|
||||||
|
- When organizing notes or files within PARA, it’s a **very forgiving decision of where to put something**, since search is so effective as a backup option.
|
||||||
|
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-20 19:52
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
# Intermediate Packages
|
||||||
|
|
||||||
|
> [...] there is a flaw in focusing only on the final results: all the intermediate work (the notes, the drafts, the outlines, the feedback) tends to be underappreciated and undervalued. The precious attention we invested in producing that in-between work gets thrown away, never to be used again.
|
||||||
|
>
|
||||||
|
> Source: Tiago Forte, “[[Building a Second Brain]]”, p. 150
|
||||||
|
|
||||||
|
intermediate packages can receive different names depending on who you ask:
|
||||||
|
|
||||||
|
- “Modules” or “features” in software development
|
||||||
|
- “Betas” tested by start-ups
|
||||||
|
- “Sketches” in architecture
|
||||||
|
- “Pilots” for television series
|
||||||
|
- “Prototypes” made by engineers
|
||||||
|
- “Concept cars” in auto design
|
||||||
|
- “Demos” in music recording
|
||||||
|
|
||||||
|
Each of these terms is the equivalent of a “rough draft” you create as part of the process of making something new.
|
||||||
|
|
||||||
|
Some kinds of intermediate packages are:
|
||||||
|
|
||||||
|
- **Distilled notes:** Books or articles you’ve read and distilled so it’s easy to get the gist of what they contain.
|
||||||
|
- **Outtakes:** The material or ideas that didn’t make it into a past project but could be used in future ones.
|
||||||
|
- **Work-in-process:** The documents, graphics, agendas, or plans you produced during past projects.
|
||||||
|
- **Final deliverables:** Concrete pieces of work you’ve delivered as part of past projects, which could become components of something new.
|
||||||
|
- **Documents created by others:** Knowledge assets created by people on your team, contractors or consultants, or even clients or customers, that you can reference and incorporate into your work.
|
||||||
|
|
||||||
|
These IP can be used to create others IP's or create a final product for a project.
|
||||||
|
|
||||||
|
## Benefits of working in IP's:
|
||||||
|
|
||||||
|
- You’ll become **interruption-proof** because you are focusing only on one small packet at a time.
|
||||||
|
- You’ll be able to make **progress in any span of time**.
|
||||||
|
- Intermediate Packets **increase the quality** of your work by allowing you to collect feedback more often.
|
||||||
|
- Eventually you’ll have so many IP's at your disposal that you can execute entire projects just by **assembling [previously created](Reuse%20previous%20work.md) IP's**.
|
||||||
|
|
||||||
|
## IP's Examples:
|
||||||
|
|
||||||
|
- Favorites or bookmarks saved from the web or social media
|
||||||
|
- Journal or diary entries with your personal reflections
|
||||||
|
- Highlights or underlined passages in books or articles
|
||||||
|
- Messages, photos, or videos posted on social media
|
||||||
|
- Slides or charts included in presentations
|
||||||
|
- Diagrams, mind maps, or other visuals on paper or in apps
|
||||||
|
- Recordings of meetings, interviews, talks, or presentations
|
||||||
|
- Answers to common questions you receive via email
|
||||||
|
- Written works, such as blog posts or white papers
|
||||||
|
- Documented plans and processes such as agendas, checklists, templates, or project retrospectives
|
||||||
13
_master_wiki/03. Resources/Notetaking/North Start.md
Normal file
13
_master_wiki/03. Resources/Notetaking/North Start.md
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-10T18:26:45-03:00
|
||||||
|
modified: 2024-02-10T18:32:53-03:00
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
|
||||||
|
# North Start
|
||||||
|
|
||||||
|
TODO
|
||||||
|
|
||||||
|
## 12. Questions
|
||||||
|
|
||||||
|
## Objectives
|
||||||
19
_master_wiki/03. Resources/Notetaking/PARA method.md
Normal file
19
_master_wiki/03. Resources/Notetaking/PARA method.md
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
---
|
||||||
|
id: 9b7a4283-0523-4536-b562-4df99cd32037
|
||||||
|
created: 2024-02-02T19:52:00-03:00
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
|
||||||
|
El método PARA es para un sistema de organización transversal a cualquier herramienta, ya sea física o digital.
|
||||||
|
|
||||||
|
1. Projects: Short-term efforts in your work or life that your're working on right now.
|
||||||
|
2. Areas: Long-term responsibilities you want to manage over time.
|
||||||
|
3. Resources: Topics or interest that may be useful in the future.
|
||||||
|
4. Archive: Inactive items from the other three categories.
|
||||||
|
|
||||||
|
The stuff inside each element can and should move between each category, and always should be put in the higher element because it's ordered by actionability.
|
||||||
|
|
||||||
|
This is an **organization method**, not a capture method. This mean we should not apply this when creating a note but at a later time (like a [[periodic reviews]]).
|
||||||
|
## Techniques
|
||||||
|
|
||||||
|
|
||||||
57
_master_wiki/03. Resources/Notetaking/Periodic reviews.md
Normal file
57
_master_wiki/03. Resources/Notetaking/Periodic reviews.md
Normal file
|
|
@ -0,0 +1,57 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 17:49
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
## Periodic reviews
|
||||||
|
|
||||||
|
Periodic reviews ac as a way of _checkpoint_ in which we review how life and work is going and try to reset our minds to allow us to continue to work.
|
||||||
|
|
||||||
|
This should be forgiving, doesn't bad happens if we miss a review day.
|
||||||
|
|
||||||
|
The purpose of a review vary: depending how often is done, the scope of it increase or reduce, as well as it's certainty.
|
||||||
|
## Weekly
|
||||||
|
|
||||||
|
The purpose of a weekly review is to provide a _reset point_: empty inboxes, glow up some notes and discard what's not relevant.
|
||||||
|
|
||||||
|
This are some actions to do on a weekly review:
|
||||||
|
|
||||||
|
- **Clear my email inbox**
|
||||||
|
- Review unread emails.
|
||||||
|
- Unsubscribe from spam emails.
|
||||||
|
- Move wanted subscriptions to read-later email.
|
||||||
|
- **Check my calendar**
|
||||||
|
- Upcoming events to attend this week.
|
||||||
|
- Following weeks events that I need to prepare to.
|
||||||
|
- **Clear frequent folders**
|
||||||
|
- Downloads
|
||||||
|
- Documents
|
||||||
|
- Drive
|
||||||
|
- **Clear my notes inbox**
|
||||||
|
- Batch process them all at once, making quick, intuitive decisions about which of the PARA folders each note might be relevant to. Don't think to hard about it.
|
||||||
|
- Don't process or summarize them, this is taxing, is better to do when I work on a specific topic and I need the note.
|
||||||
|
- **Choose my tasks for the week**
|
||||||
|
- Clear the inbox of the task manager.
|
||||||
|
- Choose the tasks I want/need to do this week.
|
||||||
|
- This should be the last step, so we have the information gathered in the previous ones in consideration.
|
||||||
|
|
||||||
|
## Monthly
|
||||||
|
|
||||||
|
Since the scope of this review is a little more broad, it's recommended to review how are you going in a more general way instead of the granular approach of the weekly review.
|
||||||
|
|
||||||
|
> It’s a chance to evaluate the big picture and consider more fundamental changes to your goals, priorities, and systems that you might not have the chance to think about in the busyness of the day-to-day.
|
||||||
|
>
|
||||||
|
> Tiago Forte, “[[Building a Second Brain]]”, p. 215
|
||||||
|
|
||||||
|
This are some actions to do on a monthly review:
|
||||||
|
|
||||||
|
- **Review and update my goals**
|
||||||
|
- What successes or accomplishments did I have?
|
||||||
|
- What went unexpectedly and what can I learn from it?
|
||||||
|
- **Review and update my project list**
|
||||||
|
- Archiving any completed or canceled projects
|
||||||
|
- Adding new projects
|
||||||
|
- Updating active projects to reflect how they’ve changed
|
||||||
|
- **Review my areas of responsibility**
|
||||||
|
- Decide if there’s anything I want to change or take action on
|
||||||
|
- **Review someday/maybe tasks**
|
||||||
|
- **Re prioritize tasks**
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-18 11:16
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
# Progresive Summarization
|
||||||
|
|
||||||
|
técnica para destilar notas y obtener la escencia sin perder el contenido original, permitiendo poder obtener tanto contexto como necesitemos en el momento de leerla.
|
||||||
|
|
||||||
|
Para aplicar esta técnica, debemos "destacar" multiples veces, y cada vez de manera más concisza el contenido de la nota, por ejemplo:
|
||||||
|
|
||||||
|
1. Conseguir las partes importantes de un articulo (usar read-later app)
|
||||||
|
2. Marcar en negrita
|
||||||
|
3. Destacar o poner en cursiva
|
||||||
|
4. hacer un 2º resumen de un par de frases, con mis propias palabras
|
||||||
|
|
||||||
|
Es importante destacar que no es necesario aplicar todos estos pasos, ni aplicarlos de una sola vez. Esta es una tarea que requiere tiempo y esfuerzo que no siempre vale la pena invertir.
|
||||||
|
|
||||||
|
Además recordar que no hay que destacar todo, porque si todo está destacado, entonces nada lo está realmente.
|
||||||
60
_master_wiki/03. Resources/Notetaking/Project checklists.md
Normal file
60
_master_wiki/03. Resources/Notetaking/Project checklists.md
Normal file
File diff suppressed because one or more lines are too long
10
_master_wiki/03. Resources/Notetaking/Reuse previous work.md
Normal file
10
_master_wiki/03. Resources/Notetaking/Reuse previous work.md
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-17 13:45
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
Para reutilizar trabajo previo desde el _second brain_ podemos utilizar las siguientes estrategias:
|
||||||
|
|
||||||
|
- Search notes by title or content
|
||||||
|
- Manually browse the vault
|
||||||
|
- Search through [[tags]]
|
||||||
|
- [[Serendipity]] (connection between ideas & notes). for obsidian this means follow the links between notes.
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 10:54
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
aliases:
|
||||||
|
- Motivation momentum
|
||||||
|
---
|
||||||
|
> [...] Hemingway was known for a particular writing strategy, which I call the “Hemingway Bridge.” He would always end a writing session only when he knew what came next in the story. Instead of exhausting every last idea and bit of energy, he would stop when the next plot point became clear. This meant that the next time he sat down to work on his story, he knew exactly where to start.
|
||||||
|
>
|
||||||
|
> Tiago Forte, “[[Building a Second Brain]]”, p. 186
|
||||||
|
|
||||||
|
You can think of a Hemingway Bridge as a bridge between the islands in your [Archipelago of Ideas](Archipelago%20of%20Ideas.md).
|
||||||
|
|
||||||
|
How do you create a Hemingway Bridge? Instead of burning through every last ounce of energy at the end of a work session, reserve the last few minutes to write down some of the following kinds of things in your digital notes:
|
||||||
|
|
||||||
|
- **Write down ideas for next steps:** At the end of a work session, write down what you think the next steps could be for the next one.
|
||||||
|
- **Write down the current status:** This could include your current biggest challenge, most important open question, or future roadblocks you expect.
|
||||||
|
- **Write down any details you have in mind that are likely to be forgotten once you step away:** Such as details about the characters in your story, the pitfalls of the event you’re planning, or the subtle considerations of the product you’re designing.
|
||||||
|
- **Write out your intention for the next work session:** Set an intention for what you plan on tackling next, the problem you intend to solve, or a certain milestone you want to reach.
|
||||||
11
_master_wiki/03. Resources/Notetaking/mise en place.md
Normal file
11
_master_wiki/03. Resources/Notetaking/mise en place.md
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 12:59
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
# Mise En Place
|
||||||
|
|
||||||
|
> [!cite]
|
||||||
|
> The preparations to cook, having the ingredients ready, such as cuts of meat, relishes, sauces, par-cooked items, spices, freshly chopped vegetables, and other components that are required for the menu and recipes ingredients measured out, washed, chopped and placed in individual bowls; and equipment such as spatulas and blenders prepared, and oven preheated.
|
||||||
|
|
||||||
|
|
||||||
|
Chefs can never afford to stop the whole kitchen just so they can clean up. They learn to keep their workspace clean and organized _in the flow of the meals they are preparing_. ^9aef88
|
||||||
41
_master_wiki/03. Resources/Notetaking/tags.md
Normal file
41
_master_wiki/03. Resources/Notetaking/tags.md
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
---
|
||||||
|
created: 2024-02-21 19:01
|
||||||
|
updated: 2024-03-12 13:49
|
||||||
|
---
|
||||||
|
Tagging is an advance technique from ancient times where the search capabilities of modern notes app didn't exist. Because of this (and other reasons) is nearly imposible to create an universal taxonomy to catalogue all of our notes.
|
||||||
|
|
||||||
|
For this reasons we can use tags as an extensions of our mine organization and relations systems ([PARA method](PARA%20method.md) and linking).
|
||||||
|
|
||||||
|
There are three practical approaches to tagging you can use as your Second Brain grows and matures. Each one follows the principle of actionability and answers an important question about the purpose of a given note:
|
||||||
|
|
||||||
|
1. **Create personalized tags for your use cases**. (How will my notes be used?)
|
||||||
|
2. **Use tags to track the progress of notes**. (How are my notes currently being used?)
|
||||||
|
3. **Tag notes retroactively and only as needed**. (How have my notes been used?)
|
||||||
|
|
||||||
|
You can use as few or as many of these techniques as you find helpful, or use them only for specific projects or areas that demand a higher level of rigor. Each tag you create should answer a question about the past, present, or future status of a note so you always know where it’s been and where it’s going.
|
||||||
|
|
||||||
|
## Create personalized tags for your use cases
|
||||||
|
|
||||||
|
if you already know how your notes are likely to be used - such as for
|
||||||
|
citations in a paper (_Source_), as evidence in a trial (_Evidence_), or as slides in a presentation (_Slides_) - it can be helpful to **tag your notes according to those uses cases**.
|
||||||
|
|
||||||
|
Ask yourself, _“What are the most common use cases for the content I capture?”_, here are a couple common examples:
|
||||||
|
|
||||||
|
- Tagging according to the final product a note will be used in: _Presentation_,
|
||||||
|
_Essay_, _Report_, _Website_, _Project plan_, _Meeting agenda_, or _Budget_
|
||||||
|
- Tagging according to the kind of information a note contains: _Arguments_,
|
||||||
|
_Theories_, _Frameworks_, _Evidence_, _Claim_, _Counterpoint_, or _Question_
|
||||||
|
## Use tags to track the progress of notes
|
||||||
|
|
||||||
|
As your collection of knowledge expands, at some point you may feel the need to **track their progress towards the outcomes you’re trying to create** in your life. You don’t need to remember the status of every note.
|
||||||
|
|
||||||
|
- Tagging according to its role in a project: _Meeting notes_, _Timeline_, _Budget_, _Decision_, _Action_, _Idea_, or _Objective_
|
||||||
|
- Tagging according to the current stage of their workflow: _Planned_, _In process_, _Waiting for approval_, _Reviewed_, _Approved_, _On hold_, or _Finished_
|
||||||
|
|
||||||
|
## Tag notes retroactively and only as needed
|
||||||
|
|
||||||
|
Digital information is incredibly malleable, and it is often easier to organize your notes retroactively than to try and guess upfront all the projects, areas, and resources you might eventually need.
|
||||||
|
|
||||||
|
Tags are useful when you want a **different way of “viewing” your notes**, without having to undertake a massive reorganization of your entire system
|
||||||
|
|
||||||
|
When you apply tags with a specific use case in mind, the tags you come up with will be far more concrete and actionable.
|
||||||
27
_master_wiki/03. Resources/Productivity/Time Blocking.md
Normal file
27
_master_wiki/03. Resources/Productivity/Time Blocking.md
Normal file
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
created: 2024-03-27 23:08
|
||||||
|
updated: 2024-03-27 23:29
|
||||||
|
---
|
||||||
|
Time blocking is a time management method that asks you to **divide your day into blocks of time**. Each block is dedicated to accomplishing a **specific task or group of tasks**, and only those specific tasks.
|
||||||
|
|
||||||
|
With days that are time blocked in advance, you **won’t have to constantly make choices about what to focus on**.
|
||||||
|
|
||||||
|
## types of time Block
|
||||||
|
|
||||||
|
### Time Blocking or Calendar Block
|
||||||
|
|
||||||
|
Set a timeframe to work on a specific tasks, this doesn't mean you need to finish it then, just that you'll work in this timeframe on this task and this task alone.
|
||||||
|
|
||||||
|
## Tasks batching
|
||||||
|
|
||||||
|
Group a bunch of small and similar tasks and allocate a timeframe to work on them, this is usefull to reduce the context switching.
|
||||||
|
|
||||||
|
### Day theming
|
||||||
|
|
||||||
|
task batching at a bigger scale, dedicate a whole day to a specific area.
|
||||||
|
|
||||||
|
### Time boxing
|
||||||
|
|
||||||
|
Is the same as time blocking, but this time we'll have to end the task withing the timeframe. This is to force you to produce something finished, ether by being really efficient or by reducing the scope of the tasks to something archivable. the idea is not to produce a mediocre product, but to **finish stuff**
|
||||||
|
|
||||||
|
This will align with [The cult of done](The%20cult%20of%20done.md) idea and that 80% completion of the task will use the same time/effort as the reminding 20%.
|
||||||
36
_master_wiki/97. Ideas/Data Science/README.md
Normal file
36
_master_wiki/97. Ideas/Data Science/README.md
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
---
|
||||||
|
created: 2024-06-09 16:28
|
||||||
|
updated: 2024-06-09 16:28
|
||||||
|
status: Backlog
|
||||||
|
---
|
||||||
|
# Data Science
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
- Estudiar cálculo, matemática y estadística para poder entender del tema
|
||||||
|
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the goal archived?
|
||||||
|
|
||||||
|
Yes/No, because of...
|
||||||
|
|
||||||
|
### What did go well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What did go wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
40
_master_wiki/97. Ideas/Frontend Framework/README.md
Normal file
40
_master_wiki/97. Ideas/Frontend Framework/README.md
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
---
|
||||||
|
created: 2024-06-22 12:15
|
||||||
|
updated: 2024-06-22 12:15
|
||||||
|
status: Backlog
|
||||||
|
date_created: Saturday, June 22nd 2024, 12:15:12 pm
|
||||||
|
date_modified: Saturday, June 22nd 2024, 12:16:41 pm
|
||||||
|
---
|
||||||
|
|
||||||
|
# Frontend Framework
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- [A DIY guide to build your own React](https://github.com/pomber/didact)
|
||||||
|
- [Frontend Framework](https://mfrachet.github.io/create-frontend-framework/)
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the Goal Archived?
|
||||||
|
|
||||||
|
Yes/No, because of…
|
||||||
|
|
||||||
|
### What Did Go Well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What Did Go Wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-21 12:05
|
||||||
|
updated: 2024-04-21 12:05
|
||||||
|
status: Backlog
|
||||||
|
---
|
||||||
|
|
||||||
|
# Frontmatter Query Language
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the Goal Archived?
|
||||||
|
|
||||||
|
Yes/No, because of…
|
||||||
|
|
||||||
|
### What Did Go Well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What Did Go Wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
42
_master_wiki/97. Ideas/Fuuka desktop client/README.md
Normal file
42
_master_wiki/97. Ideas/Fuuka desktop client/README.md
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
created: 2024-05-07 14:49
|
||||||
|
updated: 2024-05-07 14:49
|
||||||
|
status: Backlog
|
||||||
|
---
|
||||||
|
# Fuuka desktop client
|
||||||
|
|
||||||
|
Hacer un cliente, y solo cliente, para Fuuka en tauri?
|
||||||
|
|
||||||
|
- Simple: solo reproducir el stream, y solicitar canciones (chat si es que tiene)
|
||||||
|
- multi plataforma: con tauri podria hacer desktop + mobile (cuando salga de alpha)
|
||||||
|
- Reproducir en segundo plano
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the goal archived?
|
||||||
|
|
||||||
|
Yes/No, because of...
|
||||||
|
|
||||||
|
### What did go well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What did go wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
37
_master_wiki/97. Ideas/Phisics Engine (idea)/README.md
Normal file
37
_master_wiki/97. Ideas/Phisics Engine (idea)/README.md
Normal file
|
|
@ -0,0 +1,37 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-14 12:37
|
||||||
|
updated: 2024-04-15 20:56
|
||||||
|
status: Backlog
|
||||||
|
---
|
||||||
|
|
||||||
|
# Physics Engine
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
- Use [brilliant.org](http://brilliant.org) to lear physics for game dev
|
||||||
|
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the Goal Archived?
|
||||||
|
|
||||||
|
Yes/No, because of…
|
||||||
|
|
||||||
|
### What Did Go Well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What Did Go Wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
created: 2024-04-14 12:17
|
||||||
|
updated: 2024-04-15 20:56
|
||||||
|
status: Backlog
|
||||||
|
---
|
||||||
|
# Spotify Playlist Intersection
|
||||||
|
|
||||||
|
## Resources
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
## [Kickoff](Project%20checklists.md#Kickoff)
|
||||||
|
|
||||||
|
### Completion Criteria
|
||||||
|
|
||||||
|
This project will be completed when:
|
||||||
|
|
||||||
|
- [ ] #feat item
|
||||||
|
|
||||||
|
### Brainstorm
|
||||||
|
|
||||||
|
Repl que pregunte por 2 playlist en una lista (fzf???), luego encuentre las canciones que esten en ambas listas y prrguntar una por una
|
||||||
|
|
||||||
|
- mantener solo en playlist A
|
||||||
|
- mantener solo en playlist B
|
||||||
|
- Sacar de ambas
|
||||||
|
- escuchar (para reconocer canciones en japo)
|
||||||
|
|
||||||
|
Buscar canciones repetidas (misma canción pero en distinto album)??
|
||||||
|
## [Outtakes](Project%20checklists.md#Completion)
|
||||||
|
|
||||||
|
### Was the goal archived?
|
||||||
|
|
||||||
|
Yes/No, because of...
|
||||||
|
|
||||||
|
### What did go well?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
||||||
|
### What did go wrong?
|
||||||
|
|
||||||
|
- Item
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
# 17-Year-Old Student Exposes Germany's 'Secret' Pirate Site Blocklist
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Metadata
|
||||||
|
- Author: [[isaacfrond]]
|
||||||
|
- Full Title: 17-Year-Old Student Exposes Germany's 'Secret' Pirate Site Blocklist
|
||||||
|
- Category: #articles
|
||||||
|
- URL: https://torrentfreak.com/17-year-old-student-exposes-germanys-secret-pirate-site-blocklist-240822/
|
||||||
|
> [!tldr]
|
||||||
|
> A 17-year-old student in Germany has created a website to reveal the blocked pirate sites that major internet providers do not disclose. This initiative aims to increase transparency and address concerns about censorship related to copyright enforcement. The site, CUIIliste.de, lists 275 blocked domains, allowing users to see which sites are restricted.
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
watchdog - ([View Highlight](https://read.readwise.io/read/01j64wj1fy8b0dyhcdsjgv4vta))
|
||||||
|
> [!note]
|
||||||
|
> Watchdog: A term used to describe an individual or organization that monitors and oversees the actions of others, often to ensure accountability, transparency, and adherence to laws or regulations. Watchdogs play a critical role in various fields, including journalism, government, and environmental protection, by investigating misconduct, exposing corruption, and advocating for the public interest. Their function is essential in promoting ethical standards and fostering public trust in institutions.
|
||||||
|
> In the context of Isaac Frond's article, the term "watchdog" refers to individuals or organizations that monitor and ensure accountability regarding governmental or institutional actions, particularly in relation to transparency and rights. The lack of public knowledge about the blocked pirate sites in Germany has led to frustration among journalists and advocates, highlighting the need for oversight. The 17-year-old student, along with his friends, embodies this watchdog role by exposing the secretive blocklist, thereby promoting transparency and challenging potential overreach in copyright enforcement.
|
||||||
|
|
||||||
25
_master_wiki/Read Later/2023-10-12 - How to Learn Rust.md
Normal file
25
_master_wiki/Read Later/2023-10-12 - How to Learn Rust.md
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
---
|
||||||
|
id: 9f0419b3-2f89-4734-96b3-55aa984414ac
|
||||||
|
title: |
|
||||||
|
How to Learn Rust
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Youtube
|
||||||
|
- Youtube
|
||||||
|
date_added: 2023-10-12 17:55:48
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/how-to-learn-rust-18b25ac93bb
|
||||||
|
url_original: |
|
||||||
|
https://www.youtube.com/watch?v=2hXNd6x9sZs
|
||||||
|
---
|
||||||
|
|
||||||
|
# How to Learn Rust
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
<div class="page" id="readability-page-1">
|
||||||
|
<iframe data-omnivore-anchor-idx="1" width="619.4690265486726" height="350" src="https://www.youtube.com/embed/2hXNd6x9sZs" title="How to Learn Rust" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||||
|
<p data-omnivore-anchor-idx="2"><a data-omnivore-anchor-idx="3" href="https://www.youtube.com/watch?v=2hXNd6x9sZs" target="_blank">How to Learn Rust</a></p>
|
||||||
|
<p data-omnivore-anchor-idx="4" itemscope itemprop="author" itemtype="http://schema.org/Person">By <a data-omnivore-anchor-idx="5" href="https://www.youtube.com/@NoBoilerplate" target="_blank">No Boilerplate</a></p>
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,272 @@
|
||||||
|
---
|
||||||
|
id: 85f31880-6935-11ee-86f4-f7cb87ce263e
|
||||||
|
title: |
|
||||||
|
The Secret Power of ‘Read It Later’ Apps
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-10-12 16:28:29
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/the-secret-power-of-read-it-later-apps-18b255ca194
|
||||||
|
url_original: |
|
||||||
|
https://fortelabs.co/blog/the-secret-power-of-read-it-later-apps
|
||||||
|
---
|
||||||
|
|
||||||
|
# The Secret Power of ‘Read It Later’ Apps
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
> People who cling to paradigms (which means just about all of us) take one look at the spacious possibility that everything they think is guaranteed to be nonsense and pedal rapidly in the opposite direction. Surely there is no power, no control, no understanding, not even a reason for being, much less acting, in the notion or experience that there is no certainty in any worldview. But, in fact, everyone who has managed to entertain that idea, for a moment or for a lifetime, has found it to be the basis for radical empowerment. **If no paradigm is right, you can choose whatever one will help to achieve your purpose.**
|
||||||
|
|
||||||
|
> It is in this space of mastery over paradigms that people throw off addictions, live in constant joy, bring down empires, get locked up or burned at the stake or crucified or shot, and **have impacts that last for millennia**.
|
||||||
|
|
||||||
|
> In the end, it seems that mastery has less to do with pushing leverage points than it does with **strategically, profoundly, madly letting go.**
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> Read again and understand it better
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/the-secret-power-of-read-it-later-apps-18b255ca194#42edb9e2-3799-430e-bbff-db1170ebbad1)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
<DIV class="page" id="readability-page-1">
|
||||||
|
<div>
|
||||||
|
<div data-widget_type="theme-post-content.default" data-element_type="widget" data-id="5d9db16f">
|
||||||
|
<figure>
|
||||||
|
<figure>
|
||||||
|
<img src="https://proxy-prod.omnivore-image-cache.app/900x380,sXXV7f9Au3y4tF2zoOnAQ1G8Xnf3Uh8IRqZcfVY3HoSY/https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*rPXwIczUJRCE54v8FfAHGw.jpeg?resize=900%2C380&ssl=1" alt="" width="900" height="380" data-recalc-dims="1">
|
||||||
|
<figcaption> Image via Nuno Cruz </figcaption>
|
||||||
|
</figure>
|
||||||
|
<figcaption></figcaption>
|
||||||
|
</figure>
|
||||||
|
<p>
|
||||||
|
<em>By Tiago Forte of</em> <a href="http://fortelabs.co/" target="_blank" rel="noopener noreferrer"><em>Forte Labs</em></a>
|
||||||
|
</p>
|
||||||
|
<p> At the end of 2014 I received an email informing me that I had read over a million words in the ‘read it later’ app Pocket over the course of the year. </p>
|
||||||
|
<p>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/358x377,ssfZXhGmomcxzcD-VkrtnzD-6vk-rI8GUuXk4JlRMX2s/https://i0.wp.com/cdn-images-1.medium.com/max/600/1*Hd7YIhMrS5lldl1gDU8iWQ.png?resize=358%2C377&ssl=1" width="358" height="377" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/600/1*Hd7YIhMrS5lldl1gDU8iWQ.png?resize=358%2C377&ssl=1" data-recalc-dims="1">
|
||||||
|
</p>
|
||||||
|
<p> This number by itself isn’t impressive, considering our daily intake of information is equivalent to <a href="http://bits.blogs.nytimes.com/2009/12/09/the-american-diet-34-gigabytes-a-day/" target="_blank" rel="noopener noreferrer">34 gigabytes</a>, 100,000 words, or <a href="http://www.nytimes.com/2014/08/10/opinion/sunday/hit-the-reset-button-in-your-brain.html?smprod=nytcore-iphone&smid=nytcore-iphone-share" target="_blank" rel="noopener noreferrer">174 newspapers</a>, depending on who you ask. </p>
|
||||||
|
<p> What makes this number significant (in my view) is that it represents 22 books’-worth of long-form reading that would not have happened without a system in place. </p>
|
||||||
|
<p> We’ve made a habit of filling those hundred random spaces in our day with glances at Twitter, Instagram, and Facebook. But those glances have slowly become stares, and those stares have grown to encompass a major portion of our waking hours. </p>
|
||||||
|
<p> The end result is the same person who spends 127 hours per year on Instagram (the <a href="http://www.businessinsider.com/people-spend-21-minutes-per-day-on-instagram-2014-10" target="_blank" rel="noopener noreferrer">global average</a>) complains that she has “no time” for reading. </p>
|
||||||
|
<p> The fact is, <strong>the ability to read is becoming a source of competitive advantage in the world</strong>. </p>
|
||||||
|
<p> I’m not talking about basic literacy. What has become exceedingly scarce (and therefore, valuable) is the physical, emotional, attentional, and mental capability to sit quietly and direct focused attention for sustained periods of time. </p>
|
||||||
|
<p> A <a href="https://hbr.org/2005/01/overloaded-circuits-why-smart-people-underperform" target="_blank" rel="noopener noreferrer">recent article</a> in the Harvard Business Review puts a name to this new neurological phenomenon: Attention Deficit Trait. Basically, the terms ADD and ADHD are falling out of use because effectively the entire population fits the diagnostic criteria. It’s not a condition anymore, it’s a <em>trait</em> — the inherent and unavoidable experience of modern life characterized by “distractibility, inner frenzy, and impatience.” </p>
|
||||||
|
<form action="https://app.convertkit.com/forms/1022733/subscriptions" method="post" data-sv-form="1022733" data-uid="308d24305b" data-format="inline" data-version="5" min-width="400 500 600 700">
|
||||||
|
<div data-style="full">
|
||||||
|
<p><img src="https://proxy-prod.omnivore-image-cache.app/0x0,sCKKsi_KsyhXjSRvn7hvFRJEjLKQkBiJU0agepFckkI4/https://embed.filekitcdn.com/e/oP2q5jihy5hj474ZFtvPjw/3edWskTMDwFhuVEtauLv5X"></p>
|
||||||
|
<p> Start Building Your Second Brain </p>
|
||||||
|
<p> Subscribe below to learn more about the next cohort of the Building a Second Brain course </p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<h3> Read It. Later. </h3>
|
||||||
|
<p> Before I explain the massive, under-appreciated benefits these apps provide, and how to use them most effectively, a quick primer in case you’re unfamiliar. </p>
|
||||||
|
<p> So-called “Read It Later” apps give you the ability to “save” content on the web for later consumption. They are essentially advanced bookmarking apps, pulling in the content from a page to be read or viewed in a cleaner, simpler visual layout. </p>
|
||||||
|
<p> On top of that core function they add features like favoriting, tags, search, cross-platform syncing, recommended content, offline viewing, and archiving. The most popular options are: </p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<a href="https://www.instapaper.com/" target="_blank" rel="noopener noreferrer">Instapaper</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://getpocket.com/a/" target="_blank" rel="noopener noreferrer">Pocket</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://chrome.google.com/webstore/detail/send-to-kindle-for-google/cgdjpilhipecahhcilnafpblkieebhea?hl=en" target="_blank" rel="noopener noreferrer">Send to Kindle</a> (for sending articles to your Kindle)
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="https://feedly.com/i/welcome" target="_blank" rel="noopener noreferrer">Feedly</a> (for those RSS fans)
|
||||||
|
</li>
|
||||||
|
<li>and <a href="https://support.apple.com/en-us/HT200294" target="_blank" rel="noopener noreferrer">Safari’s built-in “Add to Reading List” feature</a>. </li>
|
||||||
|
</ul>
|
||||||
|
<p> The app I use, Pocket, adds a button to the Chrome toolbar that looks like this: </p>
|
||||||
|
<figure>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/130x58,syYiQlMJ3hP3JyGS_AYz8D5Oq9FZ1QxR2ef29Fia7Ht0/https://i0.wp.com/cdn-images-1.medium.com/max/800/1*Lk-DPDFjLslM4h2GAv8KIA.png?resize=130%2C58&ssl=1" alt="" width="130" height="58" data-image-id="1*Lk-DPDFjLslM4h2GAv8KIA.png" data-width="130" data-height="58" data-recalc-dims="1">
|
||||||
|
<figcaption> Chrome toolbar </figcaption>
|
||||||
|
</figure>
|
||||||
|
<p>
|
||||||
|
<em>Note: at time of writing, I was using Pocket, but have recently switched to Instapaper because of Pocket’s “Share to Evernote” bug mentioned below.</em>
|
||||||
|
</p>
|
||||||
|
<p> Clicking the button while viewing a webpage turns the button pink, and saves the page to your “list.” Navigating to getpocket.com, or opening the Pocket app on your computer or mobile device shows you a list of everything you’ve saved: </p>
|
||||||
|
<figure>
|
||||||
|
<figure>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/800x507,smjUUrOduWv7T0bCSx9oh_Ag0Yasq_HyFfgAoDXryOcM/https://i0.wp.com/cdn-images-1.medium.com/max/800/1*wkKD4oP3-kWJERxmBBI2cA.png?resize=800%2C507&ssl=1" alt="" width="800" height="507" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/800/1*wkKD4oP3-kWJERxmBBI2cA.png?resize=800%2C507&ssl=1" data-recalc-dims="1">
|
||||||
|
<figcaption> Mac desktop client </figcaption>
|
||||||
|
</figure>
|
||||||
|
<p> You can also view your list in a “tile” layout on the web, making it into essentially a personalized magazine. Personalized, in this case, not by a cold, unfeeling algorithm, but by your past self: </p>
|
||||||
|
</figure>
|
||||||
|
<figure>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/800x478,sFjAZnzFiVzsVRlXF9QyD5dq_jzT69dsyyp3Bb-k5ZGU/https://i0.wp.com/cdn-images-1.medium.com/max/800/1*ug06oorCHGFpEzMyl9kfhg.png?resize=800%2C478&ssl=1" alt="" width="800" height="478" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/800/1*ug06oorCHGFpEzMyl9kfhg.png?resize=800%2C478&ssl=1" data-recalc-dims="1">
|
||||||
|
<figcaption> Web browser “tile” view </figcaption>
|
||||||
|
</figure>
|
||||||
|
<p> Marking an item as read in one version of the app will quickly sync across all platforms. It will also save your current progress on one device, so you can continue where you left off on a different device (for those longer pieces). </p>
|
||||||
|
<h3> The highest leverage point in a system is in the intake — the initial assumptions and paradigms that inform its development </h3>
|
||||||
|
<p> I’ve <a href="https://medium.com/forte-labs/how-to-use-evernote-for-your-creative-workflow-f048f0aa3ed1" target="_blank" rel="noopener noreferrer">written previously</a> about how to use Evernote as a general reference filing system, not only to stay organized but to inspire creativity. </p>
|
||||||
|
<p> But I didn’t address a key question when creating any workflow: how and from where does information enter the system? The quality of a workflow’s outputs is fundamentally limited by the quality of its inputs. Garbage in, garbage out. </p>
|
||||||
|
<p> There are A LOT of ways we could talk about to improve the quality of the information you consume. But I want to focus now on the two that Read It Later apps can help with: </p>
|
||||||
|
<ol>
|
||||||
|
<li>Increasing consumption of long-form content (which is presumably more substantive) </li>
|
||||||
|
<li>Better filtering </li>
|
||||||
|
</ol>
|
||||||
|
<h3> #1 | Increasing Consumption of Long-Form Content </h3>
|
||||||
|
<p> In order to consume good ideas, first you have to consume many ideas. </p>
|
||||||
|
<p> This is the fundamental flaw in the “information diet” advice from Tim Ferriss and others: strong filters work best on a larger initial flow. Using your friends as your primary filter for new ideas ensures you remain the dumbest person in the room, and contribute nothing to the conversation. </p>
|
||||||
|
<p> The problem is that our entire digital world is geared toward snackable chunks of low-grade information — photos, tweets, statuses, snaps, feeds, cards, etc. To fight the tide you have to redesign your environment — you have to create affordances. </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> Affordance (n.): a relation between an object and an organism that, through a collection of stimuli, <strong>affords the opportunity for that organism to perform an action.</strong>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<p> Let’s look at the 4 main barriers to consuming long-form content, and the affordances that Read It Later apps use to overcome them: </p>
|
||||||
|
<h4> 1. App performance </h4>
|
||||||
|
<p> We know that the most infinitesimal delays in the loading time of a webpage will dramatically impact how many people stay on the page. <a href="https://blog.kissmetrics.com/speed-is-a-killer/" target="_blank" rel="noopener noreferrer">Google found</a> that increasing the number of results per page from 10 to 30 took only half a second longer, but <strong>caused 20% of people to drop off</strong>. </p>
|
||||||
|
<p> If you think your behavior is not affected by such trivialities, think again. Even on a subconscious level, you will resist even opening apps that don’t reward you with snappy response times. Which is a problem because the apps most people turn to for reading are either ebook apps like iBooks and Kindle, or web browsers like Chrome and Safari. I’m not sure which category is slower, but they’re both abysmal. </p>
|
||||||
|
<p> Meanwhile, your snaps and instas refresh at precog-like speeds. </p>
|
||||||
|
<p> Read It Later apps, by slurping in content (articles, videos, slideshows) into a clean interface, eliminate the culprits — ads, site analytics, popups — all the stuff you don’t care about. </p>
|
||||||
|
<p> A <a href="http://www.nytimes.com/2015/10/01/technology/personaltech/ad-blockers-mobile-iphone-browsers.html" target="_blank" rel="noopener noreferrer">recent analysis</a> by The New York Times of 3 leading ad-blockers (which have the same effect) measured a <strong>21% increase in battery life</strong>, and in the most egregious case of Boston.com, a drop in loading time <strong>from 33 seconds to 7 seconds</strong>. Many other leading sites were not that far off. </p>
|
||||||
|
<figure>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/563x365,sFABKoLfIzSHIwYCEllG7t2i-uxewZOlI9ALe6-KJLSs/https://i0.wp.com/cdn-images-1.medium.com/max/800/1*vfmR5LKEjfx-0Lx-kWb4bw.png?resize=563%2C365&ssl=1" alt="" width="563" height="365" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/800/1*vfmR5LKEjfx-0Lx-kWb4bw.png?resize=563%2C365&ssl=1" data-recalc-dims="1">
|
||||||
|
<figcaption> Effect of ad-blocker on loading times of Boston.com, via <a href="http://www.nytimes.com/2015/10/01/technology/personaltech/ad-blockers-mobile-iphone-browsers.html" target="_blank" rel="noopener noreferrer">NYT</a>
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
<p> Yeah that’s pretty much an eternity in mobile behavior land. </p>
|
||||||
|
<h4> 2. Matching content with your context </h4>
|
||||||
|
<figure>
|
||||||
|
<figure>
|
||||||
|
<img loading="lazy" src="https://proxy-prod.omnivore-image-cache.app/507x676,sxG7LpsFKxnoEDDIOpwI06zJ3e8CoE30WZseOtRT8u6s/https://i0.wp.com/cdn-images-1.medium.com/max/600/1*N15BlTDGq8kTc7HdGUmShA.png?resize=507%2C676&ssl=1" alt="" width="507" height="676" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/600/1*N15BlTDGq8kTc7HdGUmShA.png?resize=507%2C676&ssl=1" data-recalc-dims="1">
|
||||||
|
<figcaption> My Pocket list on iPad </figcaption>
|
||||||
|
</figure>
|
||||||
|
</figure>
|
||||||
|
<p> Much of the time when we pull out our phone, we’re looking for something to match our mood (or energy, or time available, or other context). We use our constellation of shiny apps as mood regulators and self-soothers, as time-fillers and boredom-suppressors, for better or worse. </p>
|
||||||
|
<p> So you need a little entertainment, and you open…an ebook? Yeah right. Monochrome pages don’t attract you. They don’t draw you in. </p>
|
||||||
|
<p> Pocket gives reading some of this stimulatory pleasure by laying out your list in a pleasing, magazine-style layout (at left). Not only is it generally attractive, but it gives you that same magazine-flipping pleasure of engaging with something that interests you <em>right in that moment</em>. </p>
|
||||||
|
<p> David Allen puts it this way: </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> “It’s practical to have organized reading material at hand when you’re on your way to a meeting that may be starting late, a seminar that may have a window of time when nothing is going on, a dentist appointment that may keep you waiting, or, of course, if you’re going to have some time on a train or plane. Those are all great opportunities to browse and work through that kind of reading. People who don’t have their Read/Review material organized can waste a lot of time, since <strong>life is full of weird little windows when it could be used.</strong>” </p>
|
||||||
|
</blockquote>
|
||||||
|
<p> You’re not fighting your impulses forcing yourself to read a dense tome after a long work day. Willpower preserved ✓ </p>
|
||||||
|
<h4> 3. Asynchronous reading </h4>
|
||||||
|
<p> This is one of the least understood barriers to reading in our fragmented timescape. </p>
|
||||||
|
<p> There is something deeply, deeply unsatisfying about repeatedly starting something and not finishing it. This is what we experience all day at work, being continuously interrupted by a stream of “emergencies.” The last thing we want after a stressful day starved of wins is to fail even at reading an article. </p>
|
||||||
|
<p> The <a href="https://www.amazon.com/Getting-Things-Done-Stress-Free-Productivity-ebook/dp/B00KWG9M2E/ref=as_li_ss_tl?ie=UTF8&linkCode=ll1&tag=fortelabs07-20&linkId=fe6db72d8e5bbb38b1ea43241924f7e9&language=en_US" target="_blank" rel="noopener noreferrer">2015 revised edition (affiliate link)</a> of <em>Getting Things Done</em> <a href="http://users.wfu.edu/masicaej/MasicampoBaumeister2011JPSP.pdf" target="_blank" rel="noopener noreferrer">cites the work</a> of Dr. Roy Baumeister, who has shown that “uncompleted tasks take up room in the mind, which then limits clarity and focus.” The risk of cognitive dissonance at not being able to finish a long article (much less a book) keep us from even beginning it. </p>
|
||||||
|
<p> Read It Later apps address this by simply saving your progress in a given article, allowing you to pick back up at a different time, or on a different device, and clearly marking items as “read” once you’re finished. </p>
|
||||||
|
<h4> 4. Focus </h4>
|
||||||
|
<p> A common response when I recommend people adopt <em>yet another</em> category of apps is “Why don’t I just use Evernote?” Or whatever app they’re using for general reference or task management. Evernote even makes a Chrome extension called <a href="https://evernote.com/clearly/" target="_blank" rel="noopener noreferrer">Clearly</a> for reading online content and <a href="https://evernote.com/webclipper/?downloaded" target="_blank" rel="noopener noreferrer">Web Clipper</a> for saving it. </p>
|
||||||
|
<p> It is a question of focus. Why don’t you use your task manager to keep track of content (i.e. “Read this article”)? Because the last thing you want to see when you cuddle up with your hot cocoa for some light reading is the hundreds of tasks you’re not doing. </p>
|
||||||
|
<p> Likewise, the last thing you want to see when you (finally!) have time to read is the thousands of notes you’ve collected from every corner of the universe, only some of which you haven’t read, only some of which you <em>want</em> to read, only some of which are <em>meant</em> to be read. </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> Actionable info ≠ Reference info ≠ To Read pile </p>
|
||||||
|
</blockquote>
|
||||||
|
<p> Ergo, </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> Task manager ≠ Evernote ≠ Pocket </p>
|
||||||
|
</blockquote>
|
||||||
|
<h3> #2 | Better filtering </h3>
|
||||||
|
<p> Now you’ve got the funnel filled. It’s time to narrow it. </p>
|
||||||
|
<p> Most advice on this topic focuses on being more selective about your sources. Cutting out the email digests that just throw you off track, unfollowing people posting crap, or even <a href="https://chrome.google.com/webstore/detail/ad-replacer-turn-spammy-a/eckeeomlpacfhejaameopnmgipghaoam" target="_blank" rel="noopener noreferrer">directly replacing ads with quality sources</a>. </p>
|
||||||
|
<p> The problem is that this assumes you are always at your best, always at 100% self-discipline, totally aligned with your life values, priorities ship shape. </p>
|
||||||
|
<p> Yeah. </p>
|
||||||
|
<p> In the moment, with your blood sugar at a negative value and every fiber of your being screaming for a dopamine hit, <em>of course</em> that Buzzfeed article seems like the best conceivable use of your time. If you think you can permanently seal off your life from the celebrity news, content marketing, and spammy friends that dominate the web, the NSA has a job for you. </p>
|
||||||
|
<p> Procrastination is the most powerful force in the universe. <em>It will find a way.</em>
|
||||||
|
</p>
|
||||||
|
<p> I have a different approach: <strong>waiting periods</strong>. Every time I come across something I may want to read/watch, I’m totally allowed to. No limits! The only requirement is I have to save it to Pocket, and then choose to consume it at a later time. </p>
|
||||||
|
<p> I’ve found that even just clicking a link to open the URL, in order to save it to Pocket, is too much of a temptation. The first glimpse of a cute GIF and I’m off to Reddit, completely forgetting my morning email session. </p>
|
||||||
|
<p> So instead I just <strong>command-click</strong> every link I’m interested in (or <strong>right-click > Open link in new tab</strong>), which opens each link in a separate tab <em>without taking me to that tab</em>. </p>
|
||||||
|
<p> Here’s what a typical Monday morning link-fest looks like, just from email: </p>
|
||||||
|
<p>
|
||||||
|
<img src="https://proxy-prod.omnivore-image-cache.app/0x0,s6KkWg-OdGcQNuvOShcztrmaslDz3Cm5o9rD1eDOxxRc/https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*cLy09F0SPJJmi0WfazXi3Q.png?w=900&ssl=1" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/2000/1*cLy09F0SPJJmi0WfazXi3Q.png?w=900&ssl=1" data-recalc-dims="1">
|
||||||
|
</p>
|
||||||
|
<p> Then, because I’m still in <strong>collection mode</strong>, not in read mode, I cycle through each tab one at a time (<strong>shift-command-}</strong> or <strong>control-tab</strong>), saving each one to Pocket using the shortcut I set up: <strong>command-p</strong> (chosen for irony and to avoid inadvertent printing). </p>
|
||||||
|
<p> There’s only one rule: <strong>NO READING OR WATCHING!</strong>
|
||||||
|
</p>
|
||||||
|
<p> Bringing this back to filtering, not only am I saving time and preserving focus by batch processing both the collection and the consumption of new content, I’m <strong>time-shifting the curation process</strong> to a time better suited for reading, and (most critically) removed from the temptations, stresses, and biopsychosocial hooks that first lured me in. </p>
|
||||||
|
<p> I am always amazed by what happens: no matter how stringent I was in the original collecting, no matter how certain I was that this thing was worthwhile, I <strong>regularly eliminate 1/3 of my list before reading</strong>. The post that looked SO INTERESTING when compared to that one task I’d been procrastinating on, in retrospect isn’t even something I care about. </p>
|
||||||
|
<p> What I’m essentially doing is creating a buffer. Instead of pushing a new piece of info through from intake to processing to consumption without any scrutiny, I’m creating a pool of options drawn from a longer time period, which allows me to make decisions from a higher perspective, where those decisions are much better aligned with what truly matters to me. </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> Remove any feature, process, or effort that does not directly contribute to the learning you seek. — Eric Ries, The Leader’s Guide </p>
|
||||||
|
</blockquote>
|
||||||
|
<p> Here’s a visual of how this works, from my Pocket analytics: </p>
|
||||||
|
<p>
|
||||||
|
<img src="https://proxy-prod.omnivore-image-cache.app/0x0,stGbUueP6GB86OSUIreA-v1CvD10SF4A-ecLznSBpGQc/https://i0.wp.com/cdn-images-1.medium.com/max/800/1*YRExWXbhPma8-AcWP_KSrw.png?w=900&ssl=1" data-src="https://i0.wp.com/cdn-images-1.medium.com/max/800/1*YRExWXbhPma8-AcWP_KSrw.png?w=900&ssl=1" data-recalc-dims="1">
|
||||||
|
</p>
|
||||||
|
<p> You can see that I save more things toward the beginning of the week and the weekend, and then draw down the buffer more towards the end of the week. </p>
|
||||||
|
<p>
|
||||||
|
<strong><em>/sidebar</em></strong>
|
||||||
|
</p>
|
||||||
|
<p> Imagine for a second if we could do this with everything. On Saturday morning, well-rested and wise, you retroactively decide everything you <em>want to have done</em> during the previous week. Anything you decide was not worthwhile, you <em>get that time back</em>. </p>
|
||||||
|
<p> I experienced this recently with email — after returning from a 10-day meditation course during which I was completely off the grid, I was surprised to notice it took only 1.9 hours to process almost 2 weeks’ worth of email (I track these things). I normally spend on average 2.19 hours on email <strong>per week</strong> —<em> what happened to those extra 2.48 hours?!</em> Besides the gains from batch processing such a large quantity of emails at once, I believe the main factor was that I evaluated my emails from a longer time horizon and higher perspective, more correctly judging whether something was worth responding to or acting on. </p>
|
||||||
|
<p> If only this method would scale. </p>
|
||||||
|
<p>
|
||||||
|
<strong>/end_sidebar</strong>
|
||||||
|
</p>
|
||||||
|
<h3> Mo’ apps, mo’ problems </h3>
|
||||||
|
<p> There are drawbacks, which I’ve glossed over until now. The two main ones: </p>
|
||||||
|
<h4> 1. Formatting issues </h4>
|
||||||
|
<p> Many sites, including popular ones, aren’t presented correctly within the Pocket app (and I imagine others). There’s always the option of opening the link in a web browser, but this eliminates all the positive affordances and then some. If there wasn’t so much value provided otherwise, this would be a deal breaker. </p>
|
||||||
|
<p> The worst part is that, sometimes, the article is cut off or links don’t appear <em>without any indication that something is amiss</em>. On Tim Ferriss’ blog, for example, links (of which there are many) are simply removed. </p>
|
||||||
|
<p> One solution is to tag problematic items with “desktop” so you know that these need to be read/viewed on your computer. </p>
|
||||||
|
<h4> 2. Dependence </h4>
|
||||||
|
<p> Every productivity tool eventually becomes a victim of its own success. In this case, I’ve become so dependent on Pocket that bugs really affect me. </p>
|
||||||
|
<p> For example, the Share to Evernote feature, which I use to highlight and save key passages, has been broken for at least a month. My hysterical tweets to Pocket Support have been answered but not resolved. </p>
|
||||||
|
<p> You wouldn’t think such a minor feature within one app could be so disruptive, but it has been massively so. This simple workflow: </p>
|
||||||
|
<p>
|
||||||
|
<em>Highlight > Share > Share to Evernote > Save</em>
|
||||||
|
</p>
|
||||||
|
<p> …has been replaced with this: </p>
|
||||||
|
<p>
|
||||||
|
<em>Highlight > Copy > Switch to Evernote > New note > Paste > Switch back to Pocket > Share > More > Copy URL > Switch back to Evernote > Paste URL > Switch back to Pocket</em>
|
||||||
|
</p>
|
||||||
|
<p> Worse, I often forget to go back and grab the URL, so I have to hunt it down at some later date. </p>
|
||||||
|
<p>
|
||||||
|
<strong>/rant_over</strong>
|
||||||
|
</p>
|
||||||
|
<h3> Progress Traps and Paradigms </h3>
|
||||||
|
<p> The amount of information in the world is a <a href="https://en.wikipedia.org/wiki/Progress_trap" target="_blank" rel="noopener noreferrer">progress trap</a>. Too much stuff to read is just as limiting as too little. </p>
|
||||||
|
<p> As the inimitable Venkatesh Rao <a href="http://breakingsmart.com/season-1/" target="_blank" rel="noopener noreferrer">has written</a>, we’re moving from a world of <strong>containers</strong> (companies, departments, semesters, packages, silos) to a world of <strong>streams</strong> (social networks, info feeds, main streets of thriving cities, Twitter). Problems and opportunities alike resist having neat little boxes drawn around them. There’s way too much to absorb. Way too much to even guess what you don’t know. </p>
|
||||||
|
<p> As the pace of change in the world accelerates, we double down on all the methods that created the problems in the first place — more planning, more forecasting, more control and risk management. We’re left with massive institutions that nobody trusts, that are simultaneously brittle and too-big-to-fail, creating precarity at every level of the socioeconomic pyramid. </p>
|
||||||
|
<p> What would it look like instead to solve problems (and explore opportunities) in a way that gets better the faster we go? </p>
|
||||||
|
<p> I can’t do justice to Rao’s blog series linked above (it’s in 20 parts — may want to save it for later ;), but the first step he proposes is “exposing yourself to as many different diverse streams as possible.” </p>
|
||||||
|
<p> When you’re immersed in a stream, the faster it goes, the more novel perspectives and ideas you’re exposed to. You develop an <a href="http://rogerlmartin.com/lets-read/the-opposable-mind" target="_blank" rel="noopener noreferrer">opposable mind</a> — the ability to juggle and play around with different perspectives on any issue, instead of seeing it through one lens. </p>
|
||||||
|
<p> Increasingly, the only metric that will matter in your journey of personal growth will be <strong>ROL: Rate-of-Learning</strong>. We’ve heard a lot in recent years about the importance of hands-on learning and practical experimentation. We get it. Burying your head in a book by itself gets you nowhere. </p>
|
||||||
|
<p> But the pendulum is swinging too far in that direction. Yes, you can be <em>too</em> action-oriented. Ideas, while cheap when compared to effective execution, are still more valuable than many of the other things we spend time on. </p>
|
||||||
|
<p> There’s another way to learn faster: assimilate and build on the ideas of others. Sure, you won’t understand every tacit lesson their experience gave them, but you can incorporate many of them, and in a fraction of the time it would take you to make every mistake yourself. </p>
|
||||||
|
<p> Ideas are high leverage agents. They become more so when arranged in highly cross-referenced networks. The only tool we have available that is capable of both creating and accessing these networks on demand is the human brain. </p>
|
||||||
|
<p> I lied before. There is one form of leverage even more powerful than the initial assumptions and paradigms that inform a system’s development: the <strong>ability to transcend paradigms</strong>. </p>
|
||||||
|
<p> I can’t put it any better than Donella Meadows, in her <a href="http://www.donellameadows.org/archives/leverage-points-places-to-intervene-in-a-system/" target="_blank" rel="noopener noreferrer">seminal piece</a> on complex systems: </p>
|
||||||
|
<blockquote>
|
||||||
|
<p> People who cling to paradigms (which means just about all of us) take one look at the spacious possibility that everything they think is guaranteed to be nonsense and pedal rapidly in the opposite direction. Surely there is no power, no control, no understanding, not even a reason for being, much less acting, in the notion or experience that there is no certainty in any worldview. But, in fact, everyone who has managed to entertain that idea, for a moment or for a lifetime, has found it to be the basis for radical empowerment. <strong>If no paradigm is right, you can choose whatever one will help to achieve your purpose.</strong>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p> It is in this space of mastery over paradigms that people throw off addictions, live in constant joy, bring down empires, get locked up or burned at the stake or crucified or shot, and <strong>have impacts that last for millennia</strong>. </p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p> In the end, it seems that mastery has less to do with pushing leverage points than it does with <strong>strategically, profoundly, madly letting go.</strong>
|
||||||
|
</p>
|
||||||
|
</blockquote>
|
||||||
|
<p> Reading is the closest thing we have to thinking another’s thoughts. It’s long and sometimes ponderous, but that work is required to wrap yourself in another person’s paradigm. Which is the first step in madly letting go of your own. </p>
|
||||||
|
<p> The amazing thing about ideas is that it takes zero time for one to change your paradigm. It happens in time, but takes no time, like an inter-dimensional wormhole, one entangled particle in your brain mirroring its twin across a chasm even more vast than the universe — the chasm between two minds. </p>
|
||||||
|
<p> And that is the secret power of Read It Later apps. </p>
|
||||||
|
<p>
|
||||||
|
<strong>P.S.</strong> <em>My latest setup has 2 parts: 1) using</em> <a href="https://ifttt.com/recipes/182352-instpaper-to-evernote" target="_blank" rel="noopener noreferrer"><em>this IFTTT recipe</em></a> <em>to automatically send “liked” articles in Instapaper to an Evernotebook called “Instapaper favorites” (for things I want to save in general but don’t have any particular notes on), and 2)</em> <a href="https://ifttt.com/recipes/368728-send-instapaper-highlights-to-evernote-default-notebook" target="_blank" rel="noopener noreferrer"><em>this recipe</em></a> <em>that saves anything I highlight in Instapaper to a new note, and sends it to the Evernote default notebook where I can decide where it belongs later (for when I have specific passages I want to extract)</em>
|
||||||
|
</p>
|
||||||
|
<hr>
|
||||||
|
<p><em><strong>Subscribe below to receive free weekly emails with our best new content, or follow us on <a href="https://twitter.com/fortelabs/">Twitter</a>, <a href="https://www.facebook.com/fortelabs/">Facebook</a>, <a href="https://www.instagram.com/fortelabsco/">Instagram</a>, <a href="https://www.linkedin.com/in/tiagoforte/">LinkedIn</a>, or <a href="https://www.youtube.com/user/simulacrumsquared/">YouTube</a>. Or become a <a href="https://fortelabs.co/about-praxis/">Praxis member</a> to receive instant access to our full collection of members-only posts.</strong></em></p>
|
||||||
|
<form action="https://app.convertkit.com/forms/1022693/subscriptions" method="post" data-sv-form="1022693" data-uid="c4407a2f08" data-format="inline" data-version="5" min-width="400 500 600 700">
|
||||||
|
<div data-style="full">
|
||||||
|
<p><img src="https://proxy-prod.omnivore-image-cache.app/0x0,sqWznQTJOu8MLbN_KvWQgeSkhwNPdvLRWTom32MHspAE/https://embed.filekitcdn.com/e/oP2q5jihy5hj474ZFtvPjw/pkwszL6w2hsV41vY6MLfdR"></p>
|
||||||
|
<p> Join the Forte Labs Newsletter </p>
|
||||||
|
<p> Join 50,000+ people receiving my best ideas on learning, productivity & knowledge management every Tuesday. I'll send you my Top 10 All-Time Articles right away as a thank you. </p>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
<div data-widget_type="post-info.default" data-element_type="section" data-id="60a66d24">
|
||||||
|
<ul>
|
||||||
|
<li itemprop="about">
|
||||||
|
<span><span>POSTED IN:</span> <span><a href="https://fortelabs.co/blog/category/topics/building-a-second-brain/">Building a Second Brain</a>, <a href="https://fortelabs.co/blog/category/topics/curation/">Curation</a>, <a href="https://fortelabs.co/blog/category/types/free/">Free</a>, <a href="https://fortelabs.co/blog/category/topics/note-taking/">Note-taking</a>, <a href="https://fortelabs.co/blog/category/topics/technology/">Technology</a>, <a href="https://fortelabs.co/blog/category/topics/workflow/">Workflow</a></span></span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DIV>
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
---
|
||||||
|
id: 23360258-5e55-4f51-ae84-83f073539aef
|
||||||
|
title: |
|
||||||
|
Using CSS custom properties like this is a waste - YouTube
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Youtube
|
||||||
|
date_added: 2023-10-14 20:11:15
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/using-css-custom-properties-like-this-is-a-waste-you-tube-18b30754bdc
|
||||||
|
url_original: |
|
||||||
|
https://m.youtube.com/watch?index=12&list=WL&pp=gAQBiAQB&v=_2LwjfYc1x8
|
||||||
|
---
|
||||||
|
|
||||||
|
# Using CSS custom properties like this is a waste - YouTube
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Definir _"variables locales"_ en la clase más alta de un _componente_ (Ej: ˋ.cardˋ), esta variable se puede utilizar para hacer variantes del componente de manera más rápida y limpia y se puede utilizar en los decendientes de la clase.
|
||||||
|
|
||||||
|
Esto tiene la ventaja de:
|
||||||
|
1. Para crear una variante de nuestro componente solo debemos crear una nueva clase y añadirla junto a la clase más alta (ˋ.card-successˋ), y ya solo debemos sobre escribir las variables en vez de tener que actualizar cada parte del componente (ˋ.card.card-success .buttonˋ & ˋ.card.card-success .card-header h3ˋ).
|
||||||
|
2. Si tenemos propiedades complejas o animaciones donde solo varia una parte de ellas (Ej: ˋdrop-shadowˋ) no tenemos que re-escribir en cada variante la propiedad completa.
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
0:02 / 16:11•Watch full video
|
||||||
|
|
||||||
|
[](https://m.youtube.com/@KevinPowell)
|
||||||
|
|
||||||
|
45K views 2 days ago [#css](https://m.youtube.com/hashtag/css)
|
||||||
|
|
||||||
|
If you're interested in checking out ICodeThis, you can find it here: [https://icodethis.com/?ref=kevin](https://www.youtube.com/redirect?event=video%5Fdescription&redir%5Ftoken=QUFFLUhqbVZsbWpVZ3M1NUdacFdJSVZha3BFQ0ZIaTNoZ3xBQ3Jtc0ttWG5nU0ltOTdzSE9YSDQ3aWlsUVFGcEVoMlRFaVhLb0hrczRKRVgta3N0bXBIeC1Sc1ZtTWJHY2MycUpfdVN6OE5pWDlfTG9WQlhTMlRzcW1YX2p1MTY4bjVybTd1ZG02RV9zM1l0QkFWeTNybjBtcw&q=https%3A%2F%2Ficodethis.com%2F%3Fref%3Dkevin&v=%5F2LwjfYc1x8) and if you want to sign up for one of their premium plans, use KEVIN at checkout for an extra 10% off. Custom properties are amazing, but a lot of people don’t take advantage of how awesome they are. They set them up in the :root and that’s it, but they can be so much more useful than that! So, in this …
|
||||||
|
|
||||||
|
...more
|
||||||
|
|
||||||
|
...more
|
||||||
|
|
||||||
|
45,645 views • Oct 12, 2023 • #css
|
||||||
|
|
||||||
|
#### License
|
||||||
|
|
||||||
|
Shop the Kevin Powell store
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,349 @@
|
||||||
|
---
|
||||||
|
id: 512f7bbc-6ba0-11ee-be2a-83432433f852
|
||||||
|
title: |
|
||||||
|
Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram usage of LSP servers, svelte inspector integration
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- RSS
|
||||||
|
date_added: 2023-10-15 16:10:23
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/highlighting-fold-text-community-fork-of-null-ls-leetcode-integr-18b3533f57b
|
||||||
|
url_original: |
|
||||||
|
https://dotfyle.com/this-week-in-neovim/55
|
||||||
|
---
|
||||||
|
|
||||||
|
# Highlighting fold text, community fork of null-ls, leetcode integration, reduce ram usage of LSP servers, svelte inspector integration
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
hinell/duplicate.nvim
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> Add to nvim config
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/highlighting-fold-text-community-fork-of-null-ls-leetcode-integr-18b3533f57b#5de369b4-f406-446f-b59a-358d59dd9eb1) #Todo
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
## Introduction
|
||||||
|
|
||||||
|
This week we have new features in Neovim Core, new plugins and new releases. Some new Neovim features include `:fclose` to close floating windows, support spaces in in directory names, treesitter highlighting in folds and NVIM\_APPNAME supports relative paths.
|
||||||
|
|
||||||
|
We have several new plugins, e.g. you can now grind LeetCode inside Neovim, mini.pick a new fuzzy finder + selector added to the mini.nvim library, and a plugin to start/stop LSP servers upon demand to keep RAM usage low etc..
|
||||||
|
|
||||||
|
Hope you enjoy!
|
||||||
|
|
||||||
|
## Neovim core
|
||||||
|
|
||||||
|
> Updates of Neovim itself, which are available on Neovim nightly.
|
||||||
|
|
||||||
|
> * [@neovim](https://twitter.com/neovim) on Twitter
|
||||||
|
> * [Neovim news](https://neovim.io/doc/user/news.html)
|
||||||
|
> * `:h news.txt` updates in Neovim directly
|
||||||
|
> * [PR's on GitHub](https://github.com/neovim/neovim/pulls)
|
||||||
|
|
||||||
|
* [:fclose to close floating window](https://github.com/neovim/neovim/commit/fd39f5ce8c9bbda1b77ff6c03553148fadac5d57)
|
||||||
|
* [Spaces can be used to separate directory names. To have a space in a directory name, precede it with an extra backslash, and escape the space](https://github.com/neovim/neovim/commit/f5eabaa9407ae3d1ccf6592337453c423eff3d9a)
|
||||||
|
* [Ignore swapfile for running Nvim processes](https://github.com/neovim/neovim/commit/29fe883aa9166bdbcae3f935523c75a8aa56fe45)
|
||||||
|
* [vim.lsp.util.parse\_snippet() will now strictly follow the snippet grammar defined by LSP, and hence previously parsed snippets might now be considered invalid input.](https://github.com/neovim/neovim/commit/eb1f0e8fcca756a00d287e23bf87554e0e7f6dfd)
|
||||||
|
* [vim.treesitter.foldtext() applies treesitter highlighting to foldtext.](https://github.com/neovim/neovim/commit/9ce1623837a817c3f4f5deff9c8ba862578b6009)
|
||||||
|
* [Better cmdline completion for string option value](https://github.com/neovim/neovim/commit/01c51a491330bd10202c73aff92c0978984c0692)
|
||||||
|
* [Support toggling showing of float window](https://github.com/neovim/neovim/commit/4200a0f1678c06c6da4e4cfb0184c29c1174ed21)
|
||||||
|
* [NVIM\_APPNAME now supports relative paths](https://github.com/neovim/neovim/commit/a66b0fdfaa35715c832b98b8941cc5673505e0c2)
|
||||||
|
|
||||||
|
### Highlighted folds on Neovim Nightly
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
* [PR](https://github.com/neovim/neovim/pull/25209)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16sqyjz/finally%5Fwe%5Fcan%5Fhave%5Fhighlighted%5Ffolds/)
|
||||||
|
|
||||||
|
## Neovim Plugin Community
|
||||||
|
|
||||||
|
> Neovim is full of active plugins. This section is about the community and what is going on.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Resources & articles
|
||||||
|
|
||||||
|
#### Open Neovim From Your Browser - Integrating nvim with Svelte’s Inspector
|
||||||
|
|
||||||
|
* [Blog](https://theosteiner.de/open-neovim-from-your-browser-integrating-nvim-with-sveltes-inspector)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/177p9fj/open%5Fneovim%5Ffrom%5Fyour%5Fbrowser%5Fintegrating%5Fnvim/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### New plugins
|
||||||
|
|
||||||
|
#### none-ls.nvim is a community fork of null-ls.nvim
|
||||||
|
|
||||||
|
> null-ls.nvim reloaded / Use Neovim as a language server to inject LSP diagnostics, code actions, and more via Lua.
|
||||||
|
|
||||||
|
null-ls.nvim fork, maintained by the community. Only the repository name has changed for compatibility reasons. All the API's will stay as is.
|
||||||
|
|
||||||
|
Migrate by replacing `jose-elias-alvarez/null-ls.nvim` with `nvimtools/none-ls.nvim` in your package manager.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/nvimtools/none-ls.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/nvimtools/none-ls.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16wystn/nonelsnvim%5Fis%5Fa%5Fcommunity%5Ffork%5Fof%5Fnulllsnvim/)
|
||||||
|
|
||||||
|
#### kawre/leetcode.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> A Neovim plugin enabling you to solve LeetCode problems within Neovim.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/kawre/leetcode.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/kawre/leetcode.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/173ctlz/leetcodenvim%5Fsolve%5Fleetcode%5Fproblems%5Fwithin%5Fneovim/)
|
||||||
|
|
||||||
|
#### echasnovski/mini.pick
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> pick anything. Interactive non-blocking picker with one window design, toggleable preview, fast default matching, built-in pickers, and more
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/echasnovski/mini.pick)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/echasnovski/mini.pick)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/176yv8g/minipick%5Fpick%5Fanything%5Finteractive%5Fnonblocking/)
|
||||||
|
|
||||||
|
#### hinell/lsp-timeout.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Start/stop LSP servers upon demand; keeps RAM usage low
|
||||||
|
|
||||||
|
Some LSP servers are terribly inefficient at memory management and can easily take up gigabytes of RAM MBs if left unattended (just like VS Code huh?!). This plugin prevents excessive memory usage by stopping and restarting LSP servers automatically upon gaining or loosing window focus, keeping neovim fast.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/hinell/lsp-timeout.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/hinell/lsp-timeout.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16vkkj8/lsptimeoutnvim/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### luckasRanarison/clear-action.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Predictable LSP code actions
|
||||||
|
|
||||||
|
A simple Neovim plugin that enhances LSP code actions with fully customizable signs, personalized actions, and server-specific mappings, making code actions more predictable.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/luckasRanarison/clear-action.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/luckasRanarison/clear-action.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16v32p5/clearactionnvim%5Fmakes%5Flsp%5Fcode%5Factions/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### JMarkin/gentags.lua
|
||||||
|
|
||||||
|
> autogenerate tags for neovim
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/JMarkin/gentags.lua)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/JMarkin/gentags.lua)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### roobert/palette.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> 🎨 Palette - A beautiful, versatile, systematic, Neovim theme system
|
||||||
|
|
||||||
|
Palette is a Neovim theme system to make creating and customizing themes easy.
|
||||||
|
|
||||||
|
Highlight groups are logically arranged to strike a harmonious balance between clarity and aesthetic appeal.
|
||||||
|
|
||||||
|
Caching ensures themes are performant.
|
||||||
|
|
||||||
|
Build easily distributable themes using the provided build script.
|
||||||
|
|
||||||
|
Generate application color schemes, such as for LS\_COLORS and iterm2 for matching terminal feel.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/roobert/palette.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/roobert/palette.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16smdr6/introducing%5Froobertpalettenvim%5Fa%5Fbeautiful/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### MunifTanjim/nougat.nvim
|
||||||
|
|
||||||
|
  
|
||||||
|
|
||||||
|
> 🍫 Hyperextensible Statusline / Tabline / Winbar for Neovim 🚀
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/MunifTanjim/nougat.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/MunifTanjim/nougat.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### trimclain/builder.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Simple building plugin for neovim
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/trimclain/builder.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/trimclain/builder.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16qwcl7/buildernvim%5Fsimple%5Fbuild%5Fplugin%5Ffor%5Fneovim/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### niuiic/git-log.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Check git log of the selected code.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/niuiic/git-log.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/niuiic/git-log.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### 2KAbhishek/nerdy.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Find Nerd Glyphs Easily 🤓🔭
|
||||||
|
|
||||||
|
Do you like Nerd fonts, but don't like going over to the site just to find a glyph? nerdy.nvim, is a super handy plugin that lets you easily search, preview and insert any nerd font glyph from Neovim!
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/2KAbhishek/nerdy.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/2KAbhishek/nerdy.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16qr135/nerdynvim%5Feasily%5Ffind%5Fand%5Finsert%5Fnerd%5Ffont%5Fglyphs/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### David-Kunz/gen.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Neovim plugin to generate text using LLMs with customizable prompts
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/David-Kunz/gen.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/David-Kunz/gen.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16x1zf7/local%5Fllms%5Fin%5Fneovim%5Fgennvim/)
|
||||||
|
* [Youtube](https://www.youtube.com/watch?v=FIZt7MinpMY)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### VidocqH/data-viewer.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Table view for data files, csv, tsv
|
||||||
|
|
||||||
|
Lightweight neovim plugin provides a table view for inspect data files such as csv, tsv
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/VidocqH/data-viewer.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/VidocqH/data-viewer.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### ==hinell/duplicate.nvim==
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Duplicate visual selection, lines, and textobjects
|
||||||
|
|
||||||
|
Duplicate lines in different directions (up/down) by specified offset Duplicate visual selection & line-wise blocks
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/hinell/duplicate.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/hinell/duplicate.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16vkd4x/duplicatenvim/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### niuiic/remote.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Edit remote files locally.
|
||||||
|
|
||||||
|
Edit remote files with local neovim configuration.
|
||||||
|
|
||||||
|
Edit them as local directories.
|
||||||
|
|
||||||
|
No other dependencies required for remote machine except ssh.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/niuiic/remote.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/niuiic/remote.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### niuiic/typst-preview.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Neovim plugin to preview typst document.
|
||||||
|
|
||||||
|
Generate pdf files by typst compile. Respond to subsequent file changes with typst-lsp. Redirect these pdf files to a fixed path when you switch buffer. Preview this pdf by a pdf viewer with the ability to respond to the file changes.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/niuiic/typst-preview.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/niuiic/typst-preview.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### SalOrak/whaler.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Telescope extension to change between directories blazingly fast
|
||||||
|
|
||||||
|
Whaler is a Telescope extension to move between directories. It is based on the concept of [tmux-windowizer](https://github.com/ThePrimeagen/.dotfiles/blob/master/bin/.local/scripts/tmux-windowizer) which uses a set of directories and fzf to move to another directory whilst creating a new tmux session.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/SalOrak/whaler.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/SalOrak/whaler.nvim)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16wgw0b/whalernvim/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### gsuuon/note.nvim
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> Notes in neovim
|
||||||
|
|
||||||
|
A simple Neovim note taking plugin with daily notes, task tracking and syntax highlighting.
|
||||||
|
|
||||||
|
note.nvim makes it easy to take working notes and track tasks. It adds commands to help manipulate task items, create daily notes, and navigate within (and between) notes.
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/gsuuon/note.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/gsuuon/note.nvim)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
#### A retrospective on why Nyoom is archived
|
||||||
|
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16sk266/nyoom%5Fwhy%5Fim%5Fultimately%5Farchiving%5Fit%5Fa%5Fshort/)
|
||||||
|
|
||||||
|
#### indent-blankline.nvim v3 is released
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/lukas-reineke/indent-blankline.nvim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/lukas-reineke/indent-blankline.nvim)
|
||||||
|
* [Migration guide](https://github.com/lukas-reineke/indent-blankline.nvim/wiki/Migrate-to-version-3)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/16u5abl/indent%5Fblankline%5Fv3%5Fis%5Freleased/)
|
||||||
|
|
||||||
|
#### LazyVim 10.0.0 has been released!
|
||||||
|
|
||||||
|
* [GitHub](https://github.com/LazyVim/LazyVim)
|
||||||
|
* [Dotfyle](https://dotfyle.com/plugins/LazyVim/LazyVim)
|
||||||
|
* [Changelog](https://github.com/LazyVim/LazyVim/blob/main/CHANGELOG.md)
|
||||||
|
* [Reddit](https://www.reddit.com/r/neovim/comments/1766fl1/lazyvim%5F1000%5Fhas%5Fbeen%5Freleased/)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
|
||||||
|
Add your the plugin in either of the following to be featured in This Week in Neovim and Dotfyle:
|
||||||
|
|
||||||
|
* [rockerBOO/awesome-neovim](https://github.com/rockerBOO/awesome-neovim)
|
||||||
|
* [SUBMITTED\_PLUGINS.md](https://github.com/codicocodes/dotfyle/blob/main/SUBMITTED-PLUGINS.md)
|
||||||
|
|
||||||
|
Contribute to the development of Dotfyle:
|
||||||
|
|
||||||
|
* File issues and submit pull requests on [GitHub](https://github.com/codicocodes/dotfyle)
|
||||||
|
* Discuss ideas on [Discord](https://discord.gg/AMbnnN5eep)
|
||||||
|
|
@ -0,0 +1,592 @@
|
||||||
|
---
|
||||||
|
id: 07f91eda-1940-4aaa-8e27-78b0bf176193
|
||||||
|
title: |
|
||||||
|
The Unreasonable Effectiveness Of Plain Text
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-10-18 10:01:51
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185
|
||||||
|
url_original: |
|
||||||
|
https://github.com/0atman/noboilerplate/blob/main/scripts/34-Plain-Text-Team.md
|
||||||
|
---
|
||||||
|
|
||||||
|
# The Unreasonable Effectiveness Of Plain Text
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
## [Tie Yourself to the Mast](#tie-yourself-to-the-mast)
|
||||||
|
|
||||||
|
%%pron. oh diss e us%% In the Odyssey, Odysseus (confusingly called Ulysses in English literature) had to travel through siren-infested waters.
|
||||||
|
|
||||||
|
This was a well-understood problem in his world. Sailors would simply solve this by putting wax in their ears, so the sirens' tempting song wouldn't lure them to their deaths.
|
||||||
|
|
||||||
|
But Odysseus had a challenge: He WANTED to hear the Sirens' beautiful song. He certainly didn't want to drown, so he ordered his crew to tie him to the mast of the ship, and to ignore any of his pleas to let him go, until safety.
|
||||||
|
|
||||||
|
This way, he was able to guard against future bad decisions he knew he would make by setting up a framework to control his future self.
|
||||||
|
|
||||||
|
This is the Ulysses pact, and it's a very common trick:
|
||||||
|
|
||||||
|
* Leaving your credit card or car keys at home when going out drinking is a Ulysses pact.
|
||||||
|
* Publishing a warrant canary on your company's website is a Ulysses pact,
|
||||||
|
* and standardising all your tools on plain text is a Ulysses pact.
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> El pacto de Ulysses es una estrategia (o framework) en donde tomamos medidas tempranamente para prevenir malas desiciones en un futuro.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185#7466a699-a115-4b9f-99fc-416852b5aef2) #frameworks
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
"The difference between science and screwing around is _writing it down_."
|
||||||
|
|
||||||
|
## [— Adam Savage](#-adam-savage)
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> This was just a cool quote...
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/noboilerplate-scripts-34-plain-text-team-md-at-main-0-atman-nobo-18b42e0d185#9a030eb7-6269-4863-8e5e-61b59a1704b6) #quote
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
<style> :root {--r-code-font: "FiraCode Nerd Font";} .reveal .hljs {min-height: 50%;} </style>
|
||||||
|
|
||||||
|
!\[\[git-logo.png|500\]\]
|
||||||
|
|
||||||
|
## [Plain-Text Team](#plain-text-team)
|
||||||
|
|
||||||
|
notes: %%
|
||||||
|
|
||||||
|
* Tell them what you're going to tell them
|
||||||
|
* Tell them
|
||||||
|
* Tell them what you told them %% Hi friends my name is Tris and this is No Boilerplate, focusing on fast, technical videos.
|
||||||
|
|
||||||
|
All good teams are alike; each bad team is bad in its own way. %% to paraphrase Tolstoy %%
|
||||||
|
|
||||||
|
Software is an incredible thing, isn't it? Combined with the internet, a small team of friends can change the world overnight.
|
||||||
|
|
||||||
|
Every company, no matter what their industry, must now run a tech team, even if only to maintain their website.
|
||||||
|
|
||||||
|
So why are they all so bad at it?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[cc-logo.png\]\]
|
||||||
|
|
||||||
|
## [Public Domain Videos](#public-domain-videos)
|
||||||
|
|
||||||
|
<https://github.com/0atman/noboilerplate/>
|
||||||
|
|
||||||
|
notes: Everything you see in this video: script, links, and images are part of a plain-text markdown document available freely on GitHub under a public domain licence.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [First World Problems](#first-world-problems)
|
||||||
|
|
||||||
|
notes: If you've worked in a web team, tech team or any digital creative team, you've likely felt the pain.
|
||||||
|
|
||||||
|
* Bad software,
|
||||||
|
* constantly changing processes,
|
||||||
|
* and lots and lots of meetings.
|
||||||
|
|
||||||
|
I discussed some of these problems in my Agile video that made me a lot of friends. But today, I want to go bigger. You can solve all these problems in a single blow.
|
||||||
|
|
||||||
|
The secret is, in order to do more, you must have the discipline to do LESS.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[rework-book.png|400\]\]
|
||||||
|
|
||||||
|
!\[\[remote-book.png|400\]\]
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
A lot of the ideas that I will mention today are not new. They've been well-understood in the startup and digital world for a long time.
|
||||||
|
|
||||||
|
But regression to the mean is prevalent.
|
||||||
|
|
||||||
|
It's not just enough to argue for good tools today, you must stop the future churn of new apps and processes that solve the same things in different, but equivalent ways.
|
||||||
|
|
||||||
|
And you do this with a Ulysses pact.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[ulysses-and-the-sirens-waterhouse.jpg\]\]
|
||||||
|
|
||||||
|
_"Ulysses and the Sirens"_ [John William Waterhouse](https://en.wikipedia.org/wiki/John%5FWilliam%5FWaterhouse)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
## ==[Tie Yourself to the Mast](#tie-yourself-to-the-mast)==
|
||||||
|
|
||||||
|
==%%pron. oh diss e us%%
|
||||||
|
In the Odyssey, Odysseus (confusingly called Ulysses in English literature) had to travel through siren-infested waters.==
|
||||||
|
|
||||||
|
==This was a well-understood problem in his world.
|
||||||
|
Sailors would simply solve this by putting wax in their ears, so the sirens' tempting song wouldn't lure them to their deaths.==
|
||||||
|
|
||||||
|
==But Odysseus had a challenge: He WANTED to hear the Sirens' beautiful song. He certainly didn't want to drown, so he ordered his crew to tie him to the mast of the ship, and to ignore any of his pleas to let him go, until safety.==
|
||||||
|
|
||||||
|
==This way, he was able to guard against future bad decisions he knew he would make by setting up a framework to control his future self.==
|
||||||
|
|
||||||
|
==This is the Ulysses pact, and it's a very common trick:==
|
||||||
|
|
||||||
|
* ==Leaving your credit card or car keys at home when going out drinking is a Ulysses pact.==
|
||||||
|
* ==Publishing a warrant canary on your company's website is a Ulysses pact,==
|
||||||
|
* ==and standardising all your tools on plain text is a Ulysses pact.==
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[the-fbi-has-not-been-here.png\]\]
|
||||||
|
|
||||||
|
An example of a warrant canary
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
In the future, you, or your successor, or your team might well be tempted to try the latest hot project management software, or documentation tool or scrum system.
|
||||||
|
|
||||||
|
While it might be good for a while, the act of changing tools constantly is an enormous overhead for your team, and one that gives the lasting impression that anything we write is likely to be legacy very soon, trapped in a deprecated app that "we just don't use any more", so why bother writing anything down.
|
||||||
|
|
||||||
|
Tying yourself to the mast by standardising on one tool, and not only that, but a plain text tool, means your data will live forever, and the network effect can make it more and more valuable over time, instead of less and less.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
"The greatest problem in communication is the _illusion_ that it has been achieved."
|
||||||
|
|
||||||
|
## [— William H. Whyte](#-william-h-whyte)
|
||||||
|
|
||||||
|
[(not George Bernard Shaw, apparently)](https://quoteinvestigator.com/2014/08/31/illusion/)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
## [Decoupled Organisation Through Plain Text](#decoupled-organisation-through-plain-text)
|
||||||
|
|
||||||
|
Teams of people need to be on the same page. Both literally and figuratively.
|
||||||
|
|
||||||
|
The natural way to do this is by talking to one another. But talking does not scale, and is extremely impermanent. After the sound waves have bounced off the walls and reverberated for a second... the words are gone, and what is left is our memory of them.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
=="The difference between science and screwing around is== _==writing it down==_==."==
|
||||||
|
|
||||||
|
## ==[— Adam Savage](#-adam-savage)==
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Human memory is extremely unreliable, subjective, and the root cause of many problems.
|
||||||
|
|
||||||
|
After a discussion, it is not apparent that everyone has agreed upon exactly the same thing. And you now need another meeting to double-check that.
|
||||||
|
|
||||||
|
The solution is documentation.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Documentation-First Teams](#documentation-first-teams)
|
||||||
|
|
||||||
|
notes: Communication is most reliable when it is in black and white.
|
||||||
|
|
||||||
|
Everyone understands this, from 10,000-page government specifications to an email sign-off from the client you're making a 3-minute track for.
|
||||||
|
|
||||||
|
Yes, have more immediate conversations, by video, or chat, but write down what you concluded, and get the other person to confirm it.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [](#documenting-architecture-decisions)["Documenting Architecture Decisions"](https://cognitect.com/blog/2011/11/15/documenting-architecture-decisions)
|
||||||
|
|
||||||
|
(aka the _ADR_ process)
|
||||||
|
|
||||||
|
— [Michael Nygard](https://cognitect.com/authors/MichaelNygard.html)
|
||||||
|
|
||||||
|
notes: You can improve every part of your team, business, or organisation by recording what decisions you have made, and WHY, in a system that allows for asynchronous discussion and improvements.
|
||||||
|
|
||||||
|
The ADR process is excellent for this, for example.
|
||||||
|
|
||||||
|
There are a thousand competing apps that claim to solve these problems for you.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[gdocs-screenshot.png|200\]\]
|
||||||
|
|
||||||
|
!\[\[jamboard-photo.png|200\]\]
|
||||||
|
|
||||||
|
!\[\[confluence-screenshot.png|200\]\]
|
||||||
|
|
||||||
|
!\[\[pivotal-tracker-screenshot.png|200\]\]
|
||||||
|
|
||||||
|
!\[\[notion-screenshot.png|200\]\]
|
||||||
|
|
||||||
|
!\[\[trello-screenshot.png|200\]\]
|
||||||
|
|
||||||
|
notes: These apps all re-invent the wheel in their own way, and new ones are being released every week. I've used most of them, perhaps you have too, and they're all rubbish.
|
||||||
|
|
||||||
|
But there is a group of people who are extremely practised at managing enormous distributed, concurrent, text projects:
|
||||||
|
|
||||||
|
_Programmers!_
|
||||||
|
|
||||||
|
As an example, if you use Google Docs, your small team can collaborate on a few files a day, in a drive of perhaps a hundred or two hundred. And just like in most other documentation systems, that won't scale.
|
||||||
|
|
||||||
|
Programmers simultaneously edit thousands of files a day, across repositories of data so numerous that we don't keep count.
|
||||||
|
|
||||||
|
What are programmers using, and can non-programmers use it too?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Enter Git](#enter-git)
|
||||||
|
|
||||||
|
* GitHub
|
||||||
|
* GitLab
|
||||||
|
* Bitbucket
|
||||||
|
* SourceForge
|
||||||
|
* Etc.
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
The answer is yes, yes we can.
|
||||||
|
|
||||||
|
I recommend you use the most popular distributed version control system on the planet: Git.
|
||||||
|
|
||||||
|
You'll use this through one of the many git web hosts, the largest of which is GitHub, which I recommend for most people.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Popularity Matters](#popularity-matters)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Though I mention GitHub primarily in this video, I'm not sponsored by them, or anything like that, I just acknowledge that popularity matters. Support, experience, and integrations with other services will all be far, far easier if you use the standard.
|
||||||
|
|
||||||
|
All these tools started as a web interface around the incredible tool: Git.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Aside:](#aside)
|
||||||
|
|
||||||
|
## [Linux & Git](#linux--git)
|
||||||
|
|
||||||
|
notes: By the way, the creator of Linux, Linus Torvalds, also later created git, to solve the problem that he created: that the Linux project had become SO LARGE that existing plain text collaboration tools were not scaling.
|
||||||
|
|
||||||
|
He jokes that he named his first project, Linux, after himself, and so it was natural to name the second one after himself too!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Github Et Al. Are Greater Than the Sum of Their Parts](#github-et-al-are-greater-than-the-sum-of-their-parts)
|
||||||
|
|
||||||
|
notes: From simple code-hosting beginnings, these git services have grown to be so much more than that, trusted by the largest projects in the world, built by the largest companies in the world.
|
||||||
|
|
||||||
|
The foundation of my ideal team uses the raw materials that GitHub has given us.
|
||||||
|
|
||||||
|
What are the raw materials?
|
||||||
|
|
||||||
|
I'll show you this with a demo: We're going to build a GitHub organisation for No Boilerplate.
|
||||||
|
|
||||||
|
This video is not sponsored by GitHub, my work is possible, thanks to viewers like you.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[nb-patreon-aug-23.png|700\]\]
|
||||||
|
|
||||||
|
<https://www.patreon.com/noboilerplate>
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
If you'd like to see and give feedback on my videos up to a week early, as well as get discord perks, and even your name in the credits, it would be very kind of you to check my Patreon.
|
||||||
|
|
||||||
|
I'm also offering a limited number of mentoring slots. If you'd like 1:1 tuition on Rust, Python, Web tech, Personal organisation, or anything that I talk about in my videos, do sign up and let's chat!
|
||||||
|
|
||||||
|
It's just me running this channel, and I'm so grateful to everyone for supporting me on this wild adventure.
|
||||||
|
|
||||||
|
Let's make our plain text team:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[repo.png\]\]
|
||||||
|
|
||||||
|
## [Repos](#repos)
|
||||||
|
|
||||||
|
notes: The foundational unit with any git host is the repo. This doesn't just correspond with one git repository, but one logical project or subproject. Organisational tools like the Wiki (for documentation), Projects (for project management) and more can sit here, right next to your project's files, right where you need them.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[wiki2.png\]\]
|
||||||
|
|
||||||
|
## [Wikis](#wikis)
|
||||||
|
|
||||||
|
notes: Each GitHub repository has a wiki, a folder of linked markdown files that anyone with access can edit, either in the friendly web editor, or, by cloning the wiki with git, on their own computer with whatever editor they like.
|
||||||
|
|
||||||
|
This is the minimum viable documentation tool, and it's useful for when git's full collaboration system isn't needed, and you just want to throw some linked markdown files together quickly.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [\# This is a Heading](#-this-is-a-heading)
|
||||||
|
|
||||||
|
### [\### This is a Sub Heading](#-this-is-a-sub-heading)
|
||||||
|
|
||||||
|
_\_this is italic text\__
|
||||||
|
|
||||||
|
**\*\*this is bold\*\***
|
||||||
|
|
||||||
|
\[[this is a link](https://github.com/0atman/noboilerplate/blob/main/scripts)\]([http://example.com](http://example.com/))
|
||||||
|
|
||||||
|
_(learn more: [markdownguide.org/basic-syntax/](https://www.markdownguide.org/basic-syntax/))_
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
## [Aside: Markdown is Great](#aside-markdown-is-great)
|
||||||
|
|
||||||
|
Github, GitLab, and most of the Internet have standardised on Markdown. Just like Slack, Discord, many websites, and sometimes Facebook depending on the phase of the moon, they all format text using this lightweight standard called Markdown.
|
||||||
|
|
||||||
|
Markdown is my favourite text format, it's really simple to use, and is designed to look good both in plain text and rendered as rich text, unlike HTML, which is unreadable by most people unless rendered in a browser.
|
||||||
|
|
||||||
|
Here we've got a heading, denoted by the hash symbol, italic with underscores, bold with double asterisks, and links using this bracket pairing syntax.
|
||||||
|
|
||||||
|
There are a few more options available, which you can look up at markdownguide.org, but this is the overwhelming majority of formatting you'll need on a day-to-day basis.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[obsidian-kanban-paint.png\]\]
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
The genius of storing your data in this universal plain-text format is that should you wish to migrate from GitHub to another similar platform, your data is portable and under your control.
|
||||||
|
|
||||||
|
GitHub formats Markdown very nicely, but you can export it in any format you like, and edit it with any tool you like, present and future.
|
||||||
|
|
||||||
|
Including my favourite tool here, Obsidian.
|
||||||
|
|
||||||
|
Markdown keeps your team focussed on what is important by allowing you just enough formatting, but no rich customisation options. You're not making a beautiful client brochure, so you shouldn't use 90s desktop publishing tools to make your company's critical documentation.
|
||||||
|
|
||||||
|
Back to GitHub's features:
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[issues.png\]\]
|
||||||
|
|
||||||
|
## [Issues](#issues)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Though not part of the git system, Issues are a natural addition that all git hosts have implemented: A simple task system for capturing work that needs doing. These could be new features, customer requests, bug reports, or ideas. They have a rich comment thread for discussion, can be assigned to team members, and tagged with custom tags.
|
||||||
|
|
||||||
|
This minimum viable project management system could be all you need. Certainly, for a solo or small team, capturing requirements in Issues might be enough.
|
||||||
|
|
||||||
|
But if you need more, you need Milestones.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[milestones.png\]\]
|
||||||
|
|
||||||
|
## [Milestones](#milestones)
|
||||||
|
|
||||||
|
notes: GH milestones are a grouping of issues with a deadline.
|
||||||
|
|
||||||
|
They typically represent a target, a release, or something the team is working towards. Milestones just have a title, a description, and a date. No burndown charts, no swim lanes, no complex statistics, just a progress bar.
|
||||||
|
|
||||||
|
This might be enough project management for you. If not, it is time for GH Projects.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[projects.png\]\]
|
||||||
|
|
||||||
|
## [Projects](#projects)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Each GitHub repo, team, and organisation can have a project board, a lightweight kanban board with customisable columns, allowing you to group your issues together, and observe their progress through your current iteration.
|
||||||
|
|
||||||
|
This represents the information radiator for your team, a bird's-eye view of what is happening with the project, and something you might gather around for your morning catchup meeting.
|
||||||
|
|
||||||
|
You don't need all the features of Trello, JIRA, or anything like that. You need the minimum viable board.
|
||||||
|
|
||||||
|
This bare-bones tool completely side-steps 'the JIRA effect', which is if you have a tool that is packed full of time tracking, velocity points, and so on, the temptation is to use all these features, even if they give no value, and complicate your processes.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Aside:](#aside-1)
|
||||||
|
|
||||||
|
## [Standups Are Great](#standups-are-great)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
If you have one meeting a day, it should be a standup. Good standups replace other meetings and accelerate your project dramatically.
|
||||||
|
|
||||||
|
The way I like to do standups is not by asking everyone what they did yesterday and what they intend to do today.
|
||||||
|
|
||||||
|
That's a great way to find out at length what Dave did on his day off, but not a good way to find out what's happening with the project specifically.
|
||||||
|
|
||||||
|
I recommend walking your board, backwards, from right to left. Everyone is timeboxed, keeping the meeting tight. If you don't have an issue on the board, you don't speak yet. Perhaps you could write or pick up a task from the backlog and talk about it tomorrow.
|
||||||
|
|
||||||
|
At the end, the team member who is facilitating the meeting asks if anyone has any blockers, and we're done.
|
||||||
|
|
||||||
|
The most important part of this most important meeting is asking if you have any blockers. A good standup means that no-one can get lost or delayed by more than 24 hours.
|
||||||
|
|
||||||
|
Note I didn't say the PM or DM or scrum master or whoever facilitates. That person doesn't exist in my team. These are not roles, they are hats.
|
||||||
|
|
||||||
|
I don't know if your team needs any other meetings, but it is vital that you do a standup.
|
||||||
|
|
||||||
|
Back to GitHub.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[org-public.png\]\]
|
||||||
|
|
||||||
|
## [Organisations](#organisations)
|
||||||
|
|
||||||
|
notes: GitHub provides an umbrella group of users called an organisation. This is your company, and if you're building your products in the open, as I recommend you do, you won't pay GitHub a thing. Most git hosts provide their services for free for open-source companies. If you have too much money, you can pay GitHub for a plan to make your data closed.
|
||||||
|
|
||||||
|
If you require more subdivision, Organisations are divided into Teams.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[teams.png\]\]
|
||||||
|
|
||||||
|
## [Teams](#teams)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Teams on GitHub allow you to granularly scope repo, project, wiki, and other permissions to the different teams in your organisation.
|
||||||
|
|
||||||
|
I recommend allowing everyone to write and contribute to all projects, you want the network effect and low admin overhead. This pattern is called "internal open source".
|
||||||
|
|
||||||
|
But if you wish, perhaps for regulatory reasons, read and write access to repos can be restricted by team.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[PR.png\]\]
|
||||||
|
|
||||||
|
## [Pull Requests](#pull-requests)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Now we're getting into the detail of GitHub. I adore pull requests, sometimes called merge requests in other systems. PRs represent a change to the files in a repo, with an explanation of what you did, some links, and a discussion.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[PR diff.png\]\]
|
||||||
|
|
||||||
|
## [Pull Requests (diffs)](#pull-requests-diffs)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
After the discussion is satisfied, perhaps as simply as a colleague saying "LGTM" or as heavy weight as a full change review with an audit trail that would satisfy a bank, the changes are merged into the repo.
|
||||||
|
|
||||||
|
PRs can have powerful automation, called Actions
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[action.png\]\]
|
||||||
|
|
||||||
|
## [Github Actions](#github-actions)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
PRs and actions can run your company for you if you let them. Though Actions were built for running tests on source code, with a little imagination, they can be used for anything:
|
||||||
|
|
||||||
|
* If you're uploading vector images, an action can build all the rasterised resolutions the client wants.
|
||||||
|
* If you're uploading video or audio clips, an action can run them through plugins to remove noise, add a music track, and upload the draft to YouTube.
|
||||||
|
* If you're checking in company documents, an action can simply spellcheck it.
|
||||||
|
|
||||||
|
Actions can run hundreds of times an hour, always adhere to best practice, and never make mistakes.
|
||||||
|
|
||||||
|
Automating your company gives you an enormous competitive speed and quality advantage.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[language-tool-on-premise.png\]\]
|
||||||
|
|
||||||
|
notes: You could also, for example, set up style guide enforcement, blocking the PR if the phrase "on premise" has been found.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[nvme.png\]\] notes:
|
||||||
|
|
||||||
|
## [Offline Work](#offline-work)
|
||||||
|
|
||||||
|
When your company's code, visual assets, and administration, are all in git repositories, you gain another huge superpower.
|
||||||
|
|
||||||
|
All of this becomes accessible offline. Every file, every photo, every design, and document can be on your computer. The magic of offline isn't necessarily that you don't need the internet (though that is a handy feature on a plane) But that it's FAST, the data is RIGHT HERE on your computer, and you can do ANYTHING with it. If you need to change the company's name across 10,000 files, it's trivial. It's find and replace.
|
||||||
|
|
||||||
|
If you, instead, had 5-15 different web services that you scattered all your team's data across, you'd have to log in to each one, and hope they had the feature to find and replace within their own walled garden.
|
||||||
|
|
||||||
|
Most, somehow, don't have this basic feature.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Who is flying this thing?](#who-is-flying-this-thing)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
GOOGLE DOCS doesn't have this basic feature: you can't find and replace across a drive of files!?
|
||||||
|
|
||||||
|
And the reason for this, I suspect, is that would be TERRIFYING, wouldn't it? What if a new hire accidentally did that, you'd have to roll back all those files manually, that could take days!
|
||||||
|
|
||||||
|
But with git, it would be a PR, clearly showing what was happening, and mistakes are trivial to fix.
|
||||||
|
|
||||||
|
Plain-text files, with just enough Markdown syntax to convey meaning, allow you and your team to work with this data in the way that they want, not the way that google or Atlassian or WHOEVER thinks is best.
|
||||||
|
|
||||||
|
Doesn't this take up a lot of space on your disk? Not plain text. But even if you're storing large files, storage is cheap if you're smart. A topic for another video, perhaps.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Future-Proofing](#future-proofing)
|
||||||
|
|
||||||
|
notes: The benefits of git, especially for teams already using it for code and text collaboration, are that
|
||||||
|
|
||||||
|
1. you're already paying for it, and
|
||||||
|
2. It's never going away.
|
||||||
|
|
||||||
|
It is impossible to imagine a management reshuffle that might decide on another tool just because it is the flavour of the month. Git and GitHub dominate the coding world, and I recommend GitHub not only because it is the biggest but also the most featureful.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[killed-by-google-10-23.png\]\]
|
||||||
|
|
||||||
|
[https://killedbygoogle.com](https://killedbygoogle.com/)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
Even if you don't think git and plain text are the best option, I still suggest you use them because stability is far, far better than a constantly churning tool choice, as staff come, and go and fashions change, and Google decommission ANOTHER product.
|
||||||
|
|
||||||
|
RIP Jamboard :-(
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## [Conclusion](#conclusion)
|
||||||
|
|
||||||
|
Click around my demo organisation for yourself:<https://github.com/noboilerplate>
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
You can't do all these utopian things in most companies, I'm painfully aware.
|
||||||
|
|
||||||
|
But you CAN do SOME of these things, even just in your immediate team, or only for yourself.
|
||||||
|
|
||||||
|
I'd be interested to know what other ways good teams buck the hype cycle in favour of sane, evidence-based improvements.
|
||||||
|
|
||||||
|
Thank you.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
!\[\[tri-hex-moon-white-transparent.png|300\]\]
|
||||||
|
|
||||||
|
## [Thank You](#thank-you)
|
||||||
|
|
||||||
|
## [](#patreoncomnoboilerplate)[Patreon.com/NoBoilerplate](http://www.patreon.com/noboilerplate)
|
||||||
|
|
||||||
|
notes:
|
||||||
|
|
||||||
|
## [OUTRO](#outro)
|
||||||
|
|
||||||
|
If you would like to support my channel, get early ad-free and tracking-free videos, vip discord access or 1:1 mentoring, head to patreon.com/noboilerplate.
|
||||||
|
|
||||||
|
If you're interested in transhumanism and hopepunk stories, please check out my weekly sci-fi podcast, Lost Terminal.
|
||||||
|
|
||||||
|
Or if urban fantasy is more your bag, do listen to a strange and beautiful podcast I produce every full moon called Modem Prometheus.
|
||||||
|
|
||||||
|
Transcripts and compile-checked markdown source code are available on GitHub, links in the description, and corrections are in the pinned ERRATA comment.
|
||||||
|
|
||||||
|
Thank you so much for watching, talk to you on Discord.
|
||||||
|
|
||||||
|
%% NOW READ THE INTRO AGAIN %%
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
---
|
||||||
|
id: f07b145f-4fc5-4acf-99a4-4e3201c009b9
|
||||||
|
title: |
|
||||||
|
How Game Reviews Actually Affect You
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Youtube
|
||||||
|
date_added: 2023-10-21 16:01:08
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/how-game-reviews-actually-affect-you-18b539cd3a3
|
||||||
|
url_original: |
|
||||||
|
https://youtu.be/8LbLvi9llCI?si=7MMwTZTpCb-mHDH5
|
||||||
|
---
|
||||||
|
|
||||||
|
# How Game Reviews Actually Affect You
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Según estudios, los jugadores se ven afectados por reviews que leen/ven, ya sean por críticos o por otros jugadores. Destacar que en ambos casos, pero principalmente en otros jugadores hay opiniones que pueden decir lo mismo pero con una altas carga emocional, lo que amplifica su impacto.
|
||||||
|
|
||||||
|
Estas críticas tienen un impacto inconciente en el jugador en forma de _"self fulfilling prophecy"_ ó _"probar lo contrario"_.
|
||||||
|
|
||||||
|
Esto nos afecta queramos o no, por lo que es mejor evitar opiniones lo más posible y solo disfrutar el juego por lo que es, podemos validar nuestras opiniones luego de terminar el juego.
|
||||||
|
## Original
|
||||||
|
|
||||||
|
[How Game Reviews Actually Affect You](https://youtu.be/8LbLvi9llCI?si=7MMwTZTpCb-mHDH5)
|
||||||
|
|
||||||
|
By [Daryl Talks Games](https://www.youtube.com/@DarylTalksGames)
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
---
|
||||||
|
id: bcb6f4ba-cb8e-4e8d-847f-911cda184b83
|
||||||
|
title: |
|
||||||
|
Study shows stronger brain activity after writing on paper than on tablet or smartphone | ScienceDaily
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-10-23 10:56:32
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/study-shows-stronger-brain-activity-after-writing-on-paper-than--18b5cd2abed
|
||||||
|
url_original: |
|
||||||
|
https://www.sciencedaily.com/releases/2021/03/210319080820.htm
|
||||||
|
---
|
||||||
|
|
||||||
|
# Study shows stronger brain activity after writing on paper than on tablet or smartphone | ScienceDaily
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
"Our take-home message is to use paper notebooks for information we need to learn or memorize," said Sakai.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/study-shows-stronger-brain-activity-after-writing-on-paper-than--18b5cd2abed#1c9a0a5a-c3a9-40d8-a6de-9e986dd27aec)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Researchers say that personalizing digital documents by highlighting, underlining, circling, drawing arrows, handwriting color-coded notes in the margins, adding virtual sticky notes, or other types of unique mark-ups can mimic analog-style spatial enrichment that may enhance memory.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/study-shows-stronger-brain-activity-after-writing-on-paper-than--18b5cd2abed#85a6ad74-1b87-4f32-95b3-f0a549d32089)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Although the current research focused on learning and memorization, the researchers encourage using paper for creative pursuits as well.
|
||||||
|
|
||||||
|
"It is reasonable that one's creativity will likely become more fruitful if prior knowledge is stored with stronger learning and more precisely retrieved from memory. For art, composing music, or other creative works, I would emphasize the use of paper instead of digital methods," said Sakai.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/study-shows-stronger-brain-activity-after-writing-on-paper-than--18b5cd2abed#aeb79efa-7582-4493-94e1-6a7004b5ed80)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
FULL STORY
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
A study of Japanese university students and recent graduates has revealed that writing on physical paper can lead to more brain activity when remembering the information an hour later. Researchers say that the unique, complex, spatial and tactile information associated with writing by hand on physical paper is likely what leads to improved memory.
|
||||||
|
|
||||||
|
"Actually, paper is more advanced and useful compared to electronic documents because paper contains more one-of-a-kind information for stronger memory recall," said Professor Kuniyoshi L. Sakai, a neuroscientist at the University of Tokyo and corresponding author of the research recently published in _Frontiers in Behavioral Neuroscience_. The research was completed with collaborators from the NTT Data Institute of Management Consulting.
|
||||||
|
|
||||||
|
Contrary to the popular belief that digital tools increase efficiency, volunteers who used paper completed the note-taking task about 25% faster than those who used digital tablets or smartphones.
|
||||||
|
|
||||||
|
Although volunteers wrote by hand both with pen and paper or stylus and digital tablet, researchers say paper notebooks contain more complex spatial information than digital paper. Physical paper allows for tangible permanence, irregular strokes, and uneven shape, like folded corners. In contrast, digital paper is uniform, has no fixed position when scrolling, and disappears when you close the app.
|
||||||
|
|
||||||
|
=="Our take-home message is to use paper notebooks for information we need to learn or memorize," said Sakai.==
|
||||||
|
|
||||||
|
In the study, a total of 48 volunteers read a fictional conversation between characters discussing their plans for two months in the near future, including 14 different class times, assignment due dates and personal appointments. Researchers performed pre-test analyses to ensure that the volunteers, all 18-29 years old and recruited from university campuses or NTT offices, were equally sorted into three groups based on memory skills, personal preference for digital or analog methods, gender, age and other aspects.
|
||||||
|
|
||||||
|
Volunteers then recorded the fictional schedule using a paper datebook and pen, a calendar app on a digital tablet and a stylus, or a calendar app on a large smartphone and a touch-screen keyboard. There was no time limit and volunteers were asked to record the fictional events in the same way as they would for their real-life schedules, without spending extra time to memorize the schedule.
|
||||||
|
|
||||||
|
After one hour, including a break and an interference task to distract them from thinking about the calendar, volunteers answered a range of simple (When is the assignment due?) and complex (Which is the earlier due date for the assignments?) multiple choice questions to test their memory of the schedule. While they completed the test, volunteers were inside a magnetic resonance imaging (MRI) scanner, which measures blood flow around the brain. This is a technique called functional MRI (fMRI), and increased blood flow observed in a specific region of the brain is a sign of increased neuronal activity in that area.
|
||||||
|
|
||||||
|
Participants who used a paper datebook filled in the calendar within about 11 minutes. Tablet users took 14 minutes and smartphone users took about 16 minutes. Volunteers who used analog methods in their personal life were just as slow at using the devices as volunteers who regularly use digital tools, so researchers are confident that the difference in speed was related to memorization or associated encoding in the brain, not just differences in the habitual use of the tools.
|
||||||
|
|
||||||
|
Volunteers who used analog methods scored better than other volunteers only on simple test questions. However, researchers say that the brain activation data revealed significant differences.
|
||||||
|
|
||||||
|
Volunteers who used paper had more brain activity in areas associated with language, imaginary visualization, and in the hippocampus -- an area known to be important for memory and navigation. Researchers say that the activation of the hippocampus indicates that analog methods contain richer spatial details that can be recalled and navigated in the mind's eye.
|
||||||
|
|
||||||
|
"Digital tools have uniform scrolling up and down and standardized arrangement of text and picture size, like on a webpage. But if you remember a physical textbook printed on paper, you can close your eyes and visualize the photo one-third of the way down on the left-side page, as well as the notes you added in the bottom margin," Sakai explained.
|
||||||
|
|
||||||
|
Researchers say that personalizing digital documents by highlighting, underlining, circling, drawing arrows, handwriting color-coded notes in the margins, adding virtual sticky notes, or other types of unique mark-ups can mimic analog-style spatial enrichment that may enhance memory.
|
||||||
|
|
||||||
|
Although they have no data from younger volunteers, researchers suspect that the difference in brain activation between analog and digital methods is likely to be stronger in younger people.
|
||||||
|
|
||||||
|
"High school students' brains are still developing and are so much more sensitive than adult brains," said Sakai.
|
||||||
|
|
||||||
|
Although the current research focused on learning and memorization, the researchers encourage using paper for creative pursuits as well.
|
||||||
|
|
||||||
|
"It is reasonable that one's creativity will likely become more fruitful if prior knowledge is stored with stronger learning and more precisely retrieved from memory. For art, composing music, or other creative works, I would emphasize the use of paper instead of digital methods," said Sakai.
|
||||||
|
|
@ -0,0 +1,111 @@
|
||||||
|
---
|
||||||
|
id: 6f1925bb-b86c-40d2-9363-6784aa2d402f
|
||||||
|
title: |
|
||||||
|
Train Your Brain to Be More Creative
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-10-23 10:56:30
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/train-your-brain-to-be-more-creative-18b5cd2a390
|
||||||
|
url_original: |
|
||||||
|
https://hbr.org/2021/06/train-your-brain-to-be-more-creative
|
||||||
|
---
|
||||||
|
|
||||||
|
# Train Your Brain to Be More Creative
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
## **Engage with nature**
|
||||||
|
|
||||||
|
It’s been proven that [spending time in nature](https://greatergood.berkeley.edu/article/item/how%5Fnature%5Fmakes%5Fyou%5Fkinder%5Fhappier%5Fmore%5Fcreative) makes us more creative. Looking at trees and leaves — instead of our electronic devices — reduces our anxiety, lowers our heart rates, soothes us, and allows our brains to make [connections more easily](https://bjsm.bmj.com/content/49/4/272.abstract?sid=56b97a4c-0e75-46d0-a6ba-41c7f41a089c).
|
||||||
|
|
||||||
|
By spending time in nature, I’m not referring to a trek in the wilderness either. Walking in an urban green space for just 25 minutes can quiet our brains and help us switch into autopilot node. According to the [_British Journal of Sports Medicine_](https://bjsm.bmj.com/content/49/4/272?sid=56b97a4c-0e75-46d0-a6ba-41c7f41a089c), this state sparks our present awareness and fuels imagination. We are more easily able to connect existing notions, thoughts, and images to form a new, relevant, and useable concept.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/train-your-brain-to-be-more-creative-18b5cd2a390#9190b653-c9fe-4438-b02d-10ac2095ecd1)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You may have heard that creativity uses your right brain while your left brain is triggered during more analytical tasks. Well, [neuroscientists have found](https://www.livescience.com/39671-roots-of-creativity-found-in-brain.html) that creativity actually draws on your _entire_ brain — and meditation can you give you access to it.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/train-your-brain-to-be-more-creative-18b5cd2a390#6b9b547e-2d87-4b4e-8fb5-76c0fe82be37)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Try to add workout time on your calendar and make sure not to skip it. If you feel you don’t have time for a dedicated workout, block 20 minutes on your calendar and spend that time doing stretches at your desk.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/train-your-brain-to-be-more-creative-18b5cd2a390#339a25cd-d9b8-4c5c-90bb-34f31965dea8)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
[  ](https://hbr.org/ascend)
|
||||||
|
|
||||||
|
Where your work meets your life.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Anastasia Usenko/Getty Images
|
||||||
|
|
||||||
|
Creativity isn’t inherent. You have to hone it. Here are a few ways to do that, based on neuroscience. Engage with nature: Looking at trees and leaves, instead of our electronic devices, reduces our anxiety, lowers our heart rates, soothes us, and allows our brains to...
|
||||||
|
|
||||||
|
[](https://hbr.org/insight-center/ascend)
|
||||||
|
|
||||||
|
Where your work meets your life. See more from Ascend [here](https://hbr.org/insight-center/ascend).
|
||||||
|
|
||||||
|
I don’t do ruts.
|
||||||
|
|
||||||
|
Not because I’m some brilliant creative, but because I’ve learned how my brain works. Your brain needs fuel, and it needs to be stretched to create those “OMG!” moments on demand.
|
||||||
|
|
||||||
|
Think about it. Great athletes train their bodies for days, weeks, and years to whip them into peak performance. Why, then, wouldn’t a creator do the same with their brain?
|
||||||
|
|
||||||
|
I’ve spent more than two decades (and counting) in the advertising industry, and contrary to popular belief, creativity isn’t inherent. You have to hone it. Over time, I’ve figured out what I need to do to get ideas flowing freely, and a lot of that insight comes from my interest in neuroscience. The more we learn about the workings of our gray matter, the better we can train it, control it, and make it do what we want.
|
||||||
|
|
||||||
|
Here a few things that have worked for me over the years.
|
||||||
|
|
||||||
|
## **==Engage with nature==**
|
||||||
|
|
||||||
|
==It’s been proven that== ==[spending time in nature](https://greatergood.berkeley.edu/article/item/how%5Fnature%5Fmakes%5Fyou%5Fkinder%5Fhappier%5Fmore%5Fcreative)== ==makes us more creative. Looking at trees and leaves — instead of our electronic devices — reduces our anxiety, lowers our heart rates, soothes us, and allows our brains to make== ==[connections more easily](https://bjsm.bmj.com/content/49/4/272.abstract?sid=56b97a4c-0e75-46d0-a6ba-41c7f41a089c)====.==
|
||||||
|
|
||||||
|
==By spending time in nature, I’m not referring to a trek in the wilderness either. Walking in an urban green space for just 25 minutes can quiet our brains and help us switch into autopilot node. According to the== [_British Journal of Sports Medicine_](https://bjsm.bmj.com/content/49/4/272?sid=56b97a4c-0e75-46d0-a6ba-41c7f41a089c)==, this state sparks our present awareness and fuels imagination. We are more easily able to connect existing notions, thoughts, and images to form a new, relevant, and useable concept.==
|
||||||
|
|
||||||
|
So make disconnecting a priority. Take a walk in your neighborhood park, stroll along the beach, or just add plants to your balcony and spend some time out there. For me, walking my dog — even when my name is not on the family schedule — works. You’ll feel the benefits of moving away from screens almost immediately.
|
||||||
|
|
||||||
|
## **Meditate**
|
||||||
|
|
||||||
|
I know, I know, you’ve heard this a million times: [Meditation](https://www.frontiersin.org/articles/10.3389/fpsyg.2013.01020/full) clears our minds of jumbled thoughts, and gives our brains the space to observe and reflect, improving task concentration and enhancing our ability to make smart decisions.
|
||||||
|
|
||||||
|
But did you know that meditation also puts the entire brain to work?
|
||||||
|
|
||||||
|
==You may have heard that creativity uses your right brain while your left brain is triggered during more analytical tasks. Well,== ==[neuroscientists have found](https://www.livescience.com/39671-roots-of-creativity-found-in-brain.html)== ==that creativity actually draws on your== _==entire==_ ==brain — and meditation can you give you access to it.==
|
||||||
|
|
||||||
|
This intentional practice can be as simple as closing your eyes and focusing on your breath. Headspace, the popular meditation app, even has guided meditations for inspiring creativity. The idea is that when we intentionally pause in awareness, [we allow our minds the freedom and space to be still and creative](https://www.headspace.com/meditation/creativity). I practice this between meetings. I find a quiet space, focus on my breathing, and get my brain into an alpha state, or a wakeful state of relaxation. This allows me to disconnect from my initial ideas (after all, the human brain is hardwired to take the path of least resistance) and create new pathways in my mind.
|
||||||
|
|
||||||
|
## **Get moving**
|
||||||
|
|
||||||
|
[Steve Jobs](https://financialpost.com/executive/c-suite/steve-jobs-was-right-about-walking) was a big advocate for walking meetings for a reason. Moving around [has been linked to increased performance](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC1332529/pdf/brjsmed00003-0076.pdf) on creative tests. Exercising releases endorphins — chemicals our bodies produce to relieve stress and pain. When we are less stressed, our brains venture into more fruitful territory.
|
||||||
|
|
||||||
|
In fact, [a recent article](https://www.irishexaminer.com/lifestyle/healthandwellbeing/arid-40251431.html) compared the chemical that our brain releases during physical activity to Miracle-Gro, the water-soluble plant food that helps grow bigger, healthier plants. The good part is moving around is super simple to do, especially when you’re working at home. I often attend meetings while cycling on a stationary bike or plan short walks in between (and this can be done in an office too).
|
||||||
|
|
||||||
|
==Try to add workout time on your calendar and make sure not to skip it. If you feel you don’t have time for a dedicated workout, block 20 minutes on your calendar and spend that time doing stretches at your desk.==
|
||||||
|
|
||||||
|
Find a routine that works for you.
|
||||||
|
|
||||||
|
Ascend
|
||||||
|
|
||||||
|
Career and life advice for young professionals.
|
||||||
|
|
||||||
|
## **Connect with different kinds of people**
|
||||||
|
|
||||||
|
When consciously seeking inspiration, not enough can be said about diversity. Remember the brain and its predisposition to take the lazy way out? Diversity makes the brain work harder [by challenging stereotypes.](https://www.theguardian.com/lifeandstyle/2015/nov/01/diversity-good-for-your-brain-mind-multicultural) In addition, researchers at Johns Hopkins University [found](https://muse.jhu.edu/article/536530/summary) that “exposure to diversity experiences might foster the development of more complex forms of thought, including the ability to think critically.”
|
||||||
|
|
||||||
|
I make it a point to surround myself with people who come from different backgrounds than I do because their perspectives are a catalyst for creative thinking. Contrasting opinions sparks new possibilities, and allow us to make connections we hadn’t seen before, leading to better decisions. There was something to be said about Abraham Lincoln filling his cabinet with [a “team of rivals.”](https://bigthink.com/in-their-own-words/you-can-be-your-own-team-of-rivals) Productive discussions, brainstorms, and debates often result in wiser outcomes. At my agency, we’ve set up an “inspiration council,” which brings together our people from various regions, cultures, genders, and more, to initiate these kind of discussions.
|
||||||
|
|
||||||
|
Today, the distributed working model born out of the pandemic has made it even easier to bring people together. I recommend using social media channels like LinkedIn and Instagram to follow and connect with people who have backgrounds and experiences that diverge from your own. Don’t limit yourself by geography when you’re reaching out to someone or expanding your network. We are much better at creative problem-solving when we don’t have the comfort of knowing what to expect, which can happen if we only surround ourselves with people just like us.
|
||||||
|
|
||||||
|
Use these principles of neuroscience to give your brain the exercise that it needs. It will get you out of any rut. Or prevent you from getting into one in the first place.
|
||||||
|
|
||||||
|
#### Readers Also Viewed These Items
|
||||||
|
|
||||||
|
* [Bas Korsten](https://hbr.org/search?term=bas%20korsten&search%5Ftype=search-all) is the Global Chief Creative Officer at Wunderman Thompson.
|
||||||
|
|
@ -0,0 +1,67 @@
|
||||||
|
---
|
||||||
|
id: 46eadaec-733a-11ee-aae2-4b1c5b8d8405
|
||||||
|
title: |
|
||||||
|
Let's Get Webby! 🦀 🕸️
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Newsletter
|
||||||
|
date_added: 2023-10-25 10:27:43
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/let-s-get-webby-18b6705008a
|
||||||
|
url_original: |
|
||||||
|
https://omnivore.app/no_url?q=bec70357-3199-44e0-9c84-40dd5a7bf774
|
||||||
|
---
|
||||||
|
|
||||||
|
# Let's Get Webby! 🦀 🕸️
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
...and front-end frameworks like [Yew](https://letsgetrusty.krtra.com/c/y9r3LFJzeRCp/OQKy) and [Seed](https://letsgetrusty.krtra.com/c/mN30voJhWLXc/OQKy) letting you write web apps in Rust!
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> I can create front end web apps with this libraries
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/let-s-get-webby-18b6705008a#7065ade5-765c-4d60-bd89-1ecb0d919389)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Hey Alexander,
|
||||||
|
|
||||||
|
JavaScript isn't the fastest language out there.
|
||||||
|
|
||||||
|
In fact, it's **pretty dang slow** compared to C/C++!
|
||||||
|
|
||||||
|
Unfortunately, this limits the type of web apps we could build.
|
||||||
|
|
||||||
|
How great would it be if we could write code that runs **at native speeds** in the browser?
|
||||||
|
|
||||||
|
This would allow computationally intensive apps like video editors, AAA games, and IDEs to be run in the browser!
|
||||||
|
|
||||||
|
Great news... **this is possible today** with the help of WebAssembly.
|
||||||
|
|
||||||
|
WebAssembly or WASM for short, is a technology that allows code written in languages such as C/C++, Java, Swift, and Rust to run in the browser at native speeds!
|
||||||
|
|
||||||
|
**And Rust has first-class support for WASM!**
|
||||||
|
|
||||||
|
With crates such as [wasm-bindgen ](https://letsgetrusty.krtra.com/c/Fv1n9JiwhxdT/OQKy)facilitating high-level interactions between Rust and JavaScript...
|
||||||
|
|
||||||
|
==...and front-end frameworks like== ==[Yew](https://letsgetrusty.krtra.com/c/y9r3LFJzeRCp/OQKy)== ==and== ==[Seed](https://letsgetrusty.krtra.com/c/mN30voJhWLXc/OQKy)== ==letting you write web apps in Rust!==
|
||||||
|
|
||||||
|
Are you ready to give Rust + WASM a try?
|
||||||
|
|
||||||
|
Check out this video I made: **[\>> Building a Rust App with Yew! <<](https://letsgetrusty.krtra.com/c/6AUVThScIsa4/OQKy)**
|
||||||
|
|
||||||
|
Have you built any WASM projects in Rust? Let me know!
|
||||||
|
|
||||||
|
Stay Rusty my friend!
|
||||||
|
|
||||||
|
Bogdan, Let's Get Rusty
|
||||||
|
|
||||||
|
**[Website](https://letsgetrusty.krtra.com/c/FBKvcPOtTzlF/OQKy)** | **[YouTube](https://letsgetrusty.krtra.com/c/4KIGD3ocszdT/OQKy)**
|
||||||
|
|
||||||
|
© Copyrights by Let's Get Rusty. All Rights Reserved.
|
||||||
|
|
@ -0,0 +1,97 @@
|
||||||
|
---
|
||||||
|
id: ad8a0732-733a-11ee-b2ab-13f1d6012322
|
||||||
|
title: |
|
||||||
|
What the Rust Book didn't tell you about testing...
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Newsletter
|
||||||
|
date_added: 2023-10-25 10:30:35
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/what-the-rust-book-didn-t-tell-you-about-testing-18b6707a120
|
||||||
|
url_original: |
|
||||||
|
https://omnivore.app/no_url?q=1fed5fd7-7706-46cf-9947-927b26a77112
|
||||||
|
---
|
||||||
|
|
||||||
|
# What the Rust Book didn't tell you about testing...
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
We want to test _get\_user_ without making real database queries.
|
||||||
|
|
||||||
|
The solution is to mock the _Database_ trait and assert _execute\_query_ is called with the correct query. But how?
|
||||||
|
|
||||||
|
We can use the [mockall crate](https://letsgetrusty.us6.list-manage.com/track/click?u=9f28b35c1658c447f3b962a54&id=00a07042b3&e=d0eb971086)!
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/what-the-rust-book-didn-t-tell-you-about-testing-18b6707a120#f9650419-c778-4974-9da2-aabce209609f)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
The Rust Book has an [entire chapter dedicated to testing](https://letsgetrusty.us6.list-manage.com/track/click?u=9f28b35c1658c447f3b962a54&id=a95a715235&e=d0eb971086), but it's missing a critical piece…
|
||||||
|
|
||||||
|
What happens when your code needs to make API calls or database queries?
|
||||||
|
|
||||||
|
Unit tests should be be fast, reliable, and deterministic.
|
||||||
|
|
||||||
|
We don't want to make expensive calls that might fail for various reasons.
|
||||||
|
|
||||||
|
|
||||||
|
Well here is some good news… we don't have to!
|
||||||
|
|
||||||
|
We can use mocking to substitute real objects for mock objects and assert certain expectations…
|
||||||
|
|
||||||
|
What's that? You want an example? Consider the following code…
|
||||||
|
|
||||||
|
trait Database {
|
||||||
|
fn execute_query(&self, query: String);
|
||||||
|
}
|
||||||
|
|
||||||
|
fn get_user(db: impl Database, id: i32) {
|
||||||
|
let query = format!("SELECT * from Users where id={}", id);
|
||||||
|
db.execute_query(query);
|
||||||
|
}
|
||||||
|
We want to test _get\_user_ without making real database queries.
|
||||||
|
|
||||||
|
The solution is to mock the _Database_ trait and assert _execute\_query_ is called with the correct query. But how?
|
||||||
|
|
||||||
|
We can use the [mockall crate](https://letsgetrusty.us6.list-manage.com/track/click?u=9f28b35c1658c447f3b962a54&id=00a07042b3&e=d0eb971086)!
|
||||||
|
|
||||||
|
Here is how we would test _get\_user_…
|
||||||
|
|
||||||
|
#[cfg(test)]
|
||||||
|
use mockall::{automock, predicate::*};
|
||||||
|
|
||||||
|
#[cfg_attr(test, automock)]
|
||||||
|
trait Database {
|
||||||
|
fn execute_query(&self, query: String);
|
||||||
|
}
|
||||||
|
|
||||||
|
fn get_user(db: impl Database, id: i32) {
|
||||||
|
let query = format!("SELECT * from Users where id={}", id);
|
||||||
|
db.execute_query(query);
|
||||||
|
}
|
||||||
|
|
||||||
|
#[cfg(test)]
|
||||||
|
mod tests {
|
||||||
|
use super::*;
|
||||||
|
|
||||||
|
#[test]
|
||||||
|
fn get_user_executes_correct_query() {
|
||||||
|
let mut mock_database = MockDatabase::new();
|
||||||
|
mock_database.expect_execute_query()
|
||||||
|
.with(eq("SELECT * from Users where id=22".to_owned()))
|
||||||
|
.once()
|
||||||
|
.returning(|_x| ());
|
||||||
|
|
||||||
|
get_user(mock_database, 22);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Boom! Now we have a unit test that's fast, reliable, and deterministic!
|
||||||
|
|
||||||
|
If you haven't seen my [intro to testing in Rust video](https://letsgetrusty.us6.list-manage.com/track/click?u=9f28b35c1658c447f3b962a54&id=90d4167901&e=d0eb971086) make sure to check it out!
|
||||||
|
|
||||||
|
|
||||||
|
Happy testing, and stay Rusty!
|
||||||
76
_master_wiki/Read Later/2023-10-31 - Use cases for Rust.md
Normal file
76
_master_wiki/Read Later/2023-10-31 - Use cases for Rust.md
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
---
|
||||||
|
id: 7b7ae540-77ef-11ee-9aed-e318464fef5a
|
||||||
|
title: |
|
||||||
|
Use cases for Rust
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Newsletter
|
||||||
|
date_added: 2023-10-31 10:14:54
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/use-cases-for-rust-18b85df6f3a
|
||||||
|
url_original: |
|
||||||
|
https://omnivore.app/no_url?q=9e2f3a10-e4fd-4c33-85a3-ff3609f3c4d6
|
||||||
|
---
|
||||||
|
|
||||||
|
# Use cases for Rust
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
Some popular server-side web frameworks written in Rust include Actix Web, Warp, and Axum.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/use-cases-for-rust-18b85df6f3a#64793bd7-d3bd-4597-9f2c-9b4697217661)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Hi Rustaceans,
|
||||||
|
|
||||||
|
Rust is fast, safe and hip.
|
||||||
|
|
||||||
|
But, what can you actually build with Rust?
|
||||||
|
|
||||||
|
…whether you want to use Rust professionally or as a hobbyist.
|
||||||
|
|
||||||
|
Here are a few common types of applications built using Rust:
|
||||||
|
|
||||||
|
**Blockchain**
|
||||||
|
|
||||||
|
* Rust is a great choice for blockchain applications because it is fast and secure.
|
||||||
|
* You can write both smart contracts and entire blockchains using Rust.
|
||||||
|
* Some popular blockchain projects written in Rust include Solana, Polkadot, and Near.
|
||||||
|
|
||||||
|
**Embedded programs**
|
||||||
|
|
||||||
|
* Rust is also well-suited for embedded programs, such as those used in cars, airplanes, and other devices.
|
||||||
|
* This is because Rust is memory-safe, memory-efficient and can be compiled to run on a variety of platforms.
|
||||||
|
|
||||||
|
**Server-side applications / Microservices**
|
||||||
|
|
||||||
|
* Rust is a great choice for server-side applications and microservices because it is fast and efficient.
|
||||||
|
* ==Some popular server-side web frameworks written in Rust include Actix Web, Warp, and Axum.==
|
||||||
|
* Many companies are migrating their critical microservices to Rust because of its safety and performance guarantees.
|
||||||
|
|
||||||
|
**WebAssembly**
|
||||||
|
|
||||||
|
* Rust can be compiled to WebAssembly, which means that you can use Rust to build web applications.
|
||||||
|
* Rust’s small runtime and first-class support for WebAssembly often make it the first contender for any WebAssembly projects.
|
||||||
|
|
||||||
|
This is only a small sample of what you can build in Rust.
|
||||||
|
|
||||||
|
In general, Rust is a great choice if you are looking for speed, safety and versatility.
|
||||||
|
|
||||||
|
If you want more details, here’s a YouTube video I made on the same topic.
|
||||||
|
|
||||||
|
**[\>>> What can you build in Rust?!](https://letsgetrusty.krtra.com/c/BgXaOx7YGua4/OQKy)**
|
||||||
|
|
||||||
|
Have fun building!
|
||||||
|
|
||||||
|
Bogdan
|
||||||
|
|
||||||
|
\---
|
||||||
|
|
||||||
|
PS - Looking for a Rust job? Apply here - [https://letsgetrusty.com/jobs](https://letsgetrusty.krtra.com/c/ysWbInNFr59c/OQKy)
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
---
|
||||||
|
id: e41b4086-963e-45e7-9ef7-2cfee7061047
|
||||||
|
title: |
|
||||||
|
Why Signals Are Better Than React Hooks
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-11-01 14:16:42
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/https-youtu-be-so-8-l-bvwf-2-y-8-si-zy-gl-ie-hl-ai-pg-w-5-xo-18b8be328e5
|
||||||
|
url_original: |
|
||||||
|
https://youtu.be/SO8lBVWF2Y8?si=zyGlIeHlAiPgW5Xo
|
||||||
|
---
|
||||||
|
|
||||||
|
# Why Signals Are Better Than React Hooks
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Signals ayuda a la performance y legibilidad de una aplicación haciendo que la funcionalidades que normalmente se realizarían con los hooks `useState` y `useEffect` se realizen dentro de `signals`.
|
||||||
|
|
||||||
|
Esto permite compartir este _"estado"_ entre componentes pero solo actualizar los involucrados y no todos los desendientes del componente mayor.
|
||||||
|
|
||||||
|
Además, podemos extraer toda la lógica del estado a un archivo aparte que solo tenga código relevante, y en los componentes se mantiene solo la implementación.
|
||||||
|
|
||||||
|
Es obviamente más rápido de implementar y más limpio que hacer custom hooks, pero es añadir otra dependencia, habrá otras ventajas y desventajas??
|
||||||
|
## Original
|
||||||
|
|
||||||
|
[Why Signals Are Better Than React Hooks](https://youtu.be/SO8lBVWF2Y8?si=zyGlIeHlAiPgW5Xo)
|
||||||
|
|
||||||
|
By [Web Dev Simplified](https://www.youtube.com/@WebDevSimplified)
|
||||||
|
|
@ -0,0 +1,41 @@
|
||||||
|
---
|
||||||
|
id: 24bd8d1e-b118-4930-a86d-3929f2dad34c
|
||||||
|
title: |
|
||||||
|
The First Rule of Comments in Code
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
date_added: 2023-11-02 23:25:19
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/https-youtu-be-hxsx-3-vbf-qq-si-c-5-qy-m-mg-8-j-yhc-bbq-18b92ffccf6
|
||||||
|
url_original: |
|
||||||
|
https://youtu.be/hxsx3vbf-QQ?si=-C5QyMMg8JYhcBBQ
|
||||||
|
---
|
||||||
|
|
||||||
|
# The First Rule of Comments in Code
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
Comments are bad by nature:
|
||||||
|
- They get outdated pretty quickly, and you don't know if the comments is updated with the code.
|
||||||
|
- A comments is most probably noise, because it's not gonna provide more information than the code itself.
|
||||||
|
- Commented code is broken code, because it's probably outdated compared to it's context.
|
||||||
|
|
||||||
|
Some rules to evade writing comments:
|
||||||
|
|
||||||
|
**Code that needs a comment, needs to be rewritten**. Always try to put the information in the code. if it needs a comment, it's not good enough.
|
||||||
|
|
||||||
|
**Move information somewhere else**. this is similar to the previous, move to a variable name, or to a documentation file in the worst case.
|
||||||
|
|
||||||
|
**How quickly the information will goes out of date**. It's so simple that a comments goes out of sync with the code, to prevent that transform the comment in code.
|
||||||
|
|
||||||
|
**If a comment gives no more information than the code, delete it**.
|
||||||
|
|
||||||
|
**"I need to explain the complexity"**. No, you need to fix the complexity. If the complexity is so big, put in the documentation instead. A comment cannot fix complexity, and will require hard work to change that code.
|
||||||
|
|
||||||
|
**Don't comment out code, delete it**. Commented code goes quickly out of sync with it's context, is not tested in any way and the effort of updating it is almost the same if not higher that writing it over with better knowledge, so it's better to just delete it. If we need this code back, we can recover it with git.
|
||||||
|
## Original
|
||||||
|
|
||||||
|
[The First Rule of Comments in Code](https://youtu.be/hxsx3vbf-QQ?si=-C5QyMMg8JYhcBBQ)
|
||||||
|
|
||||||
|
By [Bran van der Meer](https://www.youtube.com/@branvandermeer)
|
||||||
|
|
@ -0,0 +1,266 @@
|
||||||
|
---
|
||||||
|
id: 88b1e080-79be-11ee-b19c-971f00999697
|
||||||
|
title: |
|
||||||
|
Web Accessibility Tips for Developers – A11y Principles Explained
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- RSS
|
||||||
|
date_added: 2023-11-02 11:17:51
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5
|
||||||
|
url_original: |
|
||||||
|
https://www.freecodecamp.org/news/web-accessibility-for-devs/
|
||||||
|
---
|
||||||
|
|
||||||
|
# Web Accessibility Tips for Developers – A11y Principles Explained
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
you can provide captions for audio and video materials.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#a243f9e5-2cf7-437b-afdb-725d69408fa5)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
color contrast for text and background
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#7da331b9-d92c-40b1-b9ff-03cd350b19e0)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
it's a good idea to include descriptive alternative text (alt text) for images, explaining what they depict and their purpose.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#c2a6ebd3-44b3-4bac-b723-be08ec3191d3)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
You should also describe your icon buttons.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#644def06-75fc-41b3-ad64-8b0eb34eb055)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
First, make sure you use clear and consistent headings.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#5d22dea1-4451-4052-a211-ffbc432cb3be)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
And make sure you think about [keyboard accessibility](https://www.freecodecamp.org/news/designing-keyboard-accessibility-for-complex-react-experiences/) so users can navigate and communicate using the keyboard, and not exclusively using a mouse.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#a6f33320-f395-41f2-92e4-7e5c70337377)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
Organize content using headings, subheadings, and bullet points to enhance readability.
|
||||||
|
|
||||||
|
> [!note]
|
||||||
|
> Use semantic HTML
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#d6c8b9dc-b9e7-4ab7-8b53-0057246fea9a)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
* Use [HTML5 semantic elements](https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/) like ``, ``, ``, and `` to enhance the document's structure.
|
||||||
|
* Ensure that your [JavaScript code is efficient](https://www.freecodecamp.org/news/javascript-performance-async-defer/) and doesn't block the rendering process.
|
||||||
|
* Utilize [browser developer tools](https://www.freecodecamp.org/news/learn-how-to-use-the-chrome-devtools-to-troubleshoot-websites/) and online testing services to identify and fix compatibility issues.
|
||||||
|
* Conduct [usability testing](https://www.freecodecamp.org/news/10-best-ux-testing-software-tools/) with a diverse group of users, including those who rely on assistive technologies, to gather feedback and make improvements.
|
||||||
|
* Optimize your website for fast loading times and low data usage using techniques like [caching](https://www.freecodecamp.org/news/a-detailed-guide-to-pre-caching/) and [tools like CDNs](https://www.freecodecamp.org/news/cdns-speed-up-performance-by-reducing-latency/) to reduce latency. This benefits both accessibility and user experience.
|
||||||
|
* Document your code and accessibility features for future maintainers.
|
||||||
|
* Test [website compatibility across various browsers](https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/). Testing website compatibility involves ensuring that your website functions correctly and looks good on a variety of devices, browsers, and assistive technologies.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/web-accessibility-tips-for-developers-a-11-y-principles-explaine-18b91ba16e5#ade773c1-f3e3-499b-8b34-c9d8a2c084e3)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Accessibility isn't just something you check off as done when you're building websites and web apps. It's a basic part of making the online world a better and fairer place for everyone.
|
||||||
|
|
||||||
|
In this article, you'll learn what accessibility means, and why it's important to make accessibility a part of your regular workflow. I'll also give you practical tips with examples to make your websites more accessible.
|
||||||
|
|
||||||
|
Let's explore the key parts of web accessibility together and help you make a website that includes everyone.
|
||||||
|
|
||||||
|
## What is Web Accessibility?
|
||||||
|
|
||||||
|
[Web accessibility](https://www.freecodecamp.org/news/accessibility-best-practices-to-make-web-apps-accessible/) refers to the practice of designing and developing websites, applications, and digital content in a way that ensures people with disabilities can perceive, understand, navigate, and interact with them effectively.
|
||||||
|
|
||||||
|
## Principles of Web Accessibility
|
||||||
|
|
||||||
|
To effectively enhance the accessibility of your websites and apps, you'll want to follow these fundamental principles outlined by the Web Content Accessibility Guidelines ([WCAG](https://www.w3.org/WAI/WCAG21/quickref/?versions=2.0)):
|
||||||
|
|
||||||
|
### Is it Perceivable?
|
||||||
|
|
||||||
|
Content should be displayed in a manner that all users can understand, regardless of their sensory abilities. Here are some ways you can make your content more perceivable:
|
||||||
|
|
||||||
|
First, ==you can provide captions for audio and video materials.== Adding captions to your website or application allows those with hearing disabilities to understand the information being shared, and make the content more accessible to everyone.
|
||||||
|
|
||||||
|
You can see an example of adding captions to a video in the image below:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image of a video illustrating the use of captions.
|
||||||
|
|
||||||
|
Next, make sure you use proper ==color contrast for text and background== elements.
|
||||||
|
|
||||||
|
Colors are an important part of a website, and we can describe them in terms of hue, lightness, and saturation.
|
||||||
|
|
||||||
|
There are several categories of colors which include warm colors, cool colors, and neutral colors
|
||||||
|
|
||||||
|
**Warm Colors:** Warm colors include red, orange, and yellow, and variations of
|
||||||
|
those three colors. These are the colors of fire, fall leaves, sunsets, and sunrises, and are generally energizing, passionate, and positive.
|
||||||
|
|
||||||
|
**Cool Colors:** Cool colors include green, blue, and purple, are often more
|
||||||
|
subdued than warm colors. They are the colors of night, water, of nature, and are usually calming, relaxing, and somewhat reserved.
|
||||||
|
|
||||||
|
**Neutral Colors:** Neutral colors often serve as the backdrop in design. They’re
|
||||||
|
commonly combined with brighter accent colors. But they can also be used on their own in designs and can create very sophisticated layouts. Neutral colors include black, white, gray, cream, and beige.
|
||||||
|
|
||||||
|
Examples of colors that will make good contrast are white and blue, purple and white, yellow and white, light purple and black, green and white, black and white, and so on – basically any colors that are different enough from each other to create that contrast.
|
||||||
|
|
||||||
|
Examples of colors that will make a bad contrast are gray and white, brown and orange, red and purple, and so on.
|
||||||
|
|
||||||
|
Here is an example that shows good color contrast that's easy to read:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image illustrating good contrast using a dark blue background with white text
|
||||||
|
|
||||||
|
And here's an image with poor color contrast that's hard to read:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image Illustrating bad contrast using a white background with light grey text
|
||||||
|
|
||||||
|
Also, ==it's a good idea to include descriptive alternative text (alt text) for images, explaining what they depict and their purpose.==
|
||||||
|
|
||||||
|
So for example, when you want to add an image to your website, you can add alt text to it explaining what it depicts.
|
||||||
|
|
||||||
|
Here is a markup description of how to add alt text to an image:
|
||||||
|
|
||||||
|
```routeros
|
||||||
|
<img src="Dog.png" alt="Image of a dog">
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
Here is an example that shows an image of two (2) dogs:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image of two dogs
|
||||||
|
|
||||||
|
And here's an example of an image that illustrates the use of alt text:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Image of dog with alt text displayed
|
||||||
|
|
||||||
|
==You should also describe your icon buttons.==
|
||||||
|
|
||||||
|
Icons can be easily understood most of the time. It's widely recognized that an x symbol, like this ❌, typically closes a window, a check mark ✅ signifies completion, a forward arrow ▶ signifies send (or play), and a plus sign ➕ represents addition.
|
||||||
|
|
||||||
|
But this is clear only for individuals with visual capabilities. For people who aren't able to see the buttons, you'll need to provide a description so they know what that button does.
|
||||||
|
|
||||||
|
Let's take a look at this HTML and CSS code that shows how to make buttons access:
|
||||||
|
|
||||||
|
Document
|
||||||
|
|
||||||
|
Here's the result of the code implemented above:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Is it Operable?
|
||||||
|
|
||||||
|
Users should be able to navigate and interact with the interface quickly. Consider the following factors:
|
||||||
|
|
||||||
|
==First, make sure you use clear and consistent headings.==
|
||||||
|
|
||||||
|
This is what clear and consistent headings look like:
|
||||||
|
|
||||||
|
## I am a Title
|
||||||
|
|
||||||
|
## I am a Subtitle
|
||||||
|
|
||||||
|
### This is heading 3
|
||||||
|
|
||||||
|
#### This is Heading 4
|
||||||
|
|
||||||
|
##### This is Heading 5
|
||||||
|
|
||||||
|
###### This is heading 6
|
||||||
|
|
||||||
|
As you can see, these headings go from largest to smallest in order. We have an H1 heading first, followed by H2, H3, and so on.
|
||||||
|
|
||||||
|
Here are some headings that don't follow the proper hierarchy:
|
||||||
|
|
||||||
|
###### This is heading 6
|
||||||
|
|
||||||
|
##### This is Heading 5
|
||||||
|
|
||||||
|
#### This is Heading 4
|
||||||
|
|
||||||
|
### This is heading 3
|
||||||
|
|
||||||
|
## I am a Subtitle
|
||||||
|
|
||||||
|
## I am a Title
|
||||||
|
|
||||||
|
In this example, the headings go in reverse order, starting from H6 and moving up through H5, H4, and so on.
|
||||||
|
|
||||||
|
Just remember to use proper heading hierarchy – don't use an H2 and then jump straight to H4 for a subheading, for example, as this is visually jarring and doesn't convey the proper importance or hierarchy of the text.
|
||||||
|
|
||||||
|
Here's why heading hierarchy is important:
|
||||||
|
|
||||||
|
* A clear heading hierarchy helps readers easily navigate and understand the content of a document.
|
||||||
|
* Heading hierarchy is crucial for accessibility, as it helps screen readers and assistive technologies interpret the structure of the content. This is important for individuals with visual impairments who rely on such tools to access information.
|
||||||
|
* A well-organized heading hierarchy implement a logical flow of information, ensuring that topics are presented in a coherent order.
|
||||||
|
|
||||||
|
Also, refrain from using elements that might trigger physical discomfort, like bright flashing lights.
|
||||||
|
|
||||||
|
==And make sure you think about== ==[keyboard accessibility](https://www.freecodecamp.org/news/designing-keyboard-accessibility-for-complex-react-experiences/)== ==so users can navigate and communicate using the keyboard, and not exclusively using a mouse.==
|
||||||
|
|
||||||
|
### Is it Understandable?
|
||||||
|
|
||||||
|
Content and functionality should be presented clearly and understandably. Consider the following factors:
|
||||||
|
|
||||||
|
* ==Organize content using headings, subheadings, and bullet points to enhance readability.==
|
||||||
|
* Provide instructions and error messages that are easy to understand.
|
||||||
|
* Use simple and concise language, avoid complex terms.
|
||||||
|
|
||||||
|
### Is it Robust?
|
||||||
|
|
||||||
|
Websites should be built using robust and widely supported technologies to enable compatibility across devices and assistive technologies.
|
||||||
|
|
||||||
|
You'll want to maximize compatibility with current and future user agents, including assistive technologies.
|
||||||
|
|
||||||
|
Here are some of the ways you can maximize compatibility with current and future agents, including assistive tools:
|
||||||
|
|
||||||
|
* ==Use== ==[HTML5 semantic elements](https://www.freecodecamp.org/news/semantic-html-alternatives-to-using-divs/)== ==like== `==<====header====>==`==,== `==<====nav====>==`==,== `==<====main====>==`==, and== `==<====footer====>==` ==to enhance the document's structure.==
|
||||||
|
* ==Ensure that your== ==[JavaScript code is efficient](https://www.freecodecamp.org/news/javascript-performance-async-defer/)== ==and doesn't block the rendering process.==
|
||||||
|
* ==Utilize== ==[browser developer tools](https://www.freecodecamp.org/news/learn-how-to-use-the-chrome-devtools-to-troubleshoot-websites/)== ==and online testing services to identify and fix compatibility issues.==
|
||||||
|
* ==Conduct== ==[usability testing](https://www.freecodecamp.org/news/10-best-ux-testing-software-tools/)== ==with a diverse group of users, including those who rely on assistive technologies, to gather feedback and make improvements.==
|
||||||
|
* ==Optimize your website for fast loading times and low data usage using techniques like== ==[caching](https://www.freecodecamp.org/news/a-detailed-guide-to-pre-caching/)== ==and== ==[tools like CDNs](https://www.freecodecamp.org/news/cdns-speed-up-performance-by-reducing-latency/)== ==to reduce latency. This benefits both accessibility and user experience.==
|
||||||
|
* ==Document your code and accessibility features for future maintainers.==
|
||||||
|
* ==Test== ==[website compatibility across various browsers](https://www.freecodecamp.org/news/cross-browser-compatibility-testing-best-practices-for-web-developers/)====. Testing website compatibility involves ensuring that your website functions correctly and looks good on a variety of devices, browsers, and assistive technologies.==
|
||||||
|
|
||||||
|
Here are the steps you can follow to test website compatibility effectively:
|
||||||
|
|
||||||
|
1. **Device Testing**: Test your website on various devices, such as desktop computers, laptops, tablets, and smartphones. This includes both iOS and Android devices.
|
||||||
|
2. **Browser Testing**: Check your website's performance and appearance on multiple browsers, including but not limited to Google Chrome, Mozilla Firefox, Apple Safari, and Microsoft Edge.
|
||||||
|
3. **User Testing**: Conduct usability testing with real users. Ask them to use your website on different devices and browsers and collect feedback on compatibility issues.
|
||||||
|
4. **Performance Testing**: Assess website loading times, and optimize for speed using tools like Google PageSpeed Insights, GTmetrix, or Lighthouse. Check for compatibility with slow internet connections.
|
||||||
|
|
||||||
|
## Conclusion
|
||||||
|
|
||||||
|
Understanding web accessibility can enhance the user experience by creating a smooth and seamless interaction with websites and web applications.
|
||||||
|
|
||||||
|
Implementing these tips can improve the overall user-friendliness and navigability of your app. It'll help create a more enjoyable experience for all users, and will also allow people with disabilities to perceive, understand, navigate, and interact with your sites effectively.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
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/)
|
||||||
|
|
@ -0,0 +1,27 @@
|
||||||
|
---
|
||||||
|
id: fc51bf82-66d3-451f-8f64-17d6add50f92
|
||||||
|
title: |
|
||||||
|
Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- Youtube
|
||||||
|
date_added: 2023-11-04 14:14:49
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/https-www-youtube-com-watch-pp-yg-ukz-2-l-0-ih-nxd-w-fza-a-253-d-18b9b548407
|
||||||
|
url_original: |
|
||||||
|
https://www.youtube.com/watch?pp=ygUKZ2l0IHNxdWFzaA%253D%253D&v=HlmZLXMOpEM
|
||||||
|
---
|
||||||
|
|
||||||
|
# Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?
|
||||||
|
|
||||||
|
## Notes
|
||||||
|
|
||||||
|
- Merge commit: Se crea un commit que tiene 2 padres, el último commit de main y la feature branch, se mantiene la trazabilidad hacia la feature branch pero el historial queda visualmente más complejo
|
||||||
|
- Rebase: Se copian los commits de la feature branch a main como nuevos commits, se pierde la trazabilidad hacia la feature branch pero queda un historial lineal en main
|
||||||
|
- Squash commit: Se juntan todos los commits en uno solo con un squash que queda en main, se pierde la trazabilidad hacia la feature branch pero queda un historial lineal en main
|
||||||
|
## Original
|
||||||
|
|
||||||
|
[Git Merge vs Rebase vs Squash ¿Qué estrategia debemos elegir?](https://www.youtube.com/watch?pp=ygUKZ2l0IHNxdWFzaA%253D%253D&v=HlmZLXMOpEM)
|
||||||
|
|
||||||
|
By [CodelyTV - Redescubre la programación](https://www.youtube.com/@CodelyTV)
|
||||||
|
|
@ -0,0 +1,402 @@
|
||||||
|
---
|
||||||
|
id: 616d5d08-7d04-11ee-8eaa-9f56108b78ec
|
||||||
|
title: |
|
||||||
|
How to Write Components that Work in Any Framework
|
||||||
|
status: ARCHIVED
|
||||||
|
tags:
|
||||||
|
- read-later
|
||||||
|
- RSS
|
||||||
|
date_added: 2023-11-06 17:25:12
|
||||||
|
url_omnivore: |
|
||||||
|
https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079
|
||||||
|
url_original: |
|
||||||
|
https://www.freecodecamp.org/news/write-components-that-work-in-any-framework/
|
||||||
|
---
|
||||||
|
|
||||||
|
# How to Write Components that Work in Any Framework
|
||||||
|
|
||||||
|
## Highlights
|
||||||
|
|
||||||
|
With Custom Elements you can author your own custom HTML elements that you can reuse across your site. They can be as simple as text, images, or visual decorations. You can push them further and build interactive components, complex widgets, or entire web applications.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#bceef8c0-728e-422a-aed6-b047736cb395)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Writing a web component requires understanding all of its underlying technologies
|
||||||
|
|
||||||
|
As we saw above, web components are made up of three technologies. You can also see in the hello world code snippet, that we explicitly need to know and understand these three technologies.
|
||||||
|
|
||||||
|
1. We’re creating a **template element** and setting its inner HTML
|
||||||
|
2. We’re creating a **shadow root**, and explicitly setting its mode to ‘open’.
|
||||||
|
3. We’re cloning our **template** and appending it to our **shadow root**
|
||||||
|
4. We’re registering a new **custom element** to the document
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#46fc130a-1549-40c8-b950-42035c227bc4)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
As web component authors, we need to consider a lot of things:
|
||||||
|
|
||||||
|
* Setting up the shadow DOM
|
||||||
|
* Setting up the HTML templates
|
||||||
|
* Cleaning up event listeners
|
||||||
|
* Defining properties that we want to observe
|
||||||
|
* Reacting to properties when they change
|
||||||
|
* Handling type conversions for attributes
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#855f444c-49f1-4176-9537-aaeeb6a01355)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
One such tool is called Lit, which is developed by a team at Google. [Lit](https://lit.dev/) is a lightweight library designed to make writing web components simple, by removing the need for the boilerplate we’ve already seen above.
|
||||||
|
|
||||||
|
[source](https://omnivore.app/me/how-to-write-components-that-work-in-any-framework-18ba72d0079#385d9ef8-13fb-4799-bff5-ef767b3df67f)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## Original
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
The browser has a built-in way of writing reusable components in the form of **web components**. They’re an excellent choice for building interactive and reusable components that work in any frontend framework.
|
||||||
|
|
||||||
|
With that said, writing highly interactive and robust web components isn’t simple. They require a lot of boilerplate and feel much less intuitive than the components you may have written in frameworks like React, Svelte, or Vue.
|
||||||
|
|
||||||
|
In this tutorial, I’ll give you an example of an interactive component written as a web component, and then refactor it using a library that softens the edges and removes heaps of boilerplate.
|
||||||
|
|
||||||
|
Don’t sweat it if you’re not familiar with web components. In the next section, I’ll do a (brief) overview of what web components are, and what they’re made out of. If you have some basic experience with them, you can skip the next section.
|
||||||
|
|
||||||
|
## What are Web Components?
|
||||||
|
|
||||||
|
Before web components, the browser didn’t have a standard way of writing reusable components. Many libraries solve this problem, but they often run into limitations like performance, interoperability, and issues with web standards.
|
||||||
|
|
||||||
|
Web components are a technology made up of 3 different browser features:
|
||||||
|
|
||||||
|
* Custom elements
|
||||||
|
* Shadow DOM
|
||||||
|
* HTML Templates
|
||||||
|
|
||||||
|
We’ll do a quick crash course covering these technologies, but it’s by no means a comprehensive breakdown.
|
||||||
|
|
||||||
|
### What are Custom Elements?
|
||||||
|
|
||||||
|
==With Custom Elements you can author your own custom HTML elements that you can reuse across your site. They can be as simple as text, images, or visual decorations. You can push them further and build interactive components, complex widgets, or entire web applications.==
|
||||||
|
|
||||||
|
You’re not just limited to using them in your projects, but you can publish them and allow other developers to use them on their sites.
|
||||||
|
|
||||||
|
Here are some of the reusable components from my library [A2K](https://a2000-docs.netlify.app/). You can see that they come in all shapes and sizes, and have a range of different functionalities. Using them in your projects is similar to using any old HTML element.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
A small collection of web components from the A2K library
|
||||||
|
|
||||||
|
Here’s how you’d use the progress element in your project:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Quick Start</title>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<!-- Use web components in your HTML like regular built-in elements. -->
|
||||||
|
<a2k-progress progress="50" />
|
||||||
|
|
||||||
|
<!-- a2k web components use standard JavaScript modules. -->
|
||||||
|
<script type="module">
|
||||||
|
import 'https://cdn.jsdelivr.net/npm/@a2000/progress@0.0.5/lib/src/a2k-progress.js';
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
Once you’ve imported the third-party scripts, you can start using the component, `a2k-progress` in this case, just like any other HTML element.
|
||||||
|
|
||||||
|
If you’re building your own web components, there’s virtually no limit to how complex you can make your custom elements.
|
||||||
|
|
||||||
|
I recently created a web component that renders a CodeSandbox code editor in the browser. And because it’s a web component, you can use it in any framework you like! If you’d like to learn a little more about that, [you can read more here](https://component-odyssey.com/articles/00-sandpack-lit-universal).
|
||||||
|
|
||||||
|
### What is the Shadow DOM?
|
||||||
|
|
||||||
|
If you have a working knowledge of CSS, you’ll know that vanilla CSS is scoped globally. Writing something like this in your global.css:
|
||||||
|
|
||||||
|
```css
|
||||||
|
p {
|
||||||
|
color: tomato;
|
||||||
|
}
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
will give all `p` elements a nice orange/red color, assuming that no other, more specific CSS selectors are applied to a `p` element.
|
||||||
|
|
||||||
|
Take this select menu, for example:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
It has a distinct character which is driven by the visual design. You might want to use this component, but if your global styles affect things like the font family, the color, or the font size, it could cause issues with the appearance of the component:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
color: blue;
|
||||||
|
font-size: 12px;
|
||||||
|
font-family: system-ui;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<a2k-select></a2k-select>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
This is where the Shadow DOM comes in. The Shadow DOM is an encapsulation mechanism that prevents the rest of the DOM from interfering with your web components. It ensures that the global styles of the web application don’t interfere with any components that you consume. It also means that component library developers can author their components with the confidence that they’ll look and behave as expected across different web applications.
|
||||||
|
|
||||||
|
There’s a lot more nuance when it comes to the Shadow DOM, as well as other features that we’re not going to touch on in this article. If you’d like to learn more about web components though, I have an entire course ([Component Odyssey](https://component-odyssey.com/)) dedicated to teaching you how to build reusable components that work in any framework.
|
||||||
|
|
||||||
|
### HTML Templates
|
||||||
|
|
||||||
|
The last feature in our whistle-stop tour of web component features is HTML Templates.
|
||||||
|
|
||||||
|
What makes this HTML element different from other elements, is that the browser doesn’t render its content to the page. If you were to write the following HTML you wouldn’t see the text “I’m a header” displayed on the page:
|
||||||
|
|
||||||
|
```xml
|
||||||
|
<body>
|
||||||
|
<template>
|
||||||
|
<h1>I'm a header</h1>
|
||||||
|
</template>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
Instead of being used to render the content directly, the content of the template is designed to be copied. The copied template can then be used to render content to the page.
|
||||||
|
|
||||||
|
You can think of the template element much like the template for a 3D print. The template isn’t a physical entity, but it’s used to create real-life clones.
|
||||||
|
|
||||||
|
You would then reference the template element in your web component, clone it, and render the clone as the markup for your component.
|
||||||
|
|
||||||
|
I won’t spend any more time on these web component features, but you’ve probably already noticed that to write vanilla web components, there are a lot of new browser features that you need to know and understand.
|
||||||
|
|
||||||
|
You’ll see in the next section that the mental model for building web components doesn’t feel as streamlined as it does for other component frameworks.
|
||||||
|
|
||||||
|
## How to Build a Basic Web Component
|
||||||
|
|
||||||
|
Now that we’ve briefly covered the fundamental technologies powering a web component, here’s how to build a _hello world_ component:
|
||||||
|
|
||||||
|
```scala
|
||||||
|
const template = document.createElement('template');
|
||||||
|
template.innerHTML = `<p>Hello World</p>`;
|
||||||
|
|
||||||
|
class HelloWorld extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({ mode: 'open' });
|
||||||
|
this.shadowRoot.append(template.content.cloneNode(true));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
customElements.define('hello-world', HelloWorld);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
This is the most simple component you can write, but there’s already so much going on. For someone completely new to web components, and without the background knowledge I provided above, they’re going to be left with a lot of questions, and a lot of confusion.
|
||||||
|
|
||||||
|
For me, there are at least two key reasons why web components can be challenging to write, at least within the context of the hello world examples.
|
||||||
|
|
||||||
|
### The markup is decoupled from the component logic
|
||||||
|
|
||||||
|
In many frameworks, the markup of the component is often treated as a first-class citizen. It’s often the content that gets returned from the component function, or has direct access to the component’s state, or has built-in utilities to help manipulate markup (like loops, conditionals, and so on).
|
||||||
|
|
||||||
|
This isn’t the case for web components. In fact, the markup is often defined outside of the component’s class. There’s also no built-in way for the template to reference the current state of the component. This becomes a cumbersome limitation as the complexity of a component grows.
|
||||||
|
|
||||||
|
In the world of frontend, components are designed to help developers reuse markup in several pages. As a result, the markup and the component logic are inextricably linked, and so they should be colocated with one another.
|
||||||
|
|
||||||
|
### ==Writing a web component requires understanding all of its underlying technologies==
|
||||||
|
|
||||||
|
==As we saw above, web components are made up of three technologies. You can also see in the hello world code snippet, that we explicitly need to know and understand these three technologies.==
|
||||||
|
|
||||||
|
1. ==We’re creating a== **==template element==** ==and setting its inner HTML==
|
||||||
|
2. ==We’re creating a== **==shadow root==**==, and explicitly setting its mode to ‘open’.==
|
||||||
|
3. ==We’re cloning our== **==template==** ==and appending it to our== **==shadow root==**
|
||||||
|
4. ==We’re registering a new== **==custom element==** ==to the document==
|
||||||
|
|
||||||
|
There’s nothing inherently wrong with this, since web components are supposed to be a “lower-level” browser API, making them prime for building abstractions on top of. But for a developer coming from a React or a Svelte background, having to understand these new browser features, and then having to write components with them can feel like too much friction.
|
||||||
|
|
||||||
|
## More Advanced Web Components
|
||||||
|
|
||||||
|
Let’s take a look at a more advanced web component, a counter button.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
You click the button, and the counter increments.
|
||||||
|
|
||||||
|
The following example contains a few extra web component concepts, like lifecycle functions and observable attributes. You don’t need to understand everything going on in the code snippet. This example is really only used to illustrate how much boilerplate is required for the most basic of interactive interfaces, a counter button:
|
||||||
|
|
||||||
|
```kotlin
|
||||||
|
const templateEl = document.createElement("template");
|
||||||
|
|
||||||
|
templateEl.innerHTML = `
|
||||||
|
<button>Press me!</button>
|
||||||
|
<p>You pressed me 0 times.</p>
|
||||||
|
`;
|
||||||
|
|
||||||
|
export class OdysseyButton extends HTMLElement {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.attachShadow({ mode: "open" });
|
||||||
|
this.shadowRoot.appendChild(templateEl.content.cloneNode(true));
|
||||||
|
this.button = this.shadowRoot.querySelector("button");
|
||||||
|
this.p = this.shadowRoot.querySelector("p");
|
||||||
|
this.setAttribute("count", "0");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Note: Web components have lifecycle methods,
|
||||||
|
// If we're setting event listeners when the component is added to the DOM, it's our job to clean
|
||||||
|
// them up when it gets removed from the DOM
|
||||||
|
connectedCallback() {
|
||||||
|
this.button.addEventListener("click", this.handleClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnectedCallback() {
|
||||||
|
this.button.removeEventListener("click", this.handleClick);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Unlike frameworks like React, Web Components don't automatically rerender when a prop (or attribute)
|
||||||
|
// changes. Instead, we need to explicitly define which attributes we want to observe.
|
||||||
|
static get observedAttributes() {
|
||||||
|
return ["disabled", "count"];
|
||||||
|
}
|
||||||
|
|
||||||
|
// When one of the above attributes changes, this lifecycle method runs, and we can
|
||||||
|
// react to the new attribute's value accordingly.
|
||||||
|
attributeChangedCallback(name, _, newVal) {
|
||||||
|
if (name === "count") {
|
||||||
|
this.p.innerHTML = `You pressed me ${newVal} times.`;
|
||||||
|
}
|
||||||
|
if (name === "disabled") {
|
||||||
|
this.button.disabled = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// In HTML, attribute values are always strings. This means that it's our job to
|
||||||
|
// convert types. You can see below that we're converting a string -> number, and then back to a string
|
||||||
|
handleClick = () => {
|
||||||
|
const counter = Number(this.getAttribute("count"));
|
||||||
|
this.setAttribute("count", `${counter + 1}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
==As web component authors, we need to consider a lot of things:==
|
||||||
|
|
||||||
|
* ==Setting up the shadow DOM==
|
||||||
|
* ==Setting up the HTML templates==
|
||||||
|
* ==Cleaning up event listeners==
|
||||||
|
* ==Defining properties that we want to observe==
|
||||||
|
* ==Reacting to properties when they change==
|
||||||
|
* ==Handling type conversions for attributes==
|
||||||
|
|
||||||
|
And there are still so many other things to consider that I haven’t touched on in this article.
|
||||||
|
|
||||||
|
That isn’t to say that web components are bad and that you shouldn’t write them. In fact, I’d argue that you learn so much about the browser platform by building with them.
|
||||||
|
|
||||||
|
But I feel that there are better ways to write components if your priority is to write interoperable components in a much more streamlined and ergonomic way.
|
||||||
|
|
||||||
|
## How to Write Web Components with Less Boilerplate
|
||||||
|
|
||||||
|
As I mentioned earlier, there are a lot of tools out there to help make writing web components much easier.
|
||||||
|
|
||||||
|
==One such tool is called Lit, which is developed by a team at Google.== ==[Lit](https://lit.dev/)== ==is a lightweight library designed to make writing web components simple, by removing the need for the boilerplate we’ve already seen above.==
|
||||||
|
|
||||||
|
As we’ll see, Lit does a lot of heavy lifting under-the-hood to help cut down the total lines of code by nearly half! And because Lit is a wrapper around web components and other native browser features, all your existing knowledge about web components is transferable.
|
||||||
|
|
||||||
|
To start seeing how Lit simplifies your web components. Here’s the **hello world** example from earlier, but refactored to use Lit instead of a vanilla web component:
|
||||||
|
|
||||||
|
```scala
|
||||||
|
import { LitElement, html } from "lit";
|
||||||
|
|
||||||
|
export class HelloWorld extends LitElement {
|
||||||
|
render() {
|
||||||
|
return html`<p>Hello World!</p>`;
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
|
||||||
|
customElements.define('hello-world', HelloWorld);
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
There’s a lot less boilerplate with the Lit component, and Lit handles the two problems I mentioned earlier, a little bit differently. Let’s see how:
|
||||||
|
|
||||||
|
1. The markup is directly defined from within the component class. While you can define your templates outside of the class, it’s common practice to return the template from the `render` function. This is more in line with the mental model presented in other UI frameworks, where the UI is a function of the state.
|
||||||
|
2. Lit also doesn’t require developers to attach the shadow DOM, or create templates and clone template elements. While having an understanding of the underlying web component features will help when developing Lit components, they’re not required for getting started, so the barrier for entry is much lower.
|
||||||
|
|
||||||
|
So now for the big finale, what does the counter component look like once we’ve migrated it over to Lit?
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
import { LitElement, html } from "lit";
|
||||||
|
|
||||||
|
export class OdysseyCounter extends LitElement {
|
||||||
|
static properties = {
|
||||||
|
// We define the component's properties as well as their type.
|
||||||
|
// These properties will trigger the component to re-render when their values change.
|
||||||
|
// While they're not the same, you can think of these "properties" as being
|
||||||
|
// Lit's alternatives to "observed attributes"
|
||||||
|
// If the value is passed down as an attribute, Lit converts the value
|
||||||
|
// to the correct type
|
||||||
|
count: { type: Number },
|
||||||
|
disabled: { type: Boolean },
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
// There's no need to create a shadow DOM, clone the template,
|
||||||
|
// or store references to our DOM nodes.
|
||||||
|
this.count = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
onCount() {
|
||||||
|
this.count = this.count + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
// Instead of using the attributeChangedCallback lifecycle, the
|
||||||
|
// render function has access to all of the component's properties,
|
||||||
|
// which simplifies the process of manipulating our templates.
|
||||||
|
return html`
|
||||||
|
<button ?disabled=${this.disabled} @click=${this.onCount}>
|
||||||
|
Press me!
|
||||||
|
</button>
|
||||||
|
<p>You pressed me ${this.count} times.</p>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}`
|
||||||
|
|
||||||
|
```
|
||||||
|
|
||||||
|
The amount of code we’re writing is cut down by almost half! And this difference becomes more noticeable when creating more complex user interfaces.
|
||||||
|
|
||||||
|
## Why am I going on about Lit?
|
||||||
|
|
||||||
|
I’m a big believer in web components, but I recognise that the barrier to entry is high for many developers. Writing complex web components requires understanding heaps of browser features and the education around web components isn’t as comprehensive as other technologies, like React or Vue.
|
||||||
|
|
||||||
|
This is why I think it’s important to use tools like Lit can make writing performant and interoperable web components much easier. This is great if you want your components to work within any frontend framework.
|
||||||
|
|
||||||
|
If you’d like to learn even more, this is the approach I teach in my upcoming course [Component Odyssey](https://component-odyssey.com/). This course is excellent for anyone who wants to understand how to write components that work in any framework.
|
||||||
|
|
||||||
|
I do this by covering the absolute basics of web components, before moving on to tools like Lit that simplify the process of writing web components without complicating your development environment. By the end, you’ll learn how to build and publish a component library that works across any frontend framework.
|
||||||
|
|
||||||
|
If you want early-bird discount codes for Component Odyssey, then head on [over to the site to get notified](https://component-odyssey.com/subscribe).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
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/)
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue