#flipping button css

[codenewbies]

Flipping Button CSS

[n7punk]

"Hotel Couches & Other Hail Marys" Fic Notes

These aren't the traditional format but I have enough Hidden Little Things I wanna do very loose an informal fics notes

The "Hotel Couch" was Catra's Hail Mary, but the shared bed was Catradora's, and Catradora's reunion was the fans' Hail Mary.

The way I do tweets was invented back in DITM and "perfected" in SaD, when I also invented how I do Instagram posts/stories/reels/DMs. I wasn’t reinventing shit for the changes Twitter has made, it’s ~historically accurate~ to when Dashcon happened. The one change I made was not using the block quote indent for all the digital posts I usually do, but that entire fic was digital, so I only ended up using it for indented reply chains on Twitter (which worked out better tbh) and on the Instagram chapter to distinguish the posts and the descriptions of the images/videos.

Fake tumblr posts/alternate reality dashboard simulators are already a popular format on Tumblr so there really was very little for me to do there. I made some tweaks by adding in the comment/share/like icons I use for Twitter, but overall that part was easy. The hardest part was getting the follow button blue. On Tumblr that's easy, colored text is a built-in option, but for AO3 I had to use a work skin to include some CSS for the color code. I ended up modifying the Reddit skin I had made using this tutorial because I was planning to capstone with a Reddit post anyway so I could just add on the blue on. Normally I don’t consider using colored text for many reasons (hard to read, might look great on my site skin and be invisible on others, etc), but in the case of the follow buttons they could just as easily not be there and contribute nothing but realism, so I wanted to have them in their standard blue.

Normally I don’t even consider using Tumblr when doing social media posts in a fic but considering this was inspired by Dashcon which was literally a Tumblr convention, I had to for this one. As such, the first chapter is mostly set-dressing for the disaster the convention is itself so when people complain in future chapters it makes sense. The rough outline was: Tumblr (convention background) Twitter (reconnect and beef background) Instagram (bond) DMs/texts (get together) Reddit (retrospective epilogue wrapping up the story)

Most of the usernames are just like. Random shit I could come up with. The ones on Tumblr are supposed to be random stuff on the site and the ones on Twitter lean more towards fandom-associated stuff for the She-ra fandom since it’s transitioning from the pool of All Con Attendees to the microcosm of their fans affected. Most of these can be found in previous fics such as DITM. That said, here are the name(s) with inspo behind them:

🍕nnlftbf: none pizza left beef. And no vowels. I have always desperately wanted to eat the none pizza

🦉pewpew4gloria: Star Siblings fan (reference to Starla’s bird)

🐍nagashed: this is a reference to both the plethora of (human animal hybrid)(bodypart) tumblr usernames (ex: dragongirlsnort) and a manga that my friend is reading.

🎃pumpkakitty: reference to a really cute hat in Pokemon Go 🥺 (okay it’s supposed to be a pikachu but it looks like a kitty tbh)

🌈edgeofgloria: another Star Siblings fan

He-Ro in the Freak Zone @frightzest: He-Ro is an actual MOTU character, frightzest is from DITM

Aside: the “looki loo” thing is a reference to Razz’s good ol pal Looki, hence the fandom in-joke

praying mantis wife @nineten02: nineten is a reference to my Stardew Valley chickens <3

Katastrophe @viviviolence: Vi’s shoulders you mean so much to me

Oh yeah Zeni is Zine just. Flipped. Also the original She-ra artist was one of the two sponsors who pulled out and the entire reason they were there. I mean what?

When Adora called Catra aggravating on camera she was doing it in a horny way but with Real Beef between them it didn’t come across that way. She also said they wouldn’t work together as a factual thing rather than spiteful. There was no way the studio OR Catra would let them.

When Catra said she’s “finally suing” she’s referring to the long-standing rumor that the previous showrunner “stepped back” because Catra was threatening to sue for the wage/credit theft, or the discrimination, or the abusive work environment, or the-

The dates Adora reached out to Catra via DMs were all significant ones for the real series — season 1 debut for when they were nominated, prompting the thank you story, season 2 debut for when they won the award (I didn’t look up and don’t care when the actual GLAADs are lol), and season 3 debut when ZeniCon is actually taking place. Almost three years have passed since Catra’s ousting from the show back between seasons 3 and 4, tho.

Given the NDA and general threat-level from the studio, Adora didn’t think she could mention Catra on her main page without getting a talking to even with Weaver officially departed, so she tried to do it on her story, but Catra did NOT want the heat that could bring.

The foam She-ra crown from the Instagram reel is the same one they gave out at cons in 2018 and 2019.

Adora calling it the “season 5” rather than “season 4” wrap part led to fan speculation that season 5 really was written by Catra except for the weakest parts — some stuff needing to be condensed, the insertion of a new storyline — which like. Well they are right. But she said season 5 rather 4 (which was wholly Catra’s) because it’s the part she’s most proud of even after they took it from her. It’s what she was building to the whole time.

Catra and Adora lasted like ten minutes lying next to each other in bed before they ended up kissing and when it started progressing they snuck into the bathroom. It was obvious Bow was asleep and they were just hoping Glimmer was too. Glimmer, too, wishes she was asleep.

Glimmer refers to Catra being “at her worst” because she got really aggressive and disparaging of her old cast out of bitterness after they wouldn’t back her up in the press (to keep their jobs). They all understand why, but it is still frustrating.

Melendy is from my fic lore, she’s a magicat character I use sometimes who is named after Catra’s VA in the 80s. She plays a recurring character on the show, though on the minor side.

I linked the Ohio con video because 1) that video is the ONLY time I’ve heard of it and I love the drama 2) to hammer home all the shit I say in this isn’t just from Dashcon, I am not here to libel people and 3) because I like my secret little links, BUT if you want to see a good video on Dashcon, watch this one and literally never watch Internet Historian he’s a POS: https://www.youtube.com/watch?v=ZAqy-KDJAUM

The behind the scenes shitshow for She-Ra itself was inspired by the TV show Lost (though Catra keeping her storylines secret was inspired by Real She-ra and ND Stevenson)

Like I said, I had been wanting to do a fic that was “just digital” for a while. The massive problem with that is getting across the shit people don’t post online because there is not a single trace of Catra and Adora potentially being a couple until after ZeniCon. Catra and Adora were basically wildly attracted to each other from the moment they met on the show but wouldn’t cross that barrier because they worked together (especially because of where they worked together). They ended up hooking up during some high-stress times for the show just to deal with how much they wanted each other. Catra felt really betrayed when the cast wouldn’t stick their necks out for her when she was ousted. Privately they were all on her side and told the studio so, but to publicly side with her was to lose their jobs, and the show was their entire life. They ultimately picked their passion & livelihood over showing public support they didn’t think would make a difference anyway and she cut all ties with them. They did what they felt they could, which was mostly never denying her version of events and deflecting questions when they had no other choice, but they all felt bad about it and tried to reach out to her privately. She didn’t want to hear it, but fans were right that the real beef was with the studio. She fell back into their arms eventually because she could see they were doing what they could while keeping their jobs, and she knew just how much being unemployed sucked. Adora was also telling the truth when she said they were fighting for her version of the story by staying on the show and no matter how much Catra calls it theft, that is what she wants for her characters. Being forced into the same room let them all remember what it was like to be friends, and that’s what led them to eventually giving their apologies.

I have no idea why, when presented with “lol dashcon au” my brain goes “rampant wage theft, behind the scenes abuse, disgrace and scandal, show extension hell a la supernatural, brrrrrrrrrr” but there we go

[thehyveagency]

How to Choose the Right Website Design for Your Business – Hyve Agency’s Ultimate Guide with 7 Powerful Tips

Why Website Design Matters in 2025

In a digital-first world, your website often makes the first impression. Think of it as your virtual storefront. It’s where prospects form opinions about your brand—within seconds.

A poor design can cost you credibility, conversions, and trust. On the flip side, a smart, intuitive, and responsive design can turn clicks into clients. Website design impacts your SEO rankings, bounce rate, and user engagement. It’s not just a “nice to have” anymore—it’s essential.

🎯 Understanding Your Business Goals

Before you even start choosing colors and fonts, get crystal clear on your goals. Ask yourself:

What do I want my website to accomplish?

Am I selling products, offering services, or building a community?

Should my website generate leads or provide information?

Your goals drive the entire design strategy. A site designed for lead generation looks different from one focused on e-commerce. Defining your KPIs—like form fills, purchases, or downloads—will guide layout, content, and functionality decisions.

👥 Knowing Your Target Audience

Design choices should be driven by data—not just taste. Understanding your audience means knowing their:

Demographics: Age, gender, location

Pain points: What problems are they trying to solve?

Devices: Are they mostly on mobile or desktop?

Once you know who you’re designing for, you can tailor the user experience (UX) accordingly. Whether it’s minimalist for tech-savvy users or highly visual for creative professionals, design should always resonate with your ideal client.

⚙️ Essential Website Design Elements

📱 Mobile Responsiveness

With over 60% of traffic coming from mobile devices, responsive design isn’t optional—it’s mandatory. Your site should:

Adjust seamlessly to any screen size

Offer readable fonts without zooming

Maintain intuitive menus on small screens

⚡ Fast Load Times

Site speed affects SEO rankings and conversions. According to Google, 53% of users bounce if a mobile page takes longer than 3 seconds to load. Optimize your:

Image sizes

Code structure

Hosting provider

🧭 Intuitive Navigation

Confused visitors don’t convert. Your navigation should:

Be simple and predictable

Keep essential pages (Home, About, Services, Contact) easy to find

Include a clear call-to-action (CTA) above the fold

🎨 Branding and Aesthetic Consistency

Your website should mirror your brand identity. Colors, typography, imagery, and tone must align with your logo and offline materials. Why? Because consistency builds trust.

Examples:

A health clinic might use clean lines and calming colors.

A creative agency might use bold graphics and interactive elements.

Ask yourself: Would a visitor immediately recognize this as my brand?

🕵️ SEO-Friendly Design Practices

An attractive design is useless if nobody sees it. That’s where SEO comes in.

Key design-related SEO practices:

Use clean HTML/CSS

Include header tags (H1, H2, etc.)

Optimize images with ALT text

Prioritize mobile-first indexing

Design for crawlability (avoid too much JavaScript)

Good design helps search engines understand your content, which directly improves your rankings.

💰 Conversion-Focused Design Strategies

The ultimate goal of your site is conversion—whether it’s a sale, sign-up, or inquiry. Design with this in mind.

Tips:

Place CTAs where eyes naturally land

Use trust signals (reviews, badges, guarantees)

Add contrasting buttons that stand out

Incorporate whitespace to guide focus

UX vs. UI: What’s the Difference?

UX (User Experience): How users interact with your site

UI (User Interface): The visual layout and design elements

Both must work hand-in-hand. UX ensures it works. UI ensures it looks good. Poor UI with good UX feels dull. Great UI with poor UX is frustrating. Hyve Agency balances both.

Choosing the Right CMS and Platform

Popular CMS platforms include:

WordPress: Best for flexibility and SEO

Shopify: Great for e-commerce

Webflow: Perfect for design-driven sites

Squarespace: Ideal for smaller portfolios

Pick a CMS that aligns with your goals, team skill level, and long-term needs.

Custom Design vs. Templates

Templates: Faster, cheaper, but generic.

Custom Design: Tailored, scalable, and brand-specific. More expensive, but higher ROI.

Hyve Agency recommends custom solutions for businesses serious about growth. Templates are fine for early-stage ventures but often limit scalability.

🤝 Working with a Professional Agency like Hyve

A professional agency brings:

Strategy + execution

SEO expertise

Ongoing support and maintenance

Custom development

Conversion optimization

Hyve Agency’s team crafts each website from the ground up, based on your business goals and audience. We don't believe in cookie-cutter.

💸 Budgeting for Web Design Without Compromising Quality

Your website is an investment. While costs vary, quality shouldn’t be sacrificed.

Typical price ranges:

