gatsby-image w/ Support for PWA and Dark Mode

Building responsive web apps involves the cumbersome task of adding media queries in CSS.

Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.

This three-part series e…


This content originally appeared on Scotch.io RSS Feed and was authored by William Imoh

Building responsive web apps involves the cumbersome task of adding media queries in CSS.

Thanks to the rapid advancements in CSS and CSS-in-JS libraries, web responsiveness is only a few lines of code away.

This three-part series explains how to use the React component gatsby-image to create a responsive banner-and-grid gallery with remote, optimized images sourced from Cloudinary. Specifically:

  • Part 1 explains how to build an optimized webpage by leveraging Cloudinary’s gatsby-transformer-cloudinary plugin and gatsby-image, sourcing and transforming responsive remote images in a GatsbyJS project.
  • Part 2 describes how to source images from Cloudinary into gatsby-image by means of the getFluidImageObject and getFixedImageObject APIs?


    This content originally appeared on Scotch.io RSS Feed and was authored by William Imoh


    Print Share Comment Cite Upload Translate Updates
    APA

    William Imoh | Sciencx (2020-06-23T16:00:58+00:00) gatsby-image w/ Support for PWA and Dark Mode. Retrieved from https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/

    MLA
    " » gatsby-image w/ Support for PWA and Dark Mode." William Imoh | Sciencx - Tuesday June 23, 2020, https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/
    HARVARD
    William Imoh | Sciencx Tuesday June 23, 2020 » gatsby-image w/ Support for PWA and Dark Mode., viewed ,<https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/>
    VANCOUVER
    William Imoh | Sciencx - » gatsby-image w/ Support for PWA and Dark Mode. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/
    CHICAGO
    " » gatsby-image w/ Support for PWA and Dark Mode." William Imoh | Sciencx - Accessed . https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/
    IEEE
    " » gatsby-image w/ Support for PWA and Dark Mode." William Imoh | Sciencx [Online]. Available: https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/. [Accessed: ]
    rf:citation
    » gatsby-image w/ Support for PWA and Dark Mode | William Imoh | Sciencx | https://www.scien.cx/2020/06/23/gatsby-image-w-support-for-pwa-and-dark-mode/ |

    Please log in to upload a file.



    There are no updates yet.
    Click the Upload button above to add an update.

    You must be logged in to translate posts. Please log in or register.

Related Posts