#css checkbox

[jcmarchi]

The Lost CSS Tricks of Cohost.org

New Post has been published on https://thedigitalinsider.com/the-lost-css-tricks-of-cohost-org/

The Lost CSS Tricks of Cohost.org

You would be forgiven if you’ve never heard of Cohost.org. The bespoke, Tumblr-like social media website came and went in a flash. Going public in June 2022 with invite-only registrations, Cohost’s peach and maroon landing page promised that it would be “posting, but better.” Just over two years later, in September 2024, the site announced its shutdown, its creators citing burnout and funding problems. Today, its servers are gone for good. Any link to cohost.org redirects to the Wayback Machine’s slow but comprehensive archive.

The landing page for Cohost.org, featuring our beloved eggbug.

Despite its short lifetime, I am confident in saying that Cohost delivered on its promise. This is in no small part due to its user base, consisting mostly of niche internet creatives and their friends — many of whom already considered “posting” to be an art form. These users were attracted to Cohost’s opinionated, anti-capitalist design that set it apart from the mainstream alternatives. The site was free of advertisements and follower counts, all feeds were purely chronological, and the posting interface even supported a subset of HTML.

It was this latter feature that conjured a community of its own. For security reasons, any post using HTML was passed through a sanitizer to remove any malicious or malformed elements. But unlike most websites, Cohost’s sanitizer was remarkably permissive. The vast majority of tags and attributes were allowed — most notably inline CSS styles on arbitrary elements.

Users didn’t take long to grasp the creative opportunities lurking within Cohost’s unassuming “new post” modal. Within 48 hours of going public, the fledgling community had figured out how to post poetry using the <details> tag, port the Apple homepage from 1999, and reimplement a quick-time WarioWare game. We called posts like these “CSS Crimes,” and the people who made them “CSS Criminals.” Without even intending to, the developers of Cohost had created an environment for a CSS community to thrive.

In this post, I’ll show you a few of the hacks we found while trying to push the limits of Cohost’s HTML support. Use these if you dare, lest you too get labelled a CSS criminal.

Width-hacking

Many of the CSS crimes of Cohost were powered by a technique that user @corncycle dubbed “width-hacking.” Using a combination of the <details> element and the CSS calc() function, we can get some pretty wild functionality: combination locks, tile matching games, Zelda-style top-down movement, the list goes on.

If you’ve been around the CSS world for a while, there’s a good chance you’ve been exposed to the old checkbox hack. By combining a checkbox, a label, and creative use of CSS selectors, you can use the toggle functionality of the checkbox to implement all sorts of things. Tabbed areas, push toggles, dropdown menus, etc.

However, because this hack requires CSS selectors, that meant we couldn’t use it on Cohost — remember, we only had inline styles. Instead, we used the relatively new elements <details> and <summary>. These elements provide the same visibility-toggling logic, but now directly in HTML. No weird CSS needed.

These elements work like so: All children of the <details> element are hidden by default, except for the <summary> element. When the summary is clicked, it “opens” the parent details element, causing its children to become visible.

We can add all sorts of styles to these elements to make this example more interesting. Below, I have styled the constituent elements to create the effect of a button that lights up when you click on it.

This is achieved by giving the <summary> element a fixed position and size, a grey background color, and an outset border to make it look like a button. When it’s clicked, a sibling <div> is revealed that covers the <summary> with its own red background and border. Normally, this <div> would block further click events, but I’ve given it the declaration pointer-events: none. Now all clicks pass right on through to the <summary> element underneath, allowing you to turn the button back off.

This is all pretty nifty, but it’s ultimately the same logic as before: something is toggled either on or off. These are only two states. If we want to make games and other gizmos, we might want to represent hundreds to thousands of states.

Width-hacking gives us exactly that. Consider the following example:

In this example, three <details> elements live together in an inline-flex container. Because all the <summary> elements are absolutely-positioned, the width of their respective <details> elements are all zero when they’re closed.

Now, each of these three <details> has a small <div> inside. The first has a child with a width of 1px, the second a child with a width of 2px, and the third a width of 4px. When a <details> element is opened, it reveals its hidden <div>, causing its own width to increase. This increases the width of the inline-flex container. Because the width of the container is the sum of its children, this means its width directly corresponds to the specific <details> elements that are open.

For example, if just the first and third <details> are open, the inline-flex container will have the width 1px + 4px = 5px. Conversely, if the inline-flex container is 2px wide, we can infer that the only open <details> element is the second one. With this trick, we’ve managed to encode all eight states of the three <details> into the width of the container element.

