DEV Community: Darian Nocera

How to Find Simple, Personalized Color Palettes

Darian Nocera — Fri, 08 Jan 2021 15:59:21 +0000

I am honestly not great at picking out color combos that look good together, but at the same time, I do know what I like (lots of blues & greens 😊).

I came across an awesome tool called Khroma that helps you narrow the color options down.

Khroma 🌈

Khroma is an AI tool that helps you find simple, personalized color combinations. By selecting 50 (yes, 50) of your favorite colors, you train Khroma on essentially what you like and don't like.

After calculating, it produces an infinite scroll of color combinations or palettes tailored to your preferences.

If you don't like your results, you can always edit your colors.

You can even select "favorites" of your color combinations and palettes.

Features ⭐

In additional to text/background color combos, you can also get recommendation for the following styles:

Gradients

Image Filters

Palettes

Considerations 🤔

After generating your infinite scroll, you might be overwhelmed with options. I recommend immediately spending a couple minutes selecting your favorites, and then bookmarking the favorites page to come back to!
Note Khroma uses local storage rather than relying on logins. You preferences will be saved on only your current browser on your current device.

✨ TL;DR: Use Khroma to get simple, personalized color combinations based on your actual color preferences.

Thanks for reading. Feel free to connect with me on LinkedIn!

How to Quickly Add a Contact Form to a Static Website

Darian Nocera — Fri, 08 Jan 2021 15:23:42 +0000

A backend is typically required to handle form requests. So if you want to add a contact form to your serverless static site such as your portfolio or personal website, you'll likely need to use a third party service to handle the requests. There are many services like this, but I recommend using 99inbound— it's free and easy af.

Creating the Account ⚙

Note— When you create an account, use the email you'd like the contact form to send emails to, as you will not be able to change this once your account is created on the free plan.

You will be taken to your dashboard where you can configure your forms and end points.

Forms vs. Form Endpoints 🤔

Forms

You can create a form directly on 99inbound using their UI. This will provide you with a <div> containing your form and a <script> to handle the request.

Form Endpoints

Form Endpoints allow you to use your own forms but have submissions processed by 99Inbound.

For full customizability, I would recommend just building your own form with HTML/CSS and using the provided Form Endpoint as a POST action for the form.

Configuring the Form Endpoint ⚙

Create a new end point by clicking the '+' button.
Fill out the title and submission text. You can leave the redirect URL blank.
Scroll to deploy.
Copy the endpoint
Within your form element, paste the endpoint as an action attribute, with a method of POST:



<form action="ADD_ENDPOINT_HERE" method="POST" target="_blank">

When a user submits the form, they will be taken to your submission message. Use target="_blank" like above to launch this in a new tab.

I assume you're already proficient enough with HTML to build forms, but I provided an example below.

Building the form 🛠

Creating your own HTML form is especially easy with Bootstrap.

Here's one built with Bootstrap using FontAwesome icons to get you started:

Stopping Spam 🚫

It's highly recommended you also include the provided "honeypot field". This works as a hidden field to normal users, but is designed to trick spam bots into filling out the "fake" field so that spam can be filtered from your inbox.

Testing 🧪

Add your form to your site / app.
You can test your form even in the development environment and verify that an email is sent to the email you signed up with to ensure it's configured correctly. It may take a few moments for the email to go through.
You will also be able to see all of the submitted form entries directly from your dashboard.

✨TL;DR: Use free service 99inbound to create a form endpoint, and add this as the POST action to your HTML form.

Thanks for reading. Feel free to connect with me on LinkedIn!

How to Lazy Load an Embedded Youtube Video

Darian Nocera — Thu, 17 Dec 2020 19:08:29 +0000

This is an example of how to display the image thumbnail for a Youtube video and only load the video once the user interacts with the video.

Basic Steps

Grab the Youtube ID from the URL of any Youtube video
The image path for the thumbnail is
https://i.ytimg.com/vi/{Youtube ID}/maxresdefault.jpg
The embed URL for the iframe src is
https://www.youtube.com/embed/{Youtube ID}?autoplay=1

Typically you would not want to include ?autoplay=1 to autoplay the video because that's annoying af, but in this case, we're loading the video only once the user has already clicked on it to play it

Using Javascript, swap out the image container with a responsive video container and the iframe with the embed URL

Credit to this repo for the idea for the play button css.

If Bob Ross had a modern, responsive, web development portfolio, what would it look like?

