DEV Community: Georgina Grey

Share your best Serverless resources (please? :) )

Georgina Grey — Sat, 31 Aug 2019 02:05:31 +0000

Hi dev.to!

I have an upcoming challenge involving everything Serverless and I'm looking to compile a list of resources for future reference. I'm looking for material beyond basic tutorials and more focused on architecture and multi-cloud.

I mean: who to follow? Maybe books? Courses, blog posts, etc.

For example today I found James Beswick's posts which I find super interesting and helpful since he covers other topics beyond "how to build this and that".

Thanks!

How I leveraged JAMstack to cut down costs for a nonprofit

Georgina Grey — Sat, 19 Jan 2019 03:39:14 +0000

Hi dev.to!

Last year I was hired to build out a website for a nonprofit feminist collective. I chose GatsbyJS+Netlify to drastically cut down costs.

Tell me what you want, what you really really want 🎤

When dealing with nonprofits, costs are always something to consider for obvious reasons, money is hard to come by and a stream of cash is not always guaranteed.

For this website the girls required to do some blogging, event publishing with image galleries and most importantly, build a support network (in this case a directory) for women entrepreneurs to sign up and have their business listed on the platform. So we're talking hosting, CMS integration, forms, image+data storage and confirmation emails.

As developers we tend to get overly excited about trying and learning new things, and our clients aren't any different, they're always buzzing with ideas and opinions and a tight budget, here's where we need to meet halfway.

So, let's balance things out, as a developer, it's important for me to cut down on the time I spend coding the site to avoid increasing my prices hence making it less possible for a nonprofit to afford my services.

I can be your hero baby! — The JAMstack 😘

After sorting out the requirements, I started to make a list of the tools/frameworks/platforms available that overlapped with our goals.

✔️ GatsbyJS - static rendering. Just upload the files to a CDN service and you're good to go. Good for me since I already knew React and I would get to learn Graphql (I was super overdue on this one).
✔️ Netlify - free hosting and SSL. Yep, hosting has gotten so cheap in recent years, they don't ever bother on charging it anything anymore, they even get you a SSL certificate for free to use with your own domain. This bad boy will make you forget about DevOps while giving you a continuous deployment pipeline (you can test features on different branches before publishing). Messed up the build? No problem, Netlify keeps a history of every build and won't serve if it's broken.
✔️ Github - for the independent headless blogging who needs no database 💅. We just need to point Netlify to our Github repo and it will take care of the rest. We don't need to spend our precious $ on saving information to a database is meant to be public anyway.
✔️ NetlifyCMS - free headless CMS. There are plenty of tutorials and a Gatsby starter to get the ball rolling. Is simple and intuitive, but powerful at the same time, is built with React so I was able to create custom widgets and fields and make it super tailored the girls needs.
✔️ Firebase functions - confirmation emails. When a user registers their business they get a conformation email and once it's reviewed and accepted will get another one, to sort this out I used NodeJS with Nodemailer to deploy a couple of functions to Google Firebase. Inside those functions just setup a couple of triggers on Firestore's collections and voilà.

GatsbyJS beyond the Blog

I've been following Gatsby's roadmap for some time now, I try to attend every webinar to learn more about current and future updates, is actually really exciting how they plan to go beyond just static rendering. PS. I think I'm fangirling now 😅

In the JAMstack world is not all rainbows and butterflies, depending on the project there could be some constraints and it might not be a great fit, but is worth giving it a go when there's a match.

There ain't no such thing as a free lunch 😒

I also did some other API integrations that are not entirely free, such as Firestore, Firebase functions and Cloudinary, but their free plans are very generous, they will suffice for small websites such as this one. When choosing a third party API, be cautious, since sometimes can be tricky to estimate costs correctly.

Most people ignore the hidden costs of using website builders like WordPress, yes it's true you can get up and running with minimal investment, but they fail to account for maintenance costs such as upgrades, backups and general cleanup of plugins, broken links, etc.

These costs can be reflected in different ways, either the time it takes you to learn how to properly maintain it, hiring a developer do to it for you or ignoring it until something fails and emergency mesures need to be taken (when 💩 hits the fan 💸).

Party time! 🙌

