-
@ a58a2663:87bb2918
2025-03-05 12:41:36
After two years of using Standard Notes as my main note-taking app, I’m switching to Obsidian.
The $100 that Standard Notes charges for basic editing capabilities is difficult to justify, especially for someone paying in Brazilian Real and striving to make a living from writing. However, I will certainly miss its simplicity and cleaner interface.
It’s my impression that the developers are missing an opportunity to create a privacy-focused note-taking app tailored to the specific needs of writers, rather than general users.
Substack, for example, achieved such success because it targeted the distribution and monetization of writers’ work. But we need more tools focused not on distribution or monetization, but on the actual process—indeed, the various phases of the process—of creating texts. This is especially true for complex, long-form texts with different levels of argumentation, numerous written and multimedia sources, and cross-references to other works by the author.
It’s crucial that an app like this doesn’t feel overly complex, like Notion or Evernote, or so all-purpose, like Obsidian. And, of course, I’m not talking about a new full-fledged text editor like Scrivener.
Just a thought. Take note.
-
@ 04c915da:3dfbecc9
2025-03-04 17:00:18
This piece is the first in a series that will focus on things I think are a priority if your focus is similar to mine: building a strong family and safeguarding their future.
---
Choosing the ideal place to raise a family is one of the most significant decisions you will ever make. For simplicity sake I will break down my thought process into key factors: strong property rights, the ability to grow your own food, access to fresh water, the freedom to own and train with guns, and a dependable community.
**A Jurisdiction with Strong Property Rights**
Strong property rights are essential and allow you to build on a solid foundation that is less likely to break underneath you. Regions with a history of limited government and clear legal protections for landowners are ideal. Personally I think the US is the single best option globally, but within the US there is a wide difference between which state you choose. Choose carefully and thoughtfully, think long term. Obviously if you are not American this is not a realistic option for you, there are other solid options available especially if your family has mobility. I understand many do not have this capability to easily move, consider that your first priority, making movement and jurisdiction choice possible in the first place.
**Abundant Access to Fresh Water**
Water is life. I cannot overstate the importance of living somewhere with reliable, clean, and abundant freshwater. Some regions face water scarcity or heavy regulations on usage, so prioritizing a place where water is plentiful and your rights to it are protected is critical. Ideally you should have well access so you are not tied to municipal water supplies. In times of crisis or chaos well water cannot be easily shutoff or disrupted. If you live in an area that is drought prone, you are one drought away from societal chaos. Not enough people appreciate this simple fact.
**Grow Your Own Food**
A location with fertile soil, a favorable climate, and enough space for a small homestead or at the very least a garden is key. In stable times, a small homestead provides good food and important education for your family. In times of chaos your family being able to grow and raise healthy food provides a level of self sufficiency that many others will lack. Look for areas with minimal restrictions, good weather, and a culture that supports local farming.
**Guns**
The ability to defend your family is fundamental. A location where you can legally and easily own guns is a must. Look for places with a strong gun culture and a political history of protecting those rights. Owning one or two guns is not enough and without proper training they will be a liability rather than a benefit. Get comfortable and proficient. Never stop improving your skills. If the time comes that you must use a gun to defend your family, the skills must be instinct. Practice. Practice. Practice.
**A Strong Community You Can Depend On**
No one thrives alone. A ride or die community that rallies together in tough times is invaluable. Seek out a place where people know their neighbors, share similar values, and are quick to lend a hand. Lead by example and become a good neighbor, people will naturally respond in kind. Small towns are ideal, if possible, but living outside of a major city can be a solid balance in terms of work opportunities and family security.
---
Let me know if you found this helpful. My plan is to break down how I think about these five key subjects in future posts.
-
@ a9434ee1:d5c885be
2025-03-04 13:05:42
## The Key Pair
What a Nostr key pair has by default:
* A unique ID
* A name
* A description
* An ability to sign stuff
## The Relay
What a Nostr relay has (or should have) by default:
* Permissions, Moderation, AUTH, ...
* Pricing & other costs to make the above work (cost per content type, subscriptions, xx publications per xx timeframe, ...)
* List of accepted content types
* (to add) Guidelines
## The Community
Since I need Communities to have all the above mentioned properties too, the simplest solution seems to be to just combine them. And when you already have a key pair and a relay, you just need the third basic Nostr building block to bring them together...
## The Event
To create a #communikey, a key pair (The Profile) needs to sign a (kind 30XXX) event that lays out the Community's :
1. Main relay + backup relays
2. Main blossom server + backup servers
3. (optional) Roles for specific npubs (admin, CEO, dictator, customer service, design lead, ...)
4. (optional) Community mint
5. (optional) "Welcome" Publication that serves as an introduction to the community
This way:
* **any existing npub** can become a Community
* Communities are not tied to one relay and have a truly unique ID
* Things are waaaaaay easier for relay operators/services to be compatible (relative to existing community proposals)
* Running one relay per community works an order of magnitude better, but isn't a requirement
## The Publishers
What the Community enjoyers need to chat in one specific #communikey :
* Tag the npub in the (kind 9) chat message
What they needs to publish anything else in one or multiple #communikeys :
* Publish a (kind 32222 - Targeted publication) event that lists the npubs of the targeted Communities
* If the event is found on the main relay = The event is accepted
This way:
* **any existing publication** can be targeted at a Community
* Communities can #interop on content and bring their members together in reply sections, etc...
* Your publication isn't tied **forever** to a specific relay
## Ncommunity
If nprofile = npub + relay hints, for profiles
Then ncommunity = npub + relay hints, for communities
-
@ a95c6243:d345522c
2025-03-04 09:40:50
**Die «Eliten» führen bereits groß angelegte Pilotprojekte für eine Zukunft durch,** die sie wollen und wir nicht. Das [schreibt](https://off-guardian.org/2025/02/26/coming-soon-the-european-digital-identity-wallet/) der *OffGuardian* in einem Update zum Thema «EU-Brieftasche für die digitale Identität». Das Portal weist darauf hin, dass die Akteure dabei nicht gerade zimperlich vorgehen und auch keinen Hehl aus ihren Absichten machen. *Transition News* hat mehrfach darüber berichtet, zuletzt [hier](https://transition-news.org/eudi-wallet-der-weg-fur-ein-vollstandig-digitalisiertes-europa-ist-frei) und [hier](https://transition-news.org/iata-biometrische-daten-und-digitale-id-machen-das-vollstandig-digitale).
**Mit der EU Digital Identity Wallet (EUDI-Brieftasche) sei eine einzige von der Regierung herausgegebene App geplant,** die Ihre medizinischen Daten, Beschäftigungsdaten, Reisedaten, Bildungsdaten, Impfdaten, Steuerdaten, Finanzdaten sowie (potenziell) Kopien Ihrer Unterschrift, Fingerabdrücke, Gesichtsscans, Stimmproben und DNA enthält. So fasst der *OffGuardian* die eindrucksvolle Liste möglicher Einsatzbereiche zusammen.
**Auch Dokumente wie der Personalausweis oder der** **[Führerschein](https://transition-news.org/eu-weite-einfuhrung-von-digitalen-fuhrerscheinen-fur-digitale-geldborsen)** können dort in elektronischer Form gespeichert werden. Bis 2026 sind alle EU-Mitgliedstaaten dazu verpflichtet, Ihren Bürgern funktionierende und frei verfügbare digitale «Brieftaschen» bereitzustellen.
**Die Menschen würden diese App nutzen,** so das Portal, um Zahlungen vorzunehmen, Kredite zu beantragen, ihre Steuern zu zahlen, ihre Rezepte abzuholen, internationale Grenzen zu überschreiten, Unternehmen zu gründen, Arzttermine zu buchen, sich um Stellen zu bewerben und sogar digitale Verträge online zu unterzeichnen.
**All diese Daten würden auf ihrem Mobiltelefon gespeichert und mit den Regierungen** von neunzehn Ländern (plus der Ukraine) sowie über 140 anderen öffentlichen und privaten Partnern ausgetauscht. Von der Deutschen Bank über das ukrainische Ministerium für digitalen Fortschritt bis hin zu Samsung Europe. Unternehmen und Behörden würden auf diese Daten im Backend zugreifen, um «automatisierte Hintergrundprüfungen» durchzuführen.
**Der Bundesverband der Verbraucherzentralen und Verbraucherverbände** (VZBV) habe Bedenken geäußert, dass eine solche App «Risiken für den Schutz der Privatsphäre und der Daten» berge, berichtet das Portal. Die einzige Antwort darauf laute: «Richtig, genau dafür ist sie ja da!»
**Das alles sei keine Hypothese, betont der** ***OffGuardian***. Es sei vielmehr [«Potential»](https://www.digital-identity-wallet.eu/about-us/140-public-and-private-partners/). Damit ist ein EU-Projekt gemeint, in dessen Rahmen Dutzende öffentliche und private Einrichtungen zusammenarbeiten, «um eine einheitliche Vision der digitalen Identität für die Bürger der europäischen Länder zu definieren». Dies ist nur eines der groß angelegten [Pilotprojekte](https://ec.europa.eu/digital-building-blocks/sites/display/EUDIGITALIDENTITYWALLET/What+are+the+Large+Scale+Pilot+Projects), mit denen Prototypen und Anwendungsfälle für die EUDI-Wallet getestet werden. Es gibt noch mindestens drei weitere.
**Den Ball der digitalen ID-Systeme habe die Covid-«Pandemie»** über die «Impfpässe» ins Rollen gebracht. Seitdem habe das Thema an Schwung verloren. Je näher wir aber der vollständigen Einführung der EUid kämen, desto mehr Propaganda der Art «Warum wir eine digitale Brieftasche brauchen» könnten wir in den Mainstream-Medien erwarten, prognostiziert der *OffGuardian*. Vielleicht müssten wir schon nach dem nächsten großen «Grund», dem nächsten «katastrophalen katalytischen Ereignis» Ausschau halten. Vermutlich gebe es bereits Pläne, warum die Menschen plötzlich eine digitale ID-Brieftasche brauchen würden.
**Die Entwicklung geht jedenfalls stetig weiter in genau diese Richtung.** Beispielsweise hat Jordanien angekündigt, die digitale biometrische ID bei den nächsten [Wahlen](https://www.biometricupdate.com/202502/jordan-plans-digital-id-for-voter-verification-in-next-election) zur Verifizierung der Wähler einzuführen. Man wolle «den Papierkrieg beenden und sicherstellen, dass die gesamte Kette bis zu den nächsten Parlamentswahlen digitalisiert wird», heißt es. Absehbar ist, dass dabei einige Wahlberechtigte «auf der Strecke bleiben» werden, wie im Fall von [Albanien](https://transition-news.org/albanien-schliesst-120-000-burger-ohne-biometrische-ausweise-von-wahlen-aus) geschehen.
**Derweil würden die Briten gerne ihre Privatsphäre gegen Effizienz eintauschen,** [behauptet](https://www.lbc.co.uk/news/tony-blair-id-cards/) Tony Blair. Der Ex-Premier drängte kürzlich erneut auf digitale Identitäten und Gesichtserkennung. Blair ist Gründer einer [Denkfabrik](https://transition-news.org/blair-institute-durch-vermarktung-von-patientendaten-zu-ki-gestutztem) für globalen Wandel, Anhänger globalistischer Technokratie und [«moderner Infrastruktur»](https://transition-news.org/tony-blair-digitale-id-fur-moderne-infrastruktur-unerlasslich-erfordert-aber).
**Abschließend warnt der** ***OffGuardian*** **vor der Illusion, Trump und Musk würden** den US-Bürgern «diesen Schlamassel ersparen». Das Department of Government Efficiency werde sich auf die digitale Identität stürzen. Was könne schließlich «effizienter» sein als eine einzige App, die für alles verwendet wird? Der Unterschied bestehe nur darin, dass die US-Version vielleicht eher privat als öffentlich sei – sofern es da überhaupt noch einen wirklichen Unterschied gebe.
*\[Titelbild: Screenshot* *[OffGuardian](https://off-guardian.org/2025/02/26/coming-soon-the-european-digital-identity-wallet/)]*
***
Dieser Beitrag ist zuerst auf ***[Transition News](https://transition-news.org/demnachst-verfugbar-die-europaische-brieftasche-fur-digitale-identitaten)*** erschienen.
-
@ 5a261a61:2ebd4480
2025-03-03 20:35:49
Tom stopped and nodded to Jiro with a smile. "Just wanted to see how it's going," he said as he approached the counter.
"People need to eat and I have food. Can't complain," replied the ever-smiling Jiro. "Are you heading out to make some money, or should I put it on your tab again?" he continued without pausing his stirring.
Tom might have been short on cash, but his pride (and caution) never allowed him to leave debts with friends. And Jiro was about the closest thing to a friend among all his acquaintances.
"I can still afford it today," Tom smiled tiredly, "but if you know of something that might bring in some metal, I could stop by tomorrow too."
"There might be something, but nothing that would pay the bills today. You might have better luck across the street. They're having another party today, and as a good neighbor and main supplier of coconut oil, I have a magic piece of paper that will get you on the guest list."
"And here comes the 'but'?"
"If you're this impatient with women too, I'm not surprised you don't have one to make a home out of those four walls... Have I told you about my niece Noi?" Juri asked with his typical mischievous smile.
Tom raised an eyebrow. "Maybe. But I have a feeling you're going to tell me again anyway."
Juri laughed. "See, that's why I like you. You always know what's coming." He leaned closer across the counter. "Noi is a smart girl, studying journalism. But she needs a bit of... how to put it... social training."
"And by that, you mean exactly what?" Tom asked cautiously.
"Nothing bad, don't worry," Juri waved his hand dismissively. "She just needs someone to take her into better society. You know, to see how things work. And, as it happens, she has tickets to tonight's party at The Beach."
Tom sighed. He already suspected where this was heading. "Juri, I'm not exactly—"
"The perfect gentleman who could show my niece how to behave in higher circles?" Juri cut him off. "Come on, Tom. You're a detective. You know how to adapt to wherever the wind blows. And she has those tickets. You want to go to the party, she needs a guide. Everyone will be happy."
Tom remained silent for a moment, considering his options. On one hand, he wasn't in the mood to babysit some naive student. On the other hand, those tickets would really come in handy... especially since he had nothing better going on.
**Where to next?**
- accept offer to get out of the stale water
- find another way other than babysitting
-
@ 66dd4c94:adce64b2
2025-03-02 18:04:32
# == January 17 2025
Out From Underneath | Prism Shores
crazy arms | pigeon pit
Humanhood | The Weather Station
# == february 07 2025
Wish Defense | FACS
Sayan - Savoie | Maria Teriaeva
Nowhere Near Today | Midding
# == february 14 2025
Phonetics On and On | Horsegirl
# == february 21 2025
Finding Our Balance | Tsoh Tso
Machine Starts To Sing | Porridge Radio
Armageddon In A Summer Dress | Sunny Wa
# == february 28 2025
you, infinite | you, infinite
On Being | Max Cooper
Billboard Heart | Deep Sea Diver
-
@ 76d35c56:4811e780
2025-03-02 17:36:22
# == January 17 2025
Out From Underneath | Prism Shores
crazy arms | pigeon pit
Humanhood | The Weather Station
# == february 07 2025
Wish Defense | FACS
Sayan - Savoie | Maria Teriaeva
Nowhere Near Today | Midding
# == february 14 2025
Phonetics On and On | Horsegirl
# == february 21 2025
Finding Our Balance | Tsoh Tso
Machine Starts To Sing | Porridge Radio
Armageddon In A Summer Dress | Sunny Wa
# == february 28 2025
you, infinite | you, infinite
On Being | Max Cooper
Billboard Heart | Deep Sea Diver
-
@ f33c8a96:5ec6f741
2025-03-01 23:25:22
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-1.mp4" type="video/mp4"/>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-1.webm" type="video/mp4"/>
</video></div>
# Setting Up Your Code Editor
## Introduction
In this lesson, we'll set up the most fundamental tool in your development journey: your code editor. This is where you'll spend most of your time writing, testing, and debugging code, so it's crucial to get comfortable with it from the start.
## What is an IDE?
### Definition
An IDE (Integrated Development Environment) is a software application that provides comprehensive facilities for software development. Think of it as your complete workshop for writing code.
### Key Components
1. **Code Editor**
- Where you write and edit code
- Provides syntax highlighting
- Helps with code formatting
- Makes code easier to read and write
2. **Compiler/Interpreter**
- Runs your code
- Translates your code into executable instructions
- Helps test your applications
3. **Debugging Tools**
- Help find and fix errors
- Provide error messages and suggestions
- Make problem-solving easier
## Setting Up Visual Studio Code
### Why VS Code?
- Free and open-source
- Lightweight yet powerful
- Excellent community support
- Popular among developers
- Great for beginners and experts alike
### Installation Steps
1. Visit [code.visualstudio.com](https://code.visualstudio.com)
2. Download the version for your operating system
3. Run the installer
4. Follow the installation prompts
### Essential VS Code Features
#### 1. Interface Navigation
- **File Explorer** (Ctrl/Cmd + Shift + E)
- Browse and manage your files
- Create new files and folders
- Navigate your project structure
- **Search** (Ctrl/Cmd + Shift + F)
- Find text across all files
- Replace text globally
- Search with regular expressions
- **Source Control** (Ctrl/Cmd + Shift + G)
- Track changes in your code
- Commit and manage versions
- Integrate with Git
#### 2. Terminal Integration
To open the integrated terminal:
- Use ``` Ctrl + ` ``` (backtick)
- Or View → Terminal from the menu
- Basic terminal commands:
```bash
ls # List files (dir on Windows)
cd # Change directory
clear # Clear terminal
code . # Open VS Code in current directory
```
#### 3. Essential Extensions
Install these extensions to enhance your development experience:
1. **ESLint**
- Helps find and fix code problems
- Enforces coding standards
- Improves code quality
2. **Prettier**
- Automatically formats your code
- Maintains consistent style
- Saves time on formatting
3. **Live Server**
- Runs your web pages locally
- Auto-refreshes on save
- Great for web development
### Important Keyboard Shortcuts
```
Ctrl/Cmd + S # Save file
Ctrl/Cmd + C # Copy
Ctrl/Cmd + V # Paste
Ctrl/Cmd + Z # Undo
Ctrl/Cmd + Shift + P # Command palette
Ctrl/Cmd + P # Quick file open
```
## Writing Your First Code
Let's create and run a simple HTML file:
1. Create a new file (`index.html`)
2. Add basic HTML content:
```html
<h1>Hello World!</h1>
```
3. Save the file (Ctrl/Cmd + S)
4. Open in browser or use Live Server
## Best Practices
### 1. File Organization
- Keep related files together
- Use clear, descriptive names
- Create separate folders for different projects
### 2. Regular Saving
- Save frequently (Ctrl/Cmd + S)
- Watch for the unsaved dot indicator
- Enable auto-save if preferred
### 3. Terminal Usage
- Get comfortable with basic commands
- Use the integrated terminal
- Practice navigation and file operations
## Troubleshooting Common Issues
### 1. Installation Problems
- Ensure you have admin rights
- Check system requirements
- Use official download sources
### 2. Extension Issues
- Keep extensions updated
- Disable conflicting extensions
- Restart VS Code after installation
### 3. Performance
- Don't install too many extensions
- Regular restart of VS Code
- Keep your system updated
## Next Steps
1. **Practice Navigation**
- Create and manage files
- Use the integrated terminal
- Try keyboard shortcuts
2. **Customize Your Editor**
- Explore themes
- Adjust font size
- Configure auto-save
3. **Prepare for Next Lesson**
- Keep VS Code open
- Get comfortable with the interface
- Practice basic operations
## Additional Resources
- [VS Code Documentation](https://code.visualstudio.com/docs)
- [Keyboard Shortcuts Reference](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)
- [VS Code Tips and Tricks](https://code.visualstudio.com/docs/getstarted/tips-and-tricks)
Remember: Your code editor is your primary tool as a developer. Take time to get comfortable with it, and don't worry about mastering everything at once. Focus on the basics we covered in the video, and you'll naturally learn more features as you need them.
Happy coding! 🚀
-
@ f33c8a96:5ec6f741
2025-03-01 23:24:35
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-4.mp4" type="video/mp4"/>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-4.webm" type="video/webm"/>
</video></div>
# CSS Fundamentals: Styling Your First Webpage
## Introduction
In our previous lesson, we created the structure of our webpage with HTML. Now, we'll learn how to style it using CSS (Cascading Style Sheets). While HTML provides the bones of our webpage, CSS adds the visual presentation - the colors, layouts, spacing, and overall aesthetics.
## What is CSS?
### Definition
CSS (Cascading Style Sheets) is a stylesheet language that controls the visual presentation of HTML documents. Think of it like the paint, decorations, and interior design of a house - it determines how everything looks and is arranged.
### Key Concepts
1. **Styling Capabilities**
- Fonts and typography
- Colors and backgrounds
- Margins and padding
- Element sizes
- Visual effects
- Layout and positioning
2. **Cascading Nature**
- Styles can be inherited from parent elements
- Multiple styles can apply to the same element
- Specificity determines which styles take precedence
- Styles "cascade" down through your document
## Basic CSS Syntax
```css
selector {
property: value;
}
```
### Example:
```css
h1 {
color: blue;
font-size: 24px;
margin-bottom: 20px;
}
```
## Connecting CSS to HTML
### Method 1: External Stylesheet (Recommended)
```html
<link rel="stylesheet" href="style.css">
```
### Method 2: Internal CSS
```html
<style>
h1 {
color: blue;
}
</style>
```
### Method 3: Inline CSS (Use Sparingly)
```html
<h1 style="color: blue;">Title</h1>
```
## The Box Model
Every HTML element is treated as a box in CSS, with:
```
┌──────────────────────┐
│ Margin │
│ ┌──────────────┐ │
│ │ Border │ │
│ │ ┌──────────┐ │ │
│ │ │ Padding │ │ │
│ │ │ ┌──────┐ │ │ │
│ │ │ │ │ │ │ │
│ │ │ │Content│ │ │ │
│ │ │ │ │ │ │ │
│ │ │ └──────┘ │ │ │
│ │ └──────────┘ │ │
│ └──────────────┘ │
└──────────────────────┘
```
- **Content**: The actual content of the element
- **Padding**: Space between content and border
- **Border**: The border around the padding
- **Margin**: Space outside the border
## CSS Units
### Absolute Units
- `px` - pixels
- `pt` - points
- `cm` - centimeters
- `mm` - millimeters
- `in` - inches
### Relative Units
- `%` - percentage relative to parent
- `em` - relative to font-size
- `rem` - relative to root font-size
- `vh` - viewport height
- `vw` - viewport width
## Practical Example: Styling Our Webpage
### 1. Basic Page Setup
```css
body {
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
flex-direction: column;
}
```
### 2. Header Styling
```css
header {
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}
```
### 3. Main Content Area
```css
main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
flex: 1;
}
```
### 4. Footer Styling
```css
footer {
background-color: #333;
color: white;
padding: 10px;
text-align: center;
}
```
## Layout with Flexbox
### Basic Concept
Flexbox is a modern layout system that makes it easier to create flexible, responsive layouts.
### Key Properties
```css
.container {
display: flex;
flex-direction: row | column;
justify-content: center | space-between | space-around;
align-items: center | flex-start | flex-end;
}
```
### Common Use Cases
1. Centering content
2. Creating navigation bars
3. Building responsive layouts
4. Equal-height columns
5. Dynamic spacing
## Best Practices
### 1. Organization
- Use consistent naming conventions
- Group related styles together
- Comment your code for clarity
- Keep selectors simple and specific
### 2. Performance
- Avoid unnecessary specificity
- Use shorthand properties when possible
- Minimize redundant code
- Consider load time impact
### 3. Maintainability
- Use external stylesheets
- Follow a consistent formatting style
- Break large stylesheets into logical files
- Document important design decisions
## Debugging CSS
### Common Tools
1. Browser Developer Tools
- Element inspector
- Style inspector
- Box model viewer
### Common Issues
1. Specificity conflicts
2. Inheritance problems
3. Box model confusion
4. Flexbox alignment issues
## Exercises
### 1. Style Modifications
Try modifying these properties in your stylesheet:
```css
/* Change colors */
header {
background-color: #4a90e2;
}
/* Adjust spacing */
main {
padding: 40px;
}
/* Modify typography */
h1 {
font-size: 32px;
font-weight: bold;
}
```
### 2. Layout Challenge
Create a card layout using Flexbox:
```css
.card-container {
display: flex;
justify-content: space-between;
gap: 20px;
}
.card {
flex: 1;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
```
## Additional Resources
### Learning Tools
1. [Flexbox Froggy](https://flexboxfroggy.com/) - Interactive Flexbox learning game
2. [CSS-Tricks](https://css-tricks.com) - Excellent CSS reference and tutorials
3. [MDN CSS Documentation](https://developer.mozilla.org/en-US/docs/Web/CSS)
### Practice Projects
1. Style your personal webpage
2. Create a responsive navigation menu
3. Build a flexible card layout
4. Design a custom button style
Remember: CSS is both an art and a science. Don't be afraid to experiment and break things - that's how you'll learn the most. The key is to start simple and gradually add complexity as you become more comfortable with the basics.
Next up, we'll dive into JavaScript to add interactivity to our webpage! 🚀
-
@ f33c8a96:5ec6f741
2025-03-01 23:23:54
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-5.mp4" type="video/mp4"/>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-5.webm" type="video/webm"/>
</video></div>
# JavaScript: Building Your First Interactive Web App
## Introduction
In this lesson, we'll bring our web pages to life by adding dynamic functionality with JavaScript. We'll build a real-world application that displays and updates Bitcoin prices in real-time, teaching core JavaScript concepts along the way.
## Project Overview: Bitcoin Price Tracker
We'll build a web application that:
- Displays current Bitcoin price
- Updates automatically every 3 seconds
- Allows currency switching
- Includes interactive controls
- Shows current date/time
## Core JavaScript Concepts
### 1. Variables and Data Types
```javascript
// Variables can be declared with let or const
let currentCurrency = "USD"; // Can be changed
const interval = 3000; // Cannot be changed
// Basic data types
const price = 45000; // Number
const isVisible = true; // Boolean
const currency = "USD"; // String
```
### 2. DOM Manipulation
```javascript
// Getting elements
const priceElement = document.getElementById('price');
const button = document.getElementById('refresh-button');
// Modifying content
priceElement.textContent = `${price} ${currency}`;
// Changing styles
priceElement.style.display = 'none';
```
### 3. Event Listeners
```javascript
// Basic click handler
button.addEventListener('click', () => {
fetchBitcoinPrice();
});
// Change event for select elements
selector.addEventListener('change', (event) => {
handleCurrencyChange(event.value);
});
```
### 4. Async Operations & Fetch API
```javascript
async function fetchBitcoinPrice() {
try {
const response = await fetch(apiUrl);
const data = await response.json();
updatePrice(data.price);
} catch (error) {
console.error('Error:', error);
}
}
```
## Project Structure
### HTML Setup
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bitcoin Price Tracker</title>
<link rel="stylesheet" href="style.css">
<script src="index.js" defer></script>
</head>
<body>
<h1>Current Bitcoin Price</h1>
<p>The price is: <span id="price"></span></p>
<!-- Additional elements -->
</body>
</html>
```
### Core Functionality Implementation
1. **Setting Up the Timer**
```javascript
// Update price every 3 seconds
setInterval(fetchBitcoinPrice, 3000);
// Update date/time every second
setInterval(updateDateTime, 1000);
```
2. **Currency Selection**
```javascript
function handleCurrencyChange(newCurrency) {
currentCurrency = newCurrency;
fetchBitcoinPrice();
}
```
3. **Toggle Visibility**
```javascript
function togglePriceVisibility() {
const price = document.getElementById('price');
price.style.display = price.style.display === 'none'
? 'inline'
: 'none';
}
```
## Best Practices
### 1. Error Handling
- Always use try/catch with async operations
- Provide meaningful error messages
- Handle edge cases gracefully
### 2. Code Organization
- Keep functions focused and small
- Use meaningful variable names
- Group related functionality
- Add comments for clarity
### 3. Performance
- Avoid unnecessary DOM updates
- Use appropriate update intervals
- Clean up intervals when not needed
## Common Challenges & Solutions
### 1. API Issues
```javascript
// Handle API failures gracefully
catch (error) {
priceElement.textContent = 'Price unavailable';
console.error('API Error:', error);
}
```
### 2. Currency Formatting
```javascript
function formatPrice(price, currency) {
return new Intl.NumberFormat('en-US', {
style: 'currency',
currency: currency
}).format(price);
}
```
### 3. Time Zones
```javascript
function getLocalTime() {
return new Date().toLocaleString();
}
```
## Extending the Project
Consider adding these features for practice:
1. Price change indicators (up/down arrows)
2. Historical price chart
3. Multiple cryptocurrency support
4. Price alerts
5. Local storage for settings
## Debugging Tips
### Using Console
```javascript
console.log('Price fetched:', price);
console.error('Error occurred:', error);
console.table(priceHistory);
```
### Chrome DevTools
1. Network tab for API calls
2. Console for errors
3. Elements for DOM inspection
4. Sources for debugging
## Additional Resources
- MDN JavaScript Guide
- JavaScript.info
- CoinGecko API Documentation
- Chrome DevTools Documentation
## Next Steps
1. Add styling with CSS
2. Implement additional features
3. Learn about React for more complex applications
4. Explore other APIs and cryptocurrencies
Remember: The best way to learn is by doing. Don't be afraid to break things and experiment with the code. The developer console is your friend for debugging and understanding what's happening in your application.
Happy coding! 🚀
-
@ f33c8a96:5ec6f741
2025-03-01 23:23:36
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-2.mp4" type="video/mp4"/>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-2.webm" type="video/webm"/>
</video></div>
# Setting Up Git and GitHub: A Developer's Foundation
## Lesson Overview
In this lesson, we'll establish one of the most important foundations of your development journey: version control with Git and GitHub. This knowledge will enable you to track your code, back it up in the cloud, and start building your developer portfolio.
## Prerequisites
- Visual Studio Code installed
- Terminal/Command Line basics
- GitHub account (we'll create one in this lesson)
## Key Learning Objectives
- Understand what Git and GitHub are and why they're essential
- Set up Git locally and connect it to GitHub
- Learn basic Git commands and workflow
- Create your first repository and commit
- Establish good Git habits for your developer journey
## What is Git and GitHub?
### Git: Your Local Version Control
- A version control system that tracks code changes over time
- Prevents accidental overwrites of your work
- Enables multiple developers to work on the same project safely
- Runs locally on your machine
### GitHub: Your Code in the Cloud
- A web-based platform that extends Git
- Cloud storage for your code repositories
- Enables code sharing and collaboration
- Includes features like:
- Issue tracking
- Pull requests
- Project management tools
- Code review capabilities
## Why Use GitHub?
### 1. Portfolio Building
- Acts as your "proof of work" as a developer
- Shows your coding activity through contribution graphs
- Demonstrates your consistency and dedication
- Serves as a public showcase of your projects
### 2. Collaboration and Learning
- Access millions of open-source projects
- Learn from other developers' code
- Contribute to real-world projects
- Get feedback on your code
- Work effectively in teams
### 3. Code Safety and Access
- All your code is safely stored in the cloud
- Access your projects from anywhere
- Never lose your work due to computer issues
## Essential GitHub Terminology
| Term | Definition |
|------|------------|
| Repository (Repo) | A folder containing your project files and version history |
| Commit | A saved change or addition to your code |
| Staging | Marking changes to be included in your next commit |
| Push | Sending your local commits to GitHub |
| Branch | A separate version of your code for new features or experiments |
| Pull Request (PR) | A request to merge changes from one branch to another |
| Clone | Creating a local copy of a remote repository |
| Fork | Creating your own copy of someone else's repository |
## Hands-on Practice
### Setting Up Git
1. Install Git from https://git-scm.com/downloads
2. Configure your identity:
```bash
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
```
### Your First Repository
1. Create a new repository on GitHub named "hello-world"
2. Initialize Git locally:
```bash
git init
git add .
git commit -m "My first commit"
git remote add origin <your-repository-url>
git push -u origin main
```
## Basic Git Workflow Quick Reference
### Pushing Code to GitHub
```bash
# 1. Stage your changes
git add .
# 2. Commit your changes with a message
git commit -m "Describe your changes here"
# 3. Push to GitHub
git push
```
### Getting Code from GitHub
```bash
# If you already have the repository locally:
git pull
# If you need to download a repository:
git clone https://github.com/username/repository.git
```
## Building Good Habits
### Daily Git Practice
- Make it a goal to push code every day
- Even small changes count
- Use your GitHub contribution graph as motivation
- Track your progress over time
### Best Practices
1. Commit often with clear messages
2. Pull before you start working
3. Push your changes when you finish
4. Keep each project in its own repository
5. Include README files to explain your projects
## Common Issues and Solutions
### "No upstream branch" Error
If you see this error when pushing:
```bash
git push --set-upstream origin main
```
### Changes Not Showing Up
1. Check if changes are staged:
```bash
git status
```
2. Make sure you've committed:
```bash
git commit -m "Your message"
```
3. Verify you've pushed:
```bash
git push
```
## Exercise: Start Your Journey
1. Create your GitHub account if you haven't already
2. Set up Git locally using the commands we covered
3. Create your first repository named "hello-world"
4. Make your first commit
5. Push your code to GitHub
6. Make a habit of pushing code daily
## Additional Resources
- [GitHub Documentation](https://docs.github.com)
- [Git Documentation](https://git-scm.com/doc)
- Practice with [GitHub Learning Lab](https://lab.github.com)
## Next Steps
- Start tracking all your code projects with Git
- Begin building your portfolio on GitHub
- Join the open-source community
- Collaborate with other developers
Remember: Every developer started where you are now. The key is consistency and persistence. Make pushing code to GitHub a daily habit, and you'll be amazed at your progress over time.
Happy coding! 🚀
-
@ f33c8a96:5ec6f741
2025-03-01 23:23:04
<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-3.mp4" type="video/mp4"/>
<source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-3.webm" type="video/webm"/>
</video></div>
## What is HTML?
HTML (HyperText Markup Language) is the foundation of all webpages. Think of it as the framing of a house - it provides the basic structure that everything else builds upon.
### Key Concepts
- HTML is a markup language, not a programming language
- It tells browsers how to structure web content
- Every HTML element is like a building block
- Browsers interpret HTML to display content
## The Building Analogy
When building a webpage, think of it like constructing a house:
- **HTML**: The framing and structure (walls, rooms, layout)
- **CSS**: The design elements (paint, decorations, styling)
- **JavaScript**: The functionality (plumbing, electrical, moving parts)
## Basic HTML Structure
### 1. HTML Boilerplate
Every webpage starts with a basic template:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
</head>
<body>
<!-- Your content goes here -->
</body>
</html>
```
### 2. Understanding the Parts
- `<!DOCTYPE html>`: Tells browsers this is an HTML5 document
- `<html>`: The root element of the page
- `<head>`: Contains metadata about the document
- `<body>`: Contains the visible content
## Essential HTML Elements
### 1. Headings
HTML has six levels of headings:
```html
<h1>Main Title</h1>
<h2>Subtitle</h2>
<h3>Section Header</h3>
<!-- ... -->
<h6>Smallest Heading</h6>
```
### 2. Paragraphs
```html
<p>This is a paragraph of text. It can contain as much text as you need.</p>
```
### 3. Images
```html
<img src="path-to-image.jpg" alt="Description of image" width="300">
```
### 4. Links
```html
<a href="https://example.com">Click here</a>
```
## HTML Attributes
Attributes provide additional information or modify HTML elements:
```html
<tag attribute="value">Content</tag>
```
Common attributes:
- `src`: Source path for images
- `href`: Destination for links
- `alt`: Alternative text for images
- `class`: CSS class names
- `id`: Unique identifier
- `style`: Inline CSS styles
## Semantic HTML
### What is Semantic HTML?
Semantic HTML uses meaningful tags that describe their content's purpose. This improves:
- Accessibility
- SEO (Search Engine Optimization)
- Code readability
- Maintainability
### Common Semantic Elements
```html
<header>
<!-- Site header content -->
</header>
<nav>
<!-- Navigation menu -->
</nav>
<main>
<!-- Main content -->
<article>
<!-- Self-contained content -->
</article>
<section>
<!-- Grouped content -->
</section>
</main>
<footer>
<!-- Site footer content -->
</footer>
```
### Non-Semantic vs Semantic Example
Instead of:
```html
<div class="header">
<div class="navigation">
<div class="nav-item">Home</div>
</div>
</div>
```
Use:
```html
<header>
<nav>
<a href="/">Home</a>
</nav>
</header>
```
## Building Your First Webpage
### 1. Basic Structure
```html
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My First Webpage!</h1>
</header>
<main>
<section>
<h2>About Me</h2>
<p>Hi, I'm learning web development with PlebDevs!</p>
</section>
<section>
<h2>My Interests</h2>
<p>I'm interested in Bitcoin, programming, and building cool stuff!</p>
</section>
</main>
<footer>
<p>Created by [Your Name] - 2024</p>
</footer>
</body>
</html>
```
## Best Practices
### 1. Structure
- Use proper indentation
- Keep code organized and readable
- Use semantic elements when possible
- Include all required elements (`DOCTYPE`, `html`, `head`, `body`)
### 2. Content
- Use appropriate heading levels (start with `h1`)
- Write descriptive `alt` text for images
- Keep content meaningful and organized
- Use comments to explain complex sections
### 3. Accessibility
- Use semantic HTML elements
- Provide alternative text for images
- Maintain a logical heading structure
- Ensure content makes sense when read linearly
## Common Issues and Solutions
### Problem: Images Not Loading
```html
<!-- Wrong -->
<img src="image.jpg">
<!-- Right -->
<img src="./images/image.jpg" alt="Description">
```
### Problem: Links Not Working
```html
<!-- Wrong -->
<a>Click here</a>
<!-- Right -->
<a href="https://example.com">Click here</a>
```
## Next Steps
1. **Practice Building**
- Create a personal webpage about yourself
- Include different types of content (text, images, links)
- Use semantic HTML elements
2. **Experiment with Structure**
- Try different layouts
- Use various HTML elements
- Pay attention to semantic meaning
3. **Prepare for CSS**
- Think about how you want your page to look
- Consider what styles you'll want to add
- Plan your layout structure
## Exercise: Create Your Profile Page
Try creating a simple profile page using what you've learned:
1. Use the HTML boilerplate
2. Add a header with your name
3. Include an "About Me" section
4. Add a photo (if you want)
5. List your interests or goals
6. Add a footer with contact information
Remember to:
- Use semantic HTML
- Include appropriate headings
- Add descriptive alt text for images
- Keep your code clean and well-organized
## Additional Resources
- [MDN HTML Guide](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [HTML5 Doctor (Semantic Elements)](http://html5doctor.com/)
- [W3Schools HTML Tutorial](https://www.w3schools.com/html/)
Remember: HTML is the foundation of web development. Take time to understand these basics well, as they'll serve as the building blocks for everything else you'll learn. Happy coding! 🚀