We are a venture backed construction robotics company building robotics and automation solutions for the world’s most ubiquitous building material: reinforced concrete

Toggle

toggle

Often, developers create technical solutions using whatever is available to get the functionality up and running. Especially when it is necessary to test some product hypothesis and it doesn't make much sence to spend a lot of time and resources on it. After the hypothesis is confirmed, an even more interesting time begins - the search for tradeoffs: you need to release features quickly, adapting to the users number growth. It is very handy to be able to change the behavior of the service at any time without restarting the servers, or to turn off a broken functionality or to conduct AB-testing. To do this, developers usually use . If your startup has not a giant, but a small group of enthusiasts - you will have to solve this problem using available tools. In this article, I will show you a simple way of how to implement Feature Toggle using a shared SQL database. Feature Toggles Description of a typical system No matter how much effort is put into the development of fault-tolerant self-sustainable systems, manual interventions are inevitable: fixing data inconsistencies, triggering tasks, recovering data after an outage, backfilling or migrations, displaying business operations and related data. If a problem could be fixed easily, a developer can adjust data directly in the database, or write a bash/python/whatever script. We usually avoid direct accessing the data, but circumstances could make you do it. But there is a more reliable way - an application with internal use - Administration Panel. Benefits of having Admin Panel: authorized access; logging and auditing all the actions done by a user; its code usually reviewed and tested; accessible not only by users, but by tech support. Often admin panel is designed to access database of business-logic servers. This approach has some disadvantages, but is a good tradeoff: providing an acceptable level of security through simple implementation. Thus, most probably, you can use the main database to store the settings, including the feature-toggle and access them from your servers. Get your hands dirty with code Simple toggle The simplest use case is a two position toggle - either enable for all or disable for all. private final FeatureToggleService featureToggleService;

public void businessLogic() {
   if (featureToggleService.isFeatureEnabled(IMPORTANT_FEATURE)) {
       doImportantFeatureStuff();
   } else {
       log.info("Feature disabled {}", IMPORTANT_FEATURE);
   }
} If I implemented it in memory, I'd check if there is a key in a hash set. If there is one - feature is enabled, otherwise - disabled. In an SQL database there could be a table, which contains the names of the features - that's all what we need here. We can query the keys and that's how it could look like: public class FeatureToggleService {

   private static final String STATE_QUERY = "SELECT id FROM features WHERE name = (?)";

   private final JdbcOperations jdbcOperations;

   private final LoadingCache<String, Boolean> toggleStateCache = CacheBuilder.newBuilder()
           .expireAfterWrite(60, TimeUnit.SECONDS)
           .build(new CacheLoader<>() {
               public Boolean load(String featureName) {
                   return jdbcOperations.queryForList(STATE_QUERY, String.class, featureName)
                              .size() > 0;
               }
           });

   public boolean isFeatureEnabled(String featureName) {
       boolean state = toggleStateCache.getUnchecked(featureName);
       return Boolean.TRUE.equals(state);
   }
} In the example above, I used a cache from Google Guava. It’s a simple local cache, but in 99% of cases it will probably meet your requirements. Feature are toggled infrequently, there is no point in making requests often. I chose 60 seconds as an example - but it’s a good trade off, not too many requests and not too long switching. User specific toggle A slightly more complicated case. You want to test functionality in production, but you don't want it to be available to all users. Instead, you want to enable the feature only for a set of users, who are considered to be testers. private final FeatureToggleService featureToggleService;

public void businessLogic(LoggedUser loggedUser) {
   if (featureToggleService.isFeatureEnabled(IMPORTANT_FEATURE, loggedUser.id())) {
       doImportantFeatureStuff();
   } else {
       log.info("Feature disabled {}", IMPORTANT_FEATURE);
   }
} The third state of the feature has appeared - testing. So states are: Enabled for all Disabled for all Enabled for testers If feature is enabled for testing - you should check if current user is a tester. In other words whether user is in a list of persons who should have access to the feature. The database will require a second column that will store the state of the feature (it could be a number or a meaningful name). And you will also need to store a list of testers somewhere, for example, it could be another table in the database. And the implementation could be: public class FeatureToggleService {

   private static final String STATE_QUERY =
            "SELECT enabled_for FROM features WHERE name = (?)";
   private static final String TESTERS_QUERY = "SELECT id FROM test_users";
   private final JdbcOperations jdbcOperations;

   private final Supplier<Set<Long>> testUsersSupplier =
           memoizeWithExpiration(this::extractTesters, 60, TimeUnit.SECONDS);

   private final LoadingCache<String, String> toggleStateCache = CacheBuilder.newBuilder()
           .expireAfterWrite(60, TimeUnit.SECONDS)
           .build(new CacheLoader<>() {
               public String load(String featureName) {
                   return jdbcOperations.queryForList(STATE_QUERY, String.class, featureName)
                           .stream().findFirst().orElse("NONE");
               }
           });

   public boolean isFeatureEnabled(String featureName, long userId) {
       String state = toggleStateCache.getUnchecked(featureName);
       return "ALL".equals(state) ||
               ("TEST".equals(state) && testUsersSupplier.get().contains(userId));
   }

   private Set<Long> extractTesters() {
       return Set.copyOf(jdbcOperations.queryForList(TESTERS_QUERY, Long.class));
   }
} First we fetch state of the feature by it’s name (either from database or cache), then if it’s consider it enabled for all, or if it’s - consider it only enabled for testers. If so we fetch list of testers (either from database or from cache) and check if current user is in the list. If none of above - consider feature disabled for all. ALL TEST What could go wrong with the implementations above There is one un-obvious problem with local cache which you should be aware of: you’re setting feature enabled for all 09:45:27 request 1 has come to server 1 and feature worked as enabled 09:45:47 request 2 has come to server 2 and feature didn’t work as disabled 09:45:51 Why is that so? Local caches don’t know anything about other ot servers, in most cases it could not be a problem at all. Otherwise, you should do one of following: continue using local cache but evict it by a notification (using a pub sub system or broadcast messages); use a distributed cache (eCache or similar) and evict it on each change; use an in-memory databases (Redis, Zookeeper or similar) to store features and provide low-cost access to it; use a paid service which provides this functionality (there are a number of them, no adds and preferences here); come up with your own brilliant idea, there could be a plenty of them :) Conclusion Many developers think that it’s cool to use a fancy framework, but you need to assess if it's really justified. It's often easier to write a simple module that satisfies specific needs of your application, develop it your own way. But here you need to feel the boundary - writing your own HashMap from scratch does not make any sense.

Use Feature Toggle to Safely Release Updates On Your Server

Nowadays, the ability to switch between a light or a dark theme has become extremely popular on the internet. It has been a while since we began to see it on desktop applications, but now, we can also see it every day on most websites we use: Github, Stackoverflow, , etc. There are multiple ways to implement it, I’ll show you mine. Twitter Writing the themes It’s 2022, we survived the Coronavirus, and Internet Explorer is finally dead. I think it’s a good time to if you haven’t already (you can read if you are not familiar with them or if you don’t know what I’m talking about). start using CSS custom properties this fantastic post from Chris Coyier Even though I’ve started talking about two themes, I’m obviously talking about having . The key to creating those variants is to write every single color that appears on your theme in a custom property. In my case, I’ve started defining all the colors used in the light theme, which is the default I’ve chosen for the situation when we don’t know the user preference: a single CSS code with two variants body {
  --bg-color: #fff;
  --bg-color-secondary: #eee;
  --text-color: #303030;
  --text-color-secondary: #707070;
  --border-color: #eeeeee;
} Once we have the values for the light variant, we need to define the same properties for the dark one, and we will add them inside a media query. @media (prefers-color-scheme: dark) {
  body {
    --bg-color: #292639;
    --bg-color-secondary: #1b1928;
    --text-color: #ebeaf7;
    --text-color-secondary: #bebbd2;
    --border-color: #3a3650;
  }
} Now, we can just use those properties in our CSS. body {
  background: var(--bg-color);
  color: var(--text-color);
  /* ... */ 
}

.header {
  border-bottom: 1px solid var(--border-color);
  /* ... */ 
}

.menu-item {
  color: var(--text-color-secondary);
  /* ... */ 
}

.button {
  background: var(--bg-color-secondary);
  border: 1px solid var(--border-color);
  /* ... */ 
}

/* ... */ Some UX considerations Don’t get me wrong; I’m not a UX designer. Anyway, I feel comfortable enough to give you some tips regarding UX on light/dark themes: . There are lots of dark colors apart from the , in fact, you can see that I’m not using black as a background color on this site. Light is not necessarily white either. There are a lot of places to get inspiration from; if you are not an expert in color theory either, review what other sites do or take some ideas from IDE themes. Dark is not black #000000 . I could be wrong, but shadows are always dark. Take into consideration where the colors are being used. You can use a different kind of shadow for each variant, maybe you will need them to be more intense (or with less transparency) in the dark theme, but they should be dark. There is no need to switch every color . Ensure that you don’t hardcode color codes in the or the properties of your SVG icons. Use in those properties and let the CSS cascade do its job. Base the color of the SVG icons on the content stroke fill currentColor . Not every single picture will play well with both themes. Test the images you choose for your content and select those that look fine with dark and light backgrounds. Sometimes that could be impossible, don’t worry, there are different ways to show multiple images to your users, for example: Keep an eye on content images <picture>
  <source srcset="image-dark.png" media="(prefers-color-scheme: dark)" />
  <source srcset="image-light.png" media="(prefers-color-scheme: light)" />
  <img src="image-light.png" />
</picture> Another option, which is the one I’ve chosen, is to apply a filter to the pictures in the dark mode, making them darker and with a higher contrast: @media (prefers-color-scheme: dark) {
  img {
    filter: brightness(0.9) contrast(1.1);
  }
} If you follow these steps, you will now have two versions of your theme. I know it is not always as simple as I described here, particularly if you are not creating your theme from scratch but adding a new variant to the existing one. , and don’t give up. Adapt these tips to your situation Letting the user switch At this point, we have assumed the user will always want to see your website with the color mode preference that we read in the media feature. That’s a big assumption. In my opinion, it’s a good starting point, but . prefers-color-scheme we will always let the user switch from light to dark or vice-versa The most common way to do it is to create a fancy switch, but any kind of button will do the job also. This article aims to show you how you can implement the functionality, and we won’t focus on the design of the switch. Anyway, you can for inspiration or take a look at the code of my own switch on this Codepen: search here https://codepen.io/artberri/pen/abYzjQR?embedable=true Once we have designed our switch or button, what we should do is implement the functionality with javascript. We will be able to do it with this simple code: // Get the button element
const btn = document.querySelector(".your-button-or-switch-class");
// Detect if user preference is dark
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// On button click
btn.addEventListener("click", function() {
  // Get users preference
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  // Choose the class that will be added or removed
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  // Add or remove the class on the <html> element
  document.documentElement.classList.toggle(toggleClass);
}); As you can see, we will add or remove the class to the element if the user prefers the light theme, and we will toggle the class in case their preferred option is dark. This won’t trigger any effect for now, but it will with this simple addition to our CSS: dark html light .dark body {
  --bg-color: #292639;
  --bg-color-secondary: #1b1928;
  --text-color: #ebeaf7;
  --text-color-secondary: #bebbd2;
  --border-color: #3a3650;
}