Darian Nocera — Wed, 16 Dec 2020 21:11:57 +0000

I wanted to do a project to get more comfortable with Vue.js & Sass, so I designed a developer portfolio template from the ground up. Of course, Bob's works are just a placeholder — it can be used by anyone with coding knowledge that can't be bothered with front-end design. Check it out!

Live Demo: https://vue-portfolio-template.netlify.app/

Repo: https://github.com/darnocer/vue-portfolio-template

How to Set Your Project Up With Sass

Darian Nocera — Mon, 14 Dec 2020 23:35:19 +0000

If you're here, I'm going to assume you already know what Sass is and just want to do the damn thing.

This guide is also specific to the .scss syntax of Sass.

Install Sass 🌎

This assumes you already have a package.json file. If not, run npm init and enter through for the default values.
Run npm install node-sass to install node-sass

Setup Your File Structure ⚙

In your root directory, create a styles folder with an scss folder and a css folder
In /sass, create the file main.scss
In /css, create the file style.css

├─ styles/
│  ├─ sass/
│  │  ├─ main.scss
│  ├─ css/
│  │  ├─ style.css

See Organizing Sass Files section for more details on recommended file structure.

Watch Changes To Sass Files 🔍

In package.json, within the "scripts:" section add "sass": "node-sass sass/main.scss css/style.css -w" like so:

  "scripts": {
    "sass": "node-sass styles/sass/main.scss styles/css/style.css -w"
  },

The watch flag (-w) tells node-sass to watch the main.scss file in the styles/sass directory for changes and output them in style.css in the styles/css directory.

This also assumes your styles folder is in the root directory. You may need to adjust these filepaths if you're using something like React or Vue and have your styles folder in the src directory, for example.

In a terminal instance, run npm run sass to watch for changes to your .scss files and automatically compile them into css.

Partials 🔸

The only thing in your main.scss folder should be imports of your other .scss files, also known as partials.

All partials begin with an underscore (_).

Create another folder within your /scss directory such as test.
Add an .scss file within the /test directory such as _test.scss.
Import the partial file into your main.scss file:

@import "test/test";

You do not need to include the underscore or the file extension in the imports.

Test it out 🧪

In your _test.scss file, add something like:

$red: red; // declare a variable

h1 {
  color: $red;
}

Save the file. You shouldn't see any errors in the terminal if sass compiled successfully. You should see the h1s on your page update to red. If you go to css/style.css you should see the compiled css:

h1 {
  color: red;
}

If you do not see the color update or the compiled CSS, ensure you have npm run sass running in a terminal instance.

Organizing Sass Files 📚

There are many ways to organize your Sass files, and it really comes down to personal preference.

The 7-1 Architecture is a popular structure for larger projects, although I personally find it a bit overkill for smaller personal projects.

However, you will thank yourself for having a solid file architecture in place if your project ever grows or scales.

Here's what I usually start out with, and then add from there:

├─ styles/
│  ├─ sass/
│  │  ├─ abstract/
│  │  │  ├─ _variables.scss      // variable declarations
│  │  │  ├─ _mixins.scss          // mixin declarations
│  │  ├─ base/
│  │  │  ├─ _base.scss             // *, html, body styles / CSS reset
│  │  │  ├─ _typography.scss  // typography-related styles
│  │  ├─ components/             // reusable components styles eg. buttons
│  │  │  ├─ _component1.scss
│  │  │  ├─ _component2.scss
│  │  ├─ layout/                        // layout components styles
│  │  │  ├─ _footer.scss
│  │  │  ├─ _header.scss
│  │  ├─ pages/                        // styles specific to pages 
│  │  │  ├─ _page1.scss
│  │  │  ├─ _page2.scss
│  │  ├─ main.scss
│  ├─ css/
│  │  ├─ style.css

and then your main.scss file would look like this:

@import "./abstract/variables";
@import "./abstract/mixins";

@import "./base/base";
@import "./base/typography";

@import "./layout/section";
@import "./layout/header";
@import "./layout/footer";

@import "./pages/page1";
@import "./pages/page2";

@import "./components/component1";
@import "./components/component2";

✨TL;DR: Install `node-sass` and use a script to watch for changes in your SCSS files to automatically compile them to CSS.

Thanks for reading. Feel free to connect with me on LinkedIn!

Essential Design Resources for Developers

