Github Repository / Demo

Inspiration

I was thinking about how I could help the developer community, so the first thing I did was explore my experience as a developer and make a list of projects that could save me time. One of the items on the list was my portfolio, It was there when I realized that as developers we have what it takes to build a portfolio with just our username since we have enough information on platforms like Github, Hashnode and Devto to show our projects, talk about us, show our latest blogs and offer contact details. But I had a problem, how do I get developers to publish their portfolios in their own domains? One word Vercel

Video Demo

Features

Creating your portfolio with Devcover, you are going to get:

• Good designed and customizable portfolio
• Google Analytics support to track user events
• SEO friendly implemented with your data
• Mobile friendly portfolio
• High performance portfolio
• Your latest Hashnode and Devto blogs sorted by reactions count and publish date
• Your best Github projects sorted by stars count and forks count
• About section from your Github README.md
• Possibility of placing your email so that they contact you
• Availability to be hired
• And much more...

Next features

• Edit About section (Markdown style)
• Edit and add new social networks to contact
• Edit limit of blogs/projects to show
• Sort manually blogs/projects
• Light mode
• Set default theme dark/light
• Time to re-fetch data ex: every day at 24hrs

Design Process

I like to have a clear design of what I'm going to do before starting to write code that is why I started with a simple low-fidelity design on Invision

Home Design:

Portfolio Design: Click to see it

After that, I made a high-fidelity design on AdobeXD

Home Page:

Portfolio Design: Click to see it

Challenges

I had many challenges throughout the development process, such as avoiding the appearance of repeated blogs if the user has the same blogs published in Hashnode and Devto, allowing the user to publish their customized portfolio, among others, in the following table I detail which they were some of them and how I solved them:

How I create it

The first thing I did was analyze all the APIs that I was going to use, Hashnode, Github and Devto to verify if it had the minimum user data to build a portfolio.

Then I chose tech stack to build the project, I decided to use Next.js because I really like it and it's an excellent framework to build a React application for production, I used styled-components for application styles, Apollo Client for Hashnode API communication, react-iconly for Icons and other libraries that helped me a lot like that react-markdown to render Github user readme.md

If you want to know more about project implementations and how works it here the repository:

Devcover Repository

Is open to receive contributions 🙋‍♂️

Usage Process

Create your portfolio with Devcover is quite straightforward. In just a few clicks you can deploy your own portfolio.

1 . First we have to open Devcover website and write our Hasnode or Github username, press Enter or the submit button and wait while generating your portfolio it takes not much than 1-2 minutes

2 . If you want to customize your portfolio you can open the customizer and change your name, email, your preferred colour, your page title even you can set your Google Analytics code to see users behaviour on your portfolio, I created a set of events to track as that social network link clicked, scroll events, Show More button clicked and blog or project clicked.

3 . The when you are ready, just click on Deploy on Vercel button