@media (prefers-color-scheme: dark) {
  .light body {
    --bg-color: #fff;
    --bg-color-secondary: #eee;
    --text-color: #303030;
    --text-color-secondary: #707070;
    --border-color: #eeeeee;
  }
} With all this, our website will be loaded with the preferred theme of the user, and it will allow them to switch if they want. So, are we done here? Not yet. Storing user’s preference There is only one thing we lack; . I think the easiest way is to save it in the browser’s local storage and to do so, we need to modify the Javascript code I’d shown you previously. we need to store the user’s preferences to keep them between sessions or page navigation const btn = document.querySelector(".your-button-or-switch-class");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
btn.addEventListener("click", function() {
  const userSystemPreference = prefersDarkScheme.matches ? "dark" : "light";
  const toggleClass = userSystemPreference === "dark" ? "light" : "dark";
  document.documentElement.classList.toggle(toggleClass);

  // Obtain which is the user's current preference for our website
  const userCurrentPreference = document.documentElement.classList.contains(toggleClass)
    ? toggleClass
    : userSystemPreference;
  // Save it in local storage
  localStorage.setItem("mode", mode);
}); This little modification will get the current mode based on the class of the document (or its absence) and save it on local storage. Once the setting is saved, we need to ensure that we use it on every page load, and we will do that by executing this code in the of our webpage before loading any CSS: html <head> <script type="text/javascript">
  (function () {
      var userCurrentPreference = localStorage.getItem("mode");
      if (userCurrentPreference === "dark") document.documentElement.classList.toggle("dark");
      else if (userCurrentPreference === "light") document.documentElement.classList.toggle("light");
  })();
</script> Wondering why I’m asking you to add some synchronous Javascript code directly in the of your HTML? By adding this snippet asynchronously, or after the HTML and the CSS is loaded, you will run the risk of having a flash of incorrect theme color (this means that the wrong theme could be shown during some milliseconds). The overload of this code is worth in my opinion. Some people use a cookie-based solution to avoid this code, but it needs to be implemented server-side, which is not a possibility if you have a static-generated site like me. head I hope you enjoy reading; don’t forget to share it on your preferred social network if you do so. Also published here.

Adding Light and Dark Modes, with a Toggle Switch, to Your Website

When I rebuilt my , I knew I wanted to have some fun with the design, and a dark and light mode fit the bill. I enjoyed a lot of the discoveries I made during this project, but my favorite has to be the color-changing SVGs. This tutorial assumes familiarity with React, and I am using v17.0.1 and functional components. portfolio site First, I created a base layout. Next, I put together my and color schemes. It took a little trial and error, but after testing all my combinations for and experimenting with placement, I found I needed 6 CSS variables. I guess you could say I used “dark first” development because the variable names make sense in the context of the dark theme. The light theme has less variation but needed where would be the same color as the background. dark light sufficient contrast --button-border --accent .theme-dark {
  --dark-text: #292929;
  --light-text: #F9F8F8;  
  --dark-background: #2F4550;
  --light-background: #586F7C;
  --accent: #B8DBD9;
  --button-border: #B8DBD9;
} .theme-light {
  --dark-text: #5E4B56;
  --light-text: #5E4B56;
  --dark-background: #DBE7E4;
  --light-background: #EDDCD2;
  --accent: #DBE7E4;
  --button-border: #5E4B56;
} Then, I set about applying colors to my base layout: html, #root {
  background-color: var(--dark-background);
  color: var(--dark-text);
}

nav {
  background-color: var(--dark-background);
  color: var(--light-text);
}

.main-container {
  background-color: var(--light-background);
} I also set the backgrounds of the sections of content that I wanted to pop to . would have worked on all backgrounds in the dark theme, but I set the section titles to to make them stand out more. --accent --dark-text --light-text I found Musthaq Ahamad‘s , and set about applying it to functional React components.I put functions for changing the theme and checking localStorage for theme preferences into a file called . basic theme switcher tutorial themes.js function setTheme(themeName) {
    localStorage.setItem('theme', themeName);
    document.documentElement.className = themeName;
}

function keepTheme() {
  if (localStorage.getItem('theme')) {
    if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-dark');
    } else if (localStorage.getItem('theme') === 'theme-light') {
      setTheme('theme-light')
    }
  } else {
    setTheme('theme-dark')
  }
}

module.exports = {
  setTheme,
  keepTheme
} In my file, I added to my . App.js keepTheme() useEffect() import { keepTheme } from './utils/themes';

function App() {
  useEffect(() => {
      keepTheme();
  })
} Next, I added the toggle component to my navigation bar component. I styled the toggle following based on . Then I . While this toggle is so cute that you could die, this tutorial will work with any or clickable . First, I set up the basic JSX, the local state, and a variable to hold the theme we get from localStorage: Chris Bongers’ Tutorial Katia De Juan’s Dribbble adjusted the size and flipped it to default to dark mode <button> <input> import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
  const [togClass, setTogClass] = useState('dark');
  let theme = localStorage.getItem('theme');
  return (
        <div className="container--toggle">
           <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
}

export default Toggle; When a user clicks the toggle, I want the theme on the page to change and the toggle to change with it. I added the imported function and from the local state to a handleOnClick function. You can see where it is passed to the clickable part of the toggle in the JSX above. setTheme() setTogClass() const handleOnClick = () => {
  if (localStorage.getItem('theme') === 'theme-dark') {
      setTheme('theme-light');
      setTogClass('light')
  } else {
      setTheme('theme-dark');
      setTogClass('dark')
  }
} I used this component’s to make sure the local state togClass always loads with the correct theme. useEffect() useEffect(() => {
    if (localStorage.getItem('theme') === 'theme-dark') {
        setTogClass('dark')
    } else if (localStorage.getItem('theme') === 'theme-light') {
        setTogClass('light')
    }
}, [theme]) Because my toggle is a checkbox, the dark theme should show the unchecked (moon) state and the light theme should show the checked (sun) state. I couldn’t get to work how I wanted, so I replaced the unchecked with this conditional rendering (conditional operator): defaultChecked <input> ternary operator {
    togClass === "light" ?
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
    :
    <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
} If you used a , you could easily use conditional rendering like this to change the className attribute within the tag and get the same effect. <button> <button> Put all together, the code for the toggle component looks like this: import React, { useEffect, useState } from 'react';
import '../styles/toggle.css';
import { setTheme } from '../utils/themes';

function Toggle() {
    const [togClass, setTogClass] = useState('dark');
    let theme = localStorage.getItem('theme');

    const handleOnClick = () => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTheme('theme-light');
            setTogClass('light')
        } else {
            setTheme('theme-dark');
            setTogClass('dark')
        }
    }

    useEffect(() => {
        if (localStorage.getItem('theme') === 'theme-dark') {
            setTogClass('dark')
        } else if (localStorage.getItem('theme') === 'theme-light') {
            setTogClass('light')
        }
    }, [theme])

    return (
        <div className="container--toggle">
            {
                togClass === "light" ?
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} checked />
                :
                <input type="checkbox" id="toggle" className="toggle--checkbox" onClick={handleOnClick} />
            }
            <label htmlFor="toggle" className="toggle--label">
                <span className="toggle--label-background"></span>
            </label>
        </div>
    )
} Update To see how I have refactored the logic of this component and made it accessible, read . An Accessible Dark Mode Toggle in React Finally, my favorite part: the color switching SVGs! CSS variables work in SVG code too! I got my SVG code for the Github and Chrome icons from . For the Github icon all I had to change was one fill attribute in a : DEVICON <g> <g fill="var(--dark-text)"> The Chrome icon had a fill attribute in a and a : <circle> <path> <circle fill="var(--dark-text)" cx="63.624" cy="64.474" r="22.634"></circle><path fill="var(--dark-text)" ...> The result looks like this: Conclusion I tried to include all of the relevant code, but you can also see the full code for my site in its . If you enjoyed this article or are left with questions, please leave a comment! I would also love to see anything built following this tutorial. Github repository Also Published here

How to add a Dark Mode Toggle in React

This post will show you how to build the Feature Toggle mechanism in your Next.JS application. We are going to use Next.JS, React, and TypeScript. We will deploy our application to Vercel to demonstrate a real-life example. You can find the code and video in the summary at the end. What You'll Learn in This Article In this article, we are going to deep dive into several topics such as: What are feature toggles? How to use React's Context API What are environment variables, and how do we use them in our applications? How to build custom hooks in React. What Are Feature Toggles? Feature toggles (aka Feature Flags) are a technique that allows you to change the state of your application without modifying its code. In the beginning, it might sound a bit confusing but let's consider the following scenario: Every December, many companies change their logo to add a bit of holiday spirit. Perhaps they want to add a Santa Claus hat into their logos or some sort of snowman. Have you ever wondered if they change their website every year just to update the logo? No, in most cases, they only do it once, and just connected it into their feature toggle. So they can enable the special logo whenever they need it. Here's another example: imagine a development team that follows continuous integration (CI). They use this mechanism to commit unfinished code, and then merge it onto the main branch. The unfinished code is disabled in the production environment so users cannot see incomplete features. Keep in mind that this is only a good idea for mature development teams that have experienced developers on board along with automated checks for their CI pipelines (like automated tests, static code analysis, compilation / bundling, and so on). Before We Start This tutorial requires some Node and React fundamentals. You should also know how to use Git and GitHub before you follow the instructions in this article. I skipped the part about bootstrapping the example application since I showed a very similar process in one of my previous posts - . How to Build a Fully Functional Serverless App in Under Two Hours I created two GitHub repositories for this post. The first one contains the scaffolder of the application, so you can follow all steps of the tutorial on your own. The second one is the finished application which you can deploy to Vercel without writing any code if you would like just to see the end result. Application Scaffolder (GitHub). The final app, ready to deploy (GitHub). We'll build the example application using Next.JS, React, and Typescript. The main purpose of the application is to display two financial charts. The first one represents the GDP of the United States, and the second one shows Treasury Constant Maturity over the last 10 years. The second one is unfinished. Our goal is to hide it behind the feature toggle, so we can enable it whenever we need it. The final application should look like this: You can find it here. Let's Get Started! We need to clone the scaffolder repository from GitHub, and we can do that by typing the following command in the terminal: $ git clone git@github.com:mateuszsokola/next-feature-toggle-scaffolder.git Now we need install the required dependencies and start the server. $ cd next-feature-toggle-scaffolder
$ npm install
$ npm run dev Now you can open in your browser and see the following website: http://localhost:3000/ Now, how can we implement the Feature Toggle mechanism here? React's Context API seems to be the easiest and most appropriate way. What is the React Context API? The React Context API offers a neat and tidy way of passing data through multiple levels of components without doing it manually. Let's see the following example: <Page enabledFeatures={features} />
<PageLayout enabledFeatures={features} />
<NavigationBar enabledFeatures={features} />
<Link href="https://freecodecamp.org/news/">
  <Avatar enabledFeatures={features} />