Darian Nocera — Mon, 14 Dec 2020 21:08:05 +0000

Do you have so many bookmarks that you actually don't use any of them? There are a million free design resources out there. And a million and one resources compiling those resources. If you're overwhelmed by all of the options, then here's some more! 😉

These are my personal essentials.

Images

Free Photos and Background Images

Unsplash

Take and Edit Screenshots

Greenshot

TIP: There may be a better way to do this, but I sometimes use this screenshot tool to estimate the size or aspect ratio an image needs to be. I have "Capture Region" configured to use the PrtSc hot key. You can then select a region and it gives you the dimensions.)

Illustrations

Free Vector Illustrations

Undraw

TIP: You can select the hex code for the illustrations

More Free Ilustrations

DrawKit

Icons

Free .svg Icons of Popular Brands

SimpleIcons

Free Vector Font Icons

Font Awesome

Fonts

Heading & Body Fonts That Look Good Together

FontPair

Identify a Font

What The Font

Colors

TIP: Once downloaded, setup your hotkeys. I like to use Alt+Q to easily bring up the eyedropper.

Thanks for reading. I hope these are helpful for you! Feel free to connect with me on LinkedIn!

React Basics For Beginners

Darian Nocera — Fri, 09 Oct 2020 16:09:15 +0000

React is a powerful, component-based JavaScript library that allows efficient building of large applications with rapidly changing data.

There's a ton to learn with React, but here's some of the basics to get you familiar with the framework.

Benefits
Basics
JSX
Components
Props

Benefits

Virtual DOM

React is efficient because it employs the use of a Virtual DOM
Typical DOM manipulation is slow and inefficient as it requires rebuilding of the entire DOM for each update (for instance, if you have a list of 10 items, update one item, it updates the entire list rather than only that item).
A Virtual DOM, however, acts as a lightweight representation of the real DOM.
All updates are instead made to the Virtual DOM, which then compares to a snapshot of the Virtual DOM prior to the update, in a process called "diffing". Through diffing, React can know exactly which DOM objects have changed, and then update only those objects on the real DOM, which in turn updates the user interface.
This greatly increases the speed of processing large data changes.

Other Functionality

Webpack functionality is taken care of by default with React. Webpack functionality is essentially used to minify and then bundle Javascript files together to allow the application to load more efficiently.
Babel functionality is also built in with React, which allows Javascript to be written in ES6, ES7, or ES8 and converts it to ES5 which all modern browsers can understand.

Basics

To create a React application, run npx create-react-app my-app-name

npx is not a typo. It is a package runner tool that comes with npm.

There is no need for a server.js file with React. Instead, run npm start to start the application.
Nearly the entirity of the code is written within the /src directory (with the exception of adding fonts and other CDNs such as Bootstrap or jQuery to the <head> tag in index.html).

Rendering

/public/index.html contains only one line of native HTML: <div id="root"></div>. The entire virtual DOM is rendered in this element.
This is done in index.js employing ReactDOM.render(), which is considered the entry point:

ReactDOM.render(
    // What to render
    <App />,
    // Where to render it
    document.getELementbyId("root")
);

<App /> refers to App.js. This is where you can begin building the app with your components.

JSX

JSX (JavaScript XML) is a syntax extension to JavaScript which allows us to essentially write and visualize HTML in JS.

JSX is not specific to React, or required in React, but it makes things a lot easier. It is using React.createElement() behind the scenes.

JavaScript expressions are written in {}. With the exception of if/else, switch statements, and for loops that must be written in methods in class-based components, or using "hooks" (advanced concept).
"Class" is a reserved keyword in JavaScript. All instances of the "class" property must be updated to className in JSX.
Any self-closing tags in HTML (such as <img> or <input>) need to be updated to a closing tag in JSX: <tag / >.
Comments in JSX can be written as {/* comment here */}.
Only one element can be returned by return() at a time. Can wrap in an empty <div> container or use a fragment <> that will not add bloat to the DOM.

Inline Styling in JSX

Style property must be an object rather than a string like in HTML
All property names are camelCase, and values are strings
Numbers default to "pixels" (eg. height, margin, padding, etc.)
Styles are passed in as a prop

Exmaple:

const styles = {
  card: {
    margin: 20,
    background: "#e8eaf6"
  },
  heading: {
    background: "#9a74db",
    minHeight: 50,
    lineHeight: 3.5,
    fontSize: "1.2rem",
    color: "white",
    padding: "0 20px"
  }
};