4 . You will see a screen like this, write the name of your project that you prefer (I assumed that you already have a Vercel account, but if you don't you can create one here)

5 . Then choose your preferred Git provider to save your portfolio project, basically what this does is clone the Decover and save it into your Git provider as a new project.

6 . Choose a project name or leave the default name

7 . Then you must put your username in the NEXT_PUBLIC_USERNAME value

and VOILA! you have your portfolio deployed on your own domain 🥳🥳

Deploy your own Portfolio on Vercel

If you want to customize your portfolio colours, name, bio a put your Google Analytics code, I suggest you create your portfolio from Devcover website.

If you prefer to go faster and accept the default parameters you can click on the following button and the only thing you have to do is put your Github or Hashnode username in the NEXT_PUBLIC_USERNAME.

Feel free to ask in the comments or mentions me on my Twitter.

I hope this helps you and I would like to see your portfolio results! 👋

Compound Components pattern

The keyword in the pattern’s name is the word Compound, the word compound refers to something that is composed of two or more separate elements.

With respect to React components, this could mean a component that is composed of two or more separate components. The main component is usually called the parent, and the separate composed components, children.

Look at the following example:

Here, <Select> is the parent component and the <Select.Option> are children components

The overall behaviour of a select element also relies on having these composed option elements as well. Hence, they are connected to one another.

The state of the entire component is managed by Select component with all Select.Option child components dependent on that state.

Do you get a sense of what compound components are now?

Compound components are just one of many ways to express the API for your components.

We are going to build the Select component we saw above which will be composed of 2 additional components Select Dropdown and Select Option.

In the code block above, you’ll notice I have used expressions like this: Select.Option

You can do this as well:

Both work but it is a matter of personal preference. In my opinion, it communicates the dependency of the main component well, but that is just my preference.

Feel free to use whatever component looks best to you!

Building the compound child components

The Select is our main component, will keep track of the state, and it will do this via two variables called visible (boolean) and value (string).

// select state 
{
  visible: true || false
  value: ''
}

The Select component needs to communicate the state to every child component regardless of their position in the nested component tree.

Remember that the children are dependent on the parent compound component for the state.

What would be the best way to do it?

We need to use the React Context API to hold the component state and expose the visible property via the Provider component. Alongside the visible property, we will also expose a string prop to hold the selected option value.

We’ll be creating this in a file called select-context.js

import { createContext, useContext } from 'react'

const defaultContext = {
  visible: false,
  value: ''
};

export const SelectContext = createContext(defaultContext);

export const useSelectContext = () => useContext(SelectContext);

Now we have to create a file called select-dropdown.js which is the container for the select options.

Note: I use Styled Components for the styles, feel free to use whatever styling way looks best to you!

import React from "react";
import PropTypes from "prop-types";
import { StyledDropdown } from "./styles";

const SelectDropdown = ({ visible, children, className = "" }) => {
  return (
    <StyledDropdown visible={visible} className={className}>
      {children}
    </StyledDropdown>
  );
};

SelectDropdown.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  visible: PropTypes.bool.isRequired,
  className: PropTypes.string
};

export default SelectDropdown;

Next, we need to create a file called styles.js to save component styles.

import styled, { css } from "styled-components";

export const StyledDropdown = styled.div`
  position: absolute;
  border-radius: 1.375rem;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
  background-color: #fff;
  max-height: 15rem;
  width: 80vw;
  overflow-y: auto;
  overflow-anchor: none;
  padding: 1rem 0;
  opacity: ${(props) => (props.visible ? 1 : 0)};
  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
  top: 70px;
  left: 10px;
  z-index: 1100;
  transition: opacity 0.2s, transform 0.2s, bottom 0.2s ease,
    -webkit-transform 0.2s;
`;

Note that with the visible property we control the visibility of the dropdown

Then we need to create the children component, for this, we create a file called select-option.js.

import React, { useMemo } from "react";
import { useSelectContext } from "./select-context";
import { StyledOption } from "./styles";
import PropTypes from "prop-types";

const SelectOption = ({
  children,
  value: identValue,
  className = "",
  disabled = false
}) => {
  const { updateValue, value, disableAll } = useSelectContext();

  const isDisabled = useMemo(() => disabled || disableAll, [
    disabled,
    disableAll
  ]);

  const selected = useMemo(() => {
    if (!value) return false;
    if (typeof value === "string") {
      return identValue === value;
    }
  }, [identValue, value]);

  const bgColor = useMemo(() => {
    if (isDisabled) return "#f0eef1";
    return selected ? "#3378F7" : "#fff";
  }, [selected, isDisabled]);

  const hoverBgColor = useMemo(() => {
    if (isDisabled || selected) return bgColor;
    return "#f0eef1";
  }, [selected, isDisabled, bgColor]);

  const color = useMemo(() => {
    if (isDisabled) return "#888888";
    return selected ? "#fff" : "#888888";
  }, [selected, isDisabled]);

  const handleClick = (event) => {
    event.preventDefault();
    if (typeof updateValue === "function" && identValue !== value) {
      updateValue(identValue);
    }
  };

  return (
    <StyledOption
      className={className}
      bgColor={bgColor}
      hoverBgColor={hoverBgColor}
      color={color}
      idDisabled={disabled}
      disabled={disabled}
      onClick={handleClick}
    >
      {children}
    </StyledOption>
  );
};