</Link> If you don't want to use Context, you will need to pass the data as properties to every component. This is error-prone and cumbersome. If you decide to use the context, you can inject data directly into the component that actually needs it. Now we can create a context for our feature toggle. We need to create a directory called , and a new file inside this directory. We can call it . context/ FeatureToggleContext.ts $ mkdir context
$ cd context
$ touch FeatureToggleContext.ts Creating context in React is fairly easy. You need to import React in your file and call the React.createContext method with the default context value. See the example below: // file: context/FeatureToggleContext.ts
import React from "react";

export const FeatureToggleContext = React.createContext({
  // TypeScript will have hard time to determine its type,
  // if we don't cast this array to an array of strings.
  // Likely, we will end up with an array of never or any.
  enabledFeatures: [] as string[],
}); Have in mind that the default value is only used when the component isn't wrapped into the context provider. It is just a fallback, and it shouldn't be used without the provider. The Context Provider Component Context comes with a Provider component that allows consuming components to listen to context changes. The Provider component takes a value prop that you pass to components that are the children of this provider. In simple words, if we want to take advantage of the context we will need to make the Provider a parent of our all components. I decided to wrap the Provider into a standalone component so we don't clutter up other parts of the application. Let's create a new file in the directory called : components/ FeatureToggle.tsx $ cd components
$ touch FeatureToggle.tsx Now we can create a component that accepts two properties: and . children enabledFeatures The is the main component of the application. If you created a React app using you might have noticed that the main component is called . Next.JS calls it , and you can find it in the file . children create-react-app App MyApp pages/_app.tsx The is the array of enabled features. We will use it later. enabledFeatures # file: compontents/FeatureToggle.tsx

import React from "react";
import { FeatureToggleContext } from "../context/FeatureToggleContext";

type Props = {
    children: any;
    enabledFeatures: string[];
}

export const FeatureToggle = ({ children, enabledFeatures }: Props) => {
    return (
        <FeatureToggleContext.Provider value={{ enabledFeatures }}>
            {children}
        </FeatureToggleContext.Provider>
    )
} The wrapped component is ready. Now we need to hook it into the main component. Let's open the file pages/_app.tsx. We have only one toggleable feature – . We need to add it to the list of enabled features. At the moment, we'll soft code this list, and pass it down directly to the provider to confirm we have access to the context. Later on, we are going to create a proper API for the feature toggle. treasury_chart We need to modify the file to look like this: import { FeatureToggle } from "../components/FeatureToggle";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const enabledFeatures = ["treasury_chart"];

  return ( 
    <FeatureToggle enabledFeatures={enabledFeatures}>
      <Component {...pageProps} />
    </FeatureToggle>
  );
}

export default MyApp; Technically, the list of enabled features is available in the whole application now. But we have no interface to consume its value. Taking advantage of React hooks is the best way to expose it. How to Create Custom Hooks in React We created this mechanism based on the React Context API, and the most React way to consume React Context is by using hooks. So we will need to create a hook that offers easy access to the right data in the context. Let's create a new directory called , and a new file called . hooks/ useFeatureToggle.ts $ mkdir hooks
$ touch useFeatureToggle.ts Let's think about the hook for a minute. We want to check the status of a given feature. If the feature is enabled we are going to render it, otherwise, we won't. So the hook should return a helper that checks if the requested feature is on the list of enabled features, right? Let's code it. # file: hooks/useFeatureToggle.ts

import React, { useContext } from "react";
import { FeatureToggleContext } from "../context/FeatureToggleContext";

export const useFeatureToggle = () => {
	// we need to read values defined in the FeatureToggleContext. 
    // In this case, we'll take only the array of enabled features.
    const { enabledFeatures } = useContext(FeatureToggleContext);

    const isEnabled = (featureName: string) => {
        return enabledFeatures.includes(featureName);
    }

	// For consistency, We return an array of helpers, 
    // so we follow the pattern defined by the useState hook.
    // It makes the code open for extensions, 
    // so no need to refactor the app when a new helper is added here.
    return [
        isEnabled,
    ];
} The hook is ready. We can open the main page, and connect the Treasury chart into the Feature Toggle. Let's open . pages/index.tsx We are going to use our custom hook to get access to the helper and use it to check if the feature is enabled. isEnabled const [isEnabled] = useFeatureToggle();

// ...

return (
  /* ... /
  {isEnabled("treasury_chart") && (<TreasuryChart />)}
  / ... */
); The complete implementation looks like this: # file: pages/index.tsx

import React from "react";
import Head from "next/head";
import { Layout } from "antd";

import { GdpChart, TreasuryChart } from "../components/Charts";
import { useFeatureToggle } from "../hooks/useFeatureToggle";

const { Header, Content } = Layout;

export default function Home() {
  const [isEnabled] = useFeatureToggle();
  return (
    <Layout className="layout">
      <Head>
        <title>🚦 Feature Toggle in Next.js</title>
      </Head>
      <Header>
        <div className="logo" />
      </Header>
      <Content className="content">
        <GdpChart />
        {isEnabled("treasury_chart") && (<TreasuryChart />)}
      </Content>
    </Layout>
  );
} Now, you can try out the application in your browser. Keep in mind that you will still see the second chart. You can fool around with the feature name given to the helper. For example, you can make a typo, and the chart should disappear afterwards. isEnabled Unfortunately, this solution doesn't give us flexibility to toggle features without modifying the codebase. Every time we want to change the status of the feature, we will need to modify the list of enabled features. How can we fix that? The easiest way to make it toggleable without changing the code would be to implement an API that reads statuses of features from environment variables and returns an array of active features. How to Use Environment Variables in Node An environment variable is a variable whose value is set outside the application, usually by functionality built into the operating system. This is Node.JS, in our case. Let's create a file in our project. .env $ touch .env Now, we can open this file and add a new variable. We can call it . We need to set its value to . FEATURE_TREASURY_CHART false # file: .env

FEATURE_TREASURY_CHART=false If we use .env variables we'll need to use some server features of Next.JS, and define a new API. This means we will need to write more code. So we need to create a new file in the directory. Let's call it . pages/api/ features.ts The API will return an array of enabled features. // file: pages/api/features.ts

export default (req, res) => {
    res.status(200).json([
    	// Your environment variables are available within the `process.env` object.
    	// IMPORTANT! All environment variable values are strings. 
        // So we cannot compare them with booleans, numbers and so on.
        process.env.FEATURE_TREASURY_CHART === "true" ? "treasury_chart" : "",
    ])
} Now, you can try to open in your browser, and you should receive the following output: http://localhost:3000/api/features [""] The wasn't added to the list of enabled features, because it is disabled. You can change the variable to , and restart your server to try it out. treasury_chart FEATURE_TREASURY_CHART true How to Use the Features API We are good to connect the React part of the application to our brand new API. Before we do so, we'll need to install . axios Axios will help us to make HTTP requests in a more convenient way than . It supports error handling and types out of the box. We don't need to implement it on our own, so we can get straight to business. You might need to kill your server by hitting Control + C. Twice. fetch $ npm install --save axios Let's create a new directory called , and a new file called . services/ FeatureToggle.ts Now we need to use a standard asynchronous function to make a GET request to our API. // File: services/FeatureToggle.ts

import axios from "axios";

export const fetchFeatures = async () => {
    try {
        const { data } = await axios.get<string[]>("/api/features");

        return data;
    }
    catch(e) {
        console.log("Something went wrong");
    }

    return [] as string[];
} OK. The feature API request is ready. We can actually trigger this function at the main component. Open the file . pages/_app.tsx We need to make an API request like every other in React using the and hooks. We need to add the following snippet to the component: useEffect useState MyApp const [enabledFeatures, setFeatures] = useState<string[]>([]);

  const processFeatures = async () => {
    const features = await fetchFeatures();

    setFeatures(features);
  }

  useEffect(() => {
    processFeatures();
  }, []); The complete solution is here: // file: pages/_app.tsx

import { useEffect, useState } from "react";
import { FeatureToggle } from "../components/FeatureToggleProvider";
import { fetchFeatures } from "../services/FeatureToggle";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  const [enabledFeatures, setFeatures] = useState<string[]>([]);

  const processFeatures = async () => {
    const features = await fetchFeatures();

    setFeatures(features);
  }

  useEffect(() => {
    processFeatures();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  return (
    <FeatureToggle enabledFeatures={enabledFeatures}>
      <Component {...pageProps} />
    </FeatureToggle>
  )
}

export default MyApp; Hurray! We are done with coding. The final step is to deploy our app. How to Publish the App on Vercel We will deploy the application to Vercel, because they offer free hosting for apps and they let us set custom environment variables, which is critical for us. As usual, I am going to skip the process of creating a new account. You can create one with one click using your GitHub or Google account. Once you've signed up, you should see this screen. Click on the "New Project" button: Now you need to select the GitHub repository you want to import. In my case, it is "next-ft-demo", but you might've called it something else. If you don't see your repository, you need to click on "Adjust GitHub App Permission" (the link below marked with the red ellipse): We need to configure the project. Let's open "Environment Variables", add a new variable called FEATURE_TREASURY_CHART, and set its value to false. Then click on the "Add" button, and hit "Deploy": The application is being deployed now. You should see the following screen once done. Just click on the "Go To Dashboard" button: You can open your application by clicking the "Visit" button: The application displays only one chart: If you want to enable the Treasury chart you need to select the "Settings" tab, choose the "Environment variables" section, and set the FEATURE_TREASURY_CHART variable to true: Now we need to redeploy the application to load new variables. Once the deployment is completed you will see the Treasury chart on your website: Summary This is a simple implementation of Feature Toggles. You'll probably need to adjust it to fit your needs. But I think it's a good starting point that you can build upon. If you have an idea about how to improve my solution or you want to show us yet another way of doing it, please share it in the comment section of the YouTube video below (I reply to every comment). WATCH VIDEO ON YOUTUBE HERE If you find the video useful it would mean the world to me if you smash the like button and subscribe. You can find all the code on GitHub: Application Scaffolder (GitHub). The final app, ready to deploy (GitHub). If you have any questions you can DM me on Twitter: @msokola I hope you liked it and have a great day :) Also published on: https://www.freecodecamp.org/news/how-to-use-feature-toggles-in-next-js-and-react/

