NostrHTTP - # == January 17 2025

prev next Articles

@ 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

yakihonne.com iris.to jumble.social Me
@ 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

yakihonne.com iris.to jumble.social Me
@ 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! 🚀

yakihonne.com iris.to jumble.social Me
@ 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! 🚀

yakihonne.com iris.to jumble.social Me
@ 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>  </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! 🚀

yakihonne.com iris.to jumble.social Me
@ 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! 🚀

yakihonne.com iris.to jumble.social Me
@ 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>  </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>  </header> <nav>  </nav> <main>  <article>  </article> <section>  </section> </main> <footer>  </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  <img src="image.jpg">  <img src="./images/image.jpg" alt="Description"> ``` ### Problem: Links Not Working ```html  <a>Click here</a>  <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! 🚀

yakihonne.com iris.to jumble.social Me
@ f33c8a96:5ec6f741
2025-03-01 23:21:44

<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-0.mp4" type="video/mp4"/> <source src="https://plebdevs-bucket.nyc3.cdn.digitaloceanspaces.com/starter-lesson-0.webm" type="video/webm"/> </video></div> # Welcome to PlebDevs Starter Course ## Course Mission Welcome to the PlebDevs starter course! I'm Austin, the founder of PlebDevs, and I'll be walking you through this short intro starter course that will get you up and running and interacting with the rest of the content on the platform. If you're here, I'm assuming you're new to coding or just starting out. If you already have experience and have your bearings down, there's lots more intermediate and advanced content on the platform. This course is designed for absolute beginners. ## Course Goals ### Overall PlebDevs Goals 1. Learn how to code 2. Build Bitcoin/Lightning/Nostr apps 3. Become a developer This is a big journey with a lot of pieces and things to learn. The starter course is going to get you on that path as quickly as possible and make it a smooth journey. ### Starter Course Objectives 1. Give you an easy, high-level overview of the dev journey 2. Get you set up and comfortable in a development environment where you'll write and ship code 3. Give you basic experience in the languages covered in our courses and workshops There's lots of material out there that will just tell you exactly what to do and not explain why but I want you to actually understand for yourself. I want you to have a good mental model of what this journey is going to be like, what it's going to be like actually writing and pushing code. And then we're going to start getting our hands dirty and gain real experience. ## What is a PlebDev? ### Origins and Philosophy I started using the term "PlebDev" a few years ago to describe a unique approach to learning development in the Bitcoin space. It represents: - **Inclusive Learning**: Anyone can become a developer, regardless of background - **Growth Mindset**: Embracing the journey from beginner to professional - **Practical Focus**: Emphasizing real-world application development - **Community Support**: Learning and growing together ### Key Characteristics - 🌱 **Growth-Focused**: PlebDevs are always learning and improving - 🎯 **App-Centric**: Focus on building applications rather than protocol development - 🆕 **Embrace Being New**: Being a new developer is infinitely better than being on the sidelines - 🤝 **Community-Driven**: Bitcoin/Lightning/Nostr ecosystem needs more plebdevs like you! ## Our Learning Approach ### Core Principles 1. **Lower Barriers** - Simplify complex concepts - Focus on practical understanding - Build confidence through action 2. **Project-Based Learning** - Learn by doing - Create real applications - Build a portfolio as you learn 3. **MVP (Minimum Viable Product) Focus** - Start with core functionality - Get things working first - Iterate and improve 4. **Actionable Knowledge** - Focus on the 20% that delivers 80% of results - Learn what you can use right away - Build practical skills ### Teaching Methods - Detailed concept breakdowns - Line-by-line code explanations - Interactive learning - 1:1 support available - Community-driven progress ## Course Structure ### The Learning Path Instead of the traditional bottom-up approach, we use a project-focused method: ``` 🏔️ Advanced Skills 🏔️ Projects & Practice 🏔️ Core Concepts 🏔️ Development Environment 🏔️ Getting Started ``` We'll create checkpoints through projects, allowing you to: - Verify your understanding - Build your portfolio - See real progress - Have reference points for review ## Student Expectations ### What We Expect From You - **High Agency**: Take ownership of your learning journey - **Active Participation**: Engage with the material and community - **Persistence**: Push through challenges - **Curiosity**: Ask questions and explore concepts ### What You Can Expect From Us - Clear, practical instruction - Comprehensive support - Real-world applications - Community backing ## Getting Started ### Next Steps 1. Ensure you're ready to commit to learning 2. Set up your development environment (next lesson) 3. Join our community 4. Start building! ## Resources and Support ### Where to Get Help - plebdevs.com ### Tips for Success 1. Push code daily, even if it is small. 2. Focus on understanding rather than memorizing. 3. Build projects that interest you. 4. Engage with the community. 5. Don't be afraid to ask questions. ## Remember You don't need to become a "10x developer" overnight. The goal is to start writing code, build useful things, and gradually improve. Every expert was once a beginner, and the journey of a thousand miles begins with a single line of code. Ready to begin? Let's dive into the next lesson where we'll set up your development environment! 🚀