SelectOption.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  value: PropTypes.string,
  className: PropTypes.string,
  disabled: PropTypes.boolean
};

export default SelectOption;

I know it's confused, but I’ll break it down.

First, let's focus on the following line of code:

 const { updateValue, value, disableAll } = useSelectContext();

We use useSelectContext() from select-context.js to access the context data, "⚠️Spoiler alert": we are going to manage this data on our main component, Yes you are correct is the Select component.

The value prop from context is the selected value.

Also, we use useMemo on several occasions to prevent unnecessary renders.

  const bgColor = useMemo(() => {
    if (isDisabled) return "#f0eef1";
    return selected ? "#3378F7" : "#fff";
  }, [selected, isDisabled]);

useMemo takes a callback that returns the string value with hexadecimal colour code and we pass an array dependency [selected, isDisabled]. This means that the memoized value remains the same unless the dependencies change.

Note: If you have a theme you can use the HOC (High Order Component) component called withTheme and use your colours

Not sure how useMemo works? Have a look at this cheatsheet.

Now to finalize the SelectOption component we need to create the StyledOption component for that we go to the styles.js file and write the following code:

export const StyledOption = styled.div`
  display: flex;
  max-width: 100%;
  justify-content: flex-start;
  align-items: center;
  font-weight: normal;
  font-size: 1.3rem;
  height: 4rem;
  padding: 0 2rem;
  background-color: ${(props) => props.bgColor};
  color: ${(props) => props.color};
  user-select: none;
  border: 0;
  cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
  transition: background 0.2s ease 0s, border-color 0.2s ease 0s;
  &:hover {
    background-color: ${(props) => props.hoverBgColor};
  }
`;

Creating the main component

Up to this point, we have all the child components of our main component, now we are going to create the main component Select, for that we need to create a file called select.js with the following code:

import React, { useState, useCallback, useMemo, useEffect } from "react";
import { SelectContext } from "./select-context";
import { StyledSelect, StyledValue, StyledIcon, TruncatedText } from "./styles";
import SelectDropdown from "./select-dropdown";
import { pickChildByProps } from "../../utils";
import { ChevronDown } from "react-iconly";
import PropTypes from "prop-types";

const Select = ({
  children,
  value: customValue,
  disabled = false,
  onChange,
  icon: Icon = ChevronDown,
  className,
  placeholder = "Choose one"
}) => {
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(undefined);

  useEffect(() => {
    if (customValue === undefined) return;
    setValue(customValue);
  }, [customValue]);

  const updateVisible = useCallback((next) => {
    setVisible(next);
  }, []);

  const updateValue = useCallback(
    (next) => {
      setValue(next);
      if (typeof onChange === "function") {
        onChange(next);
      }
      setVisible(false);
    },
    [onChange]
  );

  const clickHandler = (event) => {
    event.preventDefault();
    if (disabled) return;
    setVisible(!visible);
  };

  const initialValue = useMemo(
    () => ({
      value,
      visible,
      updateValue,
      updateVisible,
      disableAll: disabled
    }),
    [visible, updateVisible, updateValue, disabled, value]
  );

  const selectedChild = useMemo(() => {
    const [, optionChildren] = pickChildByProps(children, "value", value);
    return React.Children.map(optionChildren, (child) => {
      if (!React.isValidElement(child)) return null;
      const el = React.cloneElement(child, { preventAllEvents: true });
      return el;
    });
  }, [value, children]);

  return (
    <SelectContext.Provider value={initialValue}>
      <StyledSelect
        disabled={disabled}
        className={className}
        onClick={clickHandler}
      >
        <StyledValue isPlaceholder={!value}>
          <TruncatedText height="4rem">
            {!value ? placeholder : selectedChild}
          </TruncatedText>
        </StyledValue>
        <StyledIcon visible={visible}>
          <Icon />
        </StyledIcon>
        <SelectDropdown visible={visible}>{children}</SelectDropdown>
      </StyledSelect>
    </SelectContext.Provider>
  );
};