An Essential Guide to Feature Toggles Using Next.JS and React

Google Analytics 4 (GA4) for Beginners—Part 3: Mastering Data Filters, Comparisons, and Explorations

Hacking Backward and Forward-Compatible Application Releases

So, you're itching to publish a story on HackerNoon but feeling a bit lost? Don't fret! We've put together this step-by-step guide with all the information you'll need to go from draft to top story in no time. Let's dive in! TL:DR To Submit a story to HackerNoon, please follow the Below Checklist: Log in to Hacker Noon via Hackernoon.com/login. If you’re struggling to create an account at HackerNoon, read this blog post or visit our help page.
Click on Start Writing to the left of your thumbnail (or go directly there).
Write or upload a great tech story - detailed instructions for editor 3.0 here.
Click Story Settings in the upper right-hand corner.
Enter 8 tags (guideline).
Upload a feature image (guideline).
Enter your meta tag so search engines can easily find you (guideline).
Confirm that you have the rights to submit the content and that all vested interests of companies mentioned in the story have been disclosed.
Select Submit Story for Review.
You will then receive an email to confirm that we have received your submission.
A Staff Editor should review within 3 business days..ish. See full guidelines here.
If accepted, we’ll distribute, distribute, and distribute your tech story. See how we distribute things here. https://www.youtube.com/watch?v=O5p0nUvIZ6A&embedable=true Writers meet the draft page! Let's set the scene: you've been an avid reader of HackerNoon for some time now and finally decided it's time to share your own content here. So you hit the "Start Writing" button sitting at the top right corner of your screen. Boom! It's writing time - and here's what you'll find on our editor 3.0: If you’re looking to import a story, learn more here, and consult our republishing guidelines here. 1. Titles When crafting your new story in our editor, you've got two choices for titles: you can either come up with your own or let our system generate suggestions for you. To enter your own title, simply type it into the designated space and use our auto-capitalization feature to ensure proper formatting—click the robot icon to toggle this feature on or off. If you're feeling stuck, click the lightbulb icon for a suggestion. Just make sure your text body contains enough content for our system to detect the story's theme, and ensure the title space is empty before clicking "generate headline". Once you've added your title, your draft will be automatically saved, so remember to include some text. Remember, your title should accurately reflect the essence of your story and include relevant keywords to help readers discover it. Learn more here. 2. Formatting Features In our editor, you've got all the tools at your fingertips to format your text just how you want it: bold, overline, underline, lists, links, headlines, quotes, code, and more. To do so select your text and choose your desired options. Alternatively, you can click the + button on the left of your text line and pick an option from the list, which contains some options seen above and others like tables, images, links, dividers, info notices, and more. Here’s how it looks: 3. Embeds There are three main things you can embed in your story: images, videos, and links. Starting with images, you've got a range of choices: import from your device, import an image from a URL, grab one from an image bank, embed a GIF, or generate an AI image. Simply choose your preferred option, and voila! Your image will appear in your draft. When it comes to videos, you've can import them as you would images or embed YouTube links. Click the + button, navigate to the link option, paste your URL, and hit enter. Then, you'll encounter a prompt asking if you want to embed the link. For YouTube videos, you'll have the choice to add just the video, the transcription, or both - it will look something like this: Lastly, links: it’s very similar to embedding YouTube videos, except you can link stories, code, and other external sources. Here’s how: Embedding also extends to Twitter/X threads. Onto The Story Settings Now that you have the gist of what you can do with your copy on our editor, here’s the rundown on the story settings fields you’ll need to fill out before submitting the story for editorial review: Add all of your story’s 8 tags: Tags help Google, Bing, DuckDuckGo, and friends find your content, to serve it to users searching for those terms. Plus, tags help HackerNoon distribute your content to top trafficked pages, as well as the most subscribed tags via our customizable newsletter, The Tech Brief. 2. Open Story Settings: At the top of your story settings you’ll see the number of words written - check this before submitting. One of our editorial guidelines stipulates a minimum word count for publication eligibility. Upload a featured image: Choose one from your device, explore image banks, and GIFs, or ask AI to create a new one. Customize how you want comments managed for your story: Decide whether you want them to undergo editorial review or be approved instantly.
Add your metadescription: Help web crawlers to index and humans to read
Craft a TL:DR: type between 300 and 500 characters or have our AI generate a TL:DR for you Pick Emoji Credibility Indicators: These indicators help you provide additional information relating to your story, giving readers more context.
Is your story original? If it's a republication, hit "No" and drop the URL where it first went live; if it's fresh content, just tap "Yes". When in doubt, consult our republishing guidelines here. Once you've wrapped up all these steps, keep an eye out for a button that pops up at the bottom prompting you to "Submit Your Story for Review!" If you're feeling good about your story, just give it a click. Soon after, you'll get an email confirming that we've received your submission. A Staff Editor should review it within 3 business days..ish, and if accepted, we’ll distribute, distribute, and distribute your tech story. NEW! On your draft, you’ll see the Submit Story button left in three different places:

At the bottom of your story settings
At the top corner of your screen
At the bottom right corner of your screen

Once you select the checkbox that matches your story's originality, these buttons will become active. Additional tools In the story settings, you'll find some extra goodies! You can whip up sticky notes and shoot a message to an editor for some writing support. Check out how it looks below: And there you have it! You're now equipped with the tools to transition from draft to publication - no reason not to hit that submit button and share your work with the world! So, you're itching to publish a story on HackerNoon but feeling a bit lost? Don't fret! We've put together this step-by-step guide with all the information you'll need to go from draft to top story in no time. Let's dive in! from draft to top story TL:DR To Submit a story to HackerNoon, please follow the Below Checklist: To Submit a story to HackerNoon, please follow the Below Checklist: Log in to Hacker Noon via Hackernoon.com/login. If you’re struggling to create an account at HackerNoon, read this blog post or visit our help page. Click on Start Writing to the left of your thumbnail (or go directly there). Write or upload a great tech story - detailed instructions for editor 3.0 here. Click Story Settings in the upper right-hand corner. Enter 8 tags (guideline). Upload a feature image (guideline). Enter your meta tag so search engines can easily find you (guideline). Confirm that you have the rights to submit the content and that all vested interests of companies mentioned in the story have been disclosed. Select Submit Story for Review. You will then receive an email to confirm that we have received your submission. A Staff Editor should review within 3 business days..ish. See full guidelines here. If accepted, we’ll distribute, distribute, and distribute your tech story. See how we distribute things here. Log in to Hacker Noon via Hackernoon.com/login . If you’re struggling to create an account at HackerNoon, read this blog post or visit our help page . Hackernoon.com/login read this blog post help page Click on Start Writing to the left of your thumbnail (or go directly there ). there Write or upload a great tech story - detailed instructions for editor 3.0 here . upload a great tech story here Click Story Settings in the upper right-hand corner. Enter 8 tags ( guideline ). guideline Upload a feature image ( guideline ). guideline Enter your meta tag so search engines can easily find you ( guideline ). guideline Confirm that you have the rights to submit the content and that all vested interests of companies mentioned in the story have been disclosed. Select Submit Story for Review. You will then receive an email to confirm that we have received your submission. A Staff Editor should review within 3 business days..ish. See full guidelines here . here If accepted, we’ll distribute, distribute, and distribute your tech story. See how we distribute things here . here https://www.youtube.com/watch?v=O5p0nUvIZ6A&embedable=true https://www.youtube.com/watch?v=O5p0nUvIZ6A&embedable=true Writers meet the draft page! Writers meet the draft page! Let's set the scene: you've been an avid reader of HackerNoon for some time now and finally decided it's time to share your own content here. So you hit the "Start Writing" button sitting at the top right corner of your screen. Boom! It's writing time - and here's what you'll find on our editor 3.0 : editor 3.0 If you’re looking to import a story, learn more here, and consult our republishing guidelines here. If you’re looking to import a story, learn more here , and consult our republishing guidelines here . learn more here here 1. Titles Titles When crafting your new story in our editor, you've got two choices for titles: you can either come up with your own or let our system generate suggestions for you. To enter your own title, simply type it into the designated space and use our auto-capitalization feature to ensure proper formatting—click the robot icon to toggle this feature on or off. If you're feeling stuck, click the lightbulb icon for a suggestion. Just make sure your text body contains enough content for our system to detect the story's theme, and ensure the title space is empty before clicking " generate headline ". generate headline Once you've added your title, your draft will be automatically saved, so remember to include some text. Remember, your title should accurately reflect the essence of your story and include relevant keywords to help readers discover it. Learn more here. Remember, your title should accurately reflect the essence of your story and include relevant keywords to help readers discover it. Learn more here . here 2. Formatting Features In our editor, you've got all the tools at your fingertips to format your text just how you want it: bold, overline, underline, lists, links, headlines , quotes , code , and more. To do so select your text and choose your desired options. format your text headlines quotes code Alternatively, you can click the + button on the left of your text line and pick an option from the list, which contains some options seen above and others like tables, images, links, dividers, info notices, and more. Here’s how it looks: 3. Embeds There are three main things you can embed in your story: images, videos , and links. videos Starting with images, you've got a range of choices: import from your device, import an image from a URL, grab one from an image bank, embed a GIF , or generate an AI image . Simply choose your preferred option, and voila! Your image will appear in your draft. embed a GIF generate an AI image When it comes to videos, you've can import them as you would images or embed YouTube links . Click the + button , navigate to the link option, paste your URL, and hit enter. Then, you'll encounter a prompt asking if you want to embed the link. For YouTube videos, you'll have the choice to add just the video, the transcription, or both - it will look something like this: embed YouTube links + button Lastly, links: it’s very similar to embedding YouTube videos, except you can link stories, code, and other external sources . Here’s how: link stories, code, and other external sources Embedding also extends to Twitter/X threads. Embedding also extends to Twitter/X threads . Twitter/X threads Onto The Story Settings Now that you have the gist of what you can do with your copy on our editor, here’s the rundown on the story settings fields you’ll need to fill out before submitting the story for editorial review: Add all of your story’s 8 tags: Tags help Google, Bing, DuckDuckGo, and friends find your content, to serve it to users searching for those terms. Plus, tags help HackerNoon distribute your content to top trafficked pages, as well as the most subscribed tags via our customizable newsletter, The Tech Brief. Add all of your story’s 8 tags: Tags help Google, Bing, DuckDuckGo, and friends find your content, to serve it to users searching for those terms. Plus, tags help HackerNoon distribute your content to top trafficked pages, as well as the most subscribed tags via our customizable newsletter, The Tech Brief. Add all of your story’s 8 tags: Tags help Google , Bing , DuckDuckGo , and friends find your content, to serve it to users searching for those terms. Plus, tags help HackerNoon distribute your content to top trafficked pages, as well as the most subscribed tags via our customizable newsletter, The Tech Brief. Add all of your story’s 8 tags : Add all of your story’s 8 tags Google Bing DuckDuckGo 2. Open Story Settings : At the top of your story settings you’ll see the number of words written - check this before submitting. One of our editorial guidelines stipulates a minimum word count for publication eligibility. Open Story Settings editorial guidelines Upload a featured image: Choose one from your device, explore image banks, and GIFs, or ask AI to create a new one. Upload a featured image: Choose one from your device, explore image banks, and GIFs, or ask AI to create a new one. Upload a featured image: Customize how you want comments managed for your story: Decide whether you want them to undergo editorial review or be approved instantly. Add your metadescription: Help web crawlers to index and humans to read Craft a TL:DR: type between 300 and 500 characters or have our AI generate a TL:DR for you Customize how you want comments managed for your story: Decide whether you want them to undergo editorial review or be approved instantly. Customize how you want comments managed for your story: Customize how you want comments managed for your story: Add your metadescription: Help web crawlers to index and humans to read Add your metadescription : Add your metadescription Craft a TL:DR: type between 300 and 500 characters or have our AI generate a TL:DR for you Craft a TL:DR: Pick Emoji Credibility Indicators: These indicators help you provide additional information relating to your story, giving readers more context. Is your story original? If it's a republication, hit "No" and drop the URL where it first went live; if it's fresh content, just tap "Yes". When in doubt, consult our republishing guidelines here. Pick Emoji Credibility Indicators: These indicators help you provide additional information relating to your story, giving readers more context. Pick Emoji Credibility Indicators : Pick Emoji Credibility Indicators Is your story original? If it's a republication, hit "No" and drop the URL where it first went live; if it's fresh content, just tap "Yes". When in doubt, consult our republishing guidelines here . Is your story original? here Once you've wrapped up all these steps, keep an eye out for a button that pops up at the bottom prompting you to " Submit Your Story for Review! " If you're feeling good about your story, just give it a click. Soon after, you'll get an email confirming that we've received your submission. A Staff Editor should review it within 3 business days..ish, and if accepted, we’ll distribute, distribute, and distribute your tech story. Submit Your Story for Review! NEW! On your draft, you’ll see the Submit Story button left in three different places: At the bottom of your story settings
At the top corner of your screen
At the bottom right corner of your screen Once you select the checkbox that matches your story's originality, these buttons will become active. NEW! On your draft, you’ll see the Submit Story button left in three different places: Submit Story At the bottom of your story settings At the top corner of your screen At the bottom right corner of your screen At the bottom of your story settings At the top corner of your screen At the bottom right corner of your screen Once you select the checkbox that matches your story's originality, these buttons will become active. Additional tools In the story settings, you'll find some extra goodies! You can whip up sticky notes and shoot a message to an editor for some writing support. Check out how it looks below: And there you have it! You're now equipped with the tools to transition from draft to publication - no reason not to hit that submit button and share your work with the world!