yakihonne.com iris.to jumble.social Me
@ 6260f29f:2ee2fcd4
2025-03-01 22:48:31

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/htak8D2tv_M?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div> # PlebDevs ⚡️ A one-of-a-kind developer education, content, and community platform built on Nostr and fully Lightning integrated. <br />[https://plebdevs.com](https://plebdevs.com) ## Overview PlebDevs is an open-source platform that combines educational content, community interaction, and Bitcoin/Lightning integration. The platform publishes content to Nostr and actively pulls from Nostr relays, creating a distributed, interoperable trail of Documents, Videos, and Courses. ## Technical Implementation ### Nostr Integration - **Content Distribution**: Implements NIP-23 for rich multimedia content embedding - **Content Encryption**: Paid content bodies are encrypted while maintaining metadata visibility - **Authentication**: - Multi-method signup (NIP-07, Email, GitHub, Anonymous) - Ephemeral keypair generation for non-Nostr users - Account linking and recovery system - **Lists & Courses**: NIP-51 implementation for structured content organization - **Monetization**: NIP-99 for digital content sales - **Automated Subscriptions**: NIP-47 (Nostr Wallet Connect) for recurring payments - **Badge System**: NIP-58 for automated achievement rewards - **Identity**: NIP-05 for custom platform identities - **Additional NIPs**: Implements NIP-01, NIP-19, NIP-39, NIP-57 ### Platform Architecture - **Content Management**: - Draft system with preview capabilities - Parameterized replaceable events - Multi-format support (Markdown, Video, Mixed Media) - Course builder with drag-and-drop ordering - **User Management**: - Profile synchronization with Nostr - Activity tracking and progress monitoring - Custom relay configuration - Wallet connection management - **Admin Features**: - Protected admin routes based on pubkey configuration - Content creation and management interface - Draft/publish workflow - Course assembly tools

yakihonne.com iris.to jumble.social Me
@ 6260f29f:2ee2fcd4
2025-03-01 22:21:02

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/yOKs5L18YcI?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>

yakihonne.com iris.to jumble.social Me
@ f33c8a96:5ec6f741
2025-03-01 20:56:43

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/tGVxP4RgyI4?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>

yakihonne.com iris.to jumble.social Me
@ f33c8a96:5ec6f741
2025-03-01 20:50:47

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/7dsR7um-DxA?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>

yakihonne.com iris.to jumble.social Me
@ f33c8a96:5ec6f741
2025-03-01 20:42:24

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://www.youtube.com/embed/QY6euaT_G_E?enablejsapi=1" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>

yakihonne.com iris.to jumble.social Me
@ a95c6243:d345522c
2025-03-01 10:39:35