Select.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node
  ]),
  disabled: PropTypes.bool,
  icon: PropTypes.element,
  value: PropTypes.string,
  placeholder: PropTypes.string,
  onChange: PropTypes.func,
  className: PropTypes.string
};

export default Select;

I will start by explaining the propTypes:

• children: Are the array of Select.Option
• disabled: Is used to set the disabled state in Select and Select.Option
• value: Is the default selected value
• placeholder: Is used to show a text if there aren't any Select.Option selected.
• onChange: Callback to communicate when the value has changed
• className: Class name for Select component

Perfect now let's focus on the useState React hook, it's used to manage selected value status and dropdown menu visibility

  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(undefined);

To set the initial value of Select (in case one is set), we need to use the hook useEffect

  useEffect(() => {
    if (customValue === undefined) return;
    setValue(customValue);
  }, [customValue]);

Not sure how useEffect works? Have a look at this cheatsheet.

  const updateVisible = useCallback((next) => {
    setVisible(next);
  }, []);

  const updateValue = useCallback(
    (next) => {
      setValue(next);
      if (typeof onChange === "function") {
        onChange(next);
      }
      setVisible(false);
    },
    [onChange]
  );

Another hooks we are using is useCallback, this hook will return a memoized version of the callback that only changes if one of the dependencies has changed. This is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Not sure how useCallback works? Have a look at this [cheatsheet]https://react-hooks-cheatsheet.com/usecallback).

Now we are going to focus on context initial value, let's see following code:

  const initialValue = useMemo(
    () => ({
      value,
      visible,
      updateValue,
      updateVisible,
      disableAll: disabled
    }),
    [visible, updateVisible, updateValue, disabled, value]
  );

return (
    <SelectContext.Provider value={initialValue}>
     // ---- ///
    </SelectContext.Provider>
  );

In the above code, we use the useMemo to prevent unnecessary re-renders passing in the array the props that can change, then we pass that initial value to theSelectContect.Provider, we have been using each of these properties in the components we saw earlier.

Last but not least, we have a function to get selected option component, let's see following code:

export const pickChildByProps = (children, key, value) => {
  const target = [];
  const withoutPropChildren = React.Children.map(children, (item) => {
    if (!React.isValidElement(item)) return null;
    if (!item.props) return item;
    if (item.props[key] === value) {
      target.push(item);
      return null;
    }
    return item;
  });

  const targetChildren = target.length >= 0 ? target : undefined;

  return [withoutPropChildren, targetChildren];
};

 const selectedChild = useMemo(() => {
    const [, optionChildren] = pickChildByProps(children, "value", value);
    return React.Children.map(optionChildren, (child) => {
      if (!React.isValidElement(child)) return null;
      const el = React.cloneElement(child, { preventAllEvents: true });
      return el;
    });
  }, [value, children]);

In a few words, what we do is clone the selected option and put it in the header of the Select component.

Now we need to create the necessary styles for the Select component:

export const StyledSelect = styled.div`
  position: relative;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  user-select: none;
  white-space: nowrap;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  width: 80vw;
  transition: border 0.2s ease 0s, color 0.2s ease-out 0s,
    box-shadow 0.2s ease 0s;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.12);
  border: 2px solid #f5f5f5;
  border-radius: 3rem;
  height: 4rem;
  padding: 0 1rem 0 1rem;
  background-color: ${(props) => (props.disabled ? "#f0eef1" : "#fff")};
  &:hover {
    border-color: ${(props) => (props.disabled ? "#888888" : "#3378F7")};
  }
`;

export const StyledIcon = styled.div`
  position: absolute;
  right: 2rem;
  font-size: ${(props) => props.size};
  top: 50%;
  bottom: 0;
  transform: translateY(-50%)
    rotate(${(props) => (props.visible ? "180" : "0")}deg);
  pointer-events: none;
  transition: transform 200ms ease;
  display: flex;
  align-items: center;
  color: #999999;
`;