From Desk to HackerNoon: Your Ultimate Guide on How to Publish a Story

ডেস্ক থেকে হ্যাকারনুন পর্যন্ত: কীভাবে একটি গল্প প্রকাশ করবেন তার চূড়ান্ত গাইড

Vom Schreibtisch zum HackerNoon: Ihr ultimativer Leitfaden zum Veröffentlichen einer Story

Del escritorio a HackerNoon: su guía definitiva sobre cómo publicar una historia

Du bureau à HackerNoon : votre guide ultime sur la façon de publier une histoire

डेस्क से हैकरनून तक: कहानी प्रकाशित करने के बारे में आपकी अंतिम मार्गदर्शिका

デスクから HackerNoon へ: ストーリーを公開するための究極のガイド

데스크에서 HackerNoon까지: 스토리 게시 방법에 대한 최고의 가이드

From Desk to HackerNoon: seu guia definitivo sobre como publicar uma história

От стола до HackerNoon: ваше полное руководство о том, как опубликовать историю

Masadan HackerNoon'a: Bir Hikayenin Nasıl Yayınlanacağına İlişkin Temel Kılavuzunuz

Từ bàn làm việc đến HackerNoon: Hướng dẫn cơ bản về cách xuất bản một câu chuyện

从办公桌到 HackerNoon：如何发布故事的终极指南

Real-Time Event Monitoring with Redpanda, OpenTelemetry, and Grafana

How to Find Out If You're Paying for Slow Internet

Setup, Run and Debug Cypress Tests: A Quick Guide To Get You Started

Enhancing Password Security and Recovery with Next.js 14 and NextAuth.js

How to Create a 2D Character Controller in Unity: Part 1

কিভাবে ঐক্যে একটি 2D ক্যারেক্টার কন্ট্রোলার তৈরি করবেন: পার্ট 1

So erstellen Sie einen 2D-Charakter-Controller in Unity: Teil 1

Cómo crear un controlador de personajes 2D en Unity: Parte 1

Comment créer un contrôleur de personnage 2D dans Unity : partie 1

यूनिटी में 2D कैरेक्टर कंट्रोलर कैसे बनाएं: भाग 1

Unity で 2D キャラクター コントローラーを作成する方法: パート 1

Unity에서 2D 캐릭터 컨트롤러를 만드는 방법: 1부

Como criar um controlador de personagem 2D no Unity: Parte 1

Как создать контроллер 2D-персонажа в Unity: часть 1

Unity'de 2D Karakter Kontrol Cihazı Nasıl Oluşturulur: Bölüm 1

Cách tạo bộ điều khiển nhân vật 2D trong Unity: Phần 1

如何在 Unity 中创建 2D 角色控制器：第 1 部分

Welcome back business owners, marketing professionals, and anyone interested in harnessing digital analytics for business growth! In the first part of this series, we discussed: The importance of digital analytics for online businesses. How Google Analytics 4 collects and processes data. The basic structure of a GA4 account, and The role of dimensions and metrics in GA4. : Catch up here Google Analytics 4 (GA4) for Beginners—Part 1: Data Collection, Processing, and Account Structure In this part, we’ll: Take a closer look at the GA4 user interface. Learn the reports available in analytics and how to gain insights from them. Ready? Let’s get started! Understanding the Google Analytics 4 User Interface When you log into your GA4 account, the first thing you see is your Home Page. This contains a snapshot of insights relevant to your business. Suppose you have already played around with the tool. In that case, you will also see recently accessed reports and content suggestions that become more personalized as you continue to use Google Analytics. If the dimensions and metrics in the image above seem confusing, don’t worry; they’ll become much less so as we proceed. To the left of the homepage, you’ll find a navigation bar with 4 icons in addition to the Home Page: Reports Explore Advertising, & Admin Let’s take a quick peek at these sections. The GA4 Reports Page The Reports page contains…Reports! Seriously, though, reports help you understand user activity data on your website and apps. The orange rectangle in the image above encases general and more specific ready-made reports about how your users behave, from the moment they encounter your website or app and engage with it till they navigate away from it. \ The GA4 Explore Page The Explore page offers more sophisticated approaches for analyzing data with powerful audience discovery and comparison tools. At the top of your Explore page, you will find a template gallery containing select data visualization techniques such as: Free form Funnel exploration Path exploration Segment overlap Cohort exploration, & User lifetime These can be applied to your business for deeper insights into user behavior on your website or app. The GA4 Advertising Page This section helps you understand the ROI of your marketing spend and advertising efforts across channels. The GA4 Admin Page The admin section allows you to manage Google accounts, properties, events, and data streams. You can customize events, dimensions & metrics and manage who can access your data. \At the Top of your GA4 screen, you’ll find the account and property toggle; which lets you easily switch between all your properties, and a search bar. Using the GA4 Search Bar The search bar in GA4 is one of my favorite parts of the entire tool because it has many useful features - reports, educational materials, and, best of all, specific insights about user interaction/engagement. Suppose I want to find out how many users have visited from Nigeria in the last month. I can ask that question directly in the search bar. HackerNoon Voila! A detailed response will appear in the right-hand panel of your GA4 screen. Suppose, instead, I forgot how to switch accounts or properties in GA4. I can ask as well. Continue exploring the search bar to discover more business-related questions you can answer. Now that we’re done skimming through the Google Analytics 4 user interface, let’s dive a little deeper into how reports are put together! Understanding Reports in Google Analytics 4 Reports allow you to investigate your data, monitor traffic, and understand user activity. Once you’re on the reports page in GA4, you’ll first see your data as ‘Realtime Reports.’ This displays a quick view of traffic coming to your site and/or app over the past 30 minutes. After that, your data is processed into more detailed reports. The Reports navigation menu can be broadly grouped into 2 default collections: Life cycle - contains info about acquisition, monetization, and onsite behavior. User - contains reports about the tech that users access your website and/or app with, as well as their geographical information. the default reports available to you depend on some of the information you provided during setup. Not to worry; you can always tweak this in admin. Note: There are two main types of reports in GA4: - These summarize information about a specific topic into cards with different objectives. Overview Reports - This zooms in on 1 or 2 dimensions and shows you a more detailed view of your data. Detailed Reports Let’s explore this further with . Acquisition reports GA4 Acquisition Reports Once you click on Acquisition, you’ll see a list of available reports underneath, the first being Acquisition Overview. In this report, you’ll see cards that display intuitive summaries of your user and traffic acquisition data. \At the bottom of each card, you’ll find a clickable link that takes you deeper into the insights that the card summarizes. Clicking on this will load a new page with more information on the dataset. Next, let’s look at the User Acquisition report. GA4 User Acquisition Report This report offers insights into how users find your website or app for the first time. By default, the user acquisition report will have ‘First Channel’ as its primary dimension. \At the top of the table, you can see a dimension/metric toggle that lets you change your primary dimension depending on your unique business needs. Each dimension contains the text “First User” to demonstrate that the data is collected from when the user initially found your website. Suppose you want to know how old your users are, their genders, or what countries they find your website from. You can learn all these and more by adding a secondary dimension. Once you select a secondary dimension, a new column is added to the table like so: Let’s get some useful information from this table. Taking with the , and columns, we can see that the sample site has gotten from in the over the selected date range. Row 3 First User, Country New Users 2178 new users organic search United States Next, let’s look at the traffic acquisition report. GA4 Traffic Acquisition Report This report is self-explanatory. It displays information on how traffic reaches your website or app. In this report, each dimension contains “Sessions,” a session that groups user interactions based on when they engaged with your website or app. For instance, a web session starts when a user opens their browser and navigates to your website. It ends when a user closes the browser tab on your website. The traffic acquisition report is concerned with where new sessions come from regardless of whether the user is new or returning. This is unlike the user acquisition report, which focuses on only the first session from a user and nothing else beyond that. You can toggle your primary and secondary dimensions in the Traffic acquisition report the same way you did in the User acquisition report. Google Analytics will show data for the last 28 days. However, this can easily be adjusted to several preset date ranges or custom date ranges. This brings us to the end of this post! In this guide, we’ve: Made the GA4 user interface seem a lot less obscure/confusing. Played around with reports a little and learned how they’re curated and how to gain business-specific insights from them. In the next post, we’ll go further into reports, compare report data, use the explore page for deeper analysis, and more! To ensure you don’t miss any updates, on HackerNoon. Subscribe to me See you soon! Lead image source.