This is pretty cool. Maybe we could use this as an element of some kind of puzzle game? We could show a secret message if the right combination of buttons is checked. But how do we do that? How do we only show the secret message for a specific width of that container div?

In the preceding CodePen, I’ve added a secret message as two nested divs. Currently, this message is always visible — complete with a TODO reminding us to implement the logic to hide it unless the correct combination is set.

You may wonder why we’re using two nested divs for such a simple message. This is because we’ll be hiding the message using a peculiar method: We will make the width of the parent div.secret be zero. Because the overflow: hidden property is used, the child div.message will be clipped, and thus invisible.

Now we’re ready to implement our secret message logic. Thanks to the fact that percentage sizes are relative to the parent, we can use 100% as a stand-in for the parent’s width. We can then construct a complicated CSS calc() formula that is 350px if the container div is our target size, and 0px otherwise. With that, our secret message will be visible only when the center button is active and the others are inactive. Give it a try!

This complicated calc() function that’s controlling the secret div’s width has the following graph:

You can see that it’s a piecewise linear curve, constructed from multiple pieces using min/max. These pieces are placed in just the right spots so that the function maxes out when the container div is 2px— which we’ve established is precisely when only the second button is active.

A surprising variety of games can be implemented using variations on this technique. Here is a tower of Hanoi game I had made that uses both width and height to track the game’s state.

SVG animation

So far, we’ve seen some basic functionality for implementing a game. But what if we want our games to look good? What if we want to add ✨animations?✨ Believe it or not, this is actually possible entirely within inline CSS using the power of SVG.

SVG (Scalable Vector Graphics) is an XML-based image format for storing vector images. It enjoys broad support on the web — you can use it in <img> elements or as the URL of a background-image property, among other things.

Like HTML, an SVG file is a collection of elements. For SVG, these elements are things like <rect>, <circle>, and <text>, to name a few. These elements can have all sorts of properties defined, such as fill color, stroke width, and font family.

A lesser-known feature of SVG is that it can contain <style> blocks for configuring the properties of these elements. In the example below, an SVG is used as the background for a div. Inside that SVG is a <style> block that sets the fillcolor of its <circle> to red.

An even lesser-known feature of SVG is that its styles can use media queries. The size used by those queries is the size of the div it is a background of.

In the following example, we have a resizable <div> with an SVG background. Inside this SVG is a media query which will change the fill color of its <circle> to blue when the width exceeds 100px. Grab the resize handle in its bottom right corner and drag until the circle turns blue.

Because resize handles don’t quite work on mobile, unfortunately, this and the next couple of CodePens are best experienced on desktop.

This is an extremely powerful technique. By mixing it with width-hacking, we could encode the state of a game or gizmo in the width of an SVG background image. This SVG can then show or hide specific elements depending on the corresponding game state via media queries.

But I promised you animations. So, how is that done? Turns out you can use CSS animations within SVGs. By using the CSS transition property, we can make the color of our circle smoothly transition from red to blue.

Amazing! But before you try this yourself, be sure to look at the source code carefully. You’ll notice that I’ve had to add a 1×1px, off-screen element with the ID #hack. This element has a very simple (and nearly unnoticeable) continuous animation applied. A “dummy animation” like this is necessary to get around some web browsers’ buggy detection of SVG animation. Without that hack, our transition property wouldn’t work consistently.

For the fun of it, let’s combine this tech with our previous secret message example. Instead of toggling the secret message’s width between the values of 0px and 350px, I’ve adjusted the calc formula so that the secret message div is normally 350px, and becomes 351px if the right combination is set.

Instead of HTML/CSS, the secret message is now just an SVG background with a <text> element that says “secret message.” Using media queries, we change the transform scale of this <text> to be zero unless the div is 351px. With the transition property applied, we get a smooth transition between these two states.

Click the center button to activate the secret message:

The first cohost user to discover the use of media queries within SVG backgrounds was @ticky for this post. I don’t recall who figured out they could animate, but I used the tech quite extensively for this quiz that tells you what kind of soil you’d like if you were a worm.

Wrapping up

And that’s will be all for now. There are a number of techniques I haven’t touched on — namely the fun antics one can get up to with the resize property. If you’d like to explore the world of CSS crimes further, I’d recommend this great linkdump by YellowAfterlife, or this video retrospective by rebane2001.

It will always hurt to describe Cohost in the past tense. It truly was a magical place, and I don’t think I’ll be able to properly convey what it was like to be there at its peak. The best I can do is share the hacks we came up with: the lost CSS tricks we invented while “posting, but better.”

