Categories
Article scrolling

Doom Damage Flash on Scroll

The video game Doom famously would flash the screen red when you were hit. Chris Johnson not only took that idea, but incorporated a bunch of the UI from Doom into this tounge-in-cheek JavaScript library called Doom Scroller. Get it? Like, doom scrolling, but like, Doom scrolling. It’s funny, trust me. I extracted bits from Chris’ cool project to focus on the damage animation itself. The red flash is done in HTML and CSS. First, we create a full screen overlay: #doom-damage { background-color: red; position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; } Note that it’s not display: none. It’s much harder to animate that as we have to wait until the animation is completed to apply it. That’s because display isn’t animatable. It’s doable, just annoying. To flash it, we’ll apply a class that does it, but only temporarily. const damage = document.getElementById(“doom-damage”); function doomTakeDamage() { damage.classList.add(“do-damage”); setTimeout(function () { damage.classList.remove(“do-damage”); }, 400); } When that class activates, we’ll immediately turn the screen red (really giving it that shock appeal) and then fade the red away: .do-damage { background-color: red; animation: 0.4s doom-damage forwards; } @keyframes doom-damage { 0% { opacity: 1; } 100% { opacity: 0; } } The next bit calls the function that does the damage flash. Essentially it tracks the current scroll position, and if it’s past the nextDamagePosition, it will red flash and reset the next nextDamagePostition one full screen height length away. If you want to see all that, I’ve abstracted it into this Pen: CodePen Embed Fallback The post Doom Damage Flash on Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Doom Damage Flash on Scroll

Read at the original Source: css tricks.

Categories
Article javascript design patterns plugin

Designing a JavaScript Plugin System

WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common feature of libraries and frameworks, and for a good reason: they allow developers to add functionality, in a safe, scalable way. This makes the core project more valuable, and it builds a community — all without creating an additional maintenance burden. What a great deal! So how do you go about building a plugin system? Let’s answer that question by building one of our own, in JavaScript. I’m using the word “plugin” but these things are sometimes called other names, like “extensions,” “add-ons,” or “modules.” Whatever you call them, the concept (and benefit) is the same. Let’s build a plugin system Let’s start with an example project called BetaCalc. The goal for BetaCalc is to be a minimalist JavaScript calculator that other developers can add “buttons” to. Here’s some basic code to get us started: // The Calculator const betaCalc = {   currentValue: 0,      setValue(newValue) {     this.currentValue = newValue;     console.log(this.currentValue);   },      plus(addend) {     this.setValue(this.currentValue + addend);   },      minus(subtrahend) {     this.setValue(this.currentValue – subtrahend);   } }; 
 // Using the calculator betaCalc.setValue(3); // => 3 betaCalc.plus(3);     // => 6 betaCalc.minus(2);    // => 4 We’re defining our calculator as an object-literal to keep things simple. The calculator works by printing its result via console.log. Functionality is really limited right now. We have a setValue method, which takes a number and displays it on the “screen.” We also have plus and minus methods, which will perform an operation on the currently displayed value. It’s time to add more functionality. Let’s start by creating a plugin system. The world’s smallest plugin system We’ll start by creating a register method that other developers can use to register a plugin with BetaCalc. The job of this method is simple: take the external plugin, grab its exec function, and attach it to our calculator as a new method: // The Calculator const betaCalc = {   // …other calculator code up here 
   register(plugin) {     const { name, exec } = plugin;     this[name] = exec;   } }; And here’s an example plugin, which gives our calculator a “squared” button: // Define the plugin const squaredPlugin = {   name: ‘squared’,   exec: function() {  …

Read the rest Designing a JavaScript Plugin System

Read at the original Source: css tricks.

Categories
Article jamstack maintenance

Where Does Logic Go on Jamstack Sites?