Google Analytics 4 (GA4) for Beginners—Part 2: Mastering Reports and User Interface Navigation

নতুনদের জন্য Google Analytics 4 (GA4) — পার্ট 2: মাস্টারিং রিপোর্ট এবং ইউজার ইন্টারফেস নেভিগেশন

Google Analytics 4 (GA4) für Anfänger – Teil 2: Berichte und Benutzeroberflächennavigation meistern

Google Analytics 4 (GA4) para principiantes: Parte 2: Dominar los informes y la navegación en la interfaz de usuario

Google Analytics 4 (GA4) pour les débutants – Partie 2 : Maîtriser les rapports et la navigation dans l'interface utilisateur

शुरुआती लोगों के लिए Google Analytics 4 (GA4)—भाग 2: रिपोर्ट और उपयोगकर्ता इंटरफ़ेस नेविगेशन में महारत हासिल करना

初心者向け Google アナリティクス 4 (GA4) - パート 2: レポートとユーザー インターフェース ナビゲーションの習得

초보자를 위한 Google Analytics 4(GA4) - 2부: 보고서 및 사용자 인터페이스 탐색 익히기

Google Analytics 4 (GA4) para iniciantes – Parte 2: Dominar relatórios e navegação na interface do usuário

Google Analytics 4 (GA4) для начинающих. Часть 2. Освоение отчетов и навигация в пользовательском интерфейсе.

Yeni Başlayanlar İçin Google Analytics 4 (GA4)—Bölüm 2: Raporlarda Uzmanlaşma ve Kullanıcı Arayüzünde Gezinme

Google Analytics 4 (GA4) dành cho người mới bắt đầu—Phần 2: Làm chủ báo cáo và điều hướng giao diện người dùng

面向初学者的 Google Analytics 4 (GA4) - 第 2 部分：掌握报告和用户界面导航

How to Master .NET 8 Web API: From Setup to Security - The Best 50 Tips

কিভাবে .NET 8 ওয়েব এপিআই আয়ত্ত করবেন: সেটআপ থেকে নিরাপত্তা - সেরা 50 টি টিপস

.NET 8 Web API meistern: Von der Einrichtung bis zur Sicherheit – Die 50 besten Tipps

Cómo dominar la API web .NET 8: de la configuración a la seguridad: los 50 mejores consejos

Comment maîtriser l'API Web .NET 8 : de la configuration à la sécurité - Les 50 meilleurs conseils

.NET 8 वेब एपीआई में महारत कैसे हासिल करें: सेटअप से सुरक्षा तक - सर्वोत्तम 50 युक्तियाँ

.NET 8 Web API をマスターする方法: セットアップからセキュリティまで - ベスト 50 のヒント

.NET 8 Web API를 마스터하는 방법: 설정부터 보안까지 - 최고의 50가지 팁

Como dominar a API da Web .NET 8: da configuração à segurança - as 50 melhores dicas

Как освоить веб-API .NET 8: от настройки до безопасности — 50 лучших советов

.NET 8 Web API'sinde Uzmanlaşma: Kurulumdan Güvenliğe - En İyi 50 İpucu

Cách làm chủ API Web .NET 8: Từ thiết lập đến bảo mật - 50 mẹo hay nhất

如何掌握 .NET 8 Web API：从设置到安全 - 50 个最佳技巧

I’ve been spending more time working with Blazor, which means many more learning opportunities for me. That also means more learning opportunities for me to share with YOU! In this particular case, I was battling with trying to hook some event handlers on some MudBlazor list items… But it turns out that the Blazor render mode was the part breaking my dependency injection on the page, which was the culprit of my event hookups never working. In this article, I’ll walk you through the scenario I was facing and how I started debugging. You’ll see that I realized I was focused on the wrong concept, and once I realized some details about the configured Blazor render mode, things started to make more sense. I hope that this article (and video) help you — and I am confident they’ll help me the next time I run into this. Before I Knew It Was Blazor Render Mode… I was heads-down working on some Blazor UI for an application I’m building, and it’s the motivation behind whipping up . The problem was pretty simple: I just wanted to wire up some to some buttons that I had on my list items. another quick article on MudBlazor list items event handlers Here’s what the code looked like: @page "/items"

@using DevLeader.Services
@using DevLeader.Services.Items

@inject IItemsService ItemsService

<PageTitle>Dev Leader Is Awesome!</PageTitle>

<h1>Dev Leader Is Awesome!</h1>


@if (_itemsCollection == null)
{
    <p><em>Loading...</em></p>
}
else if (_itemsCollection.Count == 0)
{
    <p><em>No items found.</em></p>
}
else
{
    <MudList>
    @foreach (var item in _itemsCollection)
        {
            <MudListItem>
                <MudCard>
                    <MudCardHeader>
                        @item.Title
                    </MudCardHeader>
                    <MudCardContent>
                        <MudButtonGroup xs="12" sm="6">
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Primary"
                                       OnClick="e => ApproveButton_OnClickAsync(item)">
                                Approve
                            </MudButton>
                            <MudButton Variant="Variant.Filled"
                                       Color="Color.Secondary"
                                       OnClick="async e => await RejectButton_OnClickAsync(item)">
                                Reject
                            </MudButton>
                        </MudButtonGroup>
                    </MudCardContent>

                </MudCard>
            </MudListItem>
        }
    </MudList>
}

@code {
    private IReadOnlyList<Item>? _itemsCollection;

    protected override async Task OnInitializedAsync()
    {
        await Task.Yield();

        var endDateTimeUtc = DateTime.UtcNow.AddDays(1);
        var startDateTimeUtc = DateTime.UtcNow.AddDays(-7);

        _itemsCollection = await ItemsService
            .GetItemsAsync(
                startDateTimeUtc: startDateTimeUtc,
                endDateTimeUtc: endDateTimeUtc,
                cancellationToken: CancellationToken.None)
            .ConfigureAwait(false);
    }

    private async Task ApproveButton_OnClickAsync(Item feedItem)
    {
        await Task.Yield();
    }

    private async Task RejectButton_OnClickAsync(Item feedItem)
    {
        await Task.Yield();
    }
} You can see that I was even fooling around with trying to see different implementations of the — because they just were NOT triggering no matter what I did. But that turned out to be a red herring because the event handlers not triggering were a symptom of the problem. async event handlers For the rest of this article, I’ll explain more about that problem (hint: it’s how dependency injection and render mode play together). I also made this video about Blazor render modes and how I was debugging this dependency injection issue here: https://youtu.be/bo7Ahp2r7kI?embedable=true Dodging the Red Herring Even though I had set out to go wire up event handlers and prove that they worked, the fact that they seemed busted was a red herring. The async event handlers not firing was not because I was doing MudBlazor setup incorrectly, it’s because there was another problem altogether. And here’s what was hiding in my console output: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]Unhandled exception rendering component: Cannot provide a value for property 'ServiceImplementation' on type 'MyProject.Pages.MyPage'. There is no registered service of type 'MyProject.IService'.System.InvalidOperationException: Cannot provide a value for property 'MyService' on type 'MyProject.Pages.MyPage'. There is no registered service of type 'MyProject.IService'. I figured if I have an exception being thrown on the page, perhaps I shouldn’t put my energy into the async event handlers anymore on the MudBlazor list items… Odds are, I had a bigger problem to sort out, and that bigger problem was just causing the rest of the page to not load correctly. : the odds were correct. Spoiler alert But here’s what was VERY weird about this situation: The page was showing results in the MudList component as there was an individual MudListItem populated. The only way this can happen, if you check the code shown earlier in the article, is if my dependency is called. This means, 100% for certain, that the dependency WAS accessible on the page and we DID call and use it successfully. … Which means now all of a sudden in some cases, we can’t seem to get the dependency. From all of my experience using Autofac and other dependency injection frameworks, this was baffling. Generally speaking, if we can resolve a dependency once, we should be able to resolve it again. One could argue maybe subsequent resolutions have different behaviors, but at least the DI framework could identify that there was something registered. So… what makes this situation different than when things are working? To the Internet, I went… which is also why this article and the video I created exist. Blazor Render Mode Broke My App! Full disclaimer: this is not the fault of Blazor or Blazor render modes being bad… Nothing like that. This is 100% an issue that I created due to my misunderstanding, or lack of understanding, of how render modes work in Blazor. My application is configured to use InteractiveAuto render mode. This is what was configured in the template when I created my application in Visual Studio: @code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

     private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
         ? null
         : InteractiveAuto;
} This means that Blazor will determine when it can do client-side rendering for performance/latency reasons — in some situations dramatically improving the loading experience for users. The problem? It means that my dependency injection is going to try and take place on the client side! Not going to work for me. At least, not with a solution I know of yet… But I’m sure we’ll get there. The internet suggested that I could toggle the Blazor render mode per page, which seemed to be a very sensible move. In fact, this was a great solution that I would have liked to do, however… Adding the @ directive on the individual pages never worked. The behavior to change the render mode NEVER updated for me. Again, this will be a follow-up article and video when I figure out what the heck was going on. The fix for me, at least what will work for now for me, is as follows: @code {
    [CascadingParameter]
    private HttpContext HttpContext { get; set; } = default!;

    // private IComponentRenderMode? RenderModeForPage => HttpContext.Request.Path.StartsWithSegments("/Account")
    //     ? null
    //     : InteractiveAuto;

    private IComponentRenderMode? RenderModeForPage => InteractiveServer;
} I don’t need to rely on any client-side rendering right now. This will at least unblock me to continue to develop my Blazor application. As things evolve, I’ll be sure to come back and revisit this Blazor render mode setting to make a better decision. Wrapping Up Blazor Render Mode and Dependency Injection Blazor render mode is broken! Okay, I’m kidding, so hopefully that wasn’t your takeaway from this article. There are a few key points I wanted to highlight, including that my current solution here may not at all be a viable option for you. And that’s why I will be creating follow-ups as I sort through this myself. My takeaways: If your code on page isn’t executing when you think it should be, double check for console errors. Something might be preventing the page to load as you expect. Blazor server-side rendering vs Blazor client-side rendering will in fact treat dependency injection separately. Give this some thought. This is an example of some potential “technical debt” that I will need to pay down later… but I would rather keep building than remain stuck for now. If you found this useful and you’re looking for more learning opportunities, consider and check out my ! subscribing to my free weekly software engineering newsletter free videos on YouTube