[innovatecodeinstitute]

Create Stylish Radio Buttons and Checkboxes with CSS!

🔘 Elevate your form design with custom radio buttons and checkboxes using CSS! Learn how to create visually appealing and user-friendly form elements without any JavaScript. Plus, make sure your HTML structure follows best practices for accessibility and usability. Watch our short tutorial now!

[codewithswatiakolkar]

Video 6 How To Create Dark Mode Login Form Bootstrap Remember Me

How to use Bootstrap for the login form?

How to create a login form using Bootstrap 4?

Creating a Login Remember Me

Bootstrap Forms

How To Create a Login Form

The Best Bootstrap Login Form Templates

Bootstrap login form Remember Me HTML

Login Form Bootstrap with source code

Responsive login page template

Responsive Welcome Back Message Form

How to Create a Welcome Login Form

[mineyrella]

So I created an ao3 skin and I would like to share it for anyone who wants to use it 💞

Here’s the code >>>

•Wizard Settings

Can be overridden by custom CSS :

Background color:

#FCEBFC

Text color:

#AF7E98

Header color:

#B34A81

Accent color:

#EABEE4

•CSS:

:root {

--background-color: #f9e3f2;

--text-color: #4d494a;

--form-background: #fdeff5;

}

body {

font-family: sans-serif;

}

.wrapper {

background-color: white;

border: 2px solid #f3c2e3;

}

#header {

padding: 10px;

margin-bottom: 15px;

}

#header a {

text-decoration: none;

}

#header a:hover {

text-decoration: underline;

}

#header ul.navigation.actions.user.signed-in {

display: flex;

justify-content: flex-end;

padding: 10px;

}

#main {

padding: 20px;

}

.heading {

padding: 8px;

margin-bottom: 10px;

font-weight: bold;

}

input[type="text"],

input[type="date"],

textarea,

select {

border: 1px solid #f3c2e3;

padding: 8px;

margin: 5px 0;

}

input[type="radio"],

input[type="checkbox"] {

margin-right: 5px;

}

.button,

input[type="submit"],

button {

border: none;

padding: 10px 20px;

cursor: pointer;

border-radius: 4px;

margin-bottom: 5px;

}

.button:hover,

input[type="submit"]:hover,

button:hover {

background-color: #e687b0;

}

#new_work_form .actions .button {

border: none;

padding: 10px 20px;

margin: 5px 5px 5px 0;

cursor: pointer;

border-radius: 4px;

}

.actions .button.current {

border: none;

padding: 10px 20px;

margin: 5px 5px 5px 0;

cursor: pointer;

border-radius: 4px;

}

#work_search_form .submit .button {

border: none;

padding: 10px 20px;

margin: 5px 0;

cursor: pointer;

border-radius: 4px;

}

#work_search_form .submit .button:hover {

background-color: #e687b0;

}

I decided to write it down for easier access🌸

I’ll leave a Reddit link below ⬇️ that explains how to use the code if it’s your first time easily. Credit to @tired-library-ghost on Reddit for this amazing explanation ❤️

[abberantmachine]

there are some work-arounds in CSS that seem so ridiculous it feels illegal.

so in CSS. selectors can be really picky with only wanting to cascade down from an element, or pick sibling elements (adjacent ones) but only after the selected one, or what-have-you - it constantly feels like you're wrestling with it if you want to do something slightly out of the way.

but you can also just apply pseudo selector to the entire HTML

so using the ":has" selector, if it finds a checkbox with this id in the entire HTML it will apply these settings

you can basically just make buttons that alter everything without any javascript like this??? this is ridiculous???

[skull-shore]

06&07.july23, fri; internship

my last day at the internship AND the "final" stage of my To-Do List with PHP, HTML and CSS:

add tasks by adding a date, the task, choosing a priority and "+" for submitting

tick off tasks you did with a checkbox

delete tasks

(make it look a lil bit prettier with CSS)

i had to present it (nightmare) to my coworkers at my internship today and it was... quite amazing? i could perfectly explain almost all of the data i put in the code and was able to answer ... most of their questions! :o it was SO amazing they even offered me an apprenticeship???? ahhhhhh (that's what i wanted i'm so so so so happy jkokjrjejjddkfkdkdkd)

[brightgreendandelions]

i've implemented formatted text for my little tumblr mirroring page!

i also made an optimal mode to turn off all the formatting, because i thought it looked cleaner without them. partially inspired by the [pt: formatted text. end pt] things @dead-immortal does