In this case study for Chicas al Frente (Girls in Front), we saved a significant amount of money in hosting and maintenance costs without sacrificing quality, in the contrary, they get to enjoy the benefits of static sites and GatsbyJS in particular (like PWA), such as better performance and security; plus Netlify's CDN delivery, hosting, security and CMS.

As a developer working with this stack for the first time, I have to say it was a very pleasant experience, you do have to get around some limitations but that is expected. Not having to worry about dealing with recurrent software upgrades and security patches, is also very nice 🎉

Show off your JAMstack projects

Georgina Grey — Sat, 13 Oct 2018 16:33:49 +0000

Hi dev.to!

It wasn't until a couple of months back that I started paying attention to the "JAMstack" trend, if you're not familiar with the term, check out this post:

JAMstack. How sites are becoming even faster in a bloated web.

Lewis Menelaws ・ Oct 12 '18 ・ 4 min read

#javascript #jamstack #dev #webdev

Like every other technology it comes with some limitations, so I'm curious to see what type of projects you have built using the JAMstack and how you came around those constraints (if any).

I hope to share mine soon :)

My first portfolio with React and AWS

Georgina Grey — Sun, 29 Jul 2018 01:58:17 +0000

Hi dev.to! So, I built my first portfolio and thought about documenting the process, but before jumping in, a disclaimer:

I believe in choosing the right tool for the job, using React for a portfolio might seem like an overkill but I decided on it mostly because I want to get better at it.
For that same reason I chose AWS to deploy it instead of Github or Netlifly. AWS is a beast and I want to learn as much as I can.

Phew! Okay, so let's get to it. Oh, here's the portfolio https://georginagrey.com

The interesting bits

When coding the app I learned a few new tricks that I believe are worth sharing.

React's Context API

My portfolio is multi-language, to achieve that I used React's Context, the point is to have a sort of "global" state that can be accessed by other components that could be deeply nested, thus avoiding passing props many levels down the chain. This is how it helped me implement the language switcher:

Provider

On LanguageContext.js is where the text translations live and the Context is created and exported.

//LanguageContext.js
export const languages = {
    en: {...
    },
    es: {...
    }
}

export const LanguageContext = React.createContext({
    langText: languages.en,
    toggleLanguage: () => { }
});

The App component is the most outer component, where the toggleLanguage function is actually implemented. LanguageContext.Provider component wraps every other children that needs to consume the "global" state.

Watch out when sharing functions that access state, such functions need be explicitly binded to state, by either using the super(props) keyword or the bind(this) method, otherwise components nested deep down executing this function will throw an error.

// App.js
...
import { LanguageContext, languages } from './LanguageContext';
...

constructor(props) {
    super(props);

    this.state = {
        language: 'en',
        langText: languages.en,
        toggleLanguage: this.toggleLanguage
    }
}

toggleLanguage = () => {...
}

render() {
    return (
        <div id="app" className={app}>
            <LanguageContext.Provider value={this.state}>
                <Menu />
                <Main />
                <Footer />
            </LanguageContext.Provider>
        </div>
    )
}

Consumer

The LanguagePicker component is nested about 3 levels deep, thanks to the LanguageContext.Consumer component, this is how state can be accessed.

// LanguagePicker.js
const LanguagePicker = () => (
  <LanguageContext.Consumer>
    {({ toggleLanguage, language }) => (
      <div className={main} onClick={() => toggleLanguage()}>
        ...
        <span>{language}</span>
      </div>
    )}
  </LanguageContext.Consumer>
)

This could have been achieved with Redux too, but I didn't need it for anything else. The Context API shouldn't be used lightly though, so keep that in mind.

Intersection Observer API

It's very useful if a behavior needs to be triggered when some element is visible inside the viewport. I used it to trigger some animations, but the most meaningful use case has to do with improving the site's load time, first contentful paint and lower bandwidth usage.

The <img> tag renders right away whatever's in its source, even if the component hasn't mounted yet, so the user will download images that might never even get to see. A slow down in the first contentful paint is also expected.

The trick here is to use a placeholder, taking the original image and scaling it down to a ~10x10 pixel ratio. Is only when the IntersectionObserver kicks in, that we fetch the original image. Here's a snippet of the implementation:

// Proyects.js
componentDidMount() {
    this.observe();
}