Blazor Render Mode – How To Avoid Dependency Injection Woes

Top Heroku Add-ons for App Development In 2024

2024 সালে অ্যাপ ডেভেলপমেন্টের জন্য সেরা Heroku অ্যাড-অন

Top Heroku-Add-ons für die App-Entwicklung im Jahr 2024

Principales complementos de Heroku para el desarrollo de aplicaciones en 2024

Meilleurs modules complémentaires Heroku pour le développement d'applications en 2024

2024 में ऐप डेवलपमेंट के लिए शीर्ष हेरोकू ऐड-ऑन

2024 年のアプリ開発向けのトップ Heroku アドオン

2024년 앱 개발을 위한 최고의 Heroku 추가 기능

Principais complementos Heroku para desenvolvimento de aplicativos em 2024

Лучшие дополнения Heroku для разработки приложений в 2024 году

2024'te Uygulama Geliştirme için En İyi Heroku Eklentileri

Các tiện ích bổ sung Heroku hàng đầu để phát triển ứng dụng vào năm 2024

2024 年应用程序开发的顶级 Heroku 附加组件

Dependency Injection in is a lifesaver when organizing dependencies — especially in more complex ASP.NET Core applications. And if you’re already or just want to stick as close as possible to the already provided DI offerings, is a great enhancement. C# familiar with IServiceCollection Scrutor in C# In this article, I’ll provide you with a high-level overview of Dependency Injection and Scrutor in C#. But from there, we’re jumping right into 3 tips that you can use with Scrutor that could prove to be very helpful in your application! What is Scrutor in C#? Scrutor is a powerful NuGet package in C# that enhances dependency injection. It simplifies the registration and resolution of dependencies, making it easier for you to manage and organize your code. Dependency injection is a popular approach to configuring applications that promotes loose coupling and improves testability and maintainability. It involves injecting dependencies into a class rather than directly creating them within the class. This means that the responsibility of creating the dependency is not owned by the class requiring it, but instead, owned by someone up the call stack. Eventually, this pushes nearly all dependency creation to the entry point of an application, making it unwieldy. However,  dependency injection frameworks help . clean up and organize all of this logic Scrutor takes this concept a step further by providing a simple and intuitive way to register and resolve dependencies. With Scrutor, you no longer need to manually register each dependency one by one. Instead, you can use conventions and attributes to automate the process. 1 – Using Scrutor for Registration and Resolution To illustrate how to use Scrutor in C# for registration and resolution, let’s consider a simple scenario. Imagine we have an application that requires the use of different data repositories, such as UserRepository and ProductRepostiory. First, we need to install the Scrutor NuGet package in our project. Open the Package Manager Console and run the following command: Install-Package Scrutor Next, we need to define our repositories and their corresponding interfaces. This example is essentially empty, but we’ll be referring to these in a moment: public interface IUserRepository
{
    // Interface methods
}
public class UserRepository : IUserRepository 
{
    // Implementation
}

public interface IProductRepository
{
    // Interface methods
}

public class ProductRepository : IProductRepository
{
    // Implementation
} Now, let’s wire up our dependencies using Scrutor. In your startup code (such as in the ConfigureServices method in ASP.NET Core), add the following code: services.Scan(scan => scan
    .FromAssemblyOf<Startup>()
    .AddClasses(classes => classes.AssignableToAny(
        typeof(IUserRepository),
        typeof(IProductRepository)))
    .AsImplementedInterfaces()
    .WithScopedLifetime()); This code uses the Scan method from Scrutor to scan the assembly that contains the Startup class. It then filters out the classes that are assignable to IUserRepository or IProductRepository interfaces. Finally, it maps the implementations of these interfaces and registers them with their respective interfaces. Now, we can inject these dependencies into our classes. For example, let’s say we have a UserService class that requires IUserRepository: public class UserService 
{
    private readonly IUserRepository _userRepository; 
    
    public UserService(IUserRepository userRepository) 
    { 
        _userRepository = userRepository;
    }

    // Rest of the class implementation
} By declaring IUserRepository as a dependency in the constructor, Scrutor along with IServiceCollection will automatically resolve and inject the UserRepository instance for us. 2 – The Decorator Pattern – Example of Logging for Services Imagine you have a service interface and an implementation . You want to log the entry and exit of each method call in without polluting its business logic with logging concerns. IService MyService MyService First, define the interface and its implementation: IService public interface IService
{
    void DoWork();
}

public class MyService : IService
{
    public void DoWork()
    {
        // Business logic here
    }
} Next, create a decorator class that implements . This class will wrap the actual service and add logging around the delegated method calls: LoggingDecorator IService public class LoggingDecorator : IService
{
    private readonly IService _decorated;
    private readonly ILogger<LoggingDecorator> _logger;

    public LoggingDecorator(IService decorated, ILogger<LoggingDecorator> logger)
    {
        _decorated = decorated;
        _logger = logger;
    }

    public void DoWork()
    {
        _logger.LogInformation("Starting work.");
        _decorated.DoWork();
        _logger.LogInformation("Finished work.");
    }
} Now, use Scrutor to register your service and its decorator in the or wherever you configure your services: Startup.cs public void ConfigureServices(IServiceCollection services)
{
    // Register the base service
    services.AddScoped<IService, MyService>();

    // Use Scrutor to apply the decorator
    services.Decorate<IService, LoggingDecorator>();

    // Make sure to register the ILogger or ILogger<T> dependencies if not already done

} This setup uses Scrutor to wrap the registration with the . When resolving , the DI container will provide an instance of , which in turn wraps an instance of . This approach achieves the separation of concerns by keeping the logging logic outside of your business logic. IService LoggingDecorator IService LoggingDecorator MyService 3 – Feature Toggle for Service Implementations When we’re building complex systems, there are often cases where we want to introduce something like feature flags. These allow us to take different code paths based on configuration and not have to recompile and deploy an entire application. In some situations, it’s not just about picking a different code path, it’s about swapping an entire implementation of something! Let’s try out an example together! Assume you have an interface with multiple implementations: (a new, experimental feature) and (the current, stable feature). You want to switch between these implementations at runtime based on a configuration flag. IFeatureService NewFeatureService StandardFeatureService First, define the interface and its implementations: IFeatureService public interface IFeatureService
{
    void ExecuteFeature();
}

public class NewFeatureService : IFeatureService
{
    public void ExecuteFeature()
    {
        // New feature logic
    }
}

public class StandardFeatureService : IFeatureService
{
    public void ExecuteFeature()
    {
        // Standard feature logic
    }
} Next, you need a way to determine which implementation to use based on a feature toggle setting. This could be a value in , a database setting, or any other configuration source. appsettings.json Now, use Scrutor to dynamically register the appropriate service implementation based on the feature toggle: public void ConfigureServices(IServiceCollection services)
{
    // Assume GetFeatureToggleValue() retrieves the current feature toggle setting
    var useNewFeature = GetFeatureToggleValue("UseNewFeature");

    // Dynamically register the appropriate implementation based on the feature toggle
    if (useNewFeature)
    {
        services.AddScoped<IFeatureService, NewFeatureService>();
    }
    else
    {
        services.AddScoped<IFeatureService, StandardFeatureService>();
    }

    // Optional: You could combine this with the previous example
    // to use the decorator pattern too!
    // services.Decorate<IFeatureService, FeatureServiceProxy>();
}

private bool GetFeatureToggleValue(string featureName)
{
    // This method would typically check your
    // configuration source to determine if the feature is enabled
    // For simplicity, this is just a placeholder
    return false; // or true based on actual configuration
} Taking an approach like this can help us with: : Allows the application to switch between feature implementations without needing to redeploy. You can enable or disable features with just a configuration change. Flexibility : You can test new features in a production environment with a limited set of users by toggling the feature on for those users. Testing in Production : Helps in rolling out features gradually to monitor the impact and ensure stability before a wider release. Gradual Rollouts : Quickly revert to the old implementation if issues arise with the new feature, minimizing downtime and impact on users. Risk Mitigation Wrapping Up Scrutor in C# In this article, I provided you with 3 simple tips for dependency injection with Scrutor in C#. After a brief overview of what dependency injection is and how Scrutor fits into it, we jumped right into our examples. We got to see assembly scanning, how to decorate dependencies, and even how to consider feature flagging entire implementations! Dependency injection is something that can greatly simplify your applications as they grow in complexity, and Scrutor can be a huge help if you want to stick to the . If you found this useful and you’re looking for more learning opportunities, consider and check out my ! Join me and the ! built-in IServiceCollection offering from Microsoft subscribing to my free weekly software engineering newsletter free videos on YouTube other community members on Discord Also published here.

3 Simple Tips For Dependency Injection Using Scrutor in C#

C# এ স্ক্রুটার ব্যবহার করে নির্ভরতা ইনজেকশনের জন্য 3 টি সহজ টিপস

3 einfache Tipps für die Abhängigkeitsinjektion mit Scrutor in C#

Tres consejos sencillos para la inyección de dependencias utilizando Scrutor en C#

3 conseils simples pour l'injection de dépendances à l'aide de Scrutor en C#

C# में स्क्रूटर का उपयोग करके निर्भरता इंजेक्शन के लिए 3 सरल युक्तियाँ

