#HTML Components

[aloftmelevar]

i'm not a DNI person but actually do not fw me if you're like this

[eeyes]

[apod]

2024 September 11

A Night Sky over the Tatra Mountains Image Credit: Marcin Rosadziński; Text: Natalia Lewandowska (SUNY Oswego)

Explanation: A natural border between Slovakia and Poland is the Tatra Mountains. A prominent destination for astrophotographers, the Tatras are the highest mountain range in the Carpathians. In the featured image taken in May, one can see the center of our Milky Way galaxy with two of its famous stellar nurseries, the Lagoon and Omega Nebula, just over the top of the Tatras. Stellar nurseries are full of ionized hydrogen, a fundamental component for the formation of Earth-abundant water. As a fundamental ingredient in all known forms of life, water is a crucial element in the Universe. Such water can be seen in the foreground in the form of the Bialka River.

∞ Source: apod.nasa.gov/apod/ap240911.html

[the-nox-syndicate]

SysNotes devlog 1

Hiya! We're a web developer by trade and we wanted to build ourselves a web-app to manage our system and to get to know each other better. We thought it would be fun to make a sort of a devlog on this blog to show off the development! The working title of this project is SysNotes (but better ideas are welcome!)

What SysNotes is✅:

A place to store profiles of all of our parts

A tool to figure out who is in front

A way to explore our inner world

A private chat similar to PluralKit

A way to combine info about our system with info about our OCs etc as an all-encompassing "brain-world" management system

A personal and tailor-made tool made for our needs

What SysNotes is not❌:

A fronting tracker (we see no need for it in our system)