that checkbox is all css, and doesn't use a single line of javascript. my whole site is js free!... so far...

[snugglesquiggle]

my neocities site used to have a bunch of javascript.

for example, i had a page that existed to load up chapters of various stories so that you could read all of the chapters in one page, sort of like ao3's view full work feature. because it was scripted dynamically, i didn't have to maintain a separate copy of the text, and it was actually more flexible than what ao3 offers, because you could read specific arcs, heck, you could read a specific sequence of chapters (e.g., 2-13 specifically)

another thing i didn't want to maintain by hand was header at the top of the page with navigational links, so i had a script that updates them on page load.

problem is, it kind of just feels bad to load a page, then see a visible delay before the header pops in.

i spent almost a year living like that, but i eventually stopped maintaining my html by hand, and learned the joys of the static site generator.

i didn't need the chapter loader anymore, either - i could code my site generator to concatenate chapters into a full-text page, and since it's static, it'd load much faster than make the user's browser stitch together the html every time they want to open that page.

slowly but surely, everything i might've used js for was getting replaced by simpler, faster, and easier means.

i don't make much use of it, but my site actually has discord-style spoiler text. blocks of text you can click to reveal (and the css is uses currentColor, so it works even on different themes)

i don't even need javascript for this; the way i accomplish it is a bit clever:

it's a checkbox! even if you hide the actual box, you can still click the label to toggle its state

this was something i implemented early, based on this blog post where a similar trick was used for a no-js dark/light mode toggle.

but i took this to a new height this year: i added fancy footnotes

but under the hood, it's the same principle

check box to toggle the state, then some fancy css it position it to float above the text.

but of course, if i'm doing all of this without javascript, what do i need javascript for?

and there was only one feature that stuck around. it's something that i think no one really used, but i'm attached to it.

you see, i'm notorious for writing long chapters. i could split them up, but i have particular stopping points in mind. still, i am merciful, so in my stories with consistently long chapters, i'm gone out of my way to insert break points, "subchapters" seamless into the main text.

those little roman numerals would trigger a script that reformatted the page to hide all the other subchapters, and reconfiguring the next/prev buttons so that clicking them takes you to the next section rather than the next chapter

in theory, you could read Hostile Takeover as if it were a fic with 72 chapters instead of 16.

now, this is a very complex feature. you cant use checkbox tricks to emulate this, unless you want to go crazy writing a dozen css rules for every permutation of checkboxes, or force the user to figure out an arcane system where you need to uncheck one section before loading the next

but it turns out, while i wasn't paying attention, the css committee added a crazy new feature. there are :has selectors, enabling you to style elements based on the properties of elements that come below it in the document.

the whole game has changed now.

couple this with learning about :target selectors courtesy of wonder how a couple of really ambitious ao3 fics do their magic, i had everything i need

all it took to make subchapters happen now a few simple rules

really, you only need that first line. it says "if main has a target element, hide all subchapters that aren't the target"

the other lines are convenience; they had the next/prev chapter buttons if you're in the middle of the chapter. there's a couple other rules (beside the subchap nav i added a button that takes you to the top of the page, which resets the anchor target), but overall, it was quick and painless. really, the actual struggle was teaching my site generator spit out the right html. (i spent five minutes tearing out my hair and rebuilding to no effect because i forgot i had two layers of caching. whoops)

this new approach does sacrifice the ability to make the arrow buttons do double duty, but i don't think it's a big loss when the subchapter buttons are right there, and arguably retaining the single function of each button is a win for usability.

the biggest loss is that there's no real way to style the buttons differently if they've been clicked, so you don't actually know which subchapter you're actually browsing.