C# で Scrutor を使用した依存関係の注入に関する 3 つの簡単なヒント

C#에서 Scrutor를 사용하여 종속성 주입을 위한 3가지 간단한 팁

3 dicas simples para injeção de dependência usando Scrutor em C#

3 простых совета по внедрению зависимостей с помощью Scrutor в C#

C#'ta Scrutor Kullanarak Bağımlılık Enjeksiyonu İçin 3 Basit İpucu

3 mẹo đơn giản để chèn phụ thuộc bằng Scrutor trong C#

在 C# 中使用 Scrutor 进行依赖注入的 3 个简单技巧

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes, this is easy and can be done with some simple CSS, but other times, it may be more complicated. You may need to append markup to the bottom of your document so that it can be placed on top of everything else. Or maybe, depending on the scroll position, a pop-up will need to open upward instead of downward. There are lots of possible scenarios where you may need more than what’s capable with CSS by itself, and that’s where the CDK Overlay Module comes into play. In this post, we’ll look at how we can use the CDK Overlay Module to create a globally positioned modal that’s placed on top of everything else and centered within the viewport. And to contrast, we’ll create a pop-up connected to a button that will automatically position itself within the viewport based on scroll position. Alright, let’s get to it! https://youtu.be/S7d2zvbFKhs?embedable=true The Angular CDK Overlay module is really powerful and provides many features. And this means there’s a lot to know and understand. The aim of this post is to demonstrate a basic setup for two common types of overlays, modals, and pop-ups. Since there’s so much to cover within the Overlay module, I will be creating posts of more advanced Overlay module features in the future, so keep an eye out for those. For now, though, let’s start with a basic modal example. Creating a Modal With the Angular CDK Overlay Service Here, we have this list of NBA players. We have this button in the upper right corner of each player. When we click this button, we want to open up a modal to display more information about the specific player. This is something that is fairly easy to do using the CDK Overlay module. How to install the Angular CDK But, before we can use it, we first need to install the Angular CDK, which we can do with this command within our Angular app: npm i @angular/cdk How to import the Angular CDK Overlay prebuilt CSS After we have it installed, we will want to include the overlay-prebuilt CSS file from the library. It provides some basic styles in order to create modals and pop-ups that work correctly. I normally include it in something like the global stylesheet for the Angular app, so let’s import it there. global_styles.scss @import '@angular/cdk/overlay-prebuilt.css'; Ok, now we’re ready to wire up our modal. The first thing we need to do is inject the Overlay service into our constructor so that we can use it. player.component.ts export class PlayerComponent {
    ...
    constructor(private overlay: Overlay) {}
} Now, let’s create an method that we’ll call at the click of a button. Within this method, first, we’ll create our overlay using the method from the service. This method will create an overlay and return the reference to it, so we’ll set it as a variable named overlayRef since that’s what we will have after calling . openModal() create() create() export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
    }
} Ok, at this point we’ve created it, now we need to attach some markup to the overlay. So, we’ll use our overlayRef variable, and we’ll call the method. This method has a parameter where we need to pass a . attach() CdkPortal export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach();
    }
} This template portal will need to wrap whatever markup we want to display in our modal. Before we can add this portal, we first need to import it into the Portal Module. ...
import { PortalModule } from '@angular/cdk/portal';

@Component({
    selector: 'app-player',
    imports: [..., PortalModule]
    ...
} Ok, now we can switch over to our component template. We’ll add an . On this we’ll add the directive. And within this let’s add our player details component. This component has an input where it takes in a player object, so we’ll pass it to our current player. ng-template ng-template cdkPortal ng-template player.component.html <ng-template cdkPortal>
    <app-player-details [player]="player"></app-player-details>
</ng-template> Now, we also need to import this player component, so let’s do that real quick. player.component.ts ...
import { PlayerDetailsComponent } from './player-details/player-details.component';

@Component({
  selector: 'app-player',
  imports: [..., PlayerDetailsComponent]
  ...
}) Ok, the next thing we need to do is access the portal that we just added in the template so that we can pass it to our attach method. We can do this using the Angular View Child decorator. And for the , its selector will be the . We’ll call this property , and we’ll type it to as well. @ViewChild CdkPortal portal CdkPortal import { CdkPortal, PortalModule } from '@angular/cdk/portal';

export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
} Now that we have a handle on the portal, we can simply add it to our attach method. export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach(this.portal);
    }
} And the last thing we need to do is call this open modal method when the button is clicked. So, back in our component template, on the button, we bind to the click event, and then we call our method. player.component.html <button (click)="openModal()">
    ...
</button> Ok, now let’s click our button and take a look. And there it is, the click opens the modal with our player details. So, this is pretty cool, but at first glance, this may not seem like anything special, but let me tell you, it actually is. If we inspect the modal, we can see that the markup for our player details is actually getting injected into a container at the end of the . This is pretty crazy since our player component is up above within the app component. body This is what ensures that this modal will properly be placed on a layer that is unaffected by anything else within our app. And that can be really handy in many modal situations. How to Customize the Angular Overlay Settings With a Custom Overlay Config Object Now, as I mentioned earlier, there’s a lot of functionality and configuration available with the Overlay Module. For example, if we want to position our model in the center of the viewport, We can do this by passing a custom configuration object to the overlay. To do this, let’s create a variable. This will be set to a new object. We’ll need to make sure that class is imported. Within this, we’re going to set the for the overlay. config OverlayConfig positionStrategy We’ll add , and then we’ll call the method. It’s going to be a position, which just means that it will be positioned relative to the viewport and not any specific element. From there, we’ll call , and then . this.overlay position() global() centerHorizontally() centerVertically() Let’s also set a width of sixty percent to keep it from growing too wide. Then, we can pass this custom config in our create method. The items we’ve included in this custom config will now override the default values for those properties. ...
import { ..., OverlayConfig } from '@angular/cdk/overlay';

export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
            width: '60%'
        });
        const overlayRef = this.overlay.create(config);
        overlayRef.attach(this.portal);
    }
} Ok, let’s check it out. Looking pretty good right? How to Close an Angular CDK Overlay on a Backdrop Click Now, what if we want to put up a layer over the viewport when the modal is open, and when we click on that layer, we want to close the modal? Well, we can do this by adding more custom configurations in our . We can add true. This will add a backdrop element to our overlay. OverlayConfig hasBackdrop Now, to close the modal when this backdrop gets clicked, we have a method on our overlay ref that we can call. This method returns an observable that will fire every time the backdrop is clicked as long as it is open, so we can subscribe. Then, in the callback here, we will close our overlay by calling . backdropClick() overlayRef.detach() ...
export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            ...
            hasBackdrop: true
        });
        ...
        overlayRef.backdropClick().subscribe(() => overlayRef.detach());
    }
} Now, let’s try this. Cool, it closes when we click on this backdrop. Now, there’s a ton more available to us here, so I’ll save it for a future post. Just know that there’s quite a bit more functionality and configuration available to you if needed. For now, let’s look at an example of a Connected Position overlay. Creating a Pop-up With a Connected Position Angular CDK Overlay Creating a “connected position” overlay means that our pop-up, instead of being globally positioned within the viewport, will be positioned relative to the button that we clicked on to open it. As if it’s attached to it. For this, we can use a couple of directives provided by the Overlay module instead of using the Overlay service. We’ll use the directive, which will be applied to the item that we want to position from, in our case, our button. And then, we’ll use the directive that will be applied to the that we want to inject into our popup. cdkOverlayOrigin cdkConnectedOverlay ng-template For this example, since we’ll be using these directives, we can actually remove most of what we added when we were using the Overlay service. Well, get rid of the , the constructor, and the function. We can also remove the , , , and imports as well. @ViewChild openModal() PortalModule CdkPortal Overlay Overlay Config Now, within the component template, we can replace the click binding on our button with the directive. cdkOverlayOrigin <button cdkOverlayOrigin>
    ...
</button> On the overlay , we can replace the directive with the directive. ng-template cdkPortal cdkConnectedOverlay <ng-template cdkConnectedOverlay>
    ...
</ng-template> Now, we need to connect the overlay to the origin. To do this, the overlay has an input called . We need to pass this input to our origin directive instance. So we add a template reference variable, let’s call it trigger, on our origin button. cdkConnectedOverlayOrigin <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">
    ...
</button> Now, we can pass this reference to the overlay with the input. cdkConnectedOverlayOrigin <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger">
    ...
</ng-template> To make this pop-up open, we’ll use the input. This input expects a boolean value telling it whether it should be open or not. So, let’s add a property called , and initialize it to false. cdkConnectedOverlayOpen detailsOpen ...
export class PlayerComponent {
    protected detailsOpen = false;
} We’ll toggle the property when the button is clicked using a click event binding. <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    (click)="detailsOpen = !detailsOpen">
    ...
</button> Then, we can bind our input to this property on the overlay. cdkConnectedOverlayOpen <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen">
    ...
</ng-template> Ok, let’s give this a try. Cool, now it gets positioned next to the button. And, if we inspect this again, the markup gets injected in the same location, at the end of the body. What’s even more cool is that on the item at the bottom of the viewport, we will want it to open upward because we don’t have room to see it if it opens downward. Well, if we click on the button, we can see that this actually happens without us doing anything at all. Super cool. This really saves us a ton of effort. All the tough stuff has already been figured out for us. And just like the global positioning method, when using the Overlay service, there are a bunch of configurations available to us. This time, with the directives, however, we use s and s. @Input @Output So, if we want to add the width, for example, we can use the input. cdkConnectedOverlayWidth <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%">
    ...
</ng-template> Now, the pop-up won’t grow beyond sixty percent of the width of its container. And if we want to close this pop-up when we click anywhere outside, we can use the output, which will fire when it detects a click outside of itself. When this happens, we can set our details open property to false. overlayOutsideClick <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%"
    (overlayOutsideClick)="detailsOpen = false">
    ...
</ng-template> Now, when we open our pop-up and then click outside, it closes. Just like with the Overlay service, there’s a ton more available to us, which I’ll save for a future post. Just remember that there’s more functionality and configuration available outside of what I’ve covered here. So, some pretty cool stuff is happening in these examples. It’s all actually quite complex from a development perspective, but there’s not much for us to figure out in order to leverage it, thanks to the folks who built it. Found This Helpful? If you found this article helpful and want to show some love, you can always buy me a coffee! Want to See It in Action? Check out the demo code and examples of these techniques in the Stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-hnqgln?ctl=1&embed=1&file=src%2Fplayer%2Fplayer.component.ts&embedable=true Also published . here

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Stories, News & Mentions about TOGGLE

Toggle’s Stories on HackerNoon