Here’s something I had to get my head wrapped around when I started building Jamstack sites. There are these different stages your site goes through where you can put logic. Let’s look at a special example so you can see what I mean. Say you’re making a website for a music venue. The most important part of the site is a list of events, some in the past and some upcoming. You want to make sure to label them as such or design that to be very clear. That is date-based logic. How do you do that? Where does that logic live? There are at least four places to consider when it comes to Jamstack. Option 1: Write it into the HTML ourselves Literally sit down and write an HTML file that represents all of the events. We’d look at the date of the event, decide whether it’s in the past or the future, and write different content for either case. Commit and deploy that file. <h1>Upcoming Event: Bill’s Banjo Night</h1> <h1>Past Event: 70s Classics with Jill</h1> This would totally work! But the downside is that weu’d have to update that HTML file all the time — once Bill’s Banjo Night is over, we have to open your code editor, change “Upcoming” to “Past” and re-upload the file. Option 2: Write structured data and do logic at build time Instead of writing all the HTML by hand, we create a Markdown file to represent each event. Important information like the date and title is in there as structured data. That’s just one option. The point is we have access to this data directly. It could be a headless CMS or something like that as well. Then we set up a static site generator, like Eleventy, that reads all the Markdown files (or pulls the information down from your CMS) and builds them into HTML files. The neat thing is thatwe can run any logic we want during the build process. Do fancy math, hit APIs, run a spell-check… the sky is the limit. For our music venue site, we might represent events as Markdown files like this: — title: Bill’s Banjo Night date: 2020-09-02 — The event description goes here! Then, we run a little bit of logic during the build process by writing a template like this: {% if event.date > now %}   <h1>Upcoming Event: {{event.title}}</h1> {% else…

Read the rest Where Does Logic Go on Jamstack Sites?

Read at the original Source: css tricks.

Categories
Article mailto tel

Offering Options for mailto: and tel: Links

I generally like mailto: links. But I feel like I can smell a mailto: link without even inspecting or clicking it, like some kind of incredibly useless superpower. I know that if I’ve got my default mail client set, clicking that link will do what I want it to do, and if I want, I can right-click and the browser will give me a “Copy email address” option to grab it cleanly. That’s cool and all, but Adam Silver and Amy Hupe recently enumerated the problems with how these links behave: Firstly, mailto links make it hard to copy the address, for example if you want to share the email address with someone else.Secondly, some users use more than one mail app, and the link just uses whichever has been setup as the default, without giving them the option to use the other.And finally, many users don’t have an email application set up, which means the link can take them to a dead end or down a rabbit hole. Their UI experimentation ended up using a mailto: link, but putting the entire email address as the link which makes it especially obvious what the link does, while also offering a Copy button for a little UX bonus. tel: links are weirder in the sense that a good many devices looking at them don’t have any phone-calling functionality. If they do, it’s a lot like email links in that multiple apps could do that work (e.g. WhatsApp, FaceTime, or the default phone app). The hard part of the UX of all this is offering users choice on what they want these special link types to do. That’s what mailgo is attempting to solve. It’s a little JavaScript library that offers UI when you click them. Live demo: CodePen Embed Fallback I kinda like it. I wouldn’t mind at all if that popped up when I clicked a link like this, especially since it has that “open default” option if I want that anyway. Seems to check all the boxes for the problems these types of special links can have. The post Offering Options for mailto: and tel: Links appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Offering Options for mailto: and tel: Links

Read at the original Source: css tricks.

Categories
Article vue

Let’s Make a Vue-Powered Monthly Calendar

Have you ever seen a calendar on a webpage and thought, how the heck did they did that? For something like that, it might be natural to reach for a plugin, or even an embedded Google Calendar, but it’s actually a lot more straightforward to make one than you might think. Especially when we use the component-driven power of Vue. I’ve set up a demo over at CodeSandbox so you can see what we’re aiming for, but it’s always a good idea to spell out what we’re trying to do: Create a month view grid that displays the days of the current monthDisplay dates from the previous and next months to so the grid is always fullIndicate the current dateShow the name of the currently selected monthNavigate to the previous and next monthAllow the user to navigate back to the current month with a single click Oh, and we’ll build this as a single page application that fetches calendar dates from Day.js, a super light utility library. Step 1: Start with the basic markup We’re going to jump straight into templates. If you’re new to Vue, Sarah’s introduction series is a nice place to start. It’s also worth noting that I’ll be linking to the Vue 2 docs throughout this post. Vue 3 is currently in beta and the docs for it are subject to change. Let’s start with creating a basic template for our calendar. We can outline our markup as three layers where we have: A section for the calendar header. This will show components with the currently selected month and the elements responsible for paginating between months.A section for the calendar grid header. A table header that holds a list containing the days of the week, starting with Monday.The calendar grid. You know, each day in the current month, represented as a square in the grid. Let’s write this up in a file called CalendarMonth.vue. This will be our main component. <!– CalendarMonth.vue –> <template>   <!– Parent container for the calendar month –>   <div class=”calendar-month”>          <!– The calendar header –>     <div class=”calendar-month-header”       <!– Month name –>       <CalendarDateIndicator />       <!– Pagination –>       <CalendarDateSelector />     </div>     <!– Calendar grid header –>     <CalendarWeekdays />     <!– Calendar grid –>     <ol class=”days-grid”>…

Read the rest Let’s Make a Vue-Powered Monthly Calendar

Read at the original Source: css tricks.

Categories
Article github github actions

Optimize Images with a GitHub Action

I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and deployments. But it’s just configuration files that can run whatever you need. There is a whole marketplace of Actions wanting to do work for you. What I wanted to do was run code to do image optimization. That way I never have to think about it. Any image in the repo has been optimized. There is an action for this already, Calibre’s image-actions, which we’ll leverage here. You’ll also need to ensure Actions is enabled for the repo. I know in my main organization we only flip on Actions on a per-repo basis, which is one of the options. Then you make a file at ./github/workflows/optimize-images.yml. That’s where you can configure this action. All your actions can have separate files, if you want them to. I made this a separate file because (1) it only works with “pushes to pull requests,” so if you have other actions that run on different triggers, they won’t mix nicely, and (2) That’s what is in their docs and looks like the suggested usage. name: Optimize images on: pull_request jobs: build: name: calibreapp/image-actions runs-on: ubuntu-latest steps: – name: Checkout Repo uses: actions/checkout@master – name: Compress Images uses: calibreapp/image-actions@master with: githubToken: ${{ secrets.GITHUB_TOKEN }} Now if you make a pull request, you’ll see it run: That successful run then leaves a comment on the pull request saying what it was able to optimize: It will literally re-commit those files back to the pull request as well, so if you’re going to stay on the pull request and keep working, you’ll need to push again before you can push to get the optimized images. I can look at that automatic commit and see the difference: The commit preview in Git Tower. How I can merge the PR knowing all is well: Pretty cool. Is optimizing your images locally particularly hard? No. Is never having to think about it again better? Yeah. You’re taking on a smidge of technical debt here, but reducing it elsewhere, which is a very fair trade, at least in my book. The post Optimize Images with a GitHub Action appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest Optimize Images with a GitHub Action

Read at the original Source: css tricks.

Categories
Article screencasts

The New CSS-Tricks Video Intro by dina Amin

You know we do video screencasts, right? It’s not, like, super regular, but I have done them for a long time, still like doing them, and plan to keep doing them. I publish them here, but you can subscribe over on YouTube as well. I’ve had a couple of different custom video intro animations over the years, always done by someone far more handy with that kind of thing than I am. When I asked around in May this year, I got some good leads, but none better than Matthias paging Marc, and then Marc helping me out with an introduction to dina Amin. One look at dina’s work and it’s an obvious: yes! She does stop-motion and a lot of breakin’ stuff: Just one small example, check out the show reel too! We chatted back and forth, scoping out the project. She says: I worked together with Assem Kamal on a new intro for CSS-Tricks YouTube channel. We wanted to make something very short yet interesting so that audiences on YouTube don’t skip the intro or get bored if they watch a couple of CSS-Tricks videos back to back. She researched and asked a bunch of questions. I like how she was very aware of the role an intro like this plays in a video, especially tutorials. Can’t be too long. Can’t be annoying in any way. It has to have enough detail that it’s almost fun to see multiple times. The old video started with a keyboard: This is the old one. Love it the spirit but could use a freshening up. pic.twitter.com/ZfkDHaFZYI— Chris Coyier (@chriscoyier) May 26, 2020 We started with an Apple keyboard, because we wanted to keep something from the original intro that Chris’ audience would relate to, and most importantly because I wanted to take the keyboard apart! View this post on Instagram I worked together with @asssemkamal on a new intro for @chriscoyier CSS Tricks YouTube channel! We cut a keyboard to pieces, moved bits and bobs around and came up with several versions for the intro. Check out @asssemkamal page for the other iteration 👀✨ Sound design by @sherief_samir BTS Music: @andrew_applepie #stopmotion #animation #csstricks #stopmolovers #behindthescenes A post shared by dina A. Amin (@dina.a.amin) on Aug 12, 2020 at 11:04am PDT “Did we cut up that keyboard?!” Yes, we did. It was too easy to find multiple broken Apple keyboards, it’s…

Read the rest The New CSS-Tricks Video Intro by dina Amin

Read at the original Source: css tricks.

Categories
Article border-radius

What Happens When Border Radii Overlap?

I’d wager that most times we’re rounding box corners in CSS, we’re applying a uniform border-radius value across the border. It’s a nice touch of polish in many designs. But there are times when we might want different radii for different corners. Easy, right? That way the property takes four values. Well, as it turns out, it’s actually possible to paint ourselves into a corner because rounded borders are capable of overlapping one other. Many of us know the common “999em hack” for getting a “pill-shaped” rectangle: CodePen Embed Fallback We set the border-radius to an absurdly large number, like 999em or 999vmax, and instead of becoming some kind of impossible, Escher-esque möbius strip, the corners are nicely rounded off to form a semicircle. This is convenient because it means we don’t have to know the dimensions of the rectangle to achieve this effect — it “just works.” CodePen Embed Fallback The origins of this trick are murky to me, but I found an early example in a comment on Lea Verou’s blog by David Baron. But, like many “hacks”, we can encounter some odd behavior in certain edge cases. For instance, why does that work when this doesn’t: CodePen Embed Fallback We want the right side of the rectangle to be “pill-shaped,” and the left side to have corners rounded to 40px. But our 40px corners are gone! Where did they go? Hey, those left corners should be slightly rounded! The answer is that they didn’t go anywhere; the browser has just reduced their values so close to zero that they merely look like they’re gone. The browser is diverging somehow from the values we requested, but when and how does it decide to step in? Let’s check the spec: Let f = min(Li/Si), where i ∈ {top, right, bottom, left}, Si is the sum of the two corresponding radii of the corners on side i, and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box. If f < 1, then all corner radii are reduced by multiplying them by f. Ah, that explains it! Have a great rest of your week! :wipes hands conclusively: …I’m joking, of course. That requires a little decoding, so let’s look at it two ways, mathematically and geometrically. Always keep in mind that the purpose of this formula is to prevent radius overlap.…

Read the rest What Happens When Border Radii Overlap?

Read at the original Source: css tricks.

Categories
Article scrollbars scrolling ux

That’s Just How I Scroll

How do you know a page (or any element on that page) scrolls? Well, if it has a scrollbar, that’s a pretty good indication. You might still have to scrapple with your client about “the fold” or whatever, but I don’t think anyone is confused at what a scrollbar is or what it indicates. But let’s say there is no scrollbar. That’s super common. macOS hides scrollbars by default and only shows them during scroll. Most mobile browsers don’t have scrollbars, even if you attempt to force them with something like overflow: scroll;. Why does this matter? If you don’t know an area is scrollable, you might miss out on important content or functionality. I regularly think about the Perfectly Cropped story from Tyler Hall. There is a screen on iOS that has important functionality you need to scroll down to, but there is no indicator whatsoever that you can scroll there. The result of that was Tyler’s mom literally not being able to find functionality she was used to. Not great. There is an elaborate way to detect visible scrollbars and force them to be visible, but something about that rubs me the wrong way. It doesn’t honor a user’s preference (assuming it is the user’s preference), requires DOM manipulation tests, and uses vendor-prefixed CSS (which will probably live a long time, but has been standardized now, so maybe not forever). I enjoy these approaches and by Chris Smith and his thinking: CodePen Embed Fallback My favorite are the shadow-based techniques. To me an inset shadow is a really clear indicator, as it makes it appear that content is flowing underneath and the shadow follows an edge that as a hint that you can scroll in that direction. Plus, you’ve got CSS control there so I’d think it could match whatever UI situation you’re in fairly easily. It should be known though that it can be done entirely in CSS though, no JavaScript, and is one of the great CSS tricks. The post That’s Just How I Scroll appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.

Read the rest That’s Just How I Scroll

Read at the original Source: css tricks.

Categories
Article learning open source

What I Learned by Fixing One Line of CSS in an Open Source Project

I was browsing the Svelte docs on my iPhone and came across a blaring UI bug. The notch in the REPL knob was totally out of whack. I’m always looking to contribute to open source, and I thought this would be a quick and easy fix. Turns out, there was a lot more to it than just changing one line of CSS.  Replicating, debugging, setting up the local environment was interesting, difficult, and meaningful. The issue I opened my browser DevTools, thinking I’d see the same issue in the phone view. But, the bug wasn’t there. Now this is a seriously tricky CSS problem. 💡 What I learned If you’re using Chrome on iOS as your browser, you’re still using Safari’s renderer. From Wikipedia: Chrome uses the iOS WebKit – which is Apple’s own mobile rendering engine and components, developed for their Safari browser – therefore it is restricted from using Google’s own V8 JavaScript engine. This is backed up by caniuse, which provides this note on iPS Safari: Now it’s clear why the issue wasn’t showing up on my machine but it was showing up on my phone. Different rendering engines!  Reproduce the issue locally I pulled down the project and ran it locally. I confirmed it was still an issue by running the local code in a simulator as well as on my actual iPhone. Safari on macOS has an easy way to open up DevTools instances of each one. This provides access to a console just like you would in the browser but for iOS Safari.  I’m not going to lie, Apple’s developer experience is top notch (see what I did there? 😬). I’m able to reproduce the issue locally now. 💡 What I learned After pulling down the Svelte repo and looking around the code a bit, I noticed the UI and SVGs were being pulled in via a package called @sveltejs/site-kit. Great, now I need my local version of site kit to get pulled into svelte/site so I can see changes and debug the issue. I needed to point the node_modules in Svelte’s package.json to my local copy of site-kit. This sounded like a Symlink. After looking through the docs without much luck I Googled around and stumbled upon npm-link. That let me see what I was doing! I can now make local changes to site-kit and see them reflected in the Svelte project. Solving…

Read the rest What I Learned by Fixing One Line of CSS in an Open Source Project

Read at the original Source: css tricks.

Categories
Article scss sticky

Stacked Cards with Sticky Positioning and a Dash of Sass

The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll. I started wondering how much JavaScript this would involve and how you’d go about making it when I realized — ah! — this must be the work of position: sticky and a tiny amount of Sass. So, without diving into how Corey did this, I decided to take a crack at it myself. First up, some default styles for the cards: body { background: linear-gradient(#e8e8e8, #e0e0e0); } .wrapper { margin: 0 auto; max-width: 700px; } .card { background-color: #fff; border: 1px solid #ccc; border-radius: 10px; box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); color: #333; padding: 40px; } Next, we need to make each card sticky to the top of the wrapper. We can do that like this: .card { position: sticky; top: 10px; // other card styles } And that leaves us with this: But how do we get each of these elements to look like a stack on top of one another? Well, we can use some fancy Sass magic to fix the position of each card. First we’ll loop over every card element and then change the value with each iteration: @for $i from 1 through 8 { .card:nth-child(#{$i}n) { top: $i * 20px; } } Which results in this demo, which is totally charming, if I do say so myself: CodePen Embed Fallback And there we have it! We could make a few visual changes here to improve things. For example, the box-shadow and color of each card, just like Corey’s example. But I wanted to keep experimenting here. What if we switch the order of the cards and made them horizontal instead? We already do that on this very website: After experimenting for a little bit I changed the order of the cards with flexbox and made each item slide in from right to left: .wrapper { display: flex; overflow-x: scroll; } .card { height: 60vh; min-width: 50vw; position: sticky; top: 5vh; left: 10vw; } But I also wanted to make each of the cards come in at different angles so I updated the Sass loop with the random function: @for $i from 1 through 8 { .card:nth-child(#{$i}n) { left: $i * 20px; left: random(200) + $i * 1px; top: random(130) + $i * 1px; transform: rotate(random(3) -…

Read the rest Stacked Cards with Sticky Positioning and a Dash of Sass

Read at the original Source: css tricks.

Categories
Article

Chapter 2: Browsers

Previously in web history… Sir Tim Berners-Lee creates the technologies behind the web — HTML, HTTP, and the URL which blend hypertext with the Internet — with a small team at CERN. He convinces the higher-ups in the organizations to put the web in the public domain so anyone can use it. Dennis Ritchie had a problem. He was working on a new, world class operating system. He and a few other colleagues were building it from the ground up to be simple and clean and versatile. It needed to run anywhere and it needed to be fast. Ritchie worked at Bell Labs. A hotbed of innovation, in the 60s, and 70s, Bell employed some of the greatest minds in telecommunications. While there, Ritchie had worked on a time-sharing project known as Multics. He was fiercely passionate about what he saw as the future of computing. Still, after years of development and little to show for it, Bell eventually dropped the project. But Ritchie and a few of his colleagues refused to let the dream go. They transformed Multics into a new operating system adaptable and extendable enough to be used for networked time sharing. They called it Unix. Ritchie’s problem was with Unix’s software. More precisely, his problem was with the language the software ran on. He had been writing most of Unix in assembly code, quite literally feeding paper tape into the computer, the way it was done in the earliest days of computing. Programming directly in assembly — being “close to the metal” as some programmers refer to it — made Unix blazing fast and memory efficient. The process, on the other hand, was laborious and prone to errors. Ritchie’s other option was to use B, an interpreted programming language developed by his co-worker Ken Thompson. B was much simpler to code with, several steps abstracted from the bare metal. However, it lacked features Ritchie felt were crucial. B also suffered under the weight of its own design; it was slow to execute and lacked the resilience needed for time-sharing environments. Ritchie’s solution was to chose neither. Instead, he created a compiled programming language with many of the same features as B, but with more access to the kinds of things you could expect from assembly code. That language is called C. By the time Unix shipped, it had been fully rewritten in C, and the programming…

Read the rest Chapter 2: Browsers

Read at the original Source: css tricks.

Categories
Article

Practical Use Cases for JavaScript’s closest() Method

Have you ever had the problem of finding the parent of a DOM node in JavaScript, but aren’t sure how many levels you have to traverse up to get to it? Let’s look at this HTML for instance: <div data-id=”123″>   <button>Click me</button> </div> That’s pretty straightforward, right? Say you want to get the value of data-id after a user clicks the button: var button = document.querySelector(“button”); 
 button.addEventListener(“click”, (evt) => {   console.log(evt.target.parentNode.dataset.id);   // prints “123” }); In this very case, the Node.parentNode API is sufficient. What it does is return the parent node of a given element. In the above example, evt.targetis the button clicked; its parent node is the div with the data attribute. But what if the HTML structure is nested deeper than that? It could even be dynamic, depending on its content. <div data-id=”123″>   <article>     <header>       <h1>Some title</h1>       <button>Click me</button>     </header>      <!– … –>   </article> </div> Our job just got considerably more difficult by adding a few more HTML elements. Sure, we could do something like element.parentNode.parentNode.parentNode.dataset.id, but come on… that isn’t elegant, reusable or scalable. The old way: Using a while-loop One solution would be to make use of a while loop that runs until the parent node has been found. function getParentNode(el, tagName) {   while (el && el.parentNode) {     el = el.parentNode;          if (el && el.tagName == tagName.toUpperCase()) {       return el;     }   }      return null; } Using the same HTML example from above again, it would look like this: var button = document.querySelector(“button”); 
 console.log(getParentNode(button, ‘div’).dataset.id); // prints “123” This solution is far from perfect. Imagine if you want to use IDs or classes or any other type of selector, instead of the tag name. At least it allows for a variable number of child nodes between the parent and our source. There’s also jQuery Back in the day, if you didn’t wanted to deal with writing the sort of function we did above for each application (and let’s be real, who wants that?), then a library like jQuery came in handy (and it still does). It offers a .closest() method for exactly that: $(“button”).closest(“[data-id=’123′]”) The new way: Using Element.closest() Even though jQuery is still a valid approach (hey, some of us are…

Read the rest Practical Use Cases for JavaScript’s closest() Method

Read at the original Source: css tricks.

Categories
Article framework

Halfmoon: A Bootstrap Alternative with Dark Mode Built In

I recently launched the first production version of Halfmoon, a front-end framework that I have been building for the last few months. This is a short introductory post about what the framework is, and why I decided to build it. The elevator pitch Halfmoon is a front-end framework with a few interesting things going for it: Dark mode built right in: Creating a dark mode version of a site is baked in and a snap.Modular components: A lot of consideration has gone into making modular components — such as forms, navbars, sidebars, dropdowns, toasts, shortcuts, etc. — that can be used anywhere to make layouts, even complex ones like dashboards.JavaScript is optional: Many of the components found in Halfmoon are built to work without JavaScript. However, the framework still comes with a powerful JavaScript library with no extra dependencies.All the CSS classes you need: The class names should be instantly familiar to anyone who has used Bootstrap because that was the inspiration.Cross-browser compatibility: Halfmoon fully supports nearly every browser under the sun, including really old ones like Internet Explorer 11.Easily customizable: Halfmoon uses custom CSS properties for things like colors and layouts, making it extremely easy to customize things to your liking, even without a CSS preprocessor. In many ways, you can think of Halfmoon as Bootstrap with an integrated dark mode implementation. It uses a lot of Bootstrap’s components with slightly altered markup in many cases. OK, great, but why this framework? Whenever a new framework is introduced, the same question is inevitably pops up: Why did you actually build this? The answer is that I freaking love dark modes and themes. Tools that come with both a light and a dark mode (along with a toggle switch) are my favorite because I feel that being able to change a theme on a whim makes me less likely to get bored looking at it for hours. I sometimes read in dim lighting conditions (pray for my eyes), and dark modes are significantly more comfortable in that type of situation.  Anyway, a few months ago, I wanted to build a simple tool for myself that makes dark mode implementation easy for a dashboard project I was working on. After doing some research, I concluded that I had only two viable options: either pickup a JavaScript-based component library for a front-end framework — like Vuetify for Vue — or shell out…

Read the rest Halfmoon: A Bootstrap Alternative with Dark Mode Built In

Read at the original Source: css tricks.