502 Matching Annotations
  1. Last 7 days
  2. Aug 2022
    1. The clientHeight property returns the inner height of an element in pixels. The property includes padding but excludes borders, margins and horizontal scrollbars.Alternatively, you can use the offsetHeight property, which returns the height of the element in pixels, including vertical padding and borders.

      ```js useEffect(() => { setDivHeight(ref.current.offsetHeight); console.log('height: ', ref.current.offsetHeight);

      console.log('width: ', ref.current.offsetWidth); }, []); ```

  3. Jul 2022
    1. And immediately after it, the 2 CSS downloads begin. What we want to do is move the CSS downloads to the left, so all rendering starts (and finishes!) sooner. So all you do it take the URLs of these two files and add them to .htaccess with H2PushResource in front. For me that means the URL to my custom theme's CSS /wp-content/themes/phpied2/style.css as well as some WordPress CSS stuff. While I was there I also added a JavaScript file which is loaded later. Why now start early? So the end result is:

      WordPress tip to start loading some CSS and JS files earlier.

      Sample code to add to .htaccess: H2PushResource /wp-content/themes/phpied2/style.css H2PushResource /wp-includes/css/dist/block-library/style.min.css?ver=5.4.1 H2PushResource /wp-includes/js/wp-emoji-release.min.js?ver=5.4.1

  4. Jun 2022
  5. May 2022
    1. ```css .long-text { margin-bottom: 10px; }

      .clamp { -webkit-line-clamp: 5; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; overflow-wrap: break-word; } ```

      ```js import { LoremIpsum } from "https://cdn.skypack.dev/lorem-ipsum@2.0.3"; import classnames from "https://cdn.skypack.dev/classnames@2.3.1"; import * as lodash from "https://cdn.skypack.dev/lodash@4.17.21";

      const getText = (paragraphs) => { const lorem = new LoremIpsum(); return lorem.generateParagraphs(paragraphs); };

      const ReadMoreText = ({ text }) => { const [clamped, setClamped] = React.useState(true); const [showButton, setShowButton] = React.useState(true); const containerRef = React.useRef(null); const handleClick = () => setClamped(!clamped);

      React.useEffect(() => { const hasClamping = (el) => { const { clientHeight, scrollHeight } = el; return clientHeight !== scrollHeight; };

      const checkButtonAvailability = () => {
        if (containerRef.current) {
          // Save current state to reapply later if necessary.
          const hadClampClass = containerRef.current.classList.contains("clamp");
          // Make sure that CSS clamping is applied if aplicable.
          if (!hadClampClass) containerRef.current.classList.add("clamp");
          // Check for clamping and show or hide button accordingly.
          // Sync clamping with local state.
          if (!hadClampClass) containerRef.current.classList.remove("clamp");
      const debouncedCheck = lodash.debounce(checkButtonAvailability, 50);
      window.addEventListener("resize", debouncedCheck);
      return () => {
        window.removeEventListener("resize", debouncedCheck);

      }, [containerRef]);

      return ( <> <div ref={containerRef} className={classnames("long-text", clamped && "clamp")} > {text} </div> {showButton && ( <button onClick={handleClick}>Read {clamped ? "more" : "less"}</button> )} <br /> ); };

      const App = () => { const text = getText(2); return <ReadMoreText text={text} />; };

      ReactDOM.render(<App />, document.getElementById("App")); ```

    1. To select an element tag or attribute defined in a specific namespace, you declare a namespace prefix with an @namespace rule, then use it in your selector. The namespace is separated from the tag name with a | (vertical bar or pipe) character; if there is no tag name in the selector, use a universal * selector:

      ```css @namespace svg "http://www.w3.org/2000/svg";

      a { / These rules would apply to any a elements. / text-decoration: underline; color: purple; } svg|a { / These rules would apply to SVG a elements, but not HTML links. / stroke: purple; } svg| { / These rules apply to all SVG-namespaced elements, but not HTML elements. */ mix-blend-mode: multiply; } ```

    1. ```css .dont-break-out {

      / These are technically the same, but use both / overflow-wrap: break-word; word-wrap: break-word;

      -ms-word-break: break-all; / This is the dangerous one in WebKit, as it breaks things wherever / word-break: break-all; / Instead use this non-standard one: / word-break: break-word;

      / Adds a hyphen where the word breaks, if supported (No Blink) / -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto;

      } ```

    1. Say hello to the sassy new Media Queries!

      js const html = document.getElementsByTagName('html')[0]; const toggleTheme = (theme) => { html.dataset.theme = theme; } html <script> // If `prefers-color-scheme` is not supported, fall back to light mode. // In this case, light.css will be downloaded with `highest` priority. if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') { document.documentElement.style.display = 'none'; document.head.insertAdjacentHTML( 'beforeend', '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">' ); } </script> <!-- Conditionally either load the light or the dark stylesheet. The matching file will be downloaded with `highest`, the non-matching file with `lowest` priority. If the browser doesn't support `prefers-color-scheme`, the media query is unknown and the files are downloaded with `lowest` priority (but above I already force `highest` priority for my default light experience). --> <link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)"> <link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: light)"> <!-- The main stylesheet --> <link rel="stylesheet" href="/style.css">

      html <img src="./sun.svg" data-light-src="./sun.svg" data-dark-src="./moon.svg" alt="light theme" id="theme-selector" onclick="switchTheme(this)">

    1. The only catch with this method is, it will also invert all the images in your application. So we will add the same rule to all images to reverse the effect. css html[theme='dark-mode'] img{ filter: invert(1) hue-rotate(180deg); } and we will also add a transition to the HTML element to make sure the transition does not become flashy!

      css html { transition: color 300ms, background-color 300ms; }

    2. html[theme='dark-mode'] { filter: invert(1) hue-rotate(180deg); }

      Ultimate CSS to turn on dark mode

  6. Apr 2022
    1. css .hoverClassColor:hover { color:var(--hover-color) !important; } js render() { return <a className={'hoverClassColor'} style={{'--hover-color':'red'}}>Test</a> }

    1. Setting "img max-width:100%" is a technique employed in responsive/fluid web site design so that images re-size proportionally when the browser is re-sized. Apparently some css grid systems have started setting this style by default. More info about fluid images here: http://www.alistapart.com/articles/fluid-images/
    1. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container.
  7. Mar 2022
  8. Feb 2022
    1. Class selectors


  9. Jan 2022
    1. When you give an element a width of 100% in CSS, you’re basically saying “Make this element’s content area exactly equal to the explicit width of its parent — but only if its parent has an explicit width.” So, if you have a parent container that’s 400px wide, a child element given a width of 100% will also be 400px wide, and will still be subject to margins, paddings, and borders — on top of the 100% width setting.
    1. Add a ::after which autofills the space. No need to pollute your HTML. Here is a codepen showing it: http://codepen.io/DanAndreasson/pen/ZQXLXj

      .grid {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
      .grid::after {
        content: "";
        flex: auto;
  10. Dec 2021
    1. .container {
        width: 100%;
        height: 100vh;
        overflow: scroll;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: y mandatory;
      .item {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        scroll-snap-align: start;
        width: 100%;
        height: 100vh;   


    1. Stick to the bottom?!


      But you can also use it to stick elements to the bottom. That means that the footer can be defined to have a sticky position, and it will always appear to stick to the bottom when scrolling down. When we reach the end of the sticky container, the element will stop in its natural position. It’s better to use it on elements whose natural position is the bottom of the sticky container.

      Full Example:

      • HTML
        <main class="main-container">
        <header class="main-header">HEADER</header>
        <div class="main-content">MAIN CONTENT</div>
        <footer class="main-footer">FOOTER</footer>
      • CSS
           position: sticky; 
           bottom: 0;
        Live CodePen Example
    1. If you want to define a theme color for light and dark mode, your best bet is to define both colors and use the first meta tag as a fallback for browsers that don’t support the media feature.

      <meta name="theme-color" content="#319197" media="(prefers-color-scheme: light)">
      <meta name="theme-color" content="#872e4e" media="(prefers-color-scheme: dark)">
    1. <!-- HTML -->
      <div class="text-container">
      /* CSS */
      section {
        width: 100vw;
        height: 100vh;
        background: #000;
        &:nth-child(odd) {
          background: #fff;
      .text-container {
        position: fixed;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        mix-blend-mode: difference;
        h1 {
          font-size: 150px;
  11. Nov 2021
    1. Front end framework is a combination of two separate words, Front end + Framework. Front end is the visual site of any web application or a website, it is that part of the website with which a user interacts, note that backend is that part that involves API calls, database connectivity, authentication and so on, and a framework in literal sense means an essential supporting structure of an object, the object is a website in this case.

      What's Front End Frameworks? Here's the complete guide to understand the best front end frameworks.

    1. We also need at least something in our CSS that can be set from outside. CSS custom properties are a great fit for this!
  12. Oct 2021
    1. We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components.

      (The English here sounds awkward.)

      Gyuri Lajos, in the Stop Reset Go team, recommended using Materialize CSS.

      If it is based on Google’s Material Design, there are a lot of resources available to explore the possibilities. If I was building a Progressive Web App, this might be the place to start.

      The project appears to be at an early stage of development, with a 1.0.0 release.

    1. Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology.
  13. getuikit.com getuikit.com
    1. A lightweight and modular front-end framework for developing fast and powerful web interfaces.

      So far, this is one of the most complete web design frameworks that I have encountered. The list of components is extensive.

  14. Sep 2021
  15. www.freecodecamp.org www.freecodecamp.org