observe() {
    var options = {
        threshold: [0.1]
    }

    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.intersectionRatio > 0) {
                const image = entry.target;
                const src = image.dataset.src;

                this.fetchImage(src).then(() => {
                    image.src = src;
                });
            }
        });
    }, options);

    const images = document.querySelectorAll('img');
    images.forEach(i => observer.observe(i));
}

Pro tip: instead of scaling down the images myself I used Cloudinary, you can transform images on the fly when the c_scale is provided within the url:
https://res.cloudinary.com/georginagrey/image/upload/c_scale,h_12,w_12/v1532709273/portfolio/portfolio.jpg, if you take that bit off, you get the original image.

Heads up: The IntersectionObserver it's is not entirely supported across all browsers, so you might want to use a pollyfill or a fallback.

The UI

This is my weakest spot, it wasn't until recently that I kinda got my head around CSS3, or that's what I thought until I started to fall in every "gotcha" possible when styling components using just plain CSS. I had to re-write the whole thing a couple of times, until I decided to use emotion, even though css-in-js causes some outrage, I decided to give it a go and I loved it, I no longer have to worry about overriding rules while working on different components.

The layout is quite simple, I went with a mobile-first approach, and got away with using flexbox only.

The Stack

In a nutshell, this is a React static website hosted on a S3 bucket served by CloudFront and Route53.

Create-react-app
Emotion (css-in-js)
Firebase (for the contact form)
AWS S3 bucket (static files hosting)
AWS Cloudfront (CDN, SSL Certificate, text compression)
AWS Route53 (DNS routing)

How did I end up with that?!

After writing the main React components and styling most of them, I stumbled with Google's Lighthouse auditing tool, I downloaded the Chrome extension and generated a report (locally) and within seconds I got the results and a list of opportunities for optimization, for example, by enabling "text compression" in the server, the app should load about 3 seconds faster in my case.

I didn't know what that meant, so after googling for a bit I came across Cloudfront, to top it off you can request a SSL certificate for free.

Setting everything up is not as difficult as it may sound, here is a very handy guide. What will you get? Hosting, increased performance, faster delivery and secure HTTPs.

Is it free?

S3 and CloudFront are not per se free, is pay-as-you-go service, so for a low traffic website we would be talking about paying cents per month if anything at all, after the 1 year free tier expires.

Route53 is the DNS provider, there's a fixed price of $0.51/month per hosted zone, so we're talking only about $6/year. In this I case I already had a domain registered in Godaddy, to make it work I just grabbed the DNS names Route53 provided me with and saved them inside the Manage Name Servers form in Godaddy.

Caching and invalidating CloudFront

As is expected, every time a request comes into CloudFront it will serve whatever is cached instead of going every time to your S3 bucket looking for the files, how long the content stays cached, depends on the default TTL timeframe configured, read more about it here.

Since I'm still working on the site, I set the default TTL to
3600 seconds (1 hour), I also added a header cache-control:max-age=0, to the meta-data of the origin S3 bucket. But soon I'll be reverting that and use Invalidation instead, it force flushes the cache without needing to wait for it to expire. Doing it this way is actually cheaper too.

Edit:
I got my monthly statement! So, here's an example of AWS Princing with this setup:

CloudFront served +2300 requests for America/Europe tier. Plus DNS routing and storage for $0.62 total. It won't get more expensive than that since a surge in traffic is not expected.

That's it! ... I think 🤔

This isn't my first time dealing with AWS, but it's my first coding the front-end of a website, so any comments are greatly appreciated.

Thank you for stopping by 👋

DEV Community: Georgina Grey

Share your best Serverless resources (please? :) )

How I leveraged JAMstack to cut down costs for a nonprofit

Tell me what you want, what you really really want 🎤

I can be your hero baby! — The JAMstack 😘

GatsbyJS beyond the Blog

There ain't no such thing as a free lunch 😒

Party time! 🙌

Show off your JAMstack projects

JAMstack. How sites are becoming even faster in a bloated web.

Lewis Menelaws ・ Oct 12 '18 ・ 4 min read

My first portfolio with React and AWS

The interesting bits

React's Context API

Intersection Observer API

The UI

The Stack

How did I end up with that?!

Is it free?

Caching and invalidating CloudFront

Edit 07/30: Added warning about IntersectionObserver.

Edit 08/03: Added AWS Billing Statement.