export const StyledValue = styled.div`
  display: inline-flex;
  flex: 1;
  height: 100%;
  align-items: center;
  line-height: 1;
  padding: 0;
  margin-right: 1.25rem;
  font-size: 1.3rem;
  color: "#888888";
  width: calc(100% - 1.25rem);
  ${StyledOption} {
    border-radius: 0;
    background-color: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    &:hover {
      border-radius: inherit;
      background-color: inherit;
      padding: inherit;
      margin: inherit;
      color: inherit;
    }
  }
  ${({ isPlaceholder }) =>
    isPlaceholder &&
    css`
      color: #bcbabb;
    `}
`;

Feel free to change the colours, you can use the theme object of styled-components to get the theme colours

Finally, we need to export our component 👏🏻

import Select from "./select";
import SelectOption from "./select-option";

// Remember this is just a personal preference. It's not mandatory
Select.Option = SelectOption;

export default Select;

Congratulations! 🎊, now you have a reusable highly optimized component created, you can apply this pattern in many cases.

Final result

Here yo can see the final result:

Note: This tutorial is based on Katie Hempenius article about How to install thumbor but adding AWS EC2 and S3.

This post explains how to install Thumbor on your own server. Once installed, you can use Thumbor as an API to transform your images, we will install on AWS EC2 server and integrate it with AWS S3 to deliver the images as quickly as possible and save the transformations.

This post assumes that you have an AWS account and how to use command-line tools to set up the VM.

First of all, we are going to launch an EC2 VM with Ubuntu 18.04LTS 64-bit (x86), I used t2 micro because it's free tier but you can choose the one that best suits your needs.

Install Thumbor dependencies

Update and upgrade Ubuntu's already-installed packages:

sudo apt-get update -y && sudo apt-get upgrade -y

Now we need to install pip, the package manager for Python. Later you'll install Thumbor with pip.

sudo apt-get install -y python-pip

Install Thumbor's dependencies.

#ssl packages
sudo apt-get install -y libcurl4-openssl-dev libssl-dev

#computer vision packages
sudo apt-get install -y python-opencv libopencv-dev

#image format packages
sudo apt-get install -y libjpeg-dev libpng-dev libwebp-dev webp

Install Thumbor

sudo pip install thumbor

To see if Thumbor installed correctly this should work:

thumbor --help

Hurrah! 🥳

Now we are going to start the debug server of Thumbor to make some requests and test it.

thumbor --log-level debug

AWS EC2 Settings

Thumbor is now running.

By default, Thumbor runs on port 8888 However, this probably won't work for you (yet) because cloud providers usually require that you explicitly open firewall ports before they will accept incoming traffic, so we are going to open required ports on our Amazon EC2 instance.

To open the required ports we have to select on the left menu Network & Security -> Security Groups, we select the group assigned to our EC2 instance usually called launch-wizard-1 -> Actions -> Edit Inbound Rules, once there we create the rules defined below and we press Save rules.

Once created our security rules, we should see something like this:

Try It Out

Thumbor is now accessible and ready for use 🥳👏🏻. Try it out by visiting the following URL:

http://YOUR_VIRTUAL_MACHINE:8888/unsafe/100x100/https://jrgarciadev.com/avatar.png