function Navbar() {
  return (
    <div style={styles.card}>
      <div style={styles.heading}>Home</div>
    </div>
  );
}

Components

Components are essentially reusable functions.
Each component must import react:

import React from "react"

Each component must include export default componentName to be used in other components, similar to the concept of module.exports().
There are two ways to write functions in components:

Functional Components - these are just plain JavaScript functions and are stateless (unless you're using "hooks" which I don't cover here). They are easier to read and test than their Class counterparts and require less code.

Typically functions native to React are written with regular functions:

function componentName(){
    return ( JSX here );
}

Otherwise, functions should be written as arrow functions:

const componentName = () => {
    return ( JSX here );
}

Arrow functions are important due to the scope of this: In this case, this is not restricted to the scope of the function itself but rather belongs to the outside object.

Class Components - The below is identical to the above functional components. However, Classes allow the use of setState()

class componentName extends React.Component {
    render() {
        ( JSX Here )
    }
}

Props

Props are like inputs into components which are like functions, allowing you to pass data from component to component.
Props can be an arbitrary property name passed into the component:

<componentName propertyName=value />

The value can be accessed in the component via the props object:

function componentName(props) {
return(
   <div>
      <span>{props.propertyName}</span>
   </div>
 )
}

Props pass data from component to component in unidirectional flow (parent > child)
Props can be passed through to more child components in a process called props drilling

There are many more advanced concepts for using React like State, Hooks, Context, and more. These are just the basics to get you started!

Tips for Successful Heroku Deployments

Darian Nocera — Sun, 23 Aug 2020 22:51:36 +0000

Deploying to Heroku can be tricky. Here are some tips to get your deployed application working!

Deployment
OAuth
JawsDB for MySQL
MongoDB Atlas for MongoDB

Deployment

Creating a Heroku app using the GUI

Navigate to your Heroku account
Click New > Create new app and enter a name for the app
Under Deploy > Deployment Method > Select Github
Enter the Github repo name and connect
Enable Automatic deploys to automatically update Heroku with updates to master (otherwise need to use git push heroku master)
Navigate to your repo in the terminal
View remotes, there should be no heroku remotes yet, just origin from github: git remote -v
Create a remote for your app: heroku git:remote -a [heroku app name]
Verify you see a heroku remote; git remote -v

OAuth

Add the clientID and clientSecret as keys with the corresponding values in Config Vars on Heroku
In the OAuth app, add the Heroku URL as the Homepage and Callback URL
Ensure the passport routes to / as the homepage. Redirect to the authentication path if necessary

app.get("/", passport.authenticate("github"), function (req, res) {
  res.redirect("/auth/github");
});

Setup for clientID and clientSecret:

    {
      clientID: process.env.clientID,
      clientSecret: process.env.clientSecret,
      callbackURL: "/auth/github/callback",
    },

Options for testing locally with OAuth

After changes made to deploy to Heroku

In server.js, update clientID and clientSecret to be hardcoded string values; return to process.env.clientID and process.env.clientSecret prior to pushing changes
Create a new OAuth app and configure for localhost. Setup the clientID and clientSecret to use process.env on Heroku, but the localhost configured app otherwise:

clientID: process.env.clientID || [new_locahost_clientID_here],
clientSecret: process.env.clientSecret || [new_localhost_clientSecret_here],

Create a .env file, add clientID="{clientID}" and clientSecret="{clientSecret}". Be sure to add .env to .gitignore. npm i dotenvand follow dotenv setup instructions

JawsDB for MySQL