(maybe if anyone i actually uses this feature, they can complain to me and i'll whip up a quick bit of js to patch it :v)

but until then, i'll take some satisfaction in delete my site's scripts entirely. in a way, that's the biggest loss, but it's one of i'm proud of

[perennialiris]

A dark mode without JavaScript

I’ve by now been warned that the reason I had issue with a previous tumblr account may have been because I put some JavaScript onto my page. I knew Tumblr didn’t let us put JavaScript onto custom pages—I didn’t know why, but the alert came up if you tried—but there was no warning or anything when I added it to my main theme.

The JavaScript I added was just a function for a checkbox. It added a class to the body element, thus enabling some CSS for a ‘dark mode’ reader. But it doesn’t matter what the function did, you’re just not supposed to be using JavaScript at all. But Tumblr can’t just have a strict thing on their database that says “if page contains javascript, deny”, because there’s literally scripts in their own default theme. So I don’t know how this works. The detection must be less straightforward.

Weeks ago, not knowing why I couldn’t use messages and didn’t show up in search even for people following me, I made a new account, copied my custom theme onto it, started posting, and within a few hours I realized it was shadowbanned again, already. It’s possible I just instantly re-triggered whatever system they have in place by putting on the same script I was already using. It was only then I started trying to figure out what I did wrong, and after realizing it could’ve been the JavaScript the whole time, I made this account, did all the HTML and CSS changes I wanted, but haven’t added a line of JavaScript.

And so far, I’m good. This isn’t an airtight proof—it could still be a coincidence—but that does really make it seem like JavaScript was the issue. And if it was, then what the fuck? It’s effectively a secret rule, not indicated to me anywhere, and which punished me quietly without notifying me that was the issue? I know people make fun of this place for not being run well at times, but god damn.

It’s possible to implement a dark mode just using CSS. It just might not be as obvious how, and it’s a bit trickier because you need the element that triggers it to be in a specific spot in your DOM, i.e. next to an element that either is or contains everything you want to manipulate. Then you can use a sibling selector to apply rules only to things that appear next to the trigger (a checkbox is easiest).

Where that checkbox appears on-screen can then be manipulated by setting its position to absolute or fixed; it just needs to be a sibling of the container in the DOM structure.

So here’s what I did. Put a checkbox right before the “posts” container in your theme.

Then that checkbox can be made invisible. Just give it display:none. The element still ‘exists’ in a magical sense, but it doesn’t get rendered in the document. Then put a label somewhere on the page that links to this checkbox. I put mine in my nav. Unlike the checkbox, the label can be anywhere.

This isn’t a link, meaning it doesn’t highlight when you hover or click it, but you can just put it in an empty link element if you want it to look like one.

Then you just make whatever changes you want this checkbox to be activating by applying it to the posts container after the checkbox when it has the :checked pseudo-class.

[necromancercoding]

Buenas Necro, se que hiciste una breve explicación para ignorar la restricción de los caracteres de las paginas HTML pero no entiendo muy bien como va la estructuración o el proceso en si.. ¿podrias hacer un tuto para noobs? Gracias.

¡Hola anon! No sé a qué post te refieres, pero las alternativas que hay para ahorrar espacio en el HTML son:

Eliminar espacios extra: Pon tu code en la caja, selecciona Ambos y los tres últimos checkboxes (deja sin marcar el del principio) y pulsa Ejecutar. Copia el nuevo código.

Eliminar líneas vacías: Con el código que te has traído de antes, pásalo por aquí también.

Ya con el código 'limpio', lo único que puedes hacer es poner tu CSS (y scripts) de forma externa (tutorial) y usar reductores de enlaces como tinyurl.

¡Saludos!

[saide-hossain]

Let's understand HTML

Cover these topics to complete your HTML journey.

HTML (HyperText Markup Language) is the standard language used to create web pages. Here's a comprehensive list of key topics in HTML:

1. Basics of HTML

Introduction to HTML

HTML Document Structure

HTML Tags and Elements

HTML Attributes

HTML Comments

HTML Doctype

2. HTML Text Formatting

Headings (<h1> to <h6>)

Paragraphs (<p>)

Line Breaks (<br>)

Horizontal Lines (<hr>)

Bold Text (<b>, <strong>)

Italic Text (<i>, <em>)

Underlined Text (<u>)

Superscript (<sup>) and Subscript (<sub>)

3. HTML Links

Hyperlinks (<a>)

Target Attribute

Creating Email Links

4. HTML Lists

Ordered Lists (<ol>)

Unordered Lists (<ul>)

Description Lists (<dl>)

Nesting Lists

5. HTML Tables

Table (<table>)

Table Rows (<tr>)

Table Data (<td>)

Table Headings (<th>)

Table Caption (<caption>)

Merging Cells (rowspan, colspan)

Table Borders and Styling

6. HTML Forms

Form (<form>)

Input Types (<input>)

Text Fields (<input type="text">)

Password Fields (<input type="password">)

Radio Buttons (<input type="radio">)

Checkboxes (<input type="checkbox">)

Drop-down Lists (<select>)

Textarea (<textarea>)

Buttons (<button>, <input type="submit">)

Labels (<label>)

Form Action and Method Attributes

7. HTML Media

Images (<img>)

Image Maps

Audio (<audio>)

Video (<video>)

Embedding Media (<embed>)

Object Element (<object>)

Iframes (<iframe>)

8. HTML Semantic Elements

Header (<header>)

Footer (<footer>)

Article (<article>)

Section (<section>)

Aside (<aside>)

Nav (<nav>)

Main (<main>)

Figure (<figure>), Figcaption (<figcaption>)

9. HTML5 New Elements

Canvas (<canvas>)

SVG (<svg>)

Data Attributes

Output Element (<output>)

Progress (<progress>)

Meter (<meter>)

Details (<details>)

Summary (<summary>)

10. HTML Graphics

Scalable Vector Graphics (SVG)

Canvas

Inline SVG

Path Element

11. HTML APIs

Geolocation API

Drag and Drop API

Web Storage API (localStorage and sessionStorage)

Web Workers

History API

12. HTML Entities

Character Entities

Symbol Entities

13. HTML Meta Information

Meta Tags (<meta>)

Setting Character Set (<meta charset="UTF-8">)

Responsive Web Design Meta Tag

SEO-related Meta Tags

14. HTML Best Practices

Accessibility (ARIA roles and attributes)

Semantic HTML

SEO (Search Engine Optimization) Basics

Mobile-Friendly HTML

15. HTML Integration with CSS and JavaScript

Linking CSS (<link>, <style>)

Adding JavaScript (<script>)

Inline CSS and JavaScript

External CSS and JavaScript Files

16. Advanced HTML Concepts

HTML Templates (<template>)

Custom Data Attributes (data-*)

HTML Imports (Deprecated in favor of JavaScript modules)

Web Components

These topics cover the breadth of HTML and will give you a strong foundation for web development.

Full course link for free: https://shorturl.at/igVyr

[jcmarchi]

Time Travelling CSS With :target

New Post has been published on https://thedigitalinsider.com/time-travelling-css-with-target/

Time Travelling CSS With :target

Checkbox and radio button hacks are the (in)famous trick for creating games using just CSS. But it turns out that other elements based on user input can be hacked and gamified. There are very cool examples of developers getting creative with CSS games based on the :hover pseudo-class, and even other games based on the :valid pseudo-class.

What I’ve found, though, is that the :target pseudo-class seems relatively unexplored territory in this area of CSS hacking. It’s an underrated powerful CSS feature when you think about it: :target allows us to style anything based on the selected jump link, so we have a primitive version of client-side routing built into the browser! Let’s go mad scientist with it and see where that takes us.

Unbeatable AI in CSS

Did I type those words together? Are we going to hack CSS so hard that we hit the singularity? Try to beat the stylesheet below at Tic Tac Toe and decide for yourself.

The stylesheet will sometimes allow the game to end in a draw, so you at least have a smidge of hope.

No need to worry! CSS hasn’t gone Skynet on us yet. Like any CSS hack, the rule of thumb to determine whether a game is possible to implement with CSS is the number of possible game states. I learned that when I was able to create a 4×4 Sudoku solver but found a 9×9 version pretty darn near impossible. That’s because CSS hacks come down to hiding and showing game states based on selectors that respond to user input.

Tic Tac Toe has 5,478 legal states reachable if X moves first and there’s a famous algorithm that can calculate the optimal move for any legal state. It stands to reason, then, that we can hack together the Tic Tac Toe game completely in CSS.

OK, but how?

In a way, we are not hacking CSS at all, but rather using CSS as the Lord Almighty intended: to hide, show, and animate stuff. The “intelligence” is how the HTML is generated. It’s like a “choose your own adventure” book of every possible state in the Tic Tac Toe multiverse with the empty squares linked to the optimal next move for the computer.

We generate this using a mutant version of the minimax algorithm implemented in Ruby. And did you know that since CodePen supports HAML (which supports Ruby blocks), we can use it secretly as a Ruby playground? Now you do.

Each state our HAML generates looks like this in HTML:

<div class="b" id="--OOX----"> <svg class="o s"> <circle></circle> </svg> <a class="s" href="#OXOOX----"> <div></div> </a> <svg class="o s"> <circle class="c"></circle> </svg> <svg class="o s"> <circle class="c"></circle> </svg> <div class="x"></div> <a class="s" href="#O-OOXX---"> <div></div> </a> <a class="s" href="#O-OOX-X--"> <div></div> </a> <a class="s" href="#O-OOX--X-"> <div></div> </a> <a class="s" href="#O-OOX---X"> <div></div> </a> </div>

With a sprinkling of surprisingly straightforward CSS, we will display only the currently selected game state using :target selectors. We’ll also add a .c class to historical computer moves — that way, we only trigger the handwriting animation for the computer’s latest move. This gives the illusion that we are only playing on a single gameboard when we are, in reality, jumping between different sections of the document.

/* Game's parent container */ .b, body:has(:target) #--------- /* Game states */ .s display: none; /* Game pieces with :target, elements with href */ :target, #--------- width: 300px; height: 300px; / left: calc(50vw - 150px); top: calc(50vh - 150px); background-image: url(/path/to/animated/grid.gif); background-repeat: no-repeat; background-size: 100% auto; /* Display that game state and bring it to the forefront */ .s z-index: 1; display: inline-block; /* The player's move */ .x z-index: 1; display: inline-block; background-image: url("data:image/svg+xml [...]"); /** shortened for brevity **/ height: 100px; width: 100px; /* The browser's move */ circle animation-fill-mode: forwards; animation-name: draw; animation-duration: 1s; /* Only animate the browser's latest turn */ &.c animation-play-state: paused; animation-delay: -1s;

When a jump link is selected by clicking an empty square, the :target pseudo-class displays the updated game state(.s), styled so that the computer’s precalculated response makes an animated entrance (.c).

Note the special case when we start the game: We need to display the initial empty grid before the user selects any jump link. There is nothing to style with :target at the start, so we hide the initial state — with the:body:has(:target) #--------- selector — once a jump link is selected. Similarly, if you create your experiments using :target you’ll want to present an initial view before the user begins interacting with your page. 

Wrapping up

I won’t go into “why” we’d want to implement this in CSS instead of what might be an “easier” path with JavaScript. It’s simply fun and educational to push the boundaries of CSS. We could, for example, pull this off with the classic checkbox hack — someone did, in fact.

Is there anything interesting about using :target instead? I think so because:

We can save games in CSS! Bookmark the URL and come back to it anytime in the state you left it.

There’s a potential to use the browser’s Back and Forward buttons as game controls. It’s possible to undo a move by going Back in time or replay a move by navigating Forward. Imagine combining :target with the checkbox hack to create games with a time-travel mechanic in the tradition of Braid.

Share your game states. There’s the potential of Wordle-like bragging rights. If you manage to pull off a win or a draw against the unbeatable CSS Tic Tac Toe algorithm, you could show your achievement off to the world by sharing the URL.

It’s completely semantic HTML. The checkbox hack requires you to hide checkboxes or radio buttons, so it will always be a bit of a hack and painful horse-trading when it comes to accessibility. This approach arguably isn’t a hack since all we are doing is using jump links and divs and their styling. This may even make it — dare I say —“easier” to provide a more accessible experience. That’s not to say this is accessible right out of the box, though.

[freefrontend-blog]

Welcome to digest CSS Landscape! Discover the latest in WebKit for Safari 17.4 and Firefox 123.0.1. Dive into articles on fluid typography, UX tips, the Popover API, and more. Explore invokers, anchor positioning, @starting-style, and styling CSS pseudo-elements with JavaScript. Learn about Algorithmic Functional CSS and viewport-relative CSS units. Check out tutorials on modern tooltips, styling checkboxes, and printing CSS. Don’t miss video on CSS content selection. Stay tuned! https://freefrontend.com/css-landscape-2024-03-28/

[codewithswatiakolkar]

Video 5 How To Create Welcome Login Form Bootstrap Remember Me

How to use Bootstrap for the login form?

How to create a login form using Bootstrap 4?

Creating a Login Remember Me

Bootstrap Forms

How To Create a Login Form

The Best Bootstrap Login Form Templates

Bootstrap login form Remember Me HTML

Login Form Bootstrap with source code

Responsive login page template

Responsive Welcome Back Message Form

How to Create a Welcome Login Form

[lazar-codes]

16/08/2023 || Day 66

React To-Do App - Log # 2

I struggled a bit today with this project and almost just looked up how to create a to-do list app with React, but after watching the first 5 mins of a tutorial, my stubborn genes kicked in and I exited out of the video and tried to figure it out. Essentially, the logic behind the app is that I will have an array of objects, in which each object is a Task and each Task object has a field for a description, which is what the user wants to add to their to-do list. Now, when a user creates a new task, the description is empty, and it's only until the user types something in the input that the appropriate Task will update its description field. With React, I iterate through the array of Task objects and pass each entry into it's own component which comprises of the checkbox, input, and delete button.

So far, I have semi-functionality with adding tasks and deleting tasks. I still need to save info to local storage and then retrieve it, so that way the user's tasks are saved upon refreshing the website/app. I'm really happy with how I have the code for updating the task description:I'm using a parent callback function to pass the input from the child component to the parent component when the input field is no longer in focus, and setting the task description to the input from there. Here's the code in the child component:

Once the data is passed up to the parent component, here's the code to handle the event of saving and updating a specific tasks' description:

And then once everything's down, we iterate over each task in the list of task objects and create components while passing down the task's description:

I also got the basic CSS down, but will obviously fiddle with that more (though I really like the colour scheme). Next up will be to improve on the way I give input data (i.e. right now, the text in the input field are serving as the "placeholder" variable, so if I were to click on one and type in it, it would remove what's currently there).

Here's a WIP shot:

[mercyjuliet1512]

The Journey to Selenium Expertise: Eight Steps to Success

In today's technology-driven world, where software is the backbone of virtually every industry, ensuring its quality and reliability is paramount. Software testing and quality assurance have become fundamental aspects of the software development process. At the forefront of this evolution stands Selenium, a powerful and versatile tool that has revolutionized the realm of automation testing.

In this comprehensive guide, we embark on a journey to unveil the path to becoming a Selenium expert. This journey is characterized by a continuous quest for knowledge, hands-on practice, and the practical application of skills in real-world scenarios. Selenium expertise is not just a valuable skill; it's a crucial asset in guaranteeing software quality and reliability.

We'll delve into the intricate details of Selenium, covering everything from mastering its basics to exploring advanced topics, and ultimately, adopting best practices in automation testing. As we progress, you'll discover eight pivotal steps to becoming a Selenium expert.

1. Master the Basics: Building a Solid Foundation

Our journey begins with mastering the fundamental concepts of Selenium. It's essential to comprehend the core components, such as WebDriver and WebElement, and understand how Selenium interacts with web browsers. A strong foundation in these basics is crucial to becoming a Selenium expert.

2. Choose Your Programming Language: The Language of Automation

Selenium supports various programming languages, including Java, Python, C#, and more. Your choice of programming language should align with your preferences and career goals. Java, in particular, is popular for Selenium automation due to its extensive community support and wide range of libraries and resources.

3. Set Up Your Development Environment: Crafting Your Toolkit

To work efficiently with Selenium, you need a well-equipped development environment. Installing an Integrated Development Environment (IDE) such as Eclipse or IntelliJ IDEA is essential. These tools streamline the process of writing, debugging, and executing Selenium scripts.

4. Dive into HTML and CSS: Understanding the Web's Building Blocks

Selenium's primary playground is the web, and to navigate it effectively, a strong understanding of HTML and CSS is indispensable. These are the building blocks of web pages, and knowledge of these technologies empowers you to locate and interact with web elements accurately.

5. Explore Locators: The Treasure Map to Web Elements

In Selenium, locators are your treasure map to identifying and interacting with web elements. Dive into various locator strategies, including XPath, CSS selectors, and more. Proficiency in using locators is a fundamental skill for any Selenium expert.

6. Hands-on Practice: The Crucial Training Ground

Practice makes perfect, and in Selenium, hands-on practice is the key to expertise. Initiate your journey by working on simple test scenarios, gradually progressing to more complex ones. The more you practice, the more proficient you become.

7. Embrace Testing Frameworks: Organizing Your Arsenal

As your skills evolve, it's essential to embrace testing frameworks like TestNG or JUnit. These frameworks seamlessly integrate with Selenium and help you organize and manage your test cases efficiently. This skill is invaluable for any Selenium expert.

8. Advance Your Knowledge: Exploring the Uncharted Territories

Once you're comfortable with the basics, it's time to delve into advanced topics. Explore areas like handling frames, working with alerts, dealing with different types of web elements (e.g., dropdowns, checkboxes), and mastering dynamic content testing. These advanced skills set you apart as a Selenium expert.

Becoming a Selenium expert is a journey that demands dedication, practice, and continuous learning. It's a path that leads to excellence in the field of automation testing, and it's a journey worth embarking upon.

To expedite your progress and receive expert guidance, consider enrolling in a structured Selenium training program. ACTE Technologies, a trusted name in the realm of technology training, offers comprehensive programs designed to provide hands-on experience, real-world examples, and guidance from experienced instructors. With the right resources and support, you can accelerate your journey to becoming a Selenium expert and thrive in the dynamic world of automation testing. Take your first step towards expertise with ACTE Technologies as your guiding light. Your path to Selenium mastery begins here.