*Ständige Lügen und Unterstellungen, permanent falsche Fürsorge* *\ können Bausteine von emotionaler Manipulation sein. Mit dem Zweck,* *\ Macht und Kontrolle über eine andere Person auszuüben.* *\ Apotheken Umschau*   **Irgendetwas muss passiert sein: «Gaslighting» ist gerade Thema** in vielen Medien. Heute bin ich nach längerer Zeit mal wieder über dieses Stichwort gestolpert. Das war in einem [Artikel](https://norberthaering.de/propaganda-zensur/dwd-referenzperiode/) von Norbert Häring über Manipulationen des Deutschen Wetterdienstes (DWD). In diesem Fall ging es um eine Pressemitteilung vom Donnerstag zum «viel zu warmen» Winter 2024/25. **Häring wirft der Behörde vor, dreist zu lügen und Dinge auszulassen,** um die Klimaangst wach zu halten. Was der Leser beim DWD nicht erfahre, sei, dass dieser Winter kälter als die drei vorangegangenen und kälter als der Durchschnitt der letzten zehn Jahre gewesen sei. Stattdessen werde der falsche Eindruck vermittelt, es würde ungebremst immer wärmer. **Wem also der zu Ende gehende Winter eher kalt vorgekommen sein sollte,** mit dessen Empfinden stimme wohl etwas nicht. Das jedenfalls wolle der DWD uns einreden, so der Wirtschaftsjournalist. Und damit sind wir beim Thema Gaslighting. **Als** **[Gaslighting](https://bayern-gegen-gewalt.de/gewalt-infos-und-einblicke/formen-von-gewalt/psychische-gewalt/gaslighting/)** **wird eine Form psychischer Manipulation bezeichnet,** mit der die Opfer desorientiert und zutiefst verunsichert werden, indem ihre eigene Wahrnehmung als falsch bezeichnet wird. Der Prozess führt zu Angst und Realitätsverzerrung sowie zur Zerstörung des Selbstbewusstseins. Die Bezeichnung kommt von dem britischen Theaterstück «Gas Light» aus dem Jahr 1938, in dem ein Mann mit grausamen Psychotricks seine Frau in den Wahnsinn treibt. **Damit Gaslighting funktioniert, muss das Opfer dem Täter vertrauen.** Oft wird solcher Psychoterror daher im privaten oder familiären Umfeld beschrieben, ebenso wie am Arbeitsplatz. Jedoch eignen sich die Prinzipien auch perfekt zur Manipulation der Massen. Vermeintliche Autoritäten wie Ärzte und Wissenschaftler, oder «der fürsorgliche Staat» und Institutionen wie die UNO oder die WHO wollen uns doch nichts Böses. Auch Staatsmedien, Faktenchecker und diverse NGOs wurden zu «vertrauenswürdigen Quellen» erklärt. Das hat seine Wirkung. **Warum das Thema Gaslighting derzeit scheinbar so populär ist,** vermag ich nicht zu sagen. Es sind aber gerade in den letzten Tagen und Wochen auffällig viele Artikel dazu erschienen, und zwar nicht nur von Psychologen. Die *Frankfurter Rundschau* hat gleich mehrere publiziert, und [Anwälte](https://www.anwalt.de/rechtstipps/gaslighting-beispiele-anzeichen-strafbarkeit-212449.html) interessieren sich dafür offenbar genauso wie Apotheker. **Die** ***Apotheken Umschau*** **machte sogar auf** **[«Medical Gaslighting»](https://archive.is/Wx5YM)** **aufmerksam.** Davon spreche man, wenn Mediziner Symptome nicht ernst nähmen oder wenn ein gesundheitliches Problem vom behandelnden Arzt «schnöde heruntergespielt» oder abgetan würde. Kommt Ihnen das auch irgendwie bekannt vor? Der Begriff sei allerdings irreführend, da er eine manipulierende Absicht unterstellt, die «nicht gewährleistet» sei. **Apropos Gaslighting: Die noch amtierende deutsche Bundesregierung** [meldete](https://www.bundesregierung.de/breg-de/service/newsletter-und-abos/bundesregierung-aktuell/ausgabe-08-2025-februar-28-2336254?view=renderNewsletterHtml) heute, es gelte, «weiter \[sic!] gemeinsam daran zu arbeiten, einen gerechten und dauerhaften Frieden für die Ukraine zu erreichen». Die Ukraine, wo sich am Montag «der völkerrechtswidrige Angriffskrieg zum dritten Mal jährte», [verteidige](https://transition-news.org/wikileaks-der-westen-wusste-dass-ein-nato-beitritt-der-ukraine-riskant-war) ihr Land und «unsere gemeinsamen Werte». **Merken Sie etwas? Das Demokratieverständnis mag ja tatsächlich** inzwischen in beiden Ländern ähnlich traurig sein. Bezüglich Friedensbemühungen ist meine Wahrnehmung jedoch eine andere. Das muss an meinem Gedächtnis liegen. *** Dieser Beitrag ist zuerst auf ***[Transition News](https://transition-news.org/bitte-nicht-von-gaslichtern-irritieren-lassen)*** erschienen.

yakihonne.com iris.to jumble.social Me

导航栏

Home