From the Overview tab on the Heroku app, select "Configure Add-ons"
Search for JawsDB MySQL and attach the add-on
Click the JawsDB link for connection info
Go to MySQL Workbench to setup a new connection
Enter the host, username, and password info and test the connection (ensure you don't accidentally paste extra spaces)
Open the connection and if it was successful, you should see a sole database that is a string of gibberish (don't rename)
No need to create tables as that will created via Sequelize
In Heroku, go to Settings > Config Vars > Reveal Config Vars
Verify there is a config var for JAWSDB_URL with the URL value
In config.json, configure the "production" property as follows:

"production": {
    "dialect": "mysql",
    "use_env_variable": "JAWSDB_URL"
  }

mLab for MongoDB / Mongoose

_mLab is now depreciated. Use MongoDB Atlas (below) instead.

Run this command to provision mLab to the app: heroku addons:create mongolab
Navigate to Heroku app and verify the mLab add-on is provisioned
Navigate to Settings > Config vars and verify there is a MONGODB_URL config variable
Ensure mongoose is required in server.js
Update Mongoose connection in server.js to be the following:

var MONGODB_URI = process.env.MONGODB_URI || "mongodb://localhost/db_name";
const options = {
  useNewUrlParser: true,
  useCreateIndex: true,
  useFindAndModify: false,
};

mongoose.connect(MONGODB_URI,options)

MongoDB Atlas for MongoDB

MongoDB Atlas Account

Create your MongoDB Atlas account
Create a new "cluster"
Select the free tier
Can use any provider - such as AWS
Choose the server in the region in the free tier closest to you
After creating the cluster, in the cluster, go to Security > Database Access
+Add new database user
Add username/password
Change privileges to Atlas Admin
Go to Security > Network Access
Go to Add IP Address and select Allow Access from Anywhere
Go to Clusters > Collections > Add My Own Data
Add your database name and one collection name (only need to add one to get started even if you have multiple collections since they will be created by Mongoose)

Connecting MongoDB Atlas to Heroku

Click the Connect button in your cluster
Select Connect Your Application and choose Heorku
Copy the string
Go to your app in Heroku > Settings > Config Vars
Enter MONGODB_URI in the key
For the value, paste the string you copied from MongoDB Atlas
Update the username/password and database name in the string to match what you created in the MongoDB Atlas Setup
Ensure you look to MONGODB_URI in you Mongoose connection (likely in server.js)

mongoose.connect(
  process.env.MONGODB_URI || "mongodb://localhost/databasename",
  {
    useUnifiedTopology: true,
    useNewUrlParser: true,
    useCreateIndex: true,
    useFindAndModify: false,
  }
);

DEV Community: Darian Nocera

How to Find Simple, Personalized Color Palettes

Khroma 🌈

Features ⭐

Gradients

Image Filters

Palettes

Considerations 🤔

✨ TL;DR: Use Khroma to get simple, personalized color combinations based on your actual color preferences.

Thanks for reading. Feel free to connect with me on LinkedIn!

How to Quickly Add a Contact Form to a Static Website

Creating the Account ⚙

Forms vs. Form Endpoints 🤔

Forms

Form Endpoints

Configuring the Form Endpoint ⚙

Building the form 🛠

Stopping Spam 🚫

Testing 🧪

✨TL;DR: Use free service 99inbound to create a form endpoint, and add this as the POST action to your HTML form.

Thanks for reading. Feel free to connect with me on LinkedIn!

How to Lazy Load an Embedded Youtube Video

Basic Steps

Credit to this repo for the idea for the play button css.

If Bob Ross had a modern, responsive, web development portfolio, what would it look like?

How to Set Your Project Up With Sass

Install Sass 🌎

Setup Your File Structure ⚙

Watch Changes To Sass Files 🔍

Partials 🔸

Test it out 🧪

Organizing Sass Files 📚

✨TL;DR: Install node-sass and use a script to watch for changes in your SCSS files to automatically compile them to CSS.

Thanks for reading. Feel free to connect with me on LinkedIn!

Essential Design Resources for Developers

Images

Free Photos and Background Images

Take and Edit Screenshots

Illustrations

Free Vector Illustrations

More Free Ilustrations

Icons

Free .svg Icons of Popular Brands

Free Vector Font Icons

Fonts

Heading & Body Fonts That Look Good Together

Identify a Font

Colors

Simple, Flat Color Palettes

Generate a Color Palette From an Image

Generate the CSS for Gradients

Identify HTML Hex Codes of a Pixel Anywhere

Thanks for reading. I hope these are helpful for you! Feel free to connect with me on LinkedIn!

React Basics For Beginners

Table of Contents

Benefits

Virtual DOM

Other Functionality

Basics

Rendering

JSX

Inline Styling in JSX

Components

Props

Tips for Successful Heroku Deployments

Table of Contents

Deployment

OAuth

Options for testing locally with OAuth

JawsDB for MySQL

mLab for MongoDB / Mongoose

MongoDB Atlas for MongoDB

MongoDB Atlas Account

Connecting MongoDB Atlas to Heroku

✨TL;DR: Install `node-sass` and use a script to watch for changes in your SCSS files to automatically compile them to CSS.