Forem: Katana Tran

Material-UI Grid Breakpoints

Katana Tran — Sat, 04 Jan 2020 20:11:43 +0000

Introduction

This is a tutorial on how to set breakpoints for your Material UI grid.
Breakpoints match with a certain screen width and depending on what value you set is how many cards will occupy the space given the amount of available space.

xs, extra-small: 0px
sm, small: 600px
md, medium: 960px
lg, large: 1280px
xl, extra-large: 1920px

Here is a grid item from Material-UI:

<Grid item xs={A} sm={B} md={C} lg={D} xl={E}>
    <Paper className={classes.paper}>My Grid Item!</Paper>
</Grid>

Material-UI's grid is based on a 12 column system meaning the screen at any given point has 12 columns of available space. When you change a value at ABCDE it will tell the item, "Hey, let's take up X amount of columns with this one grid item at this breakpoint!" This allows us to set up the grid in so many unique ways based on how we set the values for each breakpoint. Below I will list out some examples and their output!

Here is a sandbox provided by Material-UI that you can play along in! Grid Sandbox (Remember to navigate to demo.js to change the values of the grid items.)

Examples

In the above example we have the first row which is a grid item - xs(12) meaning it will always take all 12 of the columns at any screen size.
The second row has two grid items - xs(12), sm(6) meaning at screen size small and larger (width: 600px+) each card will take up half the screen (2 cards x 6 columns each = 12 columns total) and at size x-small (width:0-600px) the card will take 12 columns, or the full screen.
The third row has 4 grid items - xs(6), sm(3) meaning at screen size small and larger (width: 600px+) each card will take up 1/4th of the screen (4 cards x 3 columns each = 12 columns total) and at size x-small (width:0-600px) the card will take 6 columns, or half the screen.

NOTE: Even if you decrease the width of the grid in the above image, the third row will never only have 1 card in it, because it is programmed to always have 2 cards for an x-small screen. An example of compressing the width to a super small screen is below.

You also do not need to have the 12 columns equally distributed between the cards in the row. If you had a grid item - xs(12), sm(9) and another grid item - xs(12), sm(3), they will be able to share the same row and take up 9 columns and 3 columns respectively, here is an image of this below.

Take note, if you distribute your cards without adding to 12 columns, the cards will not full take up the row and you'll be left with some extra space on the right-hand side like below.

Author's Note: Thanks for reading, guys! I had a hard time find a good resource to learn how to create this grid and the explanation on Material-UI wasn't enough for me so after playing around on the sandbox I created my own tutorial! Enjoy!

Using EmailJS and React to send Support Emails

Katana Tran — Mon, 30 Dec 2019 07:49:37 +0000

Introduction

You know those forms which send a support request to the site's support team? Well we are creating them today for our website! This tutorial assumes an understanding of using React to create forms, changing component state, and submission of forms.

We will be using EmailJS's service. Here is also the link to the package.

Tutorial

Start by installing EmailJS with npm $ npm install emailjs-com --save
Sign up with EmailJS. Use an email you would like to receive support emails at.
After signing up, click the email service you would like, I chose Gmail to get started. You can remember this service ID to use later to send your form, otherwise if you have only one service, it will default to it.
Let's grab our API key at this time. In EmailJS, navigate to Account > API keys > then copy the user ID to a notepad for later use.

Create a template on EmailJS, this can be any written notice you want. Replace any fields that will be filled by your form submission with {{}} double curly braces. Within the braces will be the key in the key-value pair of your component's state.

Import EmailJS into your form's page with import emailjs from 'emailjs-com'; then create your form with React and store the form outputs in your state with matched keys from your template. You can find this by clicking EmailJS > Email Templates > Example Email Template (or whichever template you're using) > Copy Code on right hand corner. Lets also write down the template ID while we are looking at this page.

If done correctly then all we need to do is write a bit of code for the submission of the form, I have an onclick on the button at the end of the form which submits this to the email service. Here is the block of code which needs to go into the submit function:

emailjs.send('<YOUR SERVICE ID>','<YOUR TEMPLATE ID>', '<YOUR PARAMS>', '<YOUR USER ID>')
    .then((response) => {
       console.log('SUCCESS!', response.status, response.text);
    }, (err) => {
       console.log('FAILED...', err);
    });

For your service ID, you can use 'default_service' or the ID of a service you created, for template ID put in the one you found while cross-checking the template parameters, your params can simply be the state of your React component, and user ID is the API key > User ID you can find under account!

Results

The resulting code with the template params matched up, correct template key, service ID, and your user API key inserted: (Remember to import emailjs into this component!)

Here is my form with the filled out fields, on submit it will send the form to the designated email.

Then, tada! You've got yourself an email! You can then reply to the email supplied by your form and template with your business email address.

Learning a bit about Python: A quicker way to slice

Katana Tran — Mon, 09 Dec 2019 01:26:08 +0000

Introduction

I recently started learning Python as an alternative to using Javascript for coding algorithms. What I noticed is Python had a different toolkit than I was used to in Ruby and JS, particularly for array/list methods.

Here are a few tricks I've learned and hopefully they'll be helpful to you too!

Descriptions

Lists: Lists are akin to arrays, they follow the square bracket notation and are mutable.

list = [1,2,3,4,5]

Tuples:

Tuples take the same structure as lists but are immutable, this means they cannot be changed to represent a new value after creation.
Tuples are represented by parentheses.
They make debugging easier, since you know the information will remain unchanged through a tuple, you can mitigate tracking of past edits.
Modification of tuples can work such as iterating and adding extra indices to the tuple, but this requires a longer run time than if you used a list since the tuple must be remade each iteration and the old ones destroyed.

tuple = (1,2,3,4,5)

Methods to use

Think about the times you had to do the following.

Reversing a list?
Slicing a list?
Grab only even or odd numbers from an array?

Python allows us a great tool to better grab such information from a list, tuple, or even a string!

object[start:stop:step]

What you want to slice can be sliced with this simple format. Pick what index to start, which to stop (not including this index), and how many steps in between new indexes. If you leave the start empty, it will start at the beginning of the array, leave the stop empty, it'll end at the end of the array. Step is automatically 1 unless otherwise specified.

Imagine a string and a list

bob = "Bob loves bananas!"

numbers = [1,2,3,4,5,6,7,8,9,10]

This would be how to use the above tool to gather what I need in each scenario:

I only want bob's name: bob[:3]

I want to reverse the numbers: numbers[::-1]

I also want to reverse what bob loves:

bobloves = bob[-8:-1] bobloves[::-1]

I only want odd numbers: numbers[::2]

I want a slice of numbers from 1-9: numbers[:-1]

I want a slice of numbers from 5-10: numbers[4:]

I want a slice of numbers from 2-9: numbers[1:-1]

This is much quicker for me than creating a new slice object in Python then applying that to the array I need to slice. (This can be great for other reasons of course.)

This was my first Dev.to post and I am excited to continue sharing with the community and learning more from everyone!