{"id":3341,"date":"2026-04-18T20:21:04","date_gmt":"2026-04-18T20:21:04","guid":{"rendered":"https:\/\/erikscode.space\/?p=3341"},"modified":"2026-04-18T20:33:03","modified_gmt":"2026-04-18T20:33:03","slug":"how-to-create-a-sparkly-spoiler-effect-like-the-one-in-threads-mobile-app","status":"publish","type":"post","link":"https:\/\/erikscode.space\/index.php\/2026\/04\/18\/how-to-create-a-sparkly-spoiler-effect-like-the-one-in-threads-mobile-app\/","title":{"rendered":"How to Create a Sparkly-Spoiler Effect like the one in Threads Mobile App"},"content":{"rendered":"\n

If you use Meta’s Threads app on a mobile device, you may have noticed an interesting effect: the spoiler tag that hides text behind a sparkly veil. In this article, I will show you how to implement this effect in the browser using HTML, CSS, and JavaScript.<\/p>\n\n\nRead more: How to Create a Sparkly-Spoiler Effect like the one in Threads Mobile App<\/span><\/a>\n\n\n

NOTE:<\/em><\/strong> You can scroll to the bottom of this article to find the completed HTML, CSS, and JavaScript code if you don’t want to read the whole article.<\/p>\n\n\n\n

The Spoiler Effect on Threads in a Nutshell<\/h1>\n\n\n\n

If you’re unfamiliar with the “spoiler” tag, it is a Threads feature in which users can selectively hide part of their post until a user is ready to see it. Look at my example below where I am about to post “Highlight the word “hello” to mark as a spoiler!”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Notice how I have highlighted the word “hello” and see a button that says “Mark spoiler.” I click that and then post the thread. See how it looks on my desktop browser:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The word “hello” is now obscured by a gray bar. If someone reading my post wants to see the word I’ve hidden, they will have to click on the gray bar.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

The above screenshot is what a reader will see after clicking the gray bar; they can now see the word that I’ve hidden. <\/p>\n\n\n\n

In a nutshell, that is how “Mark spoiler” works in Threads; the author selects some text to selectively hide and the user must intentionally perform an action to reveal the hidden text. The intended utility of this feature is for when the user wants to talk about a plot twist or conclusion in a story without giving away\u2013or “spoiling”–the surprise for readers who haven’t yet gotten to that part. It protects readers from passively reading a spoiler by forcing them to deliberately reveal the hidden text.<\/p>\n\n\n\n

Note, however, this spoiler bar is a little more fun on the mobile app. The next screenshot shows the same post but from the mobile Threads app:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Notice how instead of a gray bar, it’s now a sparkling obfuscation. How cool! This sparkly spoiler effect is what this article will teach you how to do.<\/p>\n\n\n\n

Actual Spoiler Alert!<\/h1>\n\n\n\n

I am going to be talking about a plot twist from Star Wars: Episode V – The Empire Strikes Back. Even though the movie came out in 1980, it’s possible you haven’t seen it yet and I would hate to ruin the surprise for you. If you plan on watching this movie and have no clue about its plot, this article is definitely going to spoil it for you!<\/p>\n\n\n\n

Continue at your own risk!<\/p>\n\n\n\n

How to Achieve this Effect<\/h1>\n\n\n\n

First, we will plan out how to implement this effect before getting into the technical details. Here are the things we need to do:<\/p>\n\n\n\n

    \n
  1. Mark text as spoiler<\/li>\n\n\n\n
  2. Create the effect<\/li>\n\n\n\n
  3. Apply that effect to appropriately tagged text<\/li>\n\n\n\n
  4. Remove the effect when a user clicks<\/li>\n<\/ol>\n\n\n\n

    Let’s begin!<\/p>\n\n\n\n

    Mark text as spoiler<\/h2>\n\n\n\n

    First, let’s create an HTML file called “spoiler_text.html” and fill it out with some standard HTML boilerplate code:<\/p>\n\n\n\n

    \n
    <body>\n    <p>\n        The biggest plot twist of all time is:\n        <span class=\"spoiler\">\n            Darth Vader is Luke Skywalker's father!\n        <\/span>\n    <\/p>\n<\/body><\/code><\/pre>\n<\/div>\n\n\n\n
    This is just a basic HTML page in which we’ve added some text about the biggest plot twist of all time. Right now, the page is pretty bare bones and should look like this in your browser:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Since the background and text in Threads is more of a dark theme, let’s apply that to our HTML page. This isn’t part of the spoilers effect, it’s just something that will make it a little more pleasant to look at later. Let’s create a CSS file called style.css and make the page a little easier to look at. Here’s what I came up with:<\/p>\n\n\n\n
    :root {\n\u00a0\u00a0--bg: #0f1115;\n\u00a0\u00a0--text: #f4f7fb;\n}\n\nbody {\n\u00a0\u00a0min-height: 25vh;\n\u00a0\u00a0display: grid;\n\u00a0\u00a0place-items: center;\n\u00a0\u00a0background: var(--bg);\n\u00a0\u00a0color: var(--text);\n}<\/code><\/pre>\n\n\n\n
    First, I create a :root<\/code> rule to store some CSS variables. As of right now, we only have two variables, bg<\/code> and text<\/code>, so we could just use the values instead of variables in the body rule. However, later in this project we’re going to have a few more variables and I think it’s best to keep them all in one place, so we’ll start putting our variables in the :root<\/code> rule early.<\/p>\n\n\n\n
    Next, I set the min-height<\/code>, display, and place-items<\/code> values for the web page. The specific values I’ve added in the above CSS will make the text appear in the middle and slightly below the very top of the browser window. Finally, I use the bg<\/code> and text<\/code> variables to set the background and color attributes for the webpage. Now, just below the <title><\/code> tag in the HTML file, I add this line:<\/p>\n\n\n\n
    <link rel=\"stylesheet\" href=\"style.css\" \/><\/code><\/pre>\n\n\n\n
    And now the browser should look like this:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    Feel free to adjust the bg and text variables so that the page you’re looking at is aesthetically pleasing to you.<\/p>\n\n\n\n
    Now, we need to mark the spoiler text somehow. For now, I’m going to put the spoiler part in a span tag of class “spoiler.” Doing so won’t actually make anything change visually yet, we’re just preemptively marking the spoiler text before creating the effect. The body tag of the HTML file should now look like this:<\/p>\n\n\n\n
    <body>\n\u00a0\u00a0\u00a0\u00a0<p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0The biggest plot twist of all time is:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Darth Vader is Luke Skywalker's father!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\n\u00a0\u00a0\u00a0\u00a0<\/p>\n<\/body><\/code><\/pre>\n\n\n\n
    Now, let’s create the effect!<\/p>\n\n\n\n
    Create the Effect<\/h2>\n\n\n\n
    To start creating the effect, we’ll take a small step by just writing a little CSS to blur out the tagged text. In our style.css file, we’ll need to make a rule for the spoiler class. We’ll make use of the built-in CSS blur<\/a> function and make the cursor a pointer. Here’s how my css for the spoiler class looks:<\/p>\n\n\n\n
    .spoiler {\n\u00a0\u00a0filter: blur(7px);\n\u00a0\u00a0cursor: pointer;\n\u00a0\u00a0position: relative;\n}<\/code><\/pre>\n\n\n\n
    With this CSS code, we set the filter<\/code> attribute on the spoiler<\/code> class to blur(7px)<\/code> and set the cursor<\/code> attribute to pointer<\/code>. As you might guess from the blur<\/code> function, using it to set a filter<\/code> value makes the element blurry. The number you pass to the function defines the radius of the blur; the higher the number, the larger the blur effect. We set the cursor<\/code> attribute to pointer<\/code> so that when the user hovers their mouse over the effect, the cursor changes to a pointer and lets them know the effect will do something if they click on it.<\/p>\n\n\n\n
    Additionally, we set the position<\/code> attribute to relative so that the span doesn’t interfere with any of the other elements in the page<\/p>\n\n\n\n
    With the new CSS, the page in the browser should now look like this:<\/p>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    The above screenshot shows that our spoiler text is now blurred out thanks to the filter: blur(7px)<\/code> line in our CSS.<\/p>\n\n\n\n
    Before we can finally build the sparkle animation and the toggle feature, we have to make a few adjustments to the structure of our HTML. We should actually put two more span elements inside of this spoiler span: one to wrap the content, and one to contain the blur effect. This step will make implementing the toggle effect along with the sparkle animation a little easier. <\/p>\n\n\n\n
    I will create one span class called spoiler-content<\/code>, and one called spoiler-blur<\/code>. The spoiler-content<\/code> span will wrap the text, while the spoiler-content<\/code> span won’t wrap anything, it will just sit inside the spoiler span. Here’s what the HTMLin the body tag looks like now:<\/p>\n\n\n\n
    <p>\n\u00a0\u00a0\u00a0\u00a0The biggest plot twist of all time is:\n\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler\" data-hidden=\"true\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler-content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Darth Vader is Luke Skywalker's father!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler-blur\" \/>\n\u00a0\u00a0\u00a0\u00a0<\/span>\n<\/p><\/code><\/pre>\n\n\n\n
    And the CSS now has to be adjusted as such:<\/p>\n\n\n\n
    .spoiler {\n\u00a0\u00a0cursor: pointer;\n\u00a0\u00a0position: relative;\n}\n\n.spoiler[data-hidden=\"true\"] .spoiler-content {\n\u00a0\u00a0filter: blur(7px);\n}<\/code><\/pre>\n\n\n\n
    With these updates, I’m making use of the data-hidden<\/code> attribute by setting it to “true” on the spoiler span and then creating a CSS rule that applies the blur to any spoiler-content<\/code> span inside of the spoiler<\/code> span. We will later use this attribute when we create the toggling feature of this effect.<\/p>\n\n\n\n
    Now, we’re ready to start adding the sparkle effect.<\/p>\n\n\n\n
    Adding the Sparkle Effect<\/h3>\n\n\n\n
    To add the sparkle effect, we’re going to make use of two things: CSS key frames<\/a> and some JavaScript. The general strategy will be like this:<\/p>\n\n\n\n
      \n
    1. Create a CSS spark<\/code> class to make each individual sparkle-blur<\/code> span covering the spoiler text<\/li>\n\n\n\n
    2. Append several spark<\/code> elements as children to the spoiler-blur<\/code> span with JavaScript\n
        \n
      1. We will create a function for generating random numbers<\/li>\n\n\n\n
      2. We will set a few custom properties on the element with random values (from the random function mentioned above) that will be used in the CSS animations\/keyframes to create the overall “sparkle effect”<\/li>\n<\/ol>\n<\/li>\n\n\n\n
      3. Create a twinkle CSS keyframe that will make the sparks appear to be twinkling<\/li>\n\n\n\n
      4. Create a drift CSS keyframe that will make the sparks appear to be moving<\/li>\n<\/ol>\n\n\n\n
        First, we’ll create the spark<\/code> class with just a few of its necessary properties. I defined mine like this:<\/p>\n\n\n\n
        .spark {\n\u00a0\u00a0position: absolute;\n\u00a0\u00a0width: 4px;\n\u00a0\u00a0height: 4px;\n\u00a0\u00a0border-radius: 50%;\n\u00a0\u00a0background: var(--spoiler-dot);\n}<\/code><\/pre>\n\n\n\n
        The position: absolute<\/code> line will allow each individual sparkle to take up space in its overlay (the spoiler<\/code> span) without disrupting the position of other elements. The three lines for width<\/code>, height<\/code>, and border-radius<\/code> make the sparkles into perfect circles. If you prefer squares, you can remove the border-radius<\/code> line, if you like vertical lines, you can play with the width<\/code> and height<\/code> properties. The background<\/code> uses a CSS variable that you can set in the :root<\/code> rule, I set mine to a white-ish effect like so: --spoiler-dot: rgba(255,255,255,0.85);<\/code>.<\/p>\n\n\n\n
        This element defines the style for each individual “sparkle” in our sparkly-spoiler effect. We’ll need to make several sparkle<\/code> elements of random sizes and append them to random places on the spoiler-blur<\/code> span element. Create a JavaScript file and call it sparkle.js<\/code> then import it into the HTML’s body like this:<\/p>\n\n\n\n
        <script src=\"sparkle.js\"><\/script><\/code><\/pre>\n\n\n\n
        NOTE:<\/strong> You must put this line inside the body tag of the HTML, it won’t work if you put it in the head tag.<\/p>\n\n\n\n
        Now, in sparkle.js<\/code><\/a>, we’ll start by making a convenience function for returning random values, since we’ll rely on randomness to get the sparkle effect. I wrote my random<\/code> function to take a rscale<\/code> variable and multiply it by a number generated by the Math.random<\/code> function:<\/p>\n\n\n\n
        function random(rscale) {\n\u00a0\u00a0\u00a0\u00a0return Math.random() * rscale;\n}<\/code><\/pre>\n\n\n\n
        Next, we’ll make a function called buildSparkles<\/code> that takes in a span element, and the number of sparkles we want to create. Each sparkle we create will be created with a starting 2-dimensional coordinate (an x and y representing the left and top properties), an ending 2-dimensional coordinate, a duration of time in which we want the sparkle to move between those two coordinates, a duration of time for which the sparkle should “twinkle”, and a scale variable to control size; all of these values will be randomly created for each sparkle.<\/p>\n\n\n\n
        Once each sparkle<\/code> element is built, we’ll append it to spoiler-blur<\/code> span we passed to the function. Here’s how I wrote my function:<\/p>\n\n\n\n
        function buildSparkles(spoilerBlurSpan, sparkleCount) {\n\u00a0\u00a0\u00a0\u00a0for (let i = 0; i < sparkleCount; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const s = document.createElement(\"span\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.className = \"spark\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const x0 = random(100);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const y0 = random(100);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const x1 = Math.max(0, Math.min(100, x0 + random(18)));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const y1 = Math.max(0, Math.min(100, y0 + random(14)));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.left = `${x0}%`;\ns.style.top = `${y0}%`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--x0\", \"0px\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--y0\", \"0px\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--x1\", `${x1 - x0}px`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--y1\", `${y1 - y0}px`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--dur\", `${random(60)}s`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--twinkle\", `${random(1.2)}s`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--scale\", `${random(1.5)}`);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0spoilerBlurSpan.appendChild(s)\n\u00a0\u00a0\u00a0\u00a0}\n}<\/code><\/pre>\n\n\n\n
        In the function signature, we take spoilerBlurSpan<\/code> as the first argument. This will be a span somewhere on the web page that has been marked as containing spoiler text. We also take sparkleCount<\/code>, which is how many sparkles we want to put on one span. Then, we enter the for<\/code> loop.<\/p>\n\n\n\n
        Each iteration of the for<\/code> loop creates one spark<\/code> element. The first two lines create a span element and assign it the class name spark<\/code>.<\/p>\n\n\n\n
        Next, we set x0<\/code>, y0<\/code>, x1<\/code>, and y1<\/code>; these variables are basically two sets of random x, y coordinates. Later, we will create a CSS animation called drift that will make the sparkle<\/code> move between those two coordinates.<\/p>\n\n\n\n
        The lines setting left<\/code> and top<\/code> are putting span elements at the randomly generated x and y coordinates we just generated. The next four setProperty<\/code> lines are assigning the properties and initial values of x0<\/code>, y0<\/code>, x1<\/code>, and y1<\/code> on the sparkle<\/code> span we just created. The need for these properties will become clear in a bit when we create the CSS animations.<\/p>\n\n\n\n
        Finally, we use the last three lines to set properties called dur<\/code>, twinkle<\/code>, and scale<\/code>. We have to set these properties and their initial values to be used by the CSS animation we’re about to create. The dur<\/code> property is going to be used to control the duration of time a sparkle<\/code> spends moving between its two x,y coordinates. The twinkle<\/code> property is going to control the “speed” at which each sparkle twinkles (switches between low and high opacity). Finally, the scale<\/code> property is just going to impact the size of each twinkle.<\/p>\n\n\n\n
        After setting all these properties, we then use the built-inappendChild<\/code> method to add the newly created sparkle<\/code> span to the spoilerBlurSpan<\/code> we got in the function signature.<\/p>\n\n\n\n
        Finally, we end the sparkle.js<\/code> file with a few more lines:<\/p>\n\n\n\n
        function wireSpoiler(spoilerBlurSpan) {\n\u00a0\u00a0\u00a0\u00a0buildSparkles(spoilerBlurSpan, 75);\n}\n\ndocument.querySelectorAll(\".spoiler-blur\").forEach(wireSpoiler);<\/code><\/pre>\n\n\n\n
        We create one more function called wireSpoiler<\/code> that takes a spoilerBlurSpan<\/code> as an argument so that it can send it to the spoilerBlurSpan<\/code> function along with the number of sparkles to make–in the above example, 75.<\/p>\n\n\n\n
        Finally, we use querySelectorAll<\/code> to get all spans on the web page of the class spoiler-blur<\/code> and pass it to the wireSpoiler<\/code> method. This ensures that every single spoiler<\/code> span on our page will get the sparkle-effect, even though we only have one spoiler span on our page.<\/p>\n\n\n\n
        Now, we move to the CSS.<\/p>\n\n\n\n
        First, lets create the animations using @keyframes<\/code>. We’ll create two, drift<\/code> and twinkle<\/code>. Add this CSS to the bottom of your style.css<\/code> file:<\/p>\n\n\n\n
        @keyframes drift {\n\u00a0\u00a0from {\n\u00a0\u00a0\u00a0\u00a0transform: translate(var(--x0), var(--y0)) scale(var(--scale));\n\u00a0\u00a0}\n\u00a0\u00a0to {\n\u00a0\u00a0\u00a0\u00a0transform: translate(var(--x1), var(--y1)) scale(var(--scale));\n\u00a0\u00a0}\n}\n\n@keyframes twinkle {\n\u00a0\u00a0from { opacity: 0.25; }\n\u00a0\u00a0to \u00a0 { opacity: 0.95; }\n}<\/code><\/pre>\n\n\n\n
        The drift keyframe makes use of the CSS function translate<\/a> which moves an element to a given location. Since this will be used in an animation property later, we give it a from<\/code> and to<\/code> property to define the two positions the element should be moved between. In this case we are using the variables x0<\/code> and y0<\/code> to define the sparkle<\/code>‘s starting point, and x1<\/code> and y1<\/code> as their ending point. Remember, we randomly generated these values in the JavaScript file earlier, so each spark<\/code> we attach to the spoiler-blur<\/code> element will have its own starting and ending point.<\/p>\n\n\n\n
        The twinkle<\/code> keyframe just defines an opacity value for the spark elements to oscillate between. Opacity is the level of an element’s transparency, so going between a low and high value gives the illusion that the element is twinkling.<\/p>\n\n\n\n
        Now, we update the spark<\/code> element’s CSS to include these keyframes as animations. The element’s entire CSS rule should look like this:<\/p>\n\n\n\n
        .spark {\n\u00a0\u00a0position: absolute;\n\u00a0\u00a0width: 4px;\n\u00a0\u00a0height: 4px;\n\u00a0\u00a0border-radius: 50%;\n\u00a0\u00a0background: var(--spoiler-dot);\n\u00a0\u00a0animation:\n\u00a0\u00a0\u00a0\u00a0drift var(--dur) linear infinite,\n\u00a0\u00a0\u00a0\u00a0twinkle var(--twinkle) ease-in-out infinite alternate;\n}<\/code><\/pre>\n\n\n\n
        The change here is the addition of animation<\/code> to the spark<\/code> class and adding drift<\/code> and twinkle<\/code>. For drift<\/code>, we pass the randomly-generated dur<\/code> value we defined in the JavaScript; this value defines how long it takes the spark to move from its starting coordinates to its ending coordinates. We also pass the arguments linear<\/code> and infinite<\/code> to the animation, ensuring the movement is in a straight line and repeats as long as the page is loaded.<\/p>\n\n\n\n
        Similarly, we pass the randomly-generated twinkle<\/code> variable to the twinkle<\/code> keyframe animation, this variable defines the amount of time it takes the spark to go from its starting opacity to its ending opacity. The alternate<\/code> argument ensures the opacity value doesn’t “start over” once it reaches its ending opacity and instead eases back to the starting value.<\/p>\n\n\n\n
        With this final addition, we should have a nice sparkly veil over our spoiler content. Here’s what mine looks like:<\/p>\n\n\n\n
        \"\"<\/figure>\n\n\n\n
        Note that since we are randomly generating a lot of values, your example might not look exactly like mine, and if you refresh the page, it’ll look different again. But as long as you see sparkles twinkling and drifting over your blurred-out spoiler text, you’ve done everything right so far!<\/p>\n\n\n\n
        The last thing to do is add the toggle effect!<\/p>\n\n\n\n
        Adding the Toggle Effect<\/h3>\n\n\n\n
        The point of the spoiler tag is to prevent people from seeing something they’re not ready to see. But for users that are willing to risk spoiling a piece of media, we have to add the ability to remove the sparkly veil and reveal the hidden text. We will add that effect now.<\/p>\n\n\n\n
        The strategy for how we will do this is as follows:<\/p>\n\n\n\n
          \n
        1. Add a function that sets the spoiler<\/code> span’s data-hidden<\/code> attribute to the opposite of what it currently is (if it’s true, set it to false and vice versa)<\/li>\n\n\n\n
        2. Add this function to the “click” event listener on the spoiler<\/code> span<\/li>\n\n\n\n
        3. Update the CSS of attributes inside of a spoiler<\/code> span with a data-hidden=\"false\"<\/code> attribute<\/li>\n<\/ol>\n\n\n\n
          Part one and two are going to happen simultaneously inside of the wireSpoiler<\/code> function. The first thing we’ll do is get the spoiler-blur<\/code> element’s parent element (which should be the spoiler<\/code> span). This is accomplished via this one JavaScript line:<\/p>\n\n\n\n
          let spoilerSpan = spoilerBlurSpan.parentElement;<\/code><\/pre>\n\n\n\n
          Now, just below that line, we’ll create a function called toggle<\/code>. This function will get the data-hidden<\/code> attribute of the spoiler<\/code> and set a variable called hidden<\/code> to the opposite value. Then, we’ll use the setAttribute<\/code> method to set data-hidden<\/code> to the value of the new hidden<\/code> variable. This is what is meant by “toggling.”<\/p>\n\n\n\n
          Finally, we’ll use the addEventListener<\/code> method to add the toggle method to that element’s click event. Altogether, the wireSpoiler<\/code> function should now look like this:<\/p>\n\n\n\n
          function wireSpoiler(spoilerBlurSpan) {\n\u00a0\u00a0\u00a0\u00a0buildSparkles(spoilerBlurSpan, 75);\n\u00a0\u00a0\u00a0\u00a0let spoilerSpan = spoilerBlurSpan.parentElement;\n\n\u00a0\u00a0\u00a0\u00a0function toggle() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const hidden = spoilerSpan.getAttribute(\"data-hidden\") === \"true\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0spoilerSpan.setAttribute(\"data-hidden\", String(!hidden))\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0spoilerSpan.addEventListener(\"click\", toggle);\n}<\/code><\/pre>\n\n\n\n
          In the above code added a few lines to the wireSpoiler<\/code> function. First,\u00a0 we got the spoilerBlur<\/code> element’s parent element, which should be the spoiler<\/code> span. Then, we create a toggle<\/code> function, the first line of which grabs the data-hidden<\/code> attribute’s value and checks if it is true. Since we wrote this line in the HTML:<\/p>\n\n\n\n
          <span class=\"spoiler\" data-hidden=\"true\"><\/code><\/pre>\n\n\n\n
          The value will be the string value \"true\"<\/code> when the web page initially loads, meaning our hidden<\/code> variable’s value will be the boolean value<\/code> true.<\/p>\n\n\n\n
          On the next line, we set the attribute to the string representation of whatever the opposite of that value is by using !hidden<\/code>. The !<\/code> operator negates whatever variable is next to it. So !true<\/code> (read “not true”) becomes false<\/code> and !false<\/code> (read “not false”) becomes true<\/code>.<\/p>\n\n\n\n
          Finally, outside of the toggle<\/code> function, we use the addEventListener<\/code> method to add the toggle<\/code> function to the click<\/code> event, meaning this function will run any time the spoiler span is clicked.<\/p>\n\n\n\n
          As of right now, clicking the spoiler<\/code> tag will just change its data-hidden<\/code> attribute between true<\/code> and false<\/code>. You can view the element in your browser and watch the data-hidden<\/code> value in the HTML change every time you click it. To actually toggle the blur effect on and off, we need to update the CSS and tell elements inside of spoiler<\/code> elements with data-hidden<\/code> attributes of true<\/code> to behave a certain way.<\/p>\n\n\n\n
          We do this by making a block of rules for all spark<\/code> elements inside of a spoiler<\/code> span whose data-hidden<\/code> attribute is false. We’ll do this by adding the following to our CSS file:<\/p>\n\n\n\n
          .spoiler[data-hidden=\"false\"] .spark {\n\u00a0\u00a0animation-play-state: paused;\n\u00a0\u00a0display: none;\n}<\/code><\/pre>\n\n\n\n
          The code above targets only those spark<\/code> elements inside of a spoiler element with the data-hidden<\/code> value of \"false\"<\/code>. Then, we set the animation-play-state<\/code> to paused<\/code>, this means the sparkle will stop where it is. We also set the display<\/code> attribute to none<\/code>, which essentially hides the sparkle.<\/p>\n\n\n\n
          Since clicking the spoiler<\/code> tag will transition its data-hidden<\/code> value to false<\/code> if it’s already true, the new rules we wrote above will kick in on all the spark<\/code> spans, essentially hiding them. It will also unblur the text inside of spoiler-content<\/code> since we set the filter<\/code> attribute to blur(7px)<\/code> only in the rule for a data-hidden=\"true\" <\/code>element.<\/p>\n\n\n\n
          With this final update, you should now be able to toggle the blur on and off in the web page! Refresh your browser and click the blurry spoiler text to see the effect in action.<\/p>\n\n\n\n
          On Your Own<\/h1>\n\n\n\n
          Now that you have the basic ideas down for implementing the spoiler effect, there are lots of things you can do to expand upon and improve the code. For starters, the code above is inefficient because it sets the toggle<\/code> function on the spoiler<\/code> span for every sparkle<\/em><\/strong>, how would you fix that? You can also experiment with setting individual spoiler<\/code> tags, each needing their own click to unblur, or set all spoiler tags to unblur when any of them are clicked. There are also tons of things you can do to change the animation style and sparkle appearance. Play around with it!<\/p>\n\n\n\n
          Conclusion<\/h1>\n\n\n\n
          In this article, you learned how to mimic the spoiler effect from Threads and used HTML, CSS, and a little JavaScript to make it happen. We used keyframes and learned a little bit about CSS animations. You now know the basic strategies behind conditionally hiding and showing text, you can use this effect on your own website for a variety of reasons.<\/p>\n\n\n\n
          Final Code<\/h1>\n\n\n\n
          At the end of this article, I had three files called spoiler_text.html<\/code>, style.css<\/code>, and sparkle.js<\/code><\/a>. Here are the contents of my files:<\/p>\n\n\n\n
          index.html<\/code>:<\/p>\n\n\n\n
          <!doctype html>\n<html>\n<head>\n\u00a0\u00a0\u00a0\u00a0<title>Sparkly Spoiler Effect<\/title>\n\u00a0\u00a0\u00a0\u00a0<link rel=\"stylesheet\" href=\"style.css\" \/>\n<\/head>\n<body>\n\u00a0\u00a0\u00a0\u00a0<p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0The biggest plot twist of all time is:\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler\" data-hidden=\"true\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler-content\">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Darth Vader is Luke Skywalker's father!\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<span class=\"spoiler-blur\" \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\n\u00a0\u00a0\u00a0\u00a0<\/p>\n\u00a0\u00a0\u00a0\u00a0<script src=\"sparkle.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n\n\n\n
          style.css<\/code>:<\/p>\n\n\n\n
          :root {\n\u00a0\u00a0--bg: #0f1115;\n\u00a0\u00a0--text: #f4f7fb;\n\u00a0\u00a0--spoiler-dot: rgba(255,255,255,0.85);\n}\n\nbody {\n\u00a0\u00a0min-height: 25vh;\n\u00a0\u00a0display: grid;\n\u00a0\u00a0place-items: center;\n\u00a0\u00a0background: var(--bg);\n\u00a0\u00a0color: var(--text);\n}\n\n.spoiler {\n\u00a0\u00a0cursor: pointer;\n\u00a0\u00a0position: relative;\n}\n\n.spoiler[data-hidden=\"true\"] .spoiler-content {\n\u00a0\u00a0filter: blur(7px);\n}\n\n.spark {\n\u00a0\u00a0position: absolute;\n\u00a0\u00a0width: 4px;\n\u00a0\u00a0height: 4px;\n\u00a0\u00a0border-radius: 50%;\n\u00a0\u00a0background: var(--spoiler-dot);\n\u00a0\u00a0animation:\n\u00a0\u00a0\u00a0\u00a0drift var(--dur) linear infinite,\n\u00a0\u00a0\u00a0\u00a0twinkle var(--twinkle) ease-in-out infinite alternate;\n}\n\n.spoiler[data-hidden=\"false\"] .spark {\n\u00a0\u00a0animation-play-state: paused;\n\u00a0\u00a0display: none;\n}\n\n@keyframes drift {\n\u00a0\u00a0from {\n\u00a0\u00a0\u00a0\u00a0transform: translate(var(--x0), var(--y0)) scale(var(--scale));\n\u00a0\u00a0}\n\u00a0\u00a0to {\n\u00a0\u00a0\u00a0\u00a0transform: translate(var(--x1), var(--y1)) scale(var(--scale));\n\u00a0\u00a0}\n}\n\n@keyframes twinkle {\n\u00a0\u00a0from { opacity: 0.25; }\n\u00a0\u00a0to \u00a0 { opacity: 0.95; }\n}<\/code><\/pre>\n\n\n\n
          sparkle.js<\/code>:<\/p>\n\n\n\n
          function random(rscale) {\n\n\u00a0\u00a0\u00a0\u00a0return Math.random() * rscale;\n\n}\n\nfunction buildSparkles(spoilerBlurSpan, sparkleCount) {\n\u00a0\u00a0\u00a0\u00a0for (let i = 0; i < sparkleCount; i++) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const s = document.createElement(\"span\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.className = \"spark\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const x0 = random(100);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const y0 = random(100);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const x1 = Math.max(0, Math.min(100, x0 + random(18)));\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const y1 = Math.max(0, Math.min(100, y0 + random(14)));\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.left = `${x0}%`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.top = `${y0}%`;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--x0\", \"0px\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--y0\", \"0px\");\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--x1\", `${x1 - x0}px`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--y1\", `${y1 - y0}px`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--dur\", `${random(60)}s`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--twinkle\", `${random(1.2)}s`);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0s.style.setProperty(\"--scale\", `${random(1.5)}`);\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0spoilerBlurSpan.appendChild(s)\n\u00a0\u00a0\u00a0\u00a0}\n}\n\nfunction wireSpoiler(spoilerBlurSpan) {\n\u00a0\u00a0\u00a0\u00a0buildSparkles(spoilerBlurSpan, 75);\n\u00a0\u00a0\u00a0\u00a0let spoilerSpan = spoilerBlurSpan.parentElement;\n\n\u00a0\u00a0\u00a0\u00a0function toggle() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const hidden = spoilerSpan.getAttribute(\"data-hidden\") === \"true\";\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0spoilerSpan.setAttribute(\"data-hidden\", String(!hidden))\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0spoilerSpan.addEventListener(\"click\", toggle);\n}\n\ndocument.querySelectorAll(\".spoiler-blur\").forEach(wireSpoiler);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
          If you use Meta’s Threads app on a mobile device, you may have noticed an interesting effect: the spoiler tag that hides text behind a sparkly veil. In this article, I will show you how to implement this effect in the browser using HTML, CSS, and JavaScript. NOTE: You can scroll to the bottom of…<\/p>\n","protected":false},"author":1,"featured_media":3353,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[82],"tags":[86,84,83],"class_list":["post-3341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-html","tag-javascript","tag-web-development"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2026\/04\/pexels-zba-banner-2156097684-34036475-scaled.jpg?fit=2560%2C1697&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pb90KY-RT","jetpack-related-posts":[{"id":238,"url":"https:\/\/erikscode.space\/index.php\/2020\/04\/24\/stop-worrying-about-which-programming-language-to-learn-first\/","url_meta":{"origin":3341,"position":0},"title":"Stop Worrying About Which Programming Language to Learn First","author":"erik","date":"April 24, 2020","format":false,"excerpt":"I remember when I first decided I wanted to learn to write code, my google search history would look like this: Best first programming languageWhat programming language should I learnHow to avoid Ebola (unrelated)Python good first language? Ultimately, this time I spent was a waste and I\u2019ll tell you why.\u2026","rel":"","context":"In "Language Specific"","block_context":{"text":"Language Specific","link":"https:\/\/erikscode.space\/index.php\/category\/language-specific\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/1_CB6Qim8hbdx2s-jUu39hEQ.jpeg?fit=800%2C533&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/1_CB6Qim8hbdx2s-jUu39hEQ.jpeg?fit=800%2C533&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/1_CB6Qim8hbdx2s-jUu39hEQ.jpeg?fit=800%2C533&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/1_CB6Qim8hbdx2s-jUu39hEQ.jpeg?fit=800%2C533&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":2354,"url":"https:\/\/erikscode.space\/index.php\/2024\/05\/20\/review-naming-things-the-hardest-problem-in-software-engineering\/","url_meta":{"origin":3341,"position":1},"title":"[Review] Naming Things: The Hardest Problem in Software Engineering","author":"erik","date":"May 20, 2024","format":false,"excerpt":"In today's post, I review Naming Things: The Hardest Problem in Software Engineering, by Tom Benner. NOTE: At erikscode.space, book reviews do not contain affiliate links or paid advertisements. They are not written at the request of one of the authors or publishers, paid or otherwise. There are no incentives\u2026","rel":"","context":"In "Book Reviews and Suggested Reading"","block_context":{"text":"Book Reviews and Suggested Reading","link":"https:\/\/erikscode.space\/index.php\/category\/suggested-reading\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/05\/namingthings.jpg?fit=750%2C1200&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/05\/namingthings.jpg?fit=750%2C1200&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/05\/namingthings.jpg?fit=750%2C1200&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2024\/05\/namingthings.jpg?fit=750%2C1200&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":417,"url":"https:\/\/erikscode.space\/index.php\/2021\/04\/16\/professional-version-control-with-git-pt-3-rebase-and-bisect\/","url_meta":{"origin":3341,"position":2},"title":"Professional Version Control with Git: Pt 3 \u2013 Rebase and Bisect","author":"erik","date":"April 16, 2021","format":false,"excerpt":"Hello everyone and welcome to part 3 of the professional Git series here at Erik's Code Space. In part 1, we learned the basics and got our skills good enough to start version controlling our own projects. In part 2, we learned about the collaboration tools available in git and\u2026","rel":"","context":"In "SVC, CI\/CD, and More"","block_context":{"text":"SVC, CI\/CD, and More","link":"https:\/\/erikscode.space\/index.php\/category\/svc-ci-cd-and-more\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-rodnae-productions-6069605-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-rodnae-productions-6069605-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-rodnae-productions-6069605-scaled.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-rodnae-productions-6069605-scaled.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2021\/04\/pexels-rodnae-productions-6069605-scaled.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":222,"url":"https:\/\/erikscode.space\/index.php\/2020\/04\/14\/why-you-shouldnt-learn-c\/","url_meta":{"origin":3341,"position":3},"title":"Why You Shouldn’t Learn C","author":"erik","date":"April 14, 2020","format":false,"excerpt":"Knowledge of the C programming language is often touted as the mark of a \"true\" programmer. You don't really know programming unless you know this language, or so the wisdom goes. Many aspiring programmers have been advised by gatekeepers senior developers to learn C to up their skills and bring\u2026","rel":"","context":"In "C\/C++"","block_context":{"text":"C\/C++","link":"https:\/\/erikscode.space\/index.php\/category\/language-specific\/c-c\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/phil-hearing-YbT8wrbPMug-unsplash-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/phil-hearing-YbT8wrbPMug-unsplash-scaled.jpg?fit=1200%2C800&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/phil-hearing-YbT8wrbPMug-unsplash-scaled.jpg?fit=1200%2C800&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/phil-hearing-YbT8wrbPMug-unsplash-scaled.jpg?fit=1200%2C800&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2020\/04\/phil-hearing-YbT8wrbPMug-unsplash-scaled.jpg?fit=1200%2C800&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":29,"url":"https:\/\/erikscode.space\/index.php\/2019\/07\/20\/how-to-work-with-memory-optimized-objects-in-sql-server\/","url_meta":{"origin":3341,"position":4},"title":"How To Work With Memory Optimized Objects in SQL Server","author":"erik","date":"July 20, 2019","format":false,"excerpt":"Good morning everyone, today I'm going to show you how to make memory optimized tables and natively compiled stored procedures. First, I'll talk about why you might want to use these things, then we'll just dive straight in to how to do it. Relevant Video If you don't feel like\u2026","rel":"","context":"In "Database"","block_context":{"text":"Database","link":"https:\/\/erikscode.space\/index.php\/category\/database\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/07\/fabio-oyXis2kALVg-unsplash.jpg?fit=1200%2C900&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/07\/fabio-oyXis2kALVg-unsplash.jpg?fit=1200%2C900&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/07\/fabio-oyXis2kALVg-unsplash.jpg?fit=1200%2C900&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/07\/fabio-oyXis2kALVg-unsplash.jpg?fit=1200%2C900&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/07\/fabio-oyXis2kALVg-unsplash.jpg?fit=1200%2C900&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":109,"url":"https:\/\/erikscode.space\/index.php\/2019\/09\/27\/getting-started-with-browser-automation-testing-in-python\/","url_meta":{"origin":3341,"position":5},"title":"Getting Started With Browser Automation Testing in Python","author":"erik","date":"September 27, 2019","format":false,"excerpt":"Developers have unit tests to test atomic functionality and integration tests to test system interoperability. Web developers have to take it a step further and test actual browser behavior. This can be done in many ways, but most often it's with some implementation of Selenium webdriver and an xUnit testing\u2026","rel":"","context":"In "Testing"","block_context":{"text":"Testing","link":"https:\/\/erikscode.space\/index.php\/category\/testing\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/erikscode.space\/wp-content\/uploads\/2019\/09\/david-clode-RAfIk-ZKbPk-unsplash.jpg?fit=1200%2C778&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts\/3341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/comments?post=3341"}],"version-history":[{"count":0,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/posts\/3341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/media\/3353"}],"wp:attachment":[{"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/media?parent=3341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/categories?post=3341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/erikscode.space\/index.php\/wp-json\/wp\/v2\/tags?post=3341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}