Basic site: $1,500 – $3,000

Mid-tier site: $3,000 – $10,000

Advanced custom: $10,000+

Always budget for:

Hosting

Maintenance

SEO/content updates

Performance monitoring

♿ Website Accessibility Standards

Accessibility means ensuring your site works for everyone, including users with disabilities.

Key features:

Alt text for images

Keyboard navigation

Color contrast compliance

Screen reader compatibility

Following WCAG guidelines isn’t just ethical—it protects you legally and widens your audience.

🌐 Real-World Examples of Great Business Websites

Dropbox – Simple, CTA-focused design

Slack – Clear messaging and branding

Apple – Sleek visuals, intuitive UX

Hyve Agency (of course!) – Balanced aesthetics + high performance

Each of these designs highlights clarity, speed, brand voice, and responsiveness.

❓ FAQs About Website Design for Businesses

Q1: How long does it take to design a website? A: Depending on complexity, anywhere from 2 to 12 weeks.

Q2: Can I design my site myself using a builder? A: Yes, but professional design offers long-term benefits like better UX, SEO, and branding.

Q3: How often should I redesign my website? A: Every 2–3 years, or whenever your business goals shift significantly.

Q4: What are the most important pages to include? A: Home, About, Services/Products, Blog, and Contact.

Q5: Does website design affect Google ranking? A: Absolutely. Speed, mobile-friendliness, and UX are major ranking factors.

Q6: What’s the difference between a web developer and a designer? A: Designers handle layout and visuals. Developers build the functionality.

🏁 Conclusion: Take the Next Step with Hyve Agency

Choosing the right website design can make or break your business online. From strategic layout and SEO to brand alignment and user experience, every detail matters.

Hyve Agency specializes in high-converting, brand-aligned websites built for results. Whether you’re launching a startup or scaling a growing company, we’re your design partner from start to finish.

Ready to build something amazing? Contact Hyve Agency today.

[jcmarchi]

Come to the light-dark() Side

New Post has been published on https://thedigitalinsider.com/come-to-the-light-dark-side/

Come to the light-dark() Side

You’d be forgiven for thinking coding up both a dark and a light mode at once is a lot of work. You have to remember @media queries based on prefers-color-scheme as well as extra complications that arise when letting visitors choose whether they want light or dark mode separately from the OS setting. And let’s not forget the color palette itself! Switching from a “light” mode to a “dark” mode may involve new variations to get the right amount of contrast for an accessible experience.

It is indeed a lot of work. But I’m here to tell you it’s now a lot simpler with modern CSS!

Default HTML color scheme(s)

We all know the “naked” HTML theme even if we rarely see it as we’ve already applied a CSS reset or our favorite boilerplate CSS before we even open localhost. But here’s a news flash: HTML doesn’t only have the standard black-on-white theme, there is also a native white-on-black version.

We have two color schemes available to use right out of the box!

If you want to create a dark mode interface, this is a great base to work with and saves you from having to account for annoying details, like dark inputs, buttons, and other interactive elements.

Live Demo on CodePen

Switching color schemes automatically based on OS preference

Without any @media queries — or any other CSS at all — if all we did was declare color-scheme: light dark on the root element, the page will apply either the light or dark color scheme automatically by looking at the visitor’s operating system (OS) preferences. Most OSes have a built-in accessibility setting for your preferred color scheme — “light”, “dark”, or even “auto” — and browsers respect that setting.

html color-scheme: light dark;

We can even accomplish this without CSS directly in the HTML document in a <meta> tag:

<meta name="color-scheme" content="light dark">

Whether you go with CSS or the HTML route, it doesn’t matter — they both work the same way: telling the browser to make both light and dark schemes available and apply the one that matches the visitor’s preferences. We don’t even need to litter our styles with prefers-color-scheme instances simply to swap colors because the logic is built right in!

You can apply light or dark values to the color-scheme property. At the same time, I’d say that setting color-scheme: light is redundant, as this is the default color scheme with or without declaring it.

You can, of course, control the <meta> tag or the CSS property with JavaScript.

There’s also the possibility of applying the color-scheme property on specific elements instead of the entire page in one fell swoop. Then again, that means you are required to explicitly declare an element’s color and background-color properties; otherwise the element is transparent and inherits its text color from its parent element.

What values should you give it? Try:

Default text and background color variables

The “black” colors of these native themes aren’t always completely black but are often off-black, making the contrast a little easier on the eyes. It’s worth noting, too, that there’s variation in the blackness of “black” between browsers.

What is very useful is that this default not-pure-black and maybe-not-pure-white background-color and text color are available as <system-color> variables. They also flip their color values automatically with color-scheme!

They are: Canvas and CanvasText.

These two variables can be used anywhere in your CSS to call up the current default background color (Canvas) or text color (CanvasText) based on the current color scheme. If you’re familiar with the currentColor value in CSS, it seems to function similarly. CanvasText, meanwhile, remains the default text color in that it can’t be changed the way currentColor changes when you assign something to color.

In the following examples, the only change is the color-scheme property:

Not bad! There are many, many more of these system variables. They are case-insensitive, often written in camelCase or PascalCase for readability. MDN lists 19 <system-color> variables and I’m dropping them in below for reference.

Open to view 19 system color names and descriptions

AccentColor: The background color for accented user interface controls

AccentColorText: The text color for accented user interface controls

ActiveText: The text color of active links

ButtonBorder: The base border color for controls

ButtonFace: The background color for controls

ButtonText: The text color for controls

Canvas: The background color of an application’s content or documents

CanvasText: The text color used in an application’s content or documents

Field: The background color for input fields

FieldText: The text color inside form input fields

GrayText: The text color for disabled items (e.g., a disabled control)

Highlight: The background color for selected items

HighlightText: The text color for selected items

LinkText: The text color used for non-active, non-visited links

Mark: The background color for text marked up in a <mark> element

MarkText: The text color for text marked up in a <mark> element

SelectedItem: The background color for selected items (e.g., a selected checkbox)

SelectedItemText: The text color for selected items

VisitedText: The text visited links

Cool, right? There are many of them! There are, unfortunately, also discrepancies as far as how these color keywords are used and rendered between different OSes and browsers. Even though “evergreen” browsers arguably support all of them, they don’t all actually match what they’re supposed to, and fail to flip with the CSS color-scheme property as they should.

Egor Kloos (also known as dutchcelt) is keeping an eye on the current status of system colors, including which ones exist and the browsers that support them, something he does as part of a classless CSS framework cleverly called system.css.

Declaring colors for both modes together

OK good, so now you have a page that auto-magically flips dark and light colors according to system preferences. Whether you choose to use these system colors or not is up to you. I just like to point out that “dark” doesn’t always have to mean pure “black” just as “light” doesn’t have to mean pure “white.” There are lots more colors to pair together!

But what’s the best or simplest way to declare colors so they work in both light and dark mode?

In my subjective reverse-best order:

Third place: Declare color opacity