You should see an image that is 100 pixels wide by 100 pixels tall. Thumbor has taken the image avatar.png and size specified in the URL string and served the result. You can replace the image in the URL string (i.e., https://jrgarciadev.com/avatar.png) with any other image (e.g., https://your-site.com/kitten.jpg) and Thumbor will resize that image too.

Note: Thumbor uses HTTP by default but can be configured to use HTTPS.

I recommend you visit this article The Optimize images with Thumbor for more information on using the Thumbor API and Thumbor configuration file.

Configuring Thumbor to run in background

In a production environment, we need to configure Thumbor to start automatically to do this we are going to make use of Linux Systemd.

Navigate to the /lib/systemd/system directory. This directory contains the service files for systemd.

cd /lib/systemd/system

As superuser, create a thumbor. service file.

sudo touch thumbor.service

Using vim or nano add the following configuration to Thumbor service. This configuration will run /usr/local/bin/thumbor (i.e. the Thumbor binary) once networking is available and will restart Thumbor on failure.

I prefer to use vim so the command is the bellow:

sudo vim thumbor.service

[Unit]

Description=Service for Thumbor image CDN

Documentation=https://thumbor.readthedocs.io/en/latest/

After=network.target

[Service]

ExecStart=/usr/local/bin/thumbor

Restart=on-failure

[Install]

WantedBy=multi-user.target

Now we need to start Thumbor, to do this we are going to usesystemctl which is the utility used to manage systemd.

sudo systemctl start thumbor.service

Note: If Thumbor is currently running, you should stop it before attempting to start Thumbor using systemctl.

Next, "enable" Thumbor. This means that Thumbor will automatically start on boot.

sudo systemctl enable thumbor.service

Verify that you've successfully configured systemd by running the status command.

systemctl status thumbor.service

The status should show that it is enabled and active.

Congratulations 🎊, now you have a Thumbor service running and ready to make transformations, apply filters, resize and convert any image.

AWS S3 Configuration

We have running our Thumbor service successfully but the aim of this post is to guide you to use Thumbor efficiently, for this reason, we are going to save the transformations in an S3 bucket so we will only do the transformation once if we do the same request again, Thumbor will send us the image that it already has saved in the bucket.

Here we go!

We have to create 2 S3 buckets with all default settings, one for the data source and the other for saving the results, I have named them thumbor-blog-source and thumbor-blog-results.

Once we have created our S3 bucket you have to upload an image on your source S3 bucket only for test, then return the server terminal and we are going to execute the following command to create a new thumbor.conf file:

thumbor-config > ./thumbor.conf

Now we have to install a Boto3 to management the AWS authentication and AWS S3 Plugin just run next commands:

pip install boto3

Once boto3 is installed we need to configure our AWS S3 connection to do this are going to create a file for boto3 configuration:

mkdir .aws && sudo touch .aws/config && sudo touch .aws/credentials

Open the .aws/config file a write the next content:

[default]
region=YOUR_S3_REGION

Save it and open the .aws/credentials file and write:

[default]
aws_access_key_id = YOUR_ACCESS_KEY
aws_secret_access_key = YOUR_SECRET_KEY

Note: YOUR_S3_REGION by default is us-east-1 or us-east-2

Then we have to install Thumbor AWS

 pip install tc_aws

Open your thumbor.conf file created earlier, there are a lot of options but for now, we are going to focus only on the TC_AWS section (This section doesn’t exist in the default config and you’ll need to add it somewhere).

############################## TC_AWS ##########################################
TC_AWS_REGION = 'YOUR_AWS_REGION' # AWS Region

TC_AWS_ENDPOINT = None # Custom S3 endpoint URL (for GCP, Minio, etc.)

TC_AWS_STORAGE_BUCKET = 'YOUR_SOURCE_S3_BUCKET_NAME' # S3 bucket for Storage
TC_AWS_STORAGE_ROOT_PATH = '' # S3 path prefix for Storage bucket

TC_AWS_LOADER_BUCKET = 'YOUR_SOURCE_S3_BUCKET_NAME' #S3 bucket for loader
TC_AWS_LOADER_ROOT_PATH = '' # S3 path prefix for Loader bucket

TC_AWS_RESULT_STORAGE_BUCKET = 'YOUR_RESULT_S3_BUCKET_NAME' # S3 bucket for result Storage
TC_AWS_RESULT_STORAGE_ROOT_PATH = 'thumbor_results' # S3 path prefix for Result storage bucket

# put data into S3 using the Server Side Encryption functionality to
# encrypt data at rest in S3
# https://aws.amazon.com/about-aws/whats-new/2011/10/04/amazon-s3-announces-server-side-encryption-support/
TC_AWS_STORAGE_SSE = False

# put data into S3 with Reduced Redundancy
# https://aws.amazon.com/about-aws/whats-new/2010/05/19/announcing-amazon-s3-reduced-redundancy-storage/
TC_AWS_STORAGE_RRS = False


# Enable HTTP Loader as well?
# This would allow you to load watermarks in over your images dynamically through a URI
# E.g.
# http://your-thumbor.com/unsafe/filters:watermark(http://example.com/watermark.png,0,0,50)/s3_bucket/photo.jpg
TC_AWS_ENABLE_HTTP_LOADER = False

TC_AWS_ALLOWED_BUCKETS = False # List of the allowed bucket to be requested
TC_AWS_STORE_METADATA = False # Store result with metadata (for instance content-type)
################################################################################

Now we have to uncomment and edit these lines on the thumbor.conf file:

## Defaults to: 'thumbor.loaders.http_loader'
LOADER = 'tc_aws.loaders.s3_loader'

## Defaults to: 'thumbor.storages.file_storage'
STORAGE = 'thumbor.storages.no_storage'

## Defaults to: None
RESULT_STORAGE = 'tc_aws.result_storages.s3_storage'

And finally, we have to set as RESULT_STORAGE_STORES_UNSAFE = True option to save thumbor results in our results bucket.

################################ Result Storage ################################

## Indicates whether unsafe requests should also be stored in the Result Storage
## Defaults to: False
RESULT_STORAGE_STORES_UNSAFE = True

Then we need to restart the Thumbor service so that it takes the new settings, write the next command on your server command line:

sudo systemctl restart thumbor.service

Execute the status command to be sure that it's running correctly

Note: If for any reason the server is not running (sudo systemctl stop thumbor.service) you can stop it and try out with debug mode with thumbor --log-level debug

Now visit the URL of your server with the name of the image saved on the source bucket, in my case thumbor-blog-source

Here a diagram of what we have configured in thumbor :

I'm proud that you made it this far 👏🏻

If you liked it, just let me know and so I will continue with part 2 of this post, where we will delve into the Thumbor options for image optimization, security and we will also install an Nginx server and connect it with CloudFront, an authentic CDN of images! 🚀

Extra: We can see how to mount 4 Thumbor servers managed by an AWS Load Balancer.

Thanks for reading! 🙋🏻‍♂️

One of the phases in which we invest more time when we are developing or designing a web or mobile application is in choosing the icon pack that best suits the brand and what we want to convey, even creating our own set of icons if none of them fits or we want it to be unique and identify your brand.

Iconly is one of the options that is being used by designers and developers today, so I decided to create a library for React / Next.js / Gatsby that facilitates its use and that also allows us to customize any icon according to our needs.

On the Website, you can find all the icons sorted by sets

Integrating into your project is quite simple just by following these steps:

Installation

yarn add react-iconly

or

npm install react-iconly

Usage

import React from 'react';
import { Home } from 'react-iconly';

const App = () => {
  return <Home />
};

export default App;

You can also wrap your app inside an IconlyProvider component, this will make all the icons that are within the context use the Provider properties

If you set specific props for each Icon the Provider properties will be overwritten

import React from 'react';
import { IconlyProvider, Home, Notification } from 'react-iconly';

const App = () => {
  return (
    <IconlyProvider set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge">
      <Home />
      <Notification primaryColor="yellow" />
    </IconlyProvider>
  )
};

export default App;

Icons can be configured with inline props:

<Home set="two-tone" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>

You can also include the whole icon pack:

import React from 'react';
import * as Iconly from 'react-iconly';

const App = () => {
  return <Iconly.Home set="bulk" primaryColor="blueviolet" secondaryColor="blue" stroke="bold" size="xlarge"/>
};

export default App;

Custom style example

import React from 'react';
import { Send } from 'react-iconly';

const App = () => {
  return <Send style={{ transform: 'rotate(45deg)' }} primaryColor="red" stroke="bold" size="xlarge"/>
};

export default App;

For more instructions visit:

Github repository

Thanks for reading!