A social media where users can interact (but we're open to make it so if people are interested)

A public platform that can be used by others (we don't have much experience actually hosting web-apps, but will consider it if there is enough interest!)

An offline app

So if this sounds interesting to you, you can find the first devlog below the cut (it's a long one!):

(I have used word highlighting and emojis as it helps me read large chunks of text, I hope it's alright with y'all!)

Tech stack & setup (feel free to skip if you don't care!)

The project is set up using:

Database: MySQL 8.4.3

Language: PHP 8.3

Framework: Laravel 10 with Breeze (authentication and user accounts) and Livewire 3 (front end integration)

Styling: Tailwind v4

I tried to set up Laragon to easily run the backend, but I ran into issues so I'm just running "php artisan serve" for now and using Laragon to run the DB. Also I'm compiling styles in real time with "npm run dev". Speaking of the DB, I just migrated the default auth tables for now. I will be making app-related DB tables in the next devlog. The awesome thing about Laravel is its Breeze starter kit, which gives you fully functioning authentication and basic account management out of the box, as well as optional Livewire to integrate server-side processing into HTML in the sexiest way. This means that I could get all the boring stuff out of the way with one terminal command. Win!

Styling and layout (for the UI nerds - you can skip this too!)

I changed the default accent color from purple to orange (personal preference) and used an emoji as a placeholder for the logo. I actually kinda like the emoji AS a logo so I might keep it.

Laravel Breeze came with a basic dashboard page, which I expanded with a few containers for the different sections of the page. I made use of the components that come with Breeze to reuse code for buttons etc throughout the code, and made new components as the need arose. Man, I love clean code 😌

I liked the dotted default Laravel page background, so I added it to the dashboard to create the look of a bullet journal. I like the journal-type visuals for this project as it goes with the theme of a notebook/file. I found the code for it here.

I also added some placeholder menu items for the pages that I would like to have in the app - Profile, (Inner) World, Front Decider, and Chat.

i ran into an issue dynamically building Tailwind classes such as class="bg-{{$activeStatus['color']}}-400" - turns out dynamically-created classes aren't supported, even if they're constructed in the component rather than the blade file. You learn something new every day huh…

Also, coming from Tailwind v3, "ps-*" and "pe-*" were confusing to get used to since my muscle memory is "pl-*" and "pr-*" 😂

Feature 1: Profiles page - proof of concept

This is a page where each alter's profiles will be displayed. You can switch between the profiles by clicking on each person's name. The current profile is highlighted in the list using a pale orange colour.

The logic for the profiles functionality uses a Livewire component called Profiles, which loads profile data and passes it into the blade view to be displayed. It also handles logic such as switching between the profiles and formatting data. Currently, the data is hardcoded into the component using an associative array, but I will be converting it to use the database in the next devlog.

New profile (TBC)

You will be able to create new profiles on the same page (this is yet to be implemented). My vision is that the New Alter form will unfold under the button, and fold back up again once the form has been submitted.

Alter name, pronouns, status

The most interesting component here is the status, which is currently set to a hardcoded list of "active", "dormant", and "unknown". However, I envision this to be a customisable list where I can add new statuses to the list from a settings menu (yet to be implemented).

Alter image

I wanted the folder that contained alter images and other assets to be outside of my Laravel project, in the Pictures folder of my operating system. I wanted to do this so that I can back up the assets folder whenever I back up my Pictures folder lol (not for adding/deleting the files - this all happens through the app to maintain data integrity!). However, I learned that Laravel does not support that and it will not be able to see my files because they are external. I found a workaround by using symbolic links (symlinks) 🔗. Basically, they allow to have one folder of identical contents in more than one place. I ran "mklink /D [external path] [internal path]" to create the symlink between my Pictures folder and Laravel's internal assets folder, so that any files that I add to my Pictures folder automatically copy over to Laravel's folder. I changed a couple lines in filesystems.php to point to the symlinked folder:

And I was also getting a "404 file not found" error - I think the issue was because the port wasn't originally specified. I changed the base app URL to the localhost IP address in .env:

…And after all this messing around, it works!

(My Pictures folder)

(My Laravel storage)

(And here is Alice's photo displayed - dw I DO know Ibuki's actual name)

Alter description and history

The description and history fields support HTML, so I can format these fields however I like, and add custom features like tables and bullet point lists.

This is done by using blade's HTML preservation tags "{!! !!}" as opposed to the plain text tags "{{ }}".

(Here I define Alice's description contents)

(And here I insert them into the template)

Traits, likes, dislikes, front triggers

These are saved as separate lists and rendered as fun badges. These will be used in the Front Decider (anyone has a better name for it?? 🤔) tool to help me identify which alter "I" am as it's a big struggle for us. Front Decider will work similar to FlowCharty.

What next?

There's lots more things I want to do with SysNotes! But I will take it one step at a time - here is the plan for the next devlog:

Setting up database tables for the profile data

Adding the "New Profile" form so I can create alters from within the app

Adding ability to edit each field on the profile

I tried my best to explain my work process in a way that wold somewhat make sense to non-coders - if you have any feedback for the future format of these devlogs, let me know!

~~~~~~~~~~~~~~~~~~

Disclaimers:

I have not used AI in the making of this app and I do NOT support the Vibe Coding mind virus that is currently on the loose. Programming is a form of art, and I will defend manual coding until the day I die.

Any alter data found in the screenshots is dummy data that does not represent our actual system.

I will not be making the code publicly available until it is a bit more fleshed out, this so far is just a trial for a concept I had bouncing around my head over the weekend.

We are SYSCOURSE NEUTRAL! Please don't start fights under this post

[izicodes]

After taking a "blog break," I’m excited to start sharing some of the projects I’ve been working on during my time away! One of the highlights is a custom widget I created for Notion—a photocard featuring my favorite band, PLAVE. This widget is perfect for fellow PLAVE fans (Plli), allowing them to display a "fanmade" photocard of their favorite band members right on their Notion pages.

I began this project not only to celebrate my love for PLAVE but also to dive deeper into the world of Notion widgets and explore what’s possible.

Let’s dive into the details of how I built it and the creative process behind it!

I started this project back in May, right after I discovered PLAVE in April! Around that time, I started following a 'photocard editor' on Twitter who creates these fantastic 'unofficial' collectible photocards of PLAVE. I fell in love with her edits immediately. I was also using Notion extensively to keep my Korean studies organized, so I thought, why not combine my passion for Korean learning with my love for PLAVE?

I wanted to create a public widget that other PLAVE fans could easily add into their own Notion pages. To be respectful and ensure proper credit, I reached out to the editor, Jane, to ask if I could use her edits in my widget. I explained my project idea and shared some Figma wireframes to show how the widget would look and function. Jane was excited about the concept and gave me her blessing to move forward. I didn’t start any programming until I had her approval!

For this project, I needed to create two main components: the widget itself and a webpage with information and installation instructions. Surprisingly, the info and installation page turned out to be more challenging than developing the widget! I’m a bit of a perfectionist, so I wanted to ensure the page was user-friendly, responsive, and easy to navigate. It was tougher than I wished for!

As for the widget, it was relatively straightforward to develop and only took me about two days. However, I did face some issues with broken links that I still need to fix, and I’m not quite sure why they’re not working. Usually, I’m a ReactJS enthusiast, but since this was a smaller project, I decided to use my "beginner combo": HTML, CSS (including SCSS), and JavaScript. I quickly realized how accustomed I’ve become to ReactJS because I kept writing code that didn’t work in Vanilla JavaScript—talk about a wake-up call!

In the end, I completed the project to a point where it was ready to present to both the PLLIs (PLAVE fans) and Jane. I found myself eagerly awaiting Jane’s feedback because her artwork was integral to the project. If she wasn’t happy with the outcome, I would have felt the same. Thankfully, she loved it! I officially posted the widget on Twitter/X, and Jane shared it as well. Although most of the users were Korean, reading their translated positive comments made me genuinely happy.

Who knows? Maybe in the future, I’ll work on another PLAVE-themed project. I really enjoyed creating this one!

Feel free to check out the project and try installing the widget on your Notion page:

The official tweet about the project

The installation page

The widget in template Notion page

fyi, it still needs work, I will get to it eventually~~~!

[utopicwork]

Ive been trying to figure out the best way to handle html generation so it's simple for your average user to understand/utilize. This morning I think I've got it. Pages will be made up of components, the components will be pickable to compose a page through a dynamic form and there will be an intermediate format for pages so that the editor can easily handle editing.

For the more technically inclined: the intermediate format will be parsed into a jinja2 template and all the components will be jinja2 templates making it simple to form even complex pages. You'll also be able to write your own components.

[codingquill]

Hey there,

I just wanted to drop a quick note to express how grateful I am for each and every one of you who has subscribed to my content and given it some love.

This is my secondary Tumblr account, and I'm still figuring some things out, especially when it comes to responding to comments. So, I would love a little help on that !

I'd like to give a special shoutout to @variablecemetery for their comment on my introduction post.

And to @mousiecat, who asked about CSS selector priority – Here's your answer

Adding a class like class="navbar" to a <nav> element in HTML, even if there is only one navigation element on the page, is a common practice in web development. This practice has several advantages:

Consistency: It helps maintain a consistent naming convention in your HTML and CSS. If you have multiple components or sections on your website that share similar styles, using classes can make it easier to manage and apply those styles consistently.

Reusability: If you decide to add another navigation element in the future, you can easily apply the same CSS styles to it by giving it the same class name (class="navbar" in this case). This makes your code more modular and reusable.

Specificity: CSS class selectors have a higher specificity than HTML element selectors. This means that if you ever need to style the element differently in a specific context or override other styles, using a class selector can give your styles higher priority without affecting other elements on the page.

Readability and Maintainability: Adding class names that describe the purpose of an element (e.g., class="navbar") makes your code more readable and understandable, which can be helpful when working on a team or revisiting the code later.

Documentation and Self-Documentation: Using class names like class="navbar" can serve as a form of documentation for your HTML structure. When someone else, including your future self, looks at the code, they can quickly understand the role and purpose of that element.

[a-student-out-of-time]

Mind explaining what C# is for those of us who aren't AI and/or coding nerds?

N.O.V.A.: C# is a programming language, alongside HTML, .NET, and Javascript. It encompasses static typing, strong typing, lexically scoped, imperative, declarative, functional, generic, object-oriented, and component-oriented programming disciplines.

In layman's terms, it's a programming language.

[kevinsreviewcatalogue]

Review: The Crow (1994)

A remake of The Crow just came out last weekend. I heard it sucked, so I decided to go back and watch the original instead.

The Crow (1994)

Rated R for a great amount of strong violence and language, and for drug use and some sexuality

<Originally posted at https://kevinsreviewcatalogue.blogspot.com/2024/08/review-crow-1994.html>

Score: 4 out of 5

Stop me if you've heard this one: exactly one year after they did something horrible, a group of hoodlums are stalked and murdered by a ruthless, seemingly supernatural killer who happens to look a lot like the man whose death they were responsible for. It's a setup for a slasher movie in the vein of Prom Night or I Know What You Did Last Summer, a mood that this film definitely tilts towards in how it frames its killer, but make no mistake: The Crow is not a slasher movie, and the killer is not a villain. Rather, Eric Draven is framed as a gothic superhero, somebody who makes Batman look like Superman, a fact that, together with its stunning style, an outstanding performance from Brandon Lee that would've made him a star under better circumstances, and the real-life on-set tragedy that made its production notorious, has made this film an enduring classic among generations of goth kids, horror fans, and superhero fans. It's a movie that's pure style over substance, but one where that style is so much fun to watch, and the substance just enough to hold it up, that I barely noticed the thinly-written supporting cast or the many moments where it was clear that they were working around Lee's death trying to get the film in a releasable state. Thirty years later, The Crow is a film that's simultaneously of its time but also timeless, and simply a rock-solid action thriller on top of it.

Set in Detroit, where the weak are killed and eaten (the film barely mentions the setting, but the comic it's based on makes it explicit), the film starts on Devil's Night where a young couple, the musician Eric Draven and his fiancé Shelly Webster, are brutally murdered in their apartment by a gang of criminals, who we later learn targeted them because Shelly was involved in community activism to prevent evictions in a neighborhood controlled by the ruthless crime lord Top Dollar. However, according to legend, the souls of the dead are taken to the afterlife by a crow, and if somebody died in an especially tragic way that they didn't deserve, then that crow can resurrect them to give them a chance to set things right. This is what happens to Eric exactly one year later, causing him to set out to take his revenge on his and Shelly's killers and protect those who they continue to menace.

A huge component of this film's mystique to this day revolves around Brandon Lee, and how it was intended as his big star vehicle that likely would've been his ticket to the A-list if not the fact that, thanks to its chaotic production and the crew's lackadaisical attitude towards safety, he wound up suffering a fatal accident on set with a prop gun that turned out to have not been as safe as the crew thought it was. (Chad Stahelski, who went on to direct the John Wick movies, was one of Lee's stunt doubles here, and now you know why production on the John Wick movies never uses real guns on set.) The tragedy alone would've given Lee an aura comparable to River Phoenix (who was also considered for the part), Heath Ledger, Paul Walker, or Chadwick Boseman, especially given how his father, martial arts legend Bruce Lee, also died young, but the truth is, watching him as Eric Draven, this really was the kind of star-in-the-making performance that makes you mourn the lost potential almost as much as the man himself. Lee walks a fine line here between playing an unstoppable killer who's framed as almost a horror monster on one hand and still making him sympathetic, charismatic, and attractive on the other, the result feeling like a man with a hole in his heart fueled by rage at what he lost who seems to be straight-up enjoying his revenge at times, especially with some of his one-liners. Had he lived, I could easily imagine Lee having had the career as an action hero that Keanu Reeves ultimately did, such was the strength of his performance in this one film. He kicks as much ass as you'd expect, especially given that he also handled much of the fight choreography and took every opportunity in the action scenes to show off how he was very much Bruce Lee's son, but he also brings a strange warmth to the character such that I didn't just wanna see him kick ass and take names, I wanted to see him win.

That strange warmth is ultimately the film's secret weapon. Its dark aesthetics and tone and grisly violence go hand-in-hand with a story about loving life, because this is the one life we have to live and it could easily be taken away from us. Gothic it may be, but nihilistic it is not. Eric may look like a horror movie monster, but he is still a hero, a man who goes out of his way to help and protect the innocent and redirect those who are on the wrong path just as he goes after the unrepentant bastards who bring misery to the community. He felt more like a proper superhero than a lot of examples from movies in the last ten years, which seem more interested in the "super" part of the equation and the awesome fight scenes it enables than the "hero" part. There's a reason the tagline on the poster is "Believe in Angels," and not "Vengeance is Coming" or something along those lines. At its core, this is a movie about getting a second chance to set things right, one in which the things that have to be set right just so happen to involve a lot of righteous violence, and by the time the credits rolled, I felt oddly uplifted having seen it. Not exactly the feeling you expect to have when you watch a film with this one's reputation!

The villains here are mostly one-note caricatures, working largely in the context of the film as a whole and because of the actors playing them. Top Dollar is a cartoonish, if charismatic, madman who wants to burn down the city just for the hell of it, his half-sister/incestuous lover Myca is a sadistic vamp who cuts out women's eyes, and his assorted goons all constantly behave in ghoulish ways so that you don't feel bad when Eric kills them. Ernie Hudson's character, the police officer Albrecht, exists largely to serve as a stand-in for the audience learning who and what Eric is. They work less as characters than as part of the fabric of the world that this movie builds, a version of Detroit that resembles a mix of Gotham City out of Tim Burton's Batman and something close to a post-apocalyptic wasteland. It's a city where the streets are winding, decrepit, shrouded in darkness, and all too often devoid of people, as though everybody moved out to the suburbs a long time ago, with the only centers of activity being nightclubs, bars, and pawn shops that are all run by gangsters. Between this and Dark City, it definitely feels like director Alex Proyas has a thing for this style of urban noir setting taken all the way into the realm of the utterly fantastical, and he makes the city feel... well, "alive" isn't the right word given that it's depicted as a place that's falling to pieces, but definitely a character in its own right. He does a lot to build this film's mood, staging much of it like a horror movie whether it's in the scenes of Eric stalking his prey or the action scenes where an unstoppable supernatural killer shrugs off everything that gets thrown at him like Jason Voorhees, and it works wonders in making for a very unique take on the superhero genre, especially thirty years later when the genre has come to be associated with blockbuster action. The soundtrack, too, does wonders to set the mood, loaded with '80s goth rock and '90s alternative that pairs well with Eric Draven's backstory as a rock star (especially when paired with the scenes of him playing guitar on the roof in the dead of night) and which I imagine turned a lot of young Gen-Xers into fans of The Cure. That kind of music might be a cliché today, but there's a reason it endures.

The Bottom Line

Skip the remake and check out the original, which remains a classic for a reason. It's not a perfect film, but it's one that still holds up to this day as not just a monument to a man who died too soon but also as a very well-made action/horror flick that I'm surprised more superhero movies since haven't tried to imitate.

[apod]

2023 August 23

The Meteor and the Galaxy Credit & Copyright: Jose Pedrero

Explanation: It came from outer space. It -- in this case a sand-sized bit of a comet nucleus -- was likely ejected many years ago from Sun-orbiting Comet Swift-Tuttle, but then continued to orbit the Sun alone. When the Earth crossed through this orbit, the piece of comet debris impacted the atmosphere of our fair planet and was seen as a meteor. This meteor deteriorated, causing gases to be emitted that glowed in colors emitted by its component elements. The featured image was taken last week from Castilla La Mancha, Spain, during the peak night of the Perseids meteor shower. The picturesque meteor streak happened to appear in the only one of 50 frames that also included the Andromeda galaxy. Stars dot the frame, each much further away than the meteor. Compared to the stars, the Andromeda galaxy (M31) is, again, much further away.

∞ Source: apod.nasa.gov/apod/ap230823.html

[jartita-me-teneis]

Aunque Freddie Mercury aseguraba que su lectura favorita eran los cuentos de Beatrix Potter, su vida se rigió por aquel proverbio infernal de William Blake: "El camino del exceso lleva al palacio de la sabiduría". En un negocio como este, tan tolerante con la extravagancia y la ostentación, Queen se distinguía por el regocijo con el que reventaba las barreras del buen gusto, por el placer en burlarse del qué dirán. Desnudar a docenas de modelos y ponerlas encima de bicicletas para ilustrar una portada era una buena excusa para reírse. Si editaba un disco titulado Jazz (ninguna relación con la música negra) se aprovechaba para celebrar la presentación en Nueva Orleans, entre escenas orgiálsticas.

Fue algo más que un lapsus el que Freddie y sus compañeros aceptaran un contrato generoso para actuar en Sun City, legitimando con su presencia la versión surafricana de Las Vegas. Sin embargo, cuando el mundo del rock se movilizó en Live Aid para ayudar a los países hambrientos de África, allí estaba Queen. En su última antología mencionan que I want to break free (Quiero ser libre) es un himno "en muchas zonas oprimidas del planeta".

Queen carecía del sentido de la vergüenza, y eso era parte de su ambiguo encanto. Era un grupo que se inventaba sus propias reglas. Respaldando su desfachatez estaba una asombrosa pericia para componer temas pegajosos. A pesar de su origen en el rock duro, el repertorio de Queen cubría casi todo el abanico: baladas suntuosas, pop inefable, fragmentos operísticos, piezas funky, temas turísticos, rockabilly.

Todo servía, todo lo servían envasado al vacío y presentado primorosamente, tanto en el sonido como en lo visual. Se mantuvieron unidos, sin variaciones de personal, desde 1971 gracias a una inteligente política de concordia interior: todos podían contribuir con canciones y disfrutar de tiempo libre para desarrollar proyectos paralelos. En sus canciones cuesta saber dónde empieza la confesión y dónde termina la fantasía: dominan los tópicos sublimados, la celebración de su propio poder como rompedores de récords y fascinadores de multitudes: "Aquí estamos. Nacimos para ser reyes, / somos los príncipes del universo, / éste es nuestro lugar".

Era lógico que, ante tanta arrogancia, muchos músicos y buena parte de la crítica les vituperaran como la cara obscena del rock. Eran una causa perdida: cuando se hizo sentir la crisis del sida ni siquiera el sector más militante denunció el silencio de Freddie. Se sabía que los gestos convencionales de solidaridad no formaban parte de su repertorio. Que nunca se había retractado de aquella explicación inicial de que el nombre de Queen carecía de implicaciones homosexuales: "Es un homenaje a la familia real británica".

Esta guerra sin cuartel entre Queen y los sectores concienciados del rock fue desastrosa. El grupo se enquistó en su castillo, sus enemigos les negaron el pan y la sal. La crueldad de la muerte relativiza aquellas batallas. Ahora, conmovidos por la tragedia, algunas letras de Queen nos suenan menos ampulosas y egocéntricas de lo que resultaban, por ejemplo, en el año 1975: "Demasiado tarde, ha llegado mi hora, / escalofríos por mi columna vertebral, / el cuerpo no para de dolerme. / Adiós a todos, tengo que irme, / tengo que dejaros y encarar la verdad. Mamá, no quiero morir, / a veces desearía no haber nacido".

Vía: https://elpais.com/.../11/26/cultura/691110010_850215.html

[kaecodes]

HI, so long time no talk! I haven't gone anywhere, I just had some personal financial troubles that were resolved via...lots of overtime! I am a physicist by day, so that meant I became one by night for a couple months. But I remained coding, designing, & sketching things in my scant moments.

More importantly, I've been doing a lot of reading & observing of the Jcink RPC & I am really gutted by the lack of free resources I've seen become manifest. As a result, I've been percolating some easy design methods I could use to fast track totally free skins to give out as bi-monthly as I can manage in the near future.

Because I'm not one to stick to an aesthetic or design style so much as following a settled philosophy of coding, each of my skins will be entirely unique (no reused assets besides utility scripts, perhaps fonts, etc) but will all be;

Designed to be entirely responsive, with fallback & default setups for Custom Fields, image appearance or omission, etc.

Designed to load in a second & half or under, universally.

Neatened to be readable, cascade-organized, & fully notated with CSS & HTML notes to explain important components, how they work, & how to edit them.

Provided with a dark, light, & middle theme colour option as well as High Contrast option.

Provided with Staff, Member & Character profile & miniprofiles.

Provided with a full Custom BBCode suite of site templates to match the skin.

Based on the UI/UX design of a game with striking visuals that can be used for similar genres.

Now, this is a tall order, but I really want to flex my muscle & try to give folks something to be optimistic over in a landscape of drama-blog wastelanded distress. I want to put out something productive & positive, to make the community better & bring us together a bit <3 As a result, I'm going to need a little help from you all. I need to figure out which "Inspos" to work off of first based on desire for them, to fill the starving niches from most important to "least" so to speak. For the next few weeks, I'll post some polls & would be endlessly grateful if you all paid it forward by boosting but also voting on the games whose vibes you want to see MOST PRESSINGLY manifested as skins in the Jcink RPC.

I will, also, eventually port each one to Forumactivo, so for my Forumactivo folks, please let me know when you get specific polls so I can prioritize converting those skins for you! You deserve just as much love!

Of course, if there's a specific game you want to see feel free to comment on this post & I'll make sure to put it in the first poll, but for now that's all. The first list of inspo options will come out later today or tomorrow, Stay tuned & stay awesome, may the Dance keep you all absolutely blessed!

[izicodes]

Mini React.js Tips #3 | Resources ✨

Continuing the #mini react tips series, its components making time~!

In React, a component is like a Lego brick for building websites or apps. It's a small, independent part of the user interface (UI) that you can reuse whenever you need it. These components can be combined to create bigger and more complex applications. Examples are the header, footer, cards, asides, etc!

What you'll need:

know how to create a React project >> click

know the default React project's file structure >> click

know basic HTML

know basic JavaScript

basic knowledge of using the Terminal

What We Are Creating:

The footer at the bottom!

[ 1 ] Navigate to the 'src' Folder: Open your project in Visual Studio Code, locate the 'src' folder, and right-click on it.

[ 2 ] Create a New File: Click 'New File' to create the file within the 'src' folder. This file will house the code for your React component.

[ 3 ] Naming Conventions: Give your component a name, according to the convention of starting with a capital letter. This naming convention is essential for React to recognize your component~!!

[ 4 ] Create The Initial Function: Open the file and type:

export default function [name of component]() {}

[ 5 ] Insert The return() Statement: The statement is used within a component to specify what content should be rendered when the component is invoked or used. Type:

return()

*the error is there because we haven't added anything inside yet, don't worry!

[ 6 ] Insert The Empty Tags: Inside of the return(), add empty tags (tags that don't have a specified element inside of them).

[ 7 ] Time For Some HTML: Inside the empty tags, enter the normal HTML elements that you want~!

[ 8 ] Integration with App.jsx: Navigate to the 'App.jsx' file in the project, which is typically the entry point of your React application. At the top, import your newly created component. Type:

import [name of component] from './[location of the component]'

[ 9 ] Use Your Component: Inside the return() statement of the 'App()' function, include your component using the following syntax:

<[name of your component] />

[ 10 ] Run the Development Server: Start your development server with the command (the 'Local' link):

npm run dev

[ 11 ] Preview Your Project: Open the link provided in your terminal in your web browser. Witness your component in action!

Congratulations! You made your first component! Try and create some new ones and place them around in the App()~!

BroCode’s 'React Full Course for Free’ 2024 >> click

React Official Website >> click

W3School's React Components >> click

Importing and Exporting Components >> click

🐬Previous Tip: Tip #2 The anatomy of the default React project >> click

Stay tuned for the other posts I will make on this series #mini react tips~!