You could keep all the same background colors in dark and light modes, but declare them with an opacity (i.e. rgb(128 0 0 / 0.5) or #80000080). Then they’ll have the Canvas color shine through.

It’s unusable in this way for text colors, and you may end up with somewhat muted colors. But it is a nice easy way to get some theming done fast. I did this for the code blocks on this old light and dark mode demo.

Second place: Use color-mix()

Like this:

color-mix(in oklab, Canvas 75%, RebeccaPurple);

Similar (but also different) to using opacity to mute a color is mixing colors in CSS. We can even mix the system color variables! For example, one of the colors can be either Canvas or CanvasText so that the background color always mixes with Canvas and the text color always mixes with CanvasText.

We now have the CSS color-mix() function to help us with this. The first argument in the function defines the color space where the color mixing happens. For example, we can tell the function that we are working in the OKLAB color space, which is a rectangular color space like sRGB making it ideal to mix with sRGB color values for predictable results. You can certainly mix colors from different color spaces — the OKLAB/sRGB combination happens to work for me in this instance.

The second and third arguments are the colors you want to mix, and in what proportion. Proportions are optional but expressed in percentages. Without declaring a proportion, the mix is an even 50%-50% split. If you add percentages for both colors and they don’t match up to 100%, it does a little math for you to prevent breakages.

The color-mix() approach is useful if you’re happy to keep the same hues and color saturations regardless of whether the mode is light or dark.

In this example, as you change the value of the hue slider, you’ll see color changes in the themed boxes, following the theme color but mixed with Canvas and CanvasText:

You may have noticed that I used OKLCH and HSL color spaces in that last example. You may also have noticed that the HSL-based theme color and the themed paragraph were a lot more “flashy” as you moved the hue slider.

I’ve declared colors using a polar color space, like HSL, for years, loving that you can easily take a hue and go up or down the saturation and lightness scales based on need. But, I concede that it’s problematic if you’re working with multiple hues while trying to achieve consistent perceived lightness and saturation across them all. It can be difficult to provide ample contrast across a spectrum of colors with HSL.

The OKLCH color space is also polar just like HSL, with the same benefits. You can pick your hue and use the chroma value (which is a bit like saturation in HSL) and the lightness scales accurately in the same way. Both OKLCH and OKLAB are designed to better match what our eyes perceive in terms of brightness and color compared to transitioning between colors in the sRGB space.

While these color spaces may not explicitly answer the age-old question, Is my blue the same as your blue? the colors are much more consistent and require less finicking when you decide to base your whole website’s palette on a different theme color. With these color spaces, the contrasts between the computed colors remain much the same.

First place (winner!): Use light-dark()

Like this:

light-dark(lavender, saddlebrown);

With the previous color-mix() example, if you choose a pale lavender in light mode, its dark mode counterpart is very dark lavender.

The light-dark() function, conversely, provides complete control. You might want that element to be pale lavender in light mode and a deep burnt sienna brown in dark mode. Why not? You can still use color-mix() within light-dark() if you like — declare the colors however you like, and gain much more fine-grained control over your colors.

Feel free to experiment in the following editable demo:

Using color-scheme: light dark; — or the corresponding meta tag in HTML on your page —is a prerequisite for the light-dark() function because it allows the function to respect a person’s system preference, or whichever single light or dark value you have set on color-scheme.

Another consideration is that light-dark() is newly available across browsers, with just over 80% coverage across all users at the time I’m writing this. So, you might consider including a fallback in your CSS for browsers that lack support for the function.

What makes using color-scheme and light-dark() better than using @media queries?

@media queries have been excellent tools, but using them to query prefers-color-scheme only ever follows the preference set within the person’s operating system. This is fine until you (rightfully) want to offer the visitor more choices, decoupled from whether they prefer the UI on their device to be dark or light.

We’re already capable of doing that, of course. We’ve become used to a lot of jiggery-pokery with extra CSS classes, using duplicated styles, or employing custom properties to make it happen.

The joy of using color-scheme is threefold:

It gives you the basic monochrome dark mode for free!

It can natively do the mode switching based on OS mode preference.

You can use JavaScript to toggle between light and dark mode, and the colors declared in the light-dark() functions will follow it.

Light, dark, and auto mode controls

Essentially, all we are doing is setting one of three options for whether the color-scheme is light, dark, or updates auto-matically.

I advise offering all three as discrete options, as it removes some complications for you! Any new visitor to the site will likely be in auto mode because accepting the visitor’s OS setting is the least jarring default state. You then give that person the choice to stay with that or swap it out for a different color scheme. This way, there’s no need to sniff out what mode someone prefers to, for example, display the correct icon on a toggle and make it perform the correct action. There is also no need to keep an event listener on prefers-color-scheme in case of changes — your color-scheme: light dark declaration in CSS handles that for you.

Adjusting color-scheme in pure CSS

Yes, this is totally possible! But the approach comes with a few caveats:

You can’t use <button> — only radio inputs, or <options> in a <select> element.

It only works on a per page basis, not per website, which means changes are lost on reload or refresh.

The browser needs to support the :has() pseudo-selector. Most modern browsers do, but some folks using older devices might miss out on the experience.

Using the :has() pseudo-selector

This approach is almost alarmingly simple and is fantastic for a simple one-pager! Most of the heavy lifting is done with this:

/* default, or 'auto' */ html color-scheme: light dark; html:has([value="light"]:checked color-scheme: light; html:has([value="dark"]:checked color-scheme: dark;

The second and third rulesets above look for an attribute called value on any element that has “light” or “dark” assigned to it, then change the color-scheme to match only if that element is :checked.

This approach is not very efficient if you have a huge page full of elements. In those cases, it’s better to be more specific. In the following two examples, the CSS selectors check for value only within an element containing id="mode-switcher".

html:has(#mode-switcher [value="light"]:checked) color-scheme: light /* Did you know you don't need the ";" for a one-liner? Now you do! */

Using a <select> element:

Using <input type="radio">:

We could theoretically use checkboxes for this, but since checkboxes are not supposed to be used for mutually exclusive options, I won’t provide an example here. What happens in the case of more than one option being checked? The last matching CSS declaration wins (which is dark in the examples above).

Adjusting color-scheme in HTML with JavaScript

I subscribe to Jeremy Keith’s maxim when it comes to reaching for JavaScript:

JavaScript should only do what only JavaScript can do.

This is exactly that kind of situation.

If you want to allow visitors to change the color scheme using buttons, or you would like the option to be saved the next time the visitor comes to the site, then we do need at least some JavaScript. Rather than using the :has() pseudo-selector in CSS, we have a few alternative approaches for changing the color-scheme when we add JavaScript to the mix.

Using <meta> tags

If you have set your color-scheme within a meta tag in the <head> of your HTML:

<meta name="color-scheme" content="light dark">

…you might start by making a useful constant like so:

const colorScheme = document.querySelector('meta[name="color-scheme"]');

And then you can manipulate that, assigning it light or dark as you see fit:

colorScheme.setAttribute("content", "light"); // to light mode colorScheme.setAttribute("content", "dark"); // to dark mode colorScheme.setAttribute("content", "light dark"); // to auto mode

This is a very similar approach to using <meta> tags but is different if you are setting the color-scheme property in CSS:

html color-scheme: light dark;

Instead of setting a colorScheme constant as we just did in the last example with the <meta> tag, you might select the <html> element instead:

const html = document.querySelector('html');

Now your manipulations look like this:

html.style.setProperty("color-scheme", "light"); // to light mode html.style.setProperty("color-scheme", "dark"); // to dark mode html.style.setProperty("color-scheme", "light dark"); // to auto mode

I like to turn those manipulations into functions so that I can reuse them:

function switchAuto() html.style.setProperty("color-scheme", "light dark"); function switchLight() html.style.setProperty("color-scheme", "light"); function switchDark() html.style.setProperty("color-scheme", "dark");

Alternatively, you might like to stay as DRY as possible and do something like this:

function switchMode(mode) html.style.setProperty("color-scheme", mode === "auto" ? "light dark" : mode);

The following demo shows how this JavaScript-based approach can be used with buttons, radio buttons, and a <select> element. Please note that not all of the controls are hooked up to update the UI — the demo would end up too complicated since there’s no world where all three types of controls would be used in the same UI!

I opted to use onchange and onclick in the HTML elements mainly because I find them readable and neat. There’s nothing wrong with instead attaching a change event listener to your controls, especially if you need to trigger other actions when the options change. Using onclick on a button doesn’t only work for clicks, the button is still keyboard-focusable and can be triggered with Spacebar and Enter too, as usual.

Remembering the selection for repeat visits

The biggest caveat to everything we’ve covered so far is that this only works once. In other words, once the visitor has left the site, we’re doing nothing to remember their color scheme preference. It would be a better user experience to store that preference and respect it anytime the visitor returns.

The Web Storage API is our go-to for this. And there are two available ways for us to store someone’s color scheme preference for future visits.

localStorage

Local storage saves values directly on the visitor’s device. This makes it a nice way to keep things off your server, as the stored data never expires, allowing us to call it anytime. That said, we’re prone to losing that data whenever the visitor clears cookies and cache and they’ll have to make a new selection that is freshly stored in localStorage.

You pick a key name and give it a value with .setItem():

localStorage.setItem("mode", "dark");

The key and value are saved by the browser, and can be called up again for future visits:

const mode = localStorage.getItem("mode");

You can then use the value stored in this key to apply the person’s preferred color scheme.

sessionStorage

Session storage is thrown away as soon as a visitor browses away to another site or closes the current window/tab. However, the data we capture in sessionStorage persists while the visitor navigates between pages or views on the same domain.

It looks a lot like localStorage:

sessionStorage.setItem("mode", "dark"); const mode = sessionStorage.getItem("mode");

Which storage method should I use?

Personally, I started with sessionStorage because I wanted my site to be as simple as possible, and to avoid anything that would trigger the need for a GDPR-compliant cookie banner if we were holding onto the person’s preference after their session ends. If most of your traffic comes from new visitors, then I suggest using sessionStorage to prevent having to do extra work on the GDPR side of things.

That said, if your traffic is mostly made up of people who return to the site again and again, then localStorage is likely a better approach. The convenience benefits your visitors, making it worth the GDPR work.

The following example shows the localStorage approach. Open it up in a new window or tab, pick a theme other than what’s set in your operating system’s preferences, close the window or tab, then re-open the demo in a new window or tab. Does the demo respect the color scheme you selected? It should!

Choose the “Auto” option to go back to normal.

If you want to look more closely at what is going on, you can open up the developer tools in your browser (F12 for Windows, CTRL+ click and select “Inspect” for macOS). From there, go into the “Application” tab and locate https://cdpn.io in the list of items stored in localStorage. You should see the saved key (mode) and the value (dark or light). Then start clicking on the color scheme options again and watch the mode update in real-time.

Accessibility

Congratulations! If you have got this far, you are considering or already providing versions of your website that are more comfortable for different people to use.

For example:

People with strong floaters in their eyes may prefer to use dark mode.

People with astigmatism may be able to focus more easily in light mode.

So, providing both versions leaves fewer people straining their eyes to access the content.

Contrast levels

I want to include a small addendum to this provision of a light and dark mode. An easy temptation is to go full monochrome black-on-white or white-on-black. It’s striking and punchy! I get it. But that’s just it — striking and punchy can also trigger migraines for some people who do a lot better with lower contrasts.

Providing high contrast is great for the people who need it. Some visual impairments do make it impossible to focus and get a sharp image, and a high contrast level can help people to better make out the word shapes through a blur. Minimum contrast levels are important and should be exceeded.

Thankfully, alongside other media queries, we can also query prefers-contrast which accepts values for no-preference, more, less, or custom.

In the following example (which uses :has() and color-mix()), a <select> element is displayed to offer contrast settings. When “Low” is selected, a filter of contrast(75%) is placed across the page. When “High” is selected, CanvasText and Canvas are used unmixed for text color and background color:

Adding a quick high and low contrast theme gives your visitors even more choice for their reading comfort. Look at that — now you have three contrast levels in both dark and light modes — six color schemes to choose from!

ARIA-pressed

ARIA stands for Accessible Rich Internet Applications and is designed for adding a bit of extra info where needed to screen readers and other assistive tech.

The words “where needed” do heavy lifting here. It has been said that, like apostrophes, no ARIA is better than bad ARIA. So, best practice is to avoid putting it everywhere. For the most part (with only a few exceptions) native HTML elements are good to go out of the box, especially if you put useful text in your buttons!

The little bit of ARIA I use in this demo is for adding the aria-pressed attribute to the buttons, as unlike a radio group or select element, it’s otherwise unclear to anyone which button is the “active” one, and ARIA helps nicely with this use case. Now a screen reader will announce both its accessible name and whether it is in a pressed or unpressed state along with a button.

Following is an example code snippet with all the ARIA code bolded — yes, suddenly there’s lots more! You may find more elegant (or DRY-er) ways to do this, but showing it this way first makes it more clear to demonstrate what’s happening.

Our buttons have ids, which we have used to target them with some more handy consts at the top. Each time we switch mode, we make the button’s aria-pressed value for the selected mode true, and the other two false:

const html = document.querySelector("html"); const mode = localStorage.getItem("mode"); const lightSwitch = document.querySelector('#lightSwitch'); const darkSwitch = document.querySelector('#darkSwitch'); const autoSwitch = document.querySelector('#autoSwitch'); if (mode === "light") switchLight(); if (mode === "dark") switchDark(); function switchAuto() html.style.setProperty("color-scheme", "light dark"); localStorage.removeItem("mode"); lightSwitch.setAttribute("aria-pressed","false"); darkSwitch.setAttribute("aria-pressed","false"); autoSwitch.setAttribute("aria-pressed","true"); function switchLight() html.style.setProperty("color-scheme", "light"); localStorage.setItem("mode", "light"); lightSwitch.setAttribute("aria-pressed","true"); darkSwitch.setAttribute("aria-pressed","false"); autoSwitch.setAttribute("aria-pressed","false"); function switchDark() html.style.setProperty("color-scheme", "dark"); localStorage.setItem("mode", "dark"); lightSwitch.setAttribute("aria-pressed","false"); darkSwitch.setAttribute("aria-pressed","true"); autoSwitch.setAttribute("aria-pressed","false");

On load, the buttons have a default setting, which is when the “Auto” mode button is active. Should there be any other mode in the localStorage, we pick it up immediately and run either switchLight() or switchDark(), both of which contain the aria-pressed changes relevant to that mode.

<button id="autoSwitch" aria-pressed="true" type="button" onclick="switchAuto()">Auto</button> <button id="lightSwitch" aria-pressed="false" type="button" onclick="switchLight()">Light</button> <button id="darkSwitch" aria-pressed="false" type="button" onclick="switchDark()">Dark</button>

The last benefit of aria-pressed is that we can also target it for styling purposes:

button[aria-pressed="true"] background-color: transparent; border-width: 2px;

Finally, we have a nice little button switcher, with its state clearly shown and announced, that remembers your choice when you come back to it. Done!

Outroduction

Or whatever the opposite of an introduction is…

…don’t let yourself get dragged into the old dark vs light mode argument. Both are good. Both are great! And both modes are now easy to create at once. At the start of your next project, work or hobby, do not give in to fear and pick a side — give both a try, and give in to choice.

[themesfores]

Divi WordPress Theme v4.27.0

https://themesfores.com/product/divi-wordpress-theme/ Divi WordPress Theme v4.27.0 Divi Theme Features Drag & Drop Building – Add, delete and move elements around on the front end of your website. No coding and no confusing back-end options. True Visual Editing – Design your page in real-time and see the results instantly. Create and customize your pages using intuitive visual controls. Custom CSS Control – Developers can easily combine Divi’s visual design controls with their custom CSS. Divi’s interface is simple yet not limiting. Responsive Editing – Building beautiful responsive websites is easy. Divi is responsive by nature and gives you full control over how your website looks on mobile devices. Design Options Galore – Enjoy dozens of unique page elements and thousands of design options. Divi gives you complete design control over your website. Inline Text Editing – Click and start typing! Editing your page has never been this easy. Draft pages on the front end and see the results instantly as you type. Save & Manage Your Designs – Save and manage unlimited custom designs. Easily re-use them to jump-start new pages. Create advanced design systems and streamline your workflow. Global Elements & Styles – Manage your entire website’s design using global elements and web site-wide design settings. Divi isn’t just a page builder; it’s a website design system. Undo, Redo, & Revisions – Divi works like a modern software application. Easily undo, redo and travel through your entire editing history. If you make a mistake, Divi has your back. Freelancers – Divi makes building websites for your clients so much easier, faster, and more enjoyable. With Divi, you can build anything using a single platform instead of managing dozens of different themes. Agencies – Divi makes building websites faster and more efficient. It will streamline your design process and improve team collaboration. It’s also amazingly affordable. Build unlimited websites for your clients on a single membership. Website Owners – Divi makes building websites easier. For beginners and website owners, Divi gives you the freedom to bring your visions to life. Anyone can jump into Divi thanks to its visual editor and hundreds of pre-made designs. Features: 200+ Website Elements Drag & Drop Building True Visual Editing Custom CSS Control Responsive Editing Design Options Galore Inline Text Editing Save & Manage Your Designs Global Elements & Styles Undo, Redo, & Revisions Optimize & Convert: Divi is a powerful design tool, it also helps you make your website a success. Increase website conversions with Divi Leads split testing. Divi makes building websites for your clients so much easier, faster, and more enjoyable. With Divi, you can build anything using a single platform, instead of managing dozens of different themes. Divi is among the best-selling themes from Elegant Themes. It is powered by the Divi Builder, which can build any template with the visual interface. Divi WordPress Theme Please note that any digital products presented on this website do not contain malicious code, viruses or advertising. Divi Theme Free Download Changelog Fixed an issue where the Global Presets history didn’t update with every action causing changes to not save. Fixed lazy loading images to occur only on below-the-fold content when Divi Builder is used. Recover some Block Editor control buttons on Template Editor mode. Fixed broken layout on the Divi Woo Products module. Fixed incorrectly set Page Type in Theme Builder when using the Woo Notice module. Fixed an issue where flip section divider is not showing in Safari. Fixed the issue where the menu items wrap into multiple lines. Fixed builder issue when users edit a WooCommerce product and use the FSE theme. Improved Theme Builder Template compatibility with Block Editor Template. Fixed Account name/password incorrect validation while on the Checkout page built using Divi Builder. Fixed Divi block styling issue on Template Editor. Disable ET buttons when users open Template Editor. Fixed issue where global color becomes static if hover options are enabled. Fixed Payment form repeatedly showing in all Divi Checkout modules. Fixed an issue where the Pricing Table child element text color didn’t overwrite the parent module text color in some cases. Added support for SVG files in portability export. How to fix “style.css missing” error while uploading themes? A common issue that can occur with users new to installing WordPress themes is a “Broken theme and/or stylesheets missing” error message being displayed when trying to upload or activate the theme. This is because the theme download package on ThemeForest includes additional files to the theme such as the documentation, license etc. https://themesfores.com/product/divi-wordpress-theme/ #DIGITALMARKETING #Multi-PurposeThemes #WordpressTheme

[cssscriptcom]

3D Animated Image Slider With Vanilla JavaScript & HTML/CSS3

This is a 3D animated image slider built with HTML, CSS/CSS3, and Vanilla JavaScript. Ideal for portfolios, product galleries, or photo albums. When you click on the next or previous buttons, the current image flips in 3D to reveal the next or previous image on the reverse side. Additionally, the background of the whole page changes to the current image with a subtle blur effect. This creates an…

[divinector]

CSS 3D Flip button hover effects

[startoverr231-blog]

How long does it take to learn web designing?

Becoming an best website designers doesn’t want to be tough. If you want to know the essential basics, we’ve prepare this manual that covers the whole lot you need to realize to get started.

What is internet design?

Part artistry and part science, net design faucets into every the modern and analytical side of a person’s thoughts.

Web designers take what’s conceptual and translate it into visuals. Images, typography, colours, text, terrible place, and structure come together offering no longer only a patron experience however a conduit for speakme thoughts.

A best website developers is conscious the importance of each piece of a layout. They make alternatives on a granular degree, styling each element, whilst in no way losing sight of the way the factors will come together and function in handing over at the format’s extra dreams.

Web designs are powered through the lower again give up

You’re going to stumble upon the phrases lower back end and front give up as you are mastering. Most novices combination these up, so it’s important to realize how they’re precise.

The returned end is everything that runs behind the scenes in showing a net website. Websites are dwelling on servers. When a user makes a request like navigating to a particular segment of a internet web page, the server takes this incoming records and in flip shoots out all of the HTML and distinct code simply so it presentations inside the person’s browser effectively. Servers host the records a net web site calls for to feature.

Know what the the the front prevent is

The again quit is taken into consideration the server facet whilst the the the front cease is the patron side. The the front end is wherein HTML, CSS, JavaScript, and distinct code work together to show a internet web site. This is the part of a web layout that humans have interaction with.

As you boost to your profession you can venture into greater specialized regions of net development. You can also additionally turn out to be operating with frameworks like React or Bootstrap or skip deeper with JavaScript or jQuery. These are extra superior regions that you shouldn’t fear too much approximately within the beginning.

How to study net design (in 5 steps)

1. Understand the important thing standards of visible design

Line

Every letter, border, and division in a format is crafted from lines that make up their greater structure. Learning internet design approach know-how the packages of traces in developing order and stability in a layout.

Shapes

The three easy shapes in seen layout are squares, circles, and triangles. Squares and rectangles work for blocks of content fabric, circles paintings for buttons, and triangles are frequently used for icons that accompany an vital message or name to motion. Shapes also have a enjoy of emotion, with squares related to electricity, circles with harmony and luxury, and triangles with importance and movement.

Texture

Texture replicates something in the actual worldwide. Through texture, we get an idea of whether or not or no longer a few factor is hard or smooth. Textures may be visible throughout web design. From paperlike backgrounds to the colourful wisps of a Gaussian blur, be privy to the awesome kinds of textures that would make your designs greater interesting and may supply them a experience of physicality.

Color

To create designs that aren’t an eye fixed strain, you must train your self in shade idea. Understanding the shade wheel, complementary colorations, contrasting shades, and the feelings that unique colorings are tied to will make you a better net fashion designer.

Grids

Grids have their roots inside the earliest days of picture design. They feature so well in bringing order to photographs, texts, and different elements in a web design. Learn how to structure your web layouts the usage of grids.

2. Know the basics of HTML

Hypertext markup language (HTML) gives the instructions for a manner the content, photographs, navigation, and other factors of a internet website online display in a person’s net browser. Though you don’t need to be an professional in HTML, it however permits to have a few familiarity with how it works, even in case you’re the use of a visual-based layout platform like Webflow.

HTML tags are the instructions a browser makes use of to generate a net website. Headings, paragraphs, links, and snap shots are all managed through those tags. You’ll specifically need to apprehend how header tags like H1, H2, and H3 tags are used for content hierarchy. In addition to affecting layout structure, header tags are crucial in how net crawlers classify a design and feature an effect on how they display up in natural are trying to find rankings.

3. Understand CSS

CSS (or cascading fashion sheets) offers styling and extra instructions on how an HTML detail goes to appear. Doing such things as utilizing fonts, such as padding, setting alignment, choosing colours, or even growing grids are all possible via CSS.

Knowing how CSS works will offer you with the abilties to create unique searching websites and to customise modern templates. Let’s pass over a few key ideas of CSS.

4. Learn the regulations of UX

UX is the magic that brings a internet site to lifestyles, remodeling it from a static arrangement of elements into a few element that engages with the emotions of someone scrolling through it.

The color scheme, content cloth, typography, format, and visuals all come together to serve your target audience. User enjoy layout is about precision and evoking emotions. It gives someone now not only a clean journey but an enjoy that connects them with the entity or brand inside the lower back of the net layout.

Here are a few UX standards you’ll need to realize.

User personas

Web design manner understanding give up users. You need to discover ways to do character research and a way to create consumer personas. In addition, you’ll need to realise how to utilize this statistics in developing a layout that’s optimized for his or her needs.

Information architecture

Without easy organisation, humans receives harassed and jump. Information structure and content material mapping provide a blueprint for a way the internet site and every phase will paintings together in offering a clean patron journey.

User flows

Constructing character flows might also come into play at the same time as you paintings your manner as much as greater sizeable design projects, but you’ll be better off within the destiny in case you begin considering those and building them out for your early designs. User flows talk how people will float thru a layout. They will let you prioritize the maximum critical sections and ensure that humans can get right of entry to them.

5. Familiarize your self with UI

A consumer interface is a mechanism that places a piece of generation into movement. A doorknob is a person interface. The extent manage on your car radio that your huge other received’t stop messing spherical with is someone interface. And the keypad that you input your PIN into at an ATM is a consumer interface. Just as buttons and other mechanisms within the real global allow a person to have interaction with machines, the person interface factors on a net website allow a person to position actions into motion.

No code presents an easy access into internet design

There changed right into a time, now not that long in the past, even as you had to have a deep information of HTML and CSS to manually write the code in the back of a web layout. Today, with out a code gadget like Webflow, it’s feasible to put together a website and release it in a brief amount of time. What took days or perhaps weeks can now occur in hours.

Of course, so much goes into developing a pinnacle layout business enterprise web sites. Learning the fundamentals in the back of visual format, the basics of UI and UX, and information how the front give up and again stop function will make you a more best website designers.

[holisticsoulhealer]

Trust - A Spiritual Story

Trust is such a wonderful experience in life when we have it and so difficult to reclaim when we don’t. Building trust in each other, our tribes, our working environment and our general reality, seems to be a very important factor in a calm lifestyle.

I have a story where a wonderful man had every reason to not trust his story. This touched my life and changed my perception in a double way, let me explain…………

It was a Saturday and a man had booked a session with me for a relaxing massage, having been referred by my contacts at the busy local visitor center, in the very popular small Dutch town nearby. He was a healthy mid-50’s man, who came in all buttoned-up, in a shirt, tie and stiff jacket, looking like a principal of a school. He was serious, aloof and very matter-of-fact.

My mum welcomed him, offered tea or water, while I listened for any clues in his conversation, with regard to friendliness or open communication. As I prepared my room, I heard silence.

I went out to the reception and he followed me into the therapy room, sitting immediately, removing his shoes, absently listening to my instructions before I left him to undress and climb onto the table, face down for his massage. I stood at the doorway, requesting my Guides and his to come in and assist me, as he seemed more closed off than my usual clientele.

I stepped in and began working his physical body into more balance. He was as tight as a ball of string, with less elasticity. The pictures came and they shocked me. I was seeing a young 5-7 year old boy being hit by an imposing, angry man, who appeared to have a drinking demeanor. The father figure had a large stick or hard bat and was beating the boy. The boy was covering his ears and his head, which still caught the blows. It was relentless. While I worked on the man, the silent tears fell onto my cheeks. I wiped them away with the shoulder of my tunic, and kept going. I turned him over onto his back and gradually completed the massage. His body definitely softened and opened up, while I was challenged with whether to share with him what I had been remotely viewing all this time. The massage was complete and silence hadn’t been broken.

I left him to dress, as I stood outside the room, my heart in one hand and a cup of our filtered water in the other. I stepped in, handed him the water and closed the door. I asked him tentatively if I could share my insights while his massage had taken place. He nodded with the cup to his lips. I began to relate the pictures of the father figure and the boy, who bravely took all the beating.

I stood with tears at the very back of my eyes, looking openly at this unblinking man, who didn’t say one word. He shook his head and told me I must have been mistaken. I reeled, felt very embarrassed and apologized for mixing my wires and that I don’t usually get those pictures wrong, and was entirely willing to claim my mistake. I wished him well and hoped he had a good massage experience, and please disregard my inaccurate conversation and accept my humble apologies for getting it so wrong.

I left him to complete, while I went to the bathroom and stood in front of the mirror, rinsing my face at the sink, questioning how I could have been so totally off base.

I waited until I heard the door of the healing center close and then walked up to my mum at the front desk, telling her I really got that last session wrong. She smiled at me, letting me know I couldn’t have been wrong about the massage at least, because he rebooked for the next week.

I felt better, yet dreaded the next week’s appointment.

The man that entered the reception was in a Hawaiian style shirt, shorts and flip flops. He was smiling, relaxed and more than chatty to my mum. He complimented her on her shirt and let her know he was very happy the healing center existed. I was already blown away and I felt way more confident as I collected him to bring to our session room.

He sat and removed his flip flops, looking straight at me, asking me not to leave yet.

He told me I had the visions exactly right. He just wasn’t ready to admit out loud what he’d buried for over 50 years. He then looked at me and thanked me, with watery eyes.

I got really choked up as I listened to what he said next with my whole heart.

It was all true. His father was harsh, frustrated with his own truths and addictions. He blew his anger at his son. He beat him all the time, with sticks and bats and anything hard. The marks weren’t obvious and nothing was done to stop him. This was his brutal childhood. He lost trust in his own experience and life story. He had worn headphones, playing music in any silences, to drown out the memories that had hurt him so badly, on every level. After our session he had removed the headphones to sleep for the first time in over 50 years. He started to trust himself again. He had already booked for his wife to come and see me as she had lived with other trust issues, without being able to place the origin of them.

Our work took a whole other state of grace and his energy lifted to a place where he could finally breathe out. Nobody was going to hurt him. He could trust himself again. When we were complete with his massage and he was drinking water, preparing to leave the healing room, he told me he was married for the second time. The first marriage had ended because she felt she couldn’t reach him, and his relationship with his two adult sons was more distant and less honest and loving than he wanted.

He had arranged a weekend getaway, letting his sons know it was important for him to share something. The two young men, very curious, had agreed to join him, to stay on the boat he owned and had barely ever yet enjoyed. He was nervous and it was time for him to come clean emotionally.

While he was out on the boat with his sons, I was with his 50 year old wife. I laid her on the table, and within a few moments of the massage, I was immediately shown a tiny baby. I was encouraged to place her in the fetal position and rock her, with a soothing tune escaping my lips. She quietly wept the whole time. When our time was complete, I left her to gather herself, and I returned with the customary cup of water.

I let her know I had worked on a tiny baby, being instructed to hold and love her, empowering her with trust again. She acknowledged that she had been a premature baby, placed in an incubator in the days of premature births. Arms reached in to feed and care for the babies, yet holding, nurturing and loving them was considered risky, and so they were left alone a lot.

The reality of this had taken its toll. She had lived her life being aloof and not at all tactile with anyone. Her proclamation had always been that she wasn’t a hugger. She tearfully thanked me, hugging me as though she was never going to let go. It was so amazing and more than sweet. I was hugged for the whole 50 years, talk about making up for lost time. I had no idea that a baby could carry a memory that would impact their life for the whole of their life.

If that wasn’t enough, I got a heartfelt email from her husband within days. He had gone out in the boat with his boys. They all sat there in their life jackets while he openly cried and told them his truth, apologizing for shutting them out all these years. They wept and hugged him. They all felt close and loving toward each other. It was a very special weekend. Their relationship had altered forever, and his cuddles with his darling wife were more than priceless.

Trust was restored in all areas for all those lovely pebbles of life in that family.

As always, please share this post with anyone that you feel can benefit from it! Please like us on your social media channels and subscribe to our mailing list if you haven’t already done so… We are mailing out a monthly newsletter and a recap each week of our blog posts and interesting tidbits… This is how you can stay informed with what is new in the world of The Holistic Soul Healer!!

Love & Blessings, Ruth

#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own Mailchimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */

Join Our Mailing List

Get personal with your Angels!! Connect with me and see what they have to say!!

BOOK NOW!!

[codenewbies]

CSS Flipping Button Animation

[mostlysignssomeportents]

Pluralistic, your daily link-dose: 28 Feb 2020

Today's links

Clearview AI's customer database leaks: Sic semper grifter.

The Internet of Anal Things: Recreating Stelarc's "Amplified Body" with an IoT butt-plug.

Oakland's vintage Space Burger/Giant Burger building needs a home! Adopt a googie today.

Fan-made reproduction of the Tower of Terror: Even has a deepfaked Serling.

Drawing the Simpsons with pure CSS: Impractical, but so impressive.

Let's Encrypt issues its billionth cert: 89% of the web is now encrypted.

AI Dungeon Master: A work in progress, for sure.

How to lie with (coronavirus) maps: Lies, damned lies, and epidemiological data-visualizations.

This day in history: 2019, 2015

Colophon: Recent publications, current writing projects, upcoming appearances, current reading

Clearview AI's customer database leaks (permalink)

Clearview is the grifty facial recognition startup that created a database by scraping social media and now offers cops secretive deals on its semi-magic, never-peer-reviewed technology. The company became notorious in January after the NYT did a deep dive into its secretive deals and its weird, Trump-adjascent ex-male-model founder.

(the Times piece was superbly researched but terribly credulous about Clearview's marketing claims)

https://www.nytimes.com/2020/01/18/technology/clearview-privacy-facial-recognition.html

Yesterday, Clearview warned its customers that it had been hacked and lost its customer database. Today, that customer database was published.

https://www.buzzfeednews.com/article/ryanmac/clearview-ai-fbi-ice-global-law-enforcement

It seems that the NYT weren't the only ones to take Clearview's marketing claims at face value. Its client list includes the DoJ, ICE, Macy's, Walmart, and the NBA. All in all the dump includes more than 2,200 users, including "law enforcement agencies, companies, and individuals around the world."

Included: state AGs, university rent-a-cops, and clients in Saudi Arabia.

"BuzzFeed News authenticated the logs, which list about 2,900 institutions and include details such as the number of log-ins, the number of searches, and the date of the last search."

What does Clearview, a sercurity company, say about this ghastly security breach? "Unfortunately, data breaches are part of life in the 21st century."

Big shrug energy.

"Government agents should not be running our faces against a shadily assembled database of billions of our photos in secret and with no safeguards against abuse," ACLU attorney Nathan Freed Wessler, said to BuzzFeed News.

It is amazing that this needs to be said.

"More than 50 educational institutions across 24 states named in the log. Among them are two high schools."

They are:

Central Montco Technical High School in Pennsylvania

Somerset Berkley Regional High School in Massachusetts

The log also has an entry for Interpol.

The Internet of Anal Things (permalink)

In 1994, the notorious/celebrated electronic artist Stelarc did a performance called "Amplified Body" in which he "controlled robots, cameras and other instruments by tensing and releasing his muscles"

https://web.archive.org/web/20120712181429/https://v2.nl/events/amplified-body

Now, artist/critic Dani Ploeger has revisited Amplified Body with his own performance, which is very similar to Stelarc's, except all the peripherals are controlled by Ploeger tensing and releasing his anal sphincters around a smart butt-plug.

https://www.daniploeger.org/amplified-body

He calls it "B-hind" and it's a ha-ha-only-serious. The buttplug is "an anal electrode with EMG sensor for domestic treatment of faecal incontinence," and the accompanying text is a kind of art-speak parody of IoT biz-speak.

https://we-make-money-not-art.com/b-hind-celebrating-the-internet-of-anal-things

"B-hind offers a unique IoT solution to fully integrate your sphincter muscle in everyday living. The revolutionary anal electrode-powered interface system replaces conventional hand/voice-based interaction, enabling advanced digital control rooted in your body's interior. Celebrating the abject and the grotesque, ‍B‒hind facilitates simple, plug-and-play access to a holistic body experience in the age of networked society."

B-hind was produced in collaboration with V2_, the Lab for the Unstable Media in Rotterdam, and In4Art.

Oakland's vintage Space Burger/Giant Burger building needs a home! (permalink)

Giant Burger was once an East Bay institution, known for its burgers and its gorgeous googie architecture.

https://localwiki.org/oakland/Giant_Burger

One of the very last Giant Burger buildings is now under threat. Though the Telegraph Ave location was rescued in 2015 and converted to a "Space Burger," it's now seeking a new home because it is in the path of the Eastline project.

https://insidescoopsf.sfgate.com/blog/2015/02/24/space-burger-launches-in-uptown-oakland/

The Oakland Heritage Alliance is hoping someone will rescue and move the building: " Do you have an idea for a new location for this mid-century icon? Please contact info@oaklandheritage.org if you know of an appropriate lot, project, or site, preferably downtown."

(Image CC BY-SA, Our Oakland)

Fan-made reproduction of the Tower of Terror (permalink)

Orangele set out to re-create the Walt Disney World Twilight Zone Tower of Terror elevator loading zone in the entry area to their home theater. He's not only done an impressive re-make of the set, but he's also augmented it with FANTASTIC gimmicks.

https://www.hometheaterforum.com/community/threads/the-tower-of-terror-theater.365747/

It's not merely that's he's created a rain, thunder and lightning effect outside the patio doors…

https://www.youtube.com/watch?v=4QMzN0v4mJQ

Nor has he merely created props like this gimmicked side table that flips over at the press of a button.

https://www.youtube.com/watch?v=kY7gQLMnbeA

He's also created HIS OWN ROD SERLING DEEPFAKE.

https://www.youtube.com/watch?time_continue=2&v=MIsjYJwOXSU

I kinda seriously love that he left Rod's cigarette in. The Disney version looks…uncanny.

Not shown: "exploding fuse box with simulated smoke and fire, motorized lighted elevator dial, motorized/lighted pressure gauge, video monitor playing Tower of Terror ride sequence seen through the elevator door wrap, motorized "elevator door'"

He notes, "I was once married, but now as a single person, I can do whatever I want, haha. NEVER getting married again."

Drawing the Simpsons with pure CSS (permalink)

Implementing animated Simpsons illustrations in CSS isn't the most practical web-coding demo I've seen, but it's among the most impressive. Bravo, Chris Pattle!

(not shown: the eyes animate and blink!)

https://pattle.github.io/simpsons-in-css/

#bart .head .hair1 { top: 22px; left: 0px; width: 6px; height: 7px; -webkit-transform: rotate(-22deg) skew(-7deg, 51deg); -ms-transform: rotate(-22deg) skew(-7deg, 51deg); transform: rotate(-22deg) skew(-7deg, 51deg); }

I especially love the quick-reference buttons to see the raw CSS. It reminds me of nothing so much as the incredibly complex Logo programs I used to write on my Apple ][+ in the 1980s, drawing very complicated, vector-based sprites and glyphs.

https://github.com/pattle/simpsons-in-css/blob/master/css/bart.css

Most interesting is the way that this modular approach to graphics allows for this kind of simple, in-browser transformation.

Let's Encrypt issues its billionth cert (permalink)

When the AT&T whistleblower Mark Klein walked into EFF's offices in 2005 to reveal that his employers had ordered him to help the NSA spy on the entire internet, it was a bombshell.

https://www.eff.org/tags/mark-klein

The Snowden papers revealed the scope of the surveillance in fine and alarming detail. According to his memoir, Snowden was motivated to blow the whistle when he witnessed then-NSA Director James Clapper lie to Senator Ron Wyden about the Klein matter.

Since that day in 2005, privacy advocates have been fretting about just how EASY it was to spy on the whole internet. So much of that was down to the fact that the net wasn't encrypted by default.

This was especially keen for @EFF. After all, we made our bones by suing the NSA in the 90s and winning the right for civilians to access working cryptography (we did it by establishing that "Code is speech" for the purposes of the First Amendment).

https://www.eff.org/deeplinks/2015/04/remembering-case-established-code-speech

Crypto had been legal since 1992, but by Klein's 2005 disclosures, it was still a rarity. 8 years later — at the Snowden moment — the web was STILL mostly plaintext. How could we encrypt the web to save it from mass surveillance?

So in 2014, we joined forces with Mozilla, the University of Michigan and Akamai to create Let's Encrypt, a project to give anyone and everyone free TLS certificates, the key component needed to encrypt the requests your web-server exchanges with your readers.

https://en.wikipedia.org/wiki/Let%27s_Encrypt

Encrypting the web was an uphill climb: by 2017, Let's Encrypt had issued 100m certificates, tipping the web over so that the majority of traffic (58%) was encrypted. Today, Let's Encrypt has issued ONE BILLION certs, and 81% of pageloads use HTTPS (in the USA, it's 91%)! This is astonishing, bordering on miraculous. If this had been the situation back in 2005, there would have been no NSA mass surveillance.

Even more astonishing: there are only 11 full-timers on the Let's Encrypt team, plus a few outside contractors and part-timers. A group of people who could fit in a minibus managed to encrypt virtually the entire internet.

https://letsencrypt.org/2020/02/27/one-billion-certs.html

There are lots of reasons to factor technology (and technologists) in any plan for social change, but this illustrates one of the primary tactical considerations. "Architecture is Politics" (as Mitch Kapor said when he co-founded EFF), and the architectural choices that small groups of skilled people make can reach all the way around the world.

This kind of breathtaking power is what inspires so many people to become technologists: the force-multiplier effect of networked code can imbue your work with global salience (for good or ill). It's why we should be so glad of the burgeoning tech and ethics movement, from Tech Won't Build It to the Googler Uprising. And it's especially why we should be excited about the proliferation of open syllabi for teaching tech and ethics.

https://docs.google.com/spreadsheets/d/1jWIrA8jHz5fYAW4h9CkUD8gKS5V98PDJDymRf8d9vKI/edit#gid=0

It's also the reason I'm so humbled and thrilled when I hear from technologists that their path into the field started with my novel Little Brother, whose message isn't "Tech is terrible," but, "This will all be so great, if we don't screw it up."

https://craphound.com/littlebrother

(and I should probably mention here that the third Little Brother book, Attack Surface, comes out in October and explicitly wrestles with the question of ethics, agency, and allyship in tech).

https://us.macmillan.com/books/9781250757531

AI Dungeon Master (permalink)

Since 2018, Lara martin has been using machine learning to augment the job of the Dungeon Master, with the goal of someday building a fully autonomous, robotic DM.

https://laramartin.net/

AI Dungeon Master is a blend of ML techniques and "old-fashioned rule-based features" to create a centaur DM that augments a human DM's imagination with the power of ML, natural language processing, and related techniques.

She's co-author of a new paper about the effort, "Story Realization: Expanding Plot Events into Sentences" which "describes a way algorithms to use "events," consisting of a subject, verb, object, and other elements, to make a coherent narrative."

https://aaai.org/Papers/AAAI/2020GB/AAAI-AmmanabroluP.6647.pdf

The system uses training data (plots from Doctor Who, Futurama, and X-Files) to expand text-snippets into plotlines that continue the action. It's a bit of a dancing bear, though, an impressive achievement that's not quite ready for primetime ("We're nowhere close to this being a reality yet").

https://www.wired.com/story/forget-chess-real-challenge-teaching-ai-play-dandd/

This may bring to mind AI Dungeon, the viral GPT-2-generated dungeon crawler from December.

https://aidungeon.io/

As Will Knight writes, "Playing AI Dungeon often feels more like a maddening improv session than a text adventure."

Knight proposes that "AI DM" might be the next big symbolic challenge for machine learning, the 2020s equivalent to "AI Go player" or "AI chess master."

How to lie with (coronavirus) maps (permalink)

The media around the coronavirus outbreak is like a masterclass in the classic "How to Lie With Maps."

https://www.press.uchicago.edu/ucp/books/book/chicago/H/bo27400568.html

Self-described "cartonerd" Kenneth Field's prescriptions for mapmakers wanting to illustrate the spread of coronavirus is a superb read about data visualization, responsibility, and clarity.

https://www.esri.com/arcgis-blog/products/product/mapping/mapping-coronavirus-responsibly/

Both of these images are representing the same data. Look at the map and you might get the impression that coronavirus infections are at high levels across all of China's provinces. Look at the bar-chart and you'll see that it's almost entire Hubei.

Here's a proposed way to represent the same data on a map without misleading people.

Another point that jumped out: stop coloring maps in red!

"We're mapping a human health tragedy that may get way worse before it subsides. Do we really want the map to be screaming bright red? Red can connotate death, still statistically extremely rare for coronavirus."

This day in history (permalink)

#5yrsago Ad-hoc museums of a failing utopia: photos of Soviet shop-windows https://boingboing.net/2015/02/28/ad-hoc-museums-of-a-failing-ut.html

#5yrsago First-hand reports of torture from Homan Square, Chicago PD's "black site" https://www.theguardian.com/us-news/2015/feb/27/chicago-abusive-confinment-homan-square

#1yrago EFF's roadmap for a 21st Century antitrust doctrine https://www.eff.org/deeplinks/2019/02/antitrust-enforcement-needs-evolve-21st-century

#1yrago Yet another study shows that the most effective "anti-piracy" strategy is good products at a fair price https://www.vice.com/en_us/article/3kg7pv/studies-keep-showing-that-the-best-way-to-stop-piracy-is-to-offer-cheaper-better-alternatives

#1yrago London's awful estate agents are cratering, warning of a "prolonged downturn" in the housing market https://www.bbc.com/news/business-47389160

#1yrago Bad security design made it easy to spy on video from Ring doorbells and insert fake video into their feeds https://web.archive.org/web/20190411195308/https://dojo.bullguard.com/dojo-by-bullguard/blog/ring/

#1yrago Amazon killed Seattle's homelessness-relief tax by threatening not to move into a massive new building, then they canceled the move anyway https://www.seattletimes.com/business/amazon/huge-downtown-seattle-office-space-that-amazon-had-leased-is-reportedly-put-on-market/

#1yrago The "Reputation Management" industry continues to depend on forged legal documents https://www.techdirt.com/articles/20190216/15544941616/pissed-consumer-exposes-new-york-luxury-car-dealers-use-bogus-notarized-letters-to-remove-critical-reviews.shtml

Colophon (permalink)

Today's top sources: Allegra of Oakland Heritage Alliance, Waxy (https://waxy.org/), We Make Money Not Art (https://we-make-money-not-art.com/), Sam Posten (https://twitter.com/Navesink), Slashdot (https://slashdot.org), Kottke (https://kottke.org) and Four Short Links (https://www.oreilly.com/feed/four-short-links).

Hugo nominators! My story "Unauthorized Bread" is eligible in the Novella category and you can read it free on Ars Technica: https://arstechnica.com/gaming/2020/01/unauthorized-bread-a-near-future-tale-of-refugees-and-sinister-iot-appliances/

Upcoming appearances:

Canada Reads Kelowna: March 5, 6PM, Kelowna Library, 1380 Ellis Street, with CBC's Sarah Penton https://www.eventbrite.ca/e/cbc-radio-presents-in-conversation-with-cory-doctorow-tickets-96154415445

Currently writing: I just finished a short story, "The Canadian Miracle," for MIT Tech Review. It's a story set in the world of my next novel, "The Lost Cause," a post-GND novel about truth and reconciliation. I'm getting geared up to start work on the novel now, though the timing is going to depend on another pending commission (I've been solicited by an NGO) to write a short story set in the world's prehistory.

Currently reading: Just started Lauren Beukes's forthcoming Afterland: it's Y the Last Man plus plus, and two chapters in, it's amazeballs. Last week, I finished Andrea Bernstein's "American Oligarchs" this week; it's a magnificent history of the Kushner and Trump families, showing how they cheated, stole and lied their way into power. I'm getting really into Anna Weiner's memoir about tech, "Uncanny Valley." I just loaded Matt Stoller's "Goliath" onto my underwater MP3 player and I'm listening to it as I swim laps.

Latest podcast: Gopher: When Adversarial Interoperability Burrowed Under the Gatekeepers' Fortresses: https://craphound.com/podcast/2020/02/24/gopher-when-adversarial-interoperability-burrowed-under-the-gatekeepers-fortresses/

Upcoming books: "Poesy the Monster Slayer" (Jul 2020), a picture book about monsters, bedtime, gender, and kicking ass. Pre-order here: https://us.macmillan.com/books/9781626723627?utm_source=socialmedia&utm_medium=socialpost&utm_term=na-poesycorypreorder&utm_content=na-preorder-buynow&utm_campaign=9781626723627

(we're having a launch for it in Burbank on July 11 at Dark Delicacies and you can get me AND Poesy to sign it and Dark Del will ship it to the monster kids in your life in time for the release date).

"Attack Surface": The third Little Brother book, Oct 20, 2020.

"Little Brother/Homeland": A reissue omnibus edition with a very special, s00per s33kr1t intro.

[tokensfortalkers]

☼IZER

or: CAD (Cards Against Dixit)

or: CADizer

a draft tournament, but for stories

a story-draft

Play

Everyone plays one card (face down), then all cards flip over, then everyone silently picks two other people' cards to combine into a sentence, then players take turns leaning forward to hold down the (central, comically dramatic) old tape player-style record button, stating one sentence that connects two other players' cards together, then releases the record button.

Turns

Sentence-sharing moves counterclockwise. Between turns, player hands are passed clockwise. Play starts with 10 cards per player.

Setup

Player with the smallest hands chooses between the Image deck (Sunrise pattern) or the Word deck ("IZER" in best font ever) then draws 10 cards from that deck. Player to their left draws from the Opposite deck. Continue in this way until everyone has a hand. Game can be played by bringing to the table: a standard Dixit deck, a standard Cards Against Humanity deck, and your favorite voice-recording app.

Table

Set out at your gettogether's (see list at IZER cards w114-w138 and p235-p249: "Gettogethers" to generate and post to your favorite social media event calendar a random gettogether) food table to create a mystique-y, alter-like spot for people to record a sentence then draw (and place over) one of the available cards from both decks composing the current spread.

Emoter play

Load up your favored instrumental music -- lyrical music is banned for being too powerful & hands-on-sy for most-people's off-the-cuff improv abilities. Use either the full app^[1] ^[1] (Hand-coded features built especially for ☼IZER-style group play; 50% proceeds go to support Neurodiversity Awareness Organization I Don't Know the Name Of Off the Top of My Head; settings support user-generated BYO-[CSS layout] defaults to There-Now-Even-Bees-Can-Read-It visual setting; compatible with Cocktrice and ttSimulator) or use your favored image-sharing app to post alternatively a single word or a single jpeg \attention-hacking gifs & image macros banned in original version of game for being too powerful & hands-on-sy for most-people's off-the-cuff improv abilities\ or use your presence just like a chimp in a tree would and just hang out. You've your music, good people; express permission: granted.

Lore

All the horizonizerites have gathered at your table. Given time and the learning of generator code they will probably go away. Horizonizerites fall from the horizon instead of falling from the sky like everyt in life. Since they fell at eye-level directly into the eye, they're ability to tell stories is still unfiltered, unprocessed, raw, and possibly unsettling for some.

Know

You are safe. Know: what's guiding you is as warm and deft as a 3-inch paint brush on an easling canvas. Know: you are safe to explore yourself; you are safe to explore each other. Know: you are safe to rub your mind over any horizonizerite you see here. This will exfoliate your thoughts, strip clean the grime and the soot, give your ideas that reflective shine they had way back when you climbed on mounds of sands and in days past and before all this. So long as you remember you are safe, they shouldn't eat you (whole).

[clearzombiestrawberry]

Your browser does not support iframes.

News Punch — The 2020 Red Wave Could Be Starting Already – In...figure{margin:0}.tmblr-iframe{position:absolute}.tmblr-iframe.hide{display:none}.tmblr-iframe--amp-cta-button{visibility:hidden;position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:100}.tmblr-iframe--amp-cta-button.tmblr-iframe--loaded{visibility:visible;animation:iframe-app-cta-transition .2s ease-out} /* Colors */ body { background: #FAFAFA; } .blog-title { font-family: 'Gibson', sans-serif, "Helvetica Neue", HelveticaNeue, Arial, sans-serif; font-weight: bold; } .blog-title a, .description, .search-no-results, .likes-no-likes, .related-posts-wrapper > h2, .loader .loader-bar, .widget-title { color: #444444; } a { color: #529ECC; } #pagination a, .nav-wrapper .nav-item .label { color: #529ECC; } #pagination a.next:after { border-left-color: #529ECC; } #pagination a.previous:after { border-right-color: #529ECC; } .header-image.cover { background-image: url(https://66.media.tumblr.com/9791e3ac6b55616ef7caa5d5fffa1886/a7d065b9e5472bd4-b9/s2048x3072/99073094cbce7211a3c690be13d7bda8cca20e58.png); } .user-avatar { background-color: #FAFAFA; border-color: #FAFAFA; } .avatar-style-square .user-avatar { -webkit-box-shadow: 0 0 0 4px #FAFAFA; box-shadow: 0 0 0 4px #FAFAFA; } .no-header-image .logo-wrapper, .contain-header-image .logo-wrapper { color: #529ECC; } /* Adjust logo for light accents on light backgrounds */ .light-on-light.no-header-image .logo-wrapper, .light-on-light.contain-header-image .logo-wrapper { color: #444; } /* Adjust logo for dark accents on dark backgrounds */ .dark-on-dark.no-header-image .logo-wrapper, .dark-on-dark.contain-header-image .logo-wrapper { color: #fff; } /* Logged-out compact Tumblr iframe */ .tmblr-iframe-compact .tmblr-iframe--unified-controls { min-width: 100%; background-color: #FAFAFA; } /* Sticky nav colors */ .nav-fixed { background-color: #FAFAFA; } .nav-responsive .inline-nav::after { background-image: linear-gradient(left, rgba(250,250,250, 0) 0%, rgba(250,250,250,1) 100%); background-image: -webkit-linear-gradient(left, rgba(250,250,250, 0) 0%, rgba(250,250,250,1) 100%); background-image: -moz-linear-gradient(left, rgba(250,250,250, 0) 0%, rgba(250,250,250,1) 100%); background-image: -ms-linear-gradient(left, rgba(250,250,250, 0) 0%, rgba(250,250,250,1) 100%); background-image: -o-linear-gradient(left, rgba(250,250,250, 0) 0%, rgba(250,250,250,1) 100%); } @media screen and (max-device-width: 568px) { .header-image.cover { background-image: url(https://66.media.tumblr.com/9791e3ac6b55616ef7caa5d5fffa1886/a7d065b9e5472bd4-b9/s2048x3072/99073094cbce7211a3c690be13d7bda8cca20e58.png); -webkit-background-size: cover; background-size: cover; } .avatar-style-square .user-avatar { -webkit-box-shadow: 0 0 0 3px #FAFAFA; -moz-box-shadow: 0 0 0 3px #FAFAFA; box-shadow: 0 0 0 3px #FAFAFA; } } /* Custom CSS */ {"@type":"SocialMediaPosting","url":"https:\/\/newspunch.tumblr.com\/post\/620381956453122048\/the-2020-red-wave-could-be-starting-already-in","mainEntityOfPage":true,"datePublished":"2020-06-08T18:52:18-04:00","author":"newspunch","image":"https:\/\/66.media.tumblr.com\/77f889677306fee98b68da988fd042be\/df722d4e886b54bc-e8\/s540x810\/4362c9fdf8cd4c361b7bf323ce8a4cab4d6b14b8.png","headline":"The 2020 Red Wave Could Be Starting Already \u2013 In Virginia, Citizens Just Voted 3 Democrats Out Of Office","articleBody":"Democrats won a majority in Virginia\u2019s government. Soon after, they began to push a radical left-wing agenda.\nIt got even worse during the pandemic, as their governor took drastic lockdown steps. Extending them, like many other liberal states.\nBut it looks like their moves may be backfiring. An...","@context":"http:\/\/schema.org"}

News Punch — The 2020 Red Wave Could Be Starting Already – In...

1.5M ratings

277k ratings

See, that’s what the app is perfect for.

Sounds perfect Wahhhh, I don’t wanna

News Punch

The 2020 Red Wave Could Be Starting Already – In Virginia, Citizens Just Voted 3 Democrats Out Of Office

Democrats won a majority in Virginia’s government. Soon after, they began to push a radical left-wing agenda.

It got even worse during the pandemic, as their governor took drastic lockdown steps. Extending them, like many other liberal states.

But it looks like their moves may be backfiring. An election was this week. And voters are striking back hard.

From Daily Caller:

Republican candidates Mark Robertson, Amy Darby, and Steve Claffey all joined incumbent Andrea Oakes in a four-seat GOP sweep, WHSV reported. The three incoming council members replaced Democratic incumbents Erik Curren, Ophie Kier, and James Harrington all almost doubled their vote totals from 2016, yet still lost.

Woah. A Virginia city that went for Obama in both elections just ousted Democrat leaders in a landslide result.

Three Democrat incumbents were voted out, replaced by GOP candidates.

What’s amazing is that all three Democrats got more votes from 2016—but still lost.

That means voters came out in force to back the Republican candidates. What does that tell you?

Reports say that Republican voters came out in numbers close to a governor race, a big election.

Our Take:

Why did voters come out in a May election—during the ongoing crisis—to push out these liberals? I think you know the answer.

According to reports, voters were particularly fired up over the state’s aggressive gun control measures. We’ve covered much of what Virginia’s Democrat lawmakers have tried to pull.

On top of that, it looks like voters have gotten sick and tired of the governor’s COVID-19 lockdowns.

That is a trend we’ve seen in recent special elections. Earlier in the month, two special elections in Wisconsin and California went for Republicans.

Republicans flipped a CA blue seat red. Many point to the strict lockdown measures California’s Democratic leadership endorsed.

All across the country, Americans watch Democrats enforce tough orders that cripple the economy.

Meanwhile, conservative states have safely reopened, and it looks like the virus is mostly under control.

There’s a pretty big difference between both party’s leadership during this crisis. And after all the things Virginia’s Democratic leadership has tried to pull—should we be surprised from this turnout?

But what does this mean for the future of the state? What will happen in November, when more elections in VA take place?

Will this trend continue or will the swamp continue to drown Virginia?

SHARE if you are ready to see a Red Wave this November.

Source: Daily Caller

Jun 8th, 2020

Open in app

Facebook

Tweet

Reddit

Mail

Embed

Permalink

var Optica = {}; Optica.ENDLESS_SCROLLING = true; Optica.SHOW_NAV = false; Optica.LAYOUT = "regular"; Optica.GRID_LAYOUT = (Optica.LAYOUT === 'grid'); Optica.TITLE_COLOR = "#444444"; Optica.ACCENT_COLOR = "#529ECC"; Optica.BACKGROUND_COLOR = "#FAFAFA"; Optica.NU_OPTICA_BLOG_CARDS = true; Optica.RELATED_POSTS_CTA_VARIANTS = [ { variant: "C", text: "See the rest of this Tumblr" }, { variant: "D", text: "See newspunch's whole Tumblr" }, { variant: "E", text: "You scrolled this far. Check out the rest." } ]; Optica.NO_LIKES_VARIANTS = [ "This Tumblr hasn't liked any posts yet.", "This Tumblr doesn't like anything…yet.", "No likes! Sheesh!", "Amazing! This Tumblr doesn't like anything.", "Incredible! This Tumblr doesn't like anything.", "Neat! This Tumblr doesn't like anything.", "Apparently this Tumblr is hard to please.", "Wow! This Tumblr hasn't liked anything ever.", "This Tumblr hasn't liked anything yet. How very intriguing.", "This Tumblr has never met a post it didn't not like." ]; Optica.NO_POSTS_VARIANTS = [ "This Tumblr hasn't made any posts.", "This silly Tumblr hasn't posted anything yet.", "This Tumblr is cool, but empty.", "This Tumblr is content-free.", "This minimalist Tumblr has no posts.", "Meditate for a while on this empty Tumblr.", "Posts? Nah.", "This Tumblr has hardly any posts. \nNone at all, in fact.", "This Tumblr hasn't posted anything." ]; Optica.NO_FOLLOWING_VARIANTS = [ "This Tumblr hasn't followed any other Tumblrs.", "Aw. This Tumblr isn't following anyone.", "Nope, this Tumblr doesn't follow anyone.", "This cool Tumblr doesn't follow anyone.", "This far-out Tumblr doesn't follow anyone.", "This fiercely independent Tumblr doesn't follow anyone.", "This Tumblr doesn't follow anything except for its own rules.", "This Tumblr doesn't really \"follow\" anything." ];

(function(){ var analytics_frame = document.getElementById('ga_target'); var analytics_iframe_loaded; var user_logged_in; var blog_is_nsfw = 'No'; var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent,function(e) { var message = (e.data && e.data.split) ? e.data.split(';') : ''; switch (message[0]) { case 'analytics_iframe_loaded': analytics_iframe_loaded = true; postCSMessage(); postGAMessage(); break; case 'user_logged_in': user_logged_in = message[1]; postGAMessage(); break; } }, false); analytics_frame.src = "https://assets.tumblr.com/analytics.html?_v=9f5febfd57a8a649c598d888f2d9e062#" + "https://newspunch.tumblr.com"; function postGAMessage() { if (analytics_iframe_loaded && user_logged_in) { var is_ajax = false; analytics_frame.contentWindow.postMessage(['tick_google_analytics', is_ajax, user_logged_in, blog_is_nsfw, '/post/620381956453122048/the-2020-red-wave-could-be-starting-already-in?fbclid=IwAR1Ikt_n3UKMHhGep2a__aGpZtb-XKxdb0LtuI7GxPrwG6ZwIzSIWVD95hk\x26route=%2Fpost%2F%3Aid%2F%3Asummary'].join(';'), analytics_frame.src.split('/analytics.html')[0]); } } function postCSMessage() { COMSCORE = true; analytics_frame.contentWindow.postMessage('enable_comscore;' + window.location, analytics_frame.src.split('/analytics.html')[0]); } })(); !function(s){s.src='https://px.srvcs.tumblr.com/impixu?T=1591649709&J=eyJ0eXBlIjoidXJsIiwidXJsIjoiaHR0cDovL25ld3NwdW5jaC50dW1ibHIuY29tL3Bvc3QvNjIwMzgxOTU2NDUzMTIyMDQ4L3RoZS0yMDIwLXJlZC13YXZlLWNvdWxkLWJlLXN0YXJ0aW5nLWFscmVhZHktaW4/ZmJjbGlkPUl3QVIxSWt0X24zVUtNSGhHZXAyYV9fYUdwWnRiLVhLeGRiMEx0dUk3R3hQcndHNlp3SXpTSVdWRDk1aGsiLCJyZXF0eXBlIjowLCJyb3V0ZSI6Ii9wb3N0LzppZC86c3VtbWFyeSJ9&U=DELMMFIAIF&K=0c5830dcbba147aa18c2480dc4785ab8162107a560ead123b17370865a2d932b&R='.replace(/&R=[^&$]*/,'').concat('&R='+escape(document.referrer)).slice(0,2000).replace(/%.?.?$/,'');}(new Image());

!function(s){s.src='https://px.srvcs.tumblr.com/impixu?T=1591649709&J=eyJ0eXBlIjoicG9zdCIsInVybCI6Imh0dHA6Ly9uZXdzcHVuY2gudHVtYmxyLmNvbS9wb3N0LzYyMDM4MTk1NjQ1MzEyMjA0OC90aGUtMjAyMC1yZWQtd2F2ZS1jb3VsZC1iZS1zdGFydGluZy1hbHJlYWR5LWluP2ZiY2xpZD1Jd0FSMUlrdF9uM1VLTUhoR2VwMmFfX2FHcFp0Yi1YS3hkYjBMdHVJN0d4UHJ3RzZad0l6U0lXVkQ5NWhrIiwicmVxdHlwZSI6MCwicm91dGUiOiIvcG9zdC86aWQvOnN1bW1hcnkiLCJwb3N0cyI6W3sicG9zdGlkIjoiNjIwMzgxOTU2NDUzMTIyMDQ4IiwiYmxvZ2lkIjo0OTk4NjczOTUsInNvdXJjZSI6MzN9XX0=&U=KCHJFMAHHG&K=3710a4ac9d0af7874b9d4f2dec171976473922f8077749e79846901e770bbc15&R='.replace(/&R=[^&$]*/,'').concat('&R='+escape(document.referrer)).slice(0,2000).replace(/%.?.?$/,'');}(new Image());

[thebuffyexchange]

Top 8 WordPress Pricing Table Plugins for Business Websites

Pricing tables are essential for both independent points of arrival, as they frequently incorporate an invitation to take action catches and give far-reaching data about the arrangement.

Additionally, if there should be an occurrence of items and administrations with a few estimating plans, it is for all intents and purposes difficult to actualize a not too bad invitation to take action without applying it to an evaluating table.

With regards to WordPress sites, the most straightforward approach to add such a table is to introduce an appropriate WordPress module. Remember that all business WordPress subjects on the TemplateMonster commercial center have adjustable valuing tables pre-introduced and flawlessly fused into their item introduction pages.

Additionally, in the event that you need other basic modules to be incorporated with your WordPress site, you can spare a huge amount of time by utilizing our module establishment administration.

Furthermore, presently, let me acquaint with you 15 of the most well known and high-appraised WordPress modules for adding responsive estimating tables to your site.

JETELEMENTS PRICING TABLES

The JetElements Pricing Tables module is one of the numerous reasons why sites based on Elementor give astonishing UI.

Some portion of the JetElements addon, this apparatus makes Pricing Tables in a couple of snaps and permits modifying them continuously. JetElements module was made for Elementor live page manufacturer, and it enhances it. Presently you can customize your business site to the smallest subtleties without composing code.

The arrangement and personalization process for JetElements Pricing Tables is overly natural.

Pricing TABLE – ARPRICE

This Pricing table plugin generator by ARPrice gives you an incredible constant table editorial manager jam-pressed with highlights. It is completely responsive, underpins Google Fonts and incorporates a live see for both work area and portable forms of your tables.

With respect to the top-notch rendition, it flaunts expanded customization alternatives, switches catches, incorporated examination and more than 200 pre-made table styles. It is additionally good with Visual Composer.

Simple PRICING TABLES

Simple Pricing Tables is a well-known WordPress module for business sites. After you’ve made your estimating table, you can consolidate you into any page or post utilizing a shortcode. You can utilize your very own CSS code, which implies that the module will work for any subject. It is additionally conceivable to feature a specific section by stamping it as included and somewhat changing its structure.

The exceptional rendition offers, significantly more, choices: 10 expert plans, broadened customization, estimating flips, Google Analytics joining, and that’s just the beginning.

Valuing TABLE BY SUPSYSTIC

This valuing table WordPress module is provided with a drag&drop table developer. You can adjust the structure of your estimating squares, include pictures and recordings, select from various catch styles, and so on. The module additionally supports float activities and identifications for highlighted segments. Furthermore, there is a paid form, which comes packaged with a pack of premium layouts.

RESPONSIVE PRICING TABLE

Responsive Pricing Table by WP Darko is a free WordPress module for corporate sites and greeting pages. You can pick the shade of any component of your table and the cash, include any number of highlights for any arrangement and execute symbols.

The free form is boundless, with the exception of it needs two highlights accessible just in the PRO form – a lot of premade skins tooltips.

WRC PRICING TABLES

This free WordPress module empowers you to make completely adjustable estimating tables for your site and afterward effectively alter them in a drag&drop way. It takes into consideration making boundless component lines and bundle sections, revising lines and segments, utilizing your own CSS code, and then some. You can likewise change the shade of substance squares and strips utilizing a shading picker.

The top-notch form of this module incorporates 11 pre-planned skins, the capacity to import and fare tables, PayPal catch joining and valuing flips.

Valuing TABLE BY PICKPLUGINS

This adaptable WordPress module was intended to enable you to make proficient valuing tables for your items and administrations. The module comes delivered with 5 subjects and huge amounts of alternatives. You will probably include custom pictures and strips, insert recordings from YouTube and Vimeo and incorporate various highlighted sections.

The tables can be joined into your site by means of a shortcode.

KENTO PRICING TABLES FREE

This one is a free WordPress value examination module with the help of shortcodes. It is fabricated utilizing just CSS and HTML. No JavaScript is utilized, so your evaluating tables will have better execution and similarity crosswise over cell phones.

The superior variant of this module offers 5 premium subjects, custom text dimensions, the likelihood to feature a highlighted segment and considerably progressively visual customization highlights.

CONCLUSION

With these free WordPress modules, you will be prepared to create a well-changing over the point of arrival to sell your merchandise and enterprises. The greater part of them likewise offers a paid form with premium choices, which are not constantly essential but rather merit considering.  

What modules do you use to improve your business site? It would be ideal if you leave your remarks underneath.

If you require more information then click on the Read More button.

[themesfores]

Unlimited Elements for Elementor (Premium) v1.5.114

https://themesfores.com/product/unlimited-elements-for-elementor-premium/ Unlimited Elements for Elementor (Premium) v1.5.114 Power up your page builder using our easy-to-use & creative widget library. Make your next web design project look prettier than ever before with Unlimited Elements. Each widget was handcrafted by our experts. Unlimited Elements for Elementor Pro is a plugin that adds additional widgets and features to the Elementor Pro page builder plugin for WordPress. Unlimited Elements for Elementor Pro is designed to make it easier for users of the Elementor Pro plugin to create professional-looking websites with a wide range of customization options. It is available for purchase on the Elementor website. Core Features of Unlimited Elements for Elementor Pro Plugin Additional widgets for creating sliders, carousels, team members, pricing tables, and more Custom post types and taxonomies for creating custom content types and organizing them in WordPress Custom templates for single posts, pages, and custom post types Custom form styles for the Elementor Pro Form widget Integration with popular WordPress plugins such as WPBakery Page Builder, WooCommerce, and Gravity Forms Unlimited Elements for Elementor Page Builder features 700+ unique addons with infinite possibilities One click import layout from Elementor Page Builder page Import only the addons you want to use Lifetime Updates 24/7 Support on hand to assist you Well Documented Our addon library is growing each day and you will get all our updates Ability to customize the HTML and CSS of the addons easily Simple Sliders (20) Banners (24) Pricing Tables (21) Content Tabs (22) Testimonials & Reviews (23) Carousels (21) Content Boxes (43) Team Members (26) Website Headers (20) iHover Effects (20) Icon Hover Effects (9) Link Hover Effects (21) Buttons (11) Content Accordions (23) Timer Countdowns (23) Content Tabs (22) Food Menus (24) Social Network Icons (21) Product Boxes (26) Google Charts (7) Video Teaser Popups (20) Widgets (10) Flip Boxes (15) Video Galleries (7) Opening Hours (15) Mp3 Audio Players (15) Statistic Counters (23) Bullet Lists (25) Footers (20) Unlimited Elements for Elementor (Premium) Please note that any digital products presented on this website do not contain malicious code, viruses or advertising. https://themesfores.com/product/unlimited-elements-for-elementor-premium/ #Addon #ElementorPlugins #WordpressPlugins

[avanesbitt537-blog]

‎FLAC MP3 Converter On The Mac App Store

FLAC (Free Lossless Audio Codec) is a measurement-compressed however lossless digital audio format with smaller file measurement than uncompressed lossless codecs like WAV FLAC is presently nicely-supported by many software purposes and hardware assist is rising. The bitrate of the MP3s this program makes is so bad I might quite put 500MB of FLACs on my cellphone than take heed to the horse crap this program spits out. After trying many purposes, we realized that VLC Media Player is able to changing audio and video information, too, which is great information contemplating we already had the software put in and we guess most of you do, too. Usually FLAC files are used by music fanatics, audiophiles, music producers, sound editors, and audio engineers, but there are different uses for them as effectively, virtually at all times related to both recording, modifying, or listening to absolutely the highest high quality audio version of a track or audio monitor. HandBrake has a few benefits over the Lion Automator and iTunes strategies. The primary is that it could possibly convert video files not natively supported by the Mac OS. You'll be able to, for instance, convertavi andmkv information. It also means that you can batch process files. Just select a file you wan to transform and click the Add To Queue button at the prime of the HandBrake window. Then add every other recordsdata you wish to convert, utilizing this same Add To Queue button. Once you're ready, simply click Begin. HandBrake will set about converting all the files within the queue. Run Free FLAC to MP3 Converter firstly, merely click on the "Add Media Recordsdata" button to pick out audio recordsdata out of your onerous drive. You can even add batch audio information by clicking menu "File -> Batch Add Media Recordsdata". Step 1. To free convert FLAC to MP3 using Video Converter Free, download, set up and launch the software program. Make sure that to select the Convert option earlier than utilizing the software program. Add information utilizing the Add Information choice or simply drag and drop the information on the primary interface. FLAC, or Free Lossless Audio Codec, is an audio format that compresses music files without losing any knowledge. However, as is the case with most lossless codecs, the information are often quite giant and may fill your storage space with only a few albums. Additionally, the FLAC format is not broadly supported on cell devices, so you may need to flip your FLAC recordsdata into the extra widely supported MP3 format to be on the secure facet. The easiest option to get this accomplished is through the use of Movavi Video Converter.

Large-scale digital media distributors, resembling Apple and Amazon, use DRM (Digital Rights Administration) encryption for copyright protection and to authenticate the media player you authorize to play the encrypted information. Once you purchase an album or track from iTunes, the DRM-protected file can solely play on an Apple machine that's related together with your Apple ID. If you want to play that music or album on an Android phone or pill, it's good to use a copy of the file that doesn't have DRM encryption. You possibly can tell if a file is encrypted or protected by proper-clicking on it and consulting its properties. Now go right down to Profile drop-down menu at the bottom of the window to reveal the export format record, and then select MP3 - MPEG Layer-three Audio (.mp3) from the Normal Audio checklist. With this simple-to-use converter, you'll be able to simply convert any Spotify music or flac to mp3 online playlist in simply four steps while retaining a hundred% unique high quality and ID3 tags after conversion. After that, you'll be able to freely take pleasure in Spotify music on any machine as you want. Earlier than you moved towards online instruments, we wish to introduce you to the best and probably the most beneficial desktop software for flac to mp3 online to MP3 conversion. It's Wondershare Video Converter Final which has many perks similar to video file format conversions. When put next with any free FLAC to MP3 converter online, you needn't preserve doing the tedious job of loading a web page, as the software program performs any operation swiftly. Your ALAC recordsdata possible stayed relatively small because there wasn't a lot information there for them to encode. If you had began with a lossless source (like a CD or vinyl) and encoded them to ALAC, then converted them to MP3, you'd see the files shrink so much. After I rip a CD to ALAC, it will normally use between 250mb to 750mb for a full album. My relatively small library is getting near 40gb already. Slower converting velocity than desktop FLAC converters particularly when changing a large or a number of recordsdata. WMA: Windows Media Audio is Microsoft's personal proprietary format, much like MP3 or AAC. It doesn't actually offer any benefits over the opposite formats, and it's also not as effectively supported. There's very little reason to rip your CDs into this format. Some audiophiles claim that FLAC provides you with the close to audio CD sound high quality whereas compressing the file measurement to more than 50%, making it the almost perfect" sound compression algorithm out there immediately. For those who hold around people with golden ears, you'll probably stumble into FLAC lots. Supports wide range of audio file formats comparable to AC3, AAC, MP3, FLAC, M4A, MKA, OGG, WAV, APE and so forth. A minimum of it factors out what is very important: good recordings, good original information, good converters, and, to keep away from jitter, a very good clock for the converter. To FLAC Converter can encode the unlimited number of media information and folders. Just add your audio and video for conversion. The application will maintain folders' construction, authentic tags and file names for all output MP3s. You can be supplied with detailed progress of every file's conversion and notified when encoding of all files is finished.It can be MP3, FLAC, OGG, WAV, WMV or any of the supported formats. Hello-fi: Of course, the largest benefit to FLAC recordsdata is that they're ideally suited to listening on a hi-fi machine. Allow you to regulate bitrate, sample value, channel of a audio file in order that you may reduce file dimension whereas holding audio prime quality as excessive as doable. Convert your FLAC recordsdata to MP3 audio. Bypass DVD CSS, Area Code, Multi-angle, Disney X-Challenge DRM and other advanced copy protections. Extract audio from DVD with 1:1 authentic quality preserved and convert the audio to MP3, FLAC, WAV, OGG, AAC and more with simple clicks.