Update from obsidian - thinkpad
Affected files: .obsidian/plugins/obsidian-omnivore/data.json Read Later/How to Write Components that Work in Any Framework.md Read Later/The Complete Guide to Time Blocking.md Read Later/The First Rule of Comments in Code.md projects/personal-page-notes/List of Games.md projects/personal-page-notes/Use Table component to create Portafolio and Blog page.md projects/personal-page.md
This commit is contained in:
parent
740ac64ddb
commit
55cf54064d
7 changed files with 749 additions and 10 deletions
|
|
@ -3,9 +3,9 @@
|
|||
"dateSavedFormat": "yyyy-MM-dd HH:mm:ss",
|
||||
"apiKey": "ec3bba50-4770-471b-99b1-9953ca523d8c",
|
||||
"filter": "HIGHLIGHTS",
|
||||
"syncAt": "2023-11-05T12:56:15",
|
||||
"syncAt": "2023-11-11T10:22:08",
|
||||
"customQuery": "",
|
||||
"template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n> [!quote] ㅤ\n> {{{text}}} \n> \n> [source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n> {{#note}}\n>\n>> [!info] ㅤ\n>> {{{note}}}\n\n{{/note}}\n{{/highlights}}\n{{/highlights.length}}\n---\n## Original\n\n{{{ content }}}",
|
||||
"template": "# {{{title}}}\n\n{{# note }}\n## Notes\n\n{{{ note }}}\n{{/ note }}\n{{#highlights.length}}\n## Highlights\n\n{{#highlights}}\n> [!quote] ㅤ\n> {{{text}}} \n> \n> [source]({{{highlightUrl}}}) {{#labels}} #{{name}} {{/labels}}\n> {{#note}}\n>\n>> [!info] ㅤ\n>> {{{note}}}\n\n{{/note}}\n{{/highlights}}\n{{/highlights.length}}\n\n---\n## Original\n\n{{{ content }}}",
|
||||
"highlightOrder": "LOCATION",
|
||||
"syncing": false,
|
||||
"folder": "Read Later/",
|
||||
|
|
|
|||
395
Read Later/How to Write Components that Work in Any Framework.md
Normal file
395
Read Later/How to Write Components that Work in Any Framework.md
Normal file
|
|
@ -0,0 +1,395 @@
|
|||
---
|
||||
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
|
||||
|
||||
> [!quote] ㅤ
|
||||
> 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)
|
||||
> > [!quote] ㅤ
|
||||
> ### 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)
|
||||
> > [!quote] ㅤ
|
||||
> 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)
|
||||
> > [!quote] ㅤ
|
||||
> 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/)
|
||||
286
Read Later/The Complete Guide to Time Blocking.md
Normal file
286
Read Later/The Complete Guide to Time Blocking.md
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
---
|
||||
id: 04745848-2b0d-482d-802c-8872ac9043dd
|
||||
title: |
|
||||
The Complete Guide to Time Blocking
|
||||
status: ARCHIVED
|
||||
tags:
|
||||
- read-later
|
||||
date_added: 2023-11-10 23:43:20
|
||||
url_omnivore: |
|
||||
https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143
|
||||
url_original: |
|
||||
https://todoist.com/productivity-methods/time-blocking
|
||||
---
|
||||
|
||||
# The Complete Guide to Time Blocking
|
||||
|
||||
## Highlights
|
||||
|
||||
> [!quote] ㅤ
|
||||
> 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. Instead of keeping an open-ended to-do list of things you’ll get to as you can, you’ll start each day with a concrete schedule outlining what you’ll work on and when.
|
||||
>
|
||||
> [source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#6ca022ff-400a-4f70-8031-1a3caa0e7246)
|
||||
> > [!quote] ㅤ
|
||||
> With days that are time blocked in advance, you won’t have to constantly make choices about what to focus on.
|
||||
>
|
||||
> [source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#21fb5ecc-b00e-4f14-8d60-84eec666e8a9)
|
||||
> > [!quote] ㅤ
|
||||
> Task batching is when you group similar (usually smaller) tasks together and schedule specific time blocks to complete all at once. By tackling similar tasks in a group, you’ll limit the amount of context switching you have to do throughout your day, saving precious time and mental energy.
|
||||
>
|
||||
> [source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#ce3acd05-a296-4204-acfe-e0822f8a83d2)
|
||||
> > [!quote] ㅤ
|
||||
> Instead of setting aside time blocks for each area of responsibility each day, day theming dedicates a full day each week to each responsibility.
|
||||
>
|
||||
> [source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#5d5543a9-0d8d-42ed-aa24-4ecfeb07d6ac)
|
||||
> > [!quote] ㅤ
|
||||
> time boxing asks you to limit how much time you'll dedicate to a specific task.
|
||||
>
|
||||
> [source](https://omnivore.app/me/https-todoist-com-productivity-methods-time-blocking-18bbc432143#e342c6ce-607b-4482-af54-4ffbf81ab7ab)
|
||||
>
|
||||
>
|
||||
>> [!info] ㅤ
|
||||
>> Is _"I'm gonna finish this in X time"_, instead of _"I'm gonna work on this for X time"_
|
||||
|
||||
---
|
||||
## Original
|
||||
|
||||
...and its cousins task batching and day theming. Control your schedule so it doesn't control you
|
||||
|
||||
|
||||
|
||||
1. [What is time blocking?](#what-is-time-blocking)
|
||||
2. [Time blocking variations](#time-blocking-variations)
|
||||
3. [Why is time blocking so effective?](#why-is-time-blocking-so-effective)
|
||||
4. [But will time blocking work with my job?](#but-will-time-blocking-work-with-my-job)
|
||||
5. [Some common time blocking missteps and how to avoid them](#some-common-time-blocking-missteps-and-how-to-avoid-them)
|
||||
6. [Time blocking with Todoist](#time-blocking-with-todoist)
|
||||
|
||||
---
|
||||
|
||||
> "A 40 hour time-blocked work week, I estimate, produces the same amount of output as a 60+ hour work week pursued without structure."
|
||||
>
|
||||
> — Cal Newport, Author of _Deep Work_
|
||||
|
||||
If there's one thing that can be said about the modern workplace, it's this: If you don't control your schedule, it will control you.
|
||||
|
||||
How do you balance the necessary evils of meetings, email, team chat, and "busy work" with focused time for the things you truly care about? Since becoming a digital hermit isn’t an option for most of us, we need concrete strategies to help us focus in a world designed to distract us.
|
||||
|
||||
That’s where time blocking comes in.
|
||||
|
||||
Time blocking (and its close cousins, time boxing, task batching, and day theming) is a simple yet effective way to take back control of your time.
|
||||
|
||||
Try time blocking if you...
|
||||
|
||||
* Juggle many different projects/responsibilities (Jack Dorsey used day theming to run two major companies at the same time)
|
||||
* Spend too much time in “reactive mode,” responding to emails and messages
|
||||
* Find their day chopped up by meetings
|
||||
* Battle constant interruptions throughout the day
|
||||
* Struggle to find the time and mental space for big-picture thinking
|
||||
|
||||
This guide will give you an overview of what time blocking, task batching, and day theming are; how a combination of these strategies can help you reclaim your schedule, and the best way to use your calendar and task manager to start time blocking yourself.
|
||||
|
||||
==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. Instead of keeping an open-ended to-do list of things you’ll get to as you can, you’ll start each day with a concrete schedule outlining what you’ll work on and when.==
|
||||
|
||||
The key to this method is prioritizing your task list in advance — a dedicated weekly review is a must. Take stock of what’s coming up for the week ahead, and make a rough sketch of your time blocks for each day. At the [end of every workday](https://doist.com/blog/end-work-day/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides), review any tasks you didn’t finish — as well as any new tasks that have come in — and adjust your time blocks for the rest of the week accordingly.
|
||||
|
||||
==With days that are time blocked in advance, you won’t have to constantly make choices about what to focus on.== All you need to do is follow your time blocked schedule. If you get off-task or distracted, simply look at your schedule and get back to whichever task you blocked off time for.
|
||||
|
||||
### Dig deeper
|
||||
|
||||
We've written a separate, comprehensive [guide to weekly reviews](https://todoist.com/productivity-methods/weekly-review) that will walk you through how to create a routine that works for you.
|
||||
|
||||
## Time blocking variations
|
||||
|
||||
Time blocking has a few close but distinct cousins that are worth considering: task batching, day theming, and time boxing.
|
||||
|
||||
| **Method** | **What is it?** | **Example** |
|
||||
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
|
||||
| Time Blocking | Dividing the day into blocks of time with each block dedicated to accomplishing a specific task or activity and only that specific task or activity. | "I will write every day from 9am to 11am." |
|
||||
| Task Batching | "I will answer all of my emails at 3pm." | |
|
||||
| Day Theming | "Every Monday, I will focus on content creation. Every Tuesday, I will focus on content promotion. Every Wednesday, I will focus on research and ideation. Etc." | |
|
||||
| Time Boxing | "I will write 1,000 words between 9am and 11am tomorrow." | |
|
||||
|
||||
### Task batching
|
||||
|
||||
==Task batching is when you group similar (usually smaller) tasks together and schedule specific time blocks to complete all at once. By tackling similar tasks in a group, you’ll limit the amount of context switching you have to do throughout your day, saving precious time and mental energy.== For example, scheduling two 20-minute blocks to process email during the day is more efficient than checking your inbox every 15 minutes.
|
||||
|
||||
Time blocking pairs well with task batching because it saves you from scheduling every individual task on your calendar. Just block off chunks of time each day or week for when you want to complete a certain batch of activities, e.g., email, invoicing, workouts, meetings, writing, coding, deep work, errands, meal prep.
|
||||
|
||||
### Day theming
|
||||
|
||||
Day theming is a more extreme version of task batching for people who have a lot of areas of responsibility competing for their attention. For example, an entrepreneur often has to pay attention to marketing, sales, product development, customer support, and HR all at the same time. ==Instead of setting aside time blocks for each area of responsibility each day, day theming dedicates a full day each week to each responsibility.==
|
||||
|
||||
Mike Vardy, founder of [Productivityist](https://productivityist.com/theming-days-made-better-dad/), uses day theming to set his overarching focus for each day. Here's how he themes his week:
|
||||
|
||||
Dedicating each day to a single theme creates a reliable work pattern and further limits the cognitive load of context switching. Vardy explains that theming offers mental clarity that allows him to focus on his family:
|
||||
|
||||
> “Knowing what the day ‘means’ to me allows me to get the things I need and want to accomplish without seeing undetermined ‘ought to do’ items on a to do list. As a result, I have less decision fatigue and even have more energy when I spend time with my kids.”
|
||||
|
||||
### Time boxing
|
||||
|
||||
Time blocking and time boxing are often confused as being synonymous, but there's an important difference. Time blocking asks you to set aside certain chunks of time to focus on a given task or activity. For example, "I will work on a first draft of my blog post from 9am to 11 am tomorrow."
|
||||
|
||||
In contrast, ==time boxing asks you to limit how much time you'll dedicate to a specific task.== Here's a time boxed version of the time blocking example above: "I will finish a first draft of my blog post tomorrow between 9am and 11am."
|
||||
|
||||
This self-imposed "time box" forces you to work efficiently because you have a limited amount of time in which to complete the task. It can be a fun way to challenge yourself and gamify your productivity.
|
||||
|
||||
## Why is time blocking so effective?
|
||||
|
||||
This technique seems simple on the surface, but has profound impacts on your capacity to get things done:
|
||||
|
||||
### It promotes focused “deep work”
|
||||
|
||||
Cal Newport, author of [Deep Work: Rules for Focused Success in a Distracted World](https://www.amazon.com/Deep-Work-Focused-Success-Distracted/dp/1455586692/ref=asc%5Fdf%5F1455586692/?tag=hyprod-20&linkCode=df0&hvadid=312741934517&hvpos=1o1&hvnetw=g&hvrand=7753978193869239626&hvpone=&hvptwo=&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9019660&hvtargid=pla-421604508630&psc=1&tag=&ref=&adgrpid=64940825031&hvpone=&hvptwo=&hvadid=312741934517&hvpos=1o1&hvnetw=g&hvrand=7753978193869239626&hvqmt=&hvdev=c&hvdvcmdl=&hvlocint=&hvlocphy=9019660&hvtargid=pla-421604508630), is a [big proponent of time blocking](http://www.calnewport.com/blog/2013/12/21/deep-habits-the-importance-of-planning-every-minute-of-your-work-day/). He dedicates 20 minutes every evening to scheduling out the next work day:
|
||||
|
||||
> “Sometimes people ask why I bother with such a detailed level of planning. My answer is simple: it generates a massive amount of productivity. A 40 hour time-blocked work week, I estimate, produces the same amount of output as a 60+ hour work week pursued without structure.”
|
||||
|
||||
When you schedule a chunk of time to work on a single project, problem, or task, you bring all of your mental resources to bear on one thing rather than spreading your attention thin across several tasks. The more you “single task”, the more you build the mental muscles required for deep work, and the easier it becomes to stay focused.
|
||||
|
||||
### Dig deeper
|
||||
|
||||
Learn more about Newport’s approach to meaningful productivity and how to incorporate more focus into your life with [The Complete Guide to Deep Work](https://doist.com/blog/deep-work/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).
|
||||
|
||||
### It helps you knock out “shallow work” more efficiently
|
||||
|
||||
Shallow work is the busy work that’s [urgent but not important](https://todoist.com/productivity-methods/eisenhower-matrix) to achieving your long-term goals — think paperwork or responding to (most) emails. When you time box shallow work, you’re setting clear limits on how much time you’ll dedicate to it. Plus, grouping similar tasks together reduces the cost of context switching. By batching all of your shallow tasks together in a dedicated time block or two, you’ll be able to power through them more efficiently and protect the rest of your workday for higher-impact work.
|
||||
|
||||
### It makes you aware of how you spend your time
|
||||
|
||||
Most people are bad at time management. We are [terrible at estimating](https://en.wikipedia.org/wiki/Planning%5Ffallacy) how much time tasks will take, and we have a tendency to [overcommit our future selves](https://doist.com/blog/neuroscience-achieving-long-term-goals/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides). Time blocking forces you to confront your current priorities and commitments and get intentional about how you spend your finite time. For each new commitment you let into your life, you’re forced to find physical space on your calendar. As a result, the opportunity cost of saying “yes” becomes more concrete, and it becomes much easier to [say “no](https://doist.com/blog/how-to-say-no/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).”
|
||||
|
||||
### It counteracts perfectionism
|
||||
|
||||
Fuzzy timelines are a perfectionist’s worst enemy. There’s always something to be tweaked and improved. It can be difficult to know when an open-ended project is finished, especially if you are aiming for perfection. At some point, you need to be able to say “good enough” and move on. Time boxing can help by imposing time limits on your projects. If you often prolong tasks by trying to get everything just right, set a strict time box for finishing the task and stick to it.
|
||||
|
||||
### It helps you follow through on your goals
|
||||
|
||||
In the article “[Beyond good intentions: Prompting people to make plans improves follow-through on important tasks](https://scholar.harvard.edu/files/todd%5Frogers/files/beyond%5Fgood%5Fintentions%5F-%5Fprompting%5Fpeople.pdf)” researchers Dr. Todd Rogers and Dr. Katherine L. Milkman review several studies supporting the idea that “concrete plans help people follow through on their intentions.”
|
||||
|
||||
From following an exercise regimen to scheduling a flu shot, people were more likely to act on their intentions when they wrote down a specific place, date, and time for the activity. Yet most people rely on vague intentions rather than concrete plans:
|
||||
|
||||
> “Paradoxically, people frequently underplan when they begin with strong intentions. They mistakenly believe that their strong intentions are enough to propel them to perform desired behaviors, and that belief keeps them from using strategies that could help translate intentions into actions.”
|
||||
|
||||
The takeaway: When you schedule your tasks and goals, you’re more likely to follow through. Time blocking forces you to make concrete plans that ensure you’re working toward your goals every day. As William Faulkner famously quipped:
|
||||
|
||||
> “I only write when inspiration strikes. Fortunately, it strikes at nine every morning.”
|
||||
|
||||
## But will time blocking work with my job?
|
||||
|
||||
One of the biggest criticisms of time blocking is that it doesn’t account for reactive jobs where it’s impossible to anticipate what will come in at any given moment. Is time blocking really a realistic strategy for a customer support specialist whose job is to respond to tickets? Or an account manager who needs to be available to respond to client requests?
|
||||
|
||||
We’d argue yes — asserting even a small amount of control over your schedule can be helpful no matter your job. Cal Newport put it this way:
|
||||
|
||||
> “Periods of open-ended reactivity can be blocked off like any other type of obligation. Even if you’re blocking most of your day for reactive work, for example, the fact that you’re controlling your schedule will allow you to dedicate some small blocks (perhaps at the schedule periphery) to deeper pursuits.”
|
||||
|
||||
When your workday is run by external forces, it’s easy to lose sight of your own goals. Time blocking can help you gain a greater sense of control over even the most unpredictable of schedules.
|
||||
|
||||
## Some common time blocking missteps and how to avoid them
|
||||
|
||||
While time blocking is pretty straightforward in theory, it can be hard to stick to in practice. Here are some tips to help you apply the method successfully (and not become a slave to your calendar in the process):
|
||||
|
||||
### Underestimating your time
|
||||
|
||||
You’ll get better at estimating how long tasks take over time, but until you’ve honed your instincts, err on the side of blocking off too much time for tasks rather than too little. Pad your schedule with extra time to complete and transition between tasks. You can even create “conditional blocks” of time you can tap into if you fall behind.
|
||||
|
||||
### Try these tools
|
||||
|
||||
Improve your sense of how long you actually spend on tasks with time trackers like [RescueTime](https://www.rescuetime.com/ref/1403570) or [Toggl](https://toggl.com/).
|
||||
|
||||
### Being too rigid
|
||||
|
||||
Things will come up and ruin your plans. But remember that your plan is a guide to help focus your attention on what’s important, not a binding contract.
|
||||
|
||||
Even productivity expert Cal Newport edits his plans throughout the day by crossing out original time blocks and filling them with updated plans as circumstances demand:
|
||||
|
||||
Newport deals with changes in his schedule by seeing it as a game:
|
||||
|
||||
> “This type of planning, to me, is like a chess game, with blocks of work getting spread and sorted in such a way that projects big and small all seem to click into completion with (just enough) time to spare.”
|
||||
|
||||
See your time blocks as a flexible way to challenge yourself, not strict tools to punish yourself when you fall short.
|
||||
|
||||
### Overscheduling your leisure time
|
||||
|
||||
Though [Elon Musk and Bill Gates](https://www.businessinsider.com/bill-gates-elon-musk-scheduling-habit-2017-8) have been said to schedule their days down to 5-minute increments, overscheduling your leisure time can be a self-defeating exercise. [Studies](https://www.washingtonpost.com/news/inspired-life/wp/2018/07/31/want-to-be-happier-stop-scheduling-your-free-time/?noredirect=on&utm%5Fterm=.c7b6c4e1f8d1) have shown that scheduling leisure activities has a “unique dampening effect” on the overall enjoyment of the activity.
|
||||
|
||||
Instead, you can block out time to disconnect and relax without a set plan for how you’ll spend that time. It will give you the flexibility to decide more spontaneously what you want to do-- call friends to grab a drink? Check out that new Xbox game? Read? Whatever you decide, just remember to keep at least some of your free time free.
|
||||
|
||||
## Time blocking with Todoist
|
||||
|
||||
You can implement time blocking with any tool, but in this section, we'll focus on how to use Todoist alongside your favorite calendar app — or even good, old-fashioned pen and paper. We'll cover how to implement three different time blocking variations: task batching, day theming, and scheduling individual tasks.
|
||||
|
||||
### Task batching variation
|
||||
|
||||
Strict time blocking — dedicating a time block to each individual task — can be tedious and hard to maintain over time. We recommend combining time blocking and task batching for a more streamlined system. Instead of one time block per individual task, you’ll assign a time block for each category of task you batch together. Here’s how that looks in practice:
|
||||
|
||||
First, decide on which broad categories of work need to be reflected in your daily or weekly schedule. For example, a freelance writer might have the following category list:
|
||||
|
||||
* Email
|
||||
* Work admin
|
||||
* Sales
|
||||
* Meetings
|
||||
* Research
|
||||
* Writing
|
||||
* Professional Development
|
||||
* Yoga
|
||||
* Meal prep
|
||||
* Personal admin
|
||||
* Reading
|
||||
* Free time
|
||||
|
||||
Now, sit down with your favorite calendar app or paper planner and create time blocks for the coming week that reflect the times you’ll work on each category. Make sure all of your priorities and commitments are given enough space on your calendar. If you struggle to find room, you may need to start cutting down on your commitments. The end result will look something like this:
|
||||
|
||||
If you find it difficult to stick to your digital schedule, we recommend planning your day out on paper. A paper schedule forces you to start fresh each day and makes it easy to scribble things out and adapt as the day goes on. Plus, it's also easier to keep your paper schedule open on your desk as a visible reminder of what you had planned to focus on.
|
||||
|
||||
If you work at a company with shared calendars, you may find it helpful to publicly block off time for “Deep Work” to keep a sufficient chunk of the day meeting free. Khoi Vinh, a [Principal Designer at Adobe](https://doist.com/blog/how-khoi-vinh-gets-things-done/?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides), uses this strategy at his office:
|
||||
|
||||
> “I look for blocks of time on my calendar that I can cordon off for “deep work”. Sometimes I’ll move around meetings to create longer contiguous blocks, and then I’ll create a meeting called “Do Not Book” or, if I suspect someone will ignore that, I’ll name it something like “Collaboration Session” or “Research Review.” You have to get crafty.”
|
||||
|
||||
You now have time blocks for each category, but you still need to know which specific task — or group of tasks — to work on when the time comes. That’s where a task manager like Todoist comes in.
|
||||
|
||||
[Create a Todoist label](https://get.todoist.help/hc/en-us/articles/360000029000-How-to-best-use-labels?utm%5Fsource=dots%5Fblog&utm%5Fmedium=referral&utm%5Fcampaign=time%5Fblocking) for each batched category you came up with in step one, then review all of your current tasks and assign the appropriate label to each one.
|
||||
|
||||
Now, when you come to a time block, all you have to do is pull up the corresponding label list and choose from the relevant tasks. Tasks with dates will automatically be sorted at the top so you’ll know when something is due soon and needs your attention first.
|
||||
|
||||
### Todoist Tip
|
||||
|
||||
You can also [create a new filter](https://get.todoist.help/hc/en-us/articles/205248842-Filters?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides) with a query like “@personal\_admin & next 7 days” to see just the tasks due in the upcoming week with that specific label.
|
||||
|
||||
To make sure nothing slips through the cracks, every task should have a label. However, you’ll likely find that not every category needs to be tracked in Todoist. For example, you may want to keep track of your meetings or exercise classes in your calendar rather than in your task manager. And as we said before, you don’t want to overprogram your free time. Experiment with your setup to figure out what makes sense for your specific circumstances.
|
||||
|
||||
### Day theming variation
|
||||
|
||||
If you try time blocking and still feel too scattered and unfocused, you may want to try out day theming. We recommend this [free Skillshare course](https://www.skillshare.com/classes/Productivity-Habits-That-Stick-Using-Time-Theming/1216959000) by Mike Vardy. He walks you through setting up a day theming system, including detailed examples using both paper and Todoist.
|
||||
|
||||
### Scheduling time blocks for individual tasks
|
||||
|
||||
Of course, if you want to keep a more granular schedule, you can always create separate time blocks for each task. The easiest way to do that with Todoist is via the [2-way integration with Google Calendar](https://get.todoist.help/hc/en-us/articles/115003128085-How-can-I-use-Todoist-with-Google-Calendar?itm%5Fcampaign=time%5Fblocking&itm%5Fmedium=referral&itm%5Fsource=productivity%5Fmethods%5Fguides).
|
||||
|
||||
When setting up the integration:
|
||||
|
||||
* Create a new calendar for just your Todoist tasks so you can toggle them on and off inside your calendar as you need.
|
||||
* Choose to sync your entire Todoist account or create separate calendars for each of your Todoist projects.
|
||||
* Choose to sync tasks with just a due date in addition to tasks with a due date and time.
|
||||
|
||||
Any Todoist task with a date and time will automatically appear as an event in your new Todoist calendar. Any task with a date but no time will appear as a day-long event.
|
||||
|
||||
During your [weekly review](https://todoist.com/productivity-methods/weekly-review), give each task you want to accomplish a date and/or start time by typing something like “Monday at noon” or “Every Friday at 9am” into the task field. Todoist will automatically recognize and highlight the date and set it when you save the task.
|
||||
|
||||
Now, when you open your daily or weekly view in your calendar, you’ll see each of your tasks scheduled as separate events (aka your time blocks). You can extend, shorten, edit, and move your time blocks inside your calendar. Any changes you make in Google Calendar will automatically sync back to your Todoist (and vice versa).
|
||||
|
||||
---
|
||||
|
||||
Scheduling your days and weeks in advance can seem like a waste of precious time you could be using to actually get things done. But when you aren’t controlling your calendar, it’s easy to let distractions take over. By front-loading your decision-making on what to work on for the day or week, you’ll be saving time and mental energy when it comes to actually getting to work.
|
||||
|
||||
Give time blocking and task batching a try for a week and see how it feels to take back control over your time and attention.
|
||||
|
||||
### Todoist Tip
|
||||
|
||||
If you have a Pro or Business plan, you can supercharge your time blocking with [task durations](https://todoist.com/help/articles/whats-new#reclaim-your-schedule-with-task-durations-aug-30). Simply:
|
||||
|
||||
* Select your Due Date, then Time, to set the start time and duration of your task. This forms your time block.
|
||||
* You can also add a task’s duration via Todoist’s natural language recognition by typing “for” followed by the length of time you think the task will take. (e.g., “Team meeting today 4pm for 45min” or “Write first draft 9am for 2 hours 30 minutes”.)
|
||||
* If you’ve connected your Todoist to a calendar app, the task duration will sync to your calendar automatically (and, on Google Calendar, vice versa with 2-way sync so you can update your tasks from your calendar).
|
||||
|
||||
#### Laura Scroggs
|
||||
|
||||
[Laura](https://laurascroggs.wordpress.com/) is a freelance writer, PhD candidate, and pug mom living in Minneapolis, MN.
|
||||
43
Read Later/The First Rule of Comments in Code.md
Normal file
43
Read Later/The First Rule of Comments in Code.md
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
---
|
||||
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)
|
||||
|
|
@ -13,13 +13,15 @@
|
|||
- [x] Add clear input to select input
|
||||
- [x] Add Clear all filters
|
||||
- [x] Add a button in the table doesn't clean the input values, fix this.
|
||||
- [ ] Refactor code organization
|
||||
- [x] Refactor code organization
|
||||
- [x] Add comments documentation
|
||||
- [ ] Clean & optimize
|
||||
- [ ] Extract types declaration where they belogns
|
||||
- -> investigate where??
|
||||
- Carpeta con definiciones y una archivo para cada cosa (enums, interface, etc)??
|
||||
- Al mismo nivel dentro de src??
|
||||
- replicar structura en types??
|
||||
- [x] Extract types declaration where they belogns
|
||||
- -> investigate where??
|
||||
- Carpeta con definiciones y una archivo para cada cosa (enums, interface, etc)??
|
||||
- Al mismo nivel dentro de src??
|
||||
- replicar structura en types??
|
||||
- [x] Solve TODO's
|
||||
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
## Portafolio
|
||||
- [ ] Create some content in obsidian, add the draft capabilities so is shown in development but not in main.
|
||||
- [ ] Add list of content
|
||||
- [ ] Create one page
|
||||
- Simple, without too much fuss, bare minimum.
|
||||
- Add list of media sequentially, leave comment to transform in a lightbox
|
||||
## Blog
|
||||
- [ ] Create some content in obsidian, add the draft capabilities so is shown in development but not in main.
|
||||
- [ ] Add list of content
|
||||
- [ ] Create one page
|
||||
- Simple, without too much fuss, bare minimum.
|
||||
|
|
@ -15,6 +15,8 @@ kanban-plugin: basic
|
|||
- [ ] Game Template
|
||||
- [ ] About Me
|
||||
- [ ] Setup CSS Themes
|
||||
- [ ] [One Game](One%20Game.md)
|
||||
- [ ] Create lightbox component
|
||||
|
||||
|
||||
## Need Research
|
||||
|
|
@ -26,17 +28,17 @@ kanban-plugin: basic
|
|||
|
||||
- [ ] [Landing Page](Landing%20Page.md)
|
||||
- [ ] [Layout](Layout.md)
|
||||
- [ ] [List of Games](List%20of%20Games.md)
|
||||
|
||||
|
||||
## Ready to Work
|
||||
|
||||
- [ ] [One Game](One%20Game.md)
|
||||
|
||||
|
||||
## Doign
|
||||
|
||||
- [ ] [List of Games](List%20of%20Games.md)
|
||||
- [ ] CI/CD<br>- content -> send build to page<br>- page -> update submodule and build<br>- run tests
|
||||
- [ ] [Use Table component to create Portafolio and Blog page](Use%20Table%20component%20to%20create%20Portafolio%20and%20Blog%20page.md)
|
||||
|
||||
|
||||
## Done
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue