Uvacoder

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */

Uvacoder

Search 7,000+ tutorials

Forum Donate

[

Learn to code --- free 3,000-hour curriculum

Uvacoder

Express Cheatsheet

• Express Cheatsheet
  • Creating an App
  • Listening on a port
    • Using a separate server instance
  • Middleware
    • Standard middleware function signature
    • app.use
    • Routes - app.get, app.post, etc

Uvacoder

A Basic Component

The key abstraction that React provides is that of a component. To reiterate, a component is some thing that is being rendered in the browser. It could be a button, a form with a bunch of fields in it, a navigation bar at the top of the page, a single input field, etc. Any of these could be its own component. React doesn't place any restrictions on how large or small a component can be. You could have an entire static site encapsulated in a single React component, but that at that point you may as well not be using React. So the first thing to remember about a component is that a component must render something. If nothing is being rendered from a component, then React will throw an error.

Let's write the most basic of components we can possibly write. Inside of BasicComponent.js, first import React at the top of the file. Our most basic of components looks like this:

import React from 'react';

const BasicComponent = () => <div>Hello World!</div>;

Uvacoder

Introduction

ECMAScript 6, also known as ECMAScript 2015, is the latest version of the ECMAScript standard. ES6 is a significant update to the language, and the first update to the language since ES5 was standardized in 2009. Implementation of these features in major JavaScript engines is underway now.

See the ES6 standard for full specification of the ECMAScript 6 language.

ES6 includes the following new features:

• arrows
• classes
• enhanced object literals

Uvacoder

Basic Cheatsheet Table of Contents #

Expand Table of Contents

• Section 1: Setup TypeScript with React
  • Prerequisites
  • React + TypeScript Starter Kits
  • Import React
• Section 2: Getting Started
• Function Components

Uvacoder

          __         .' '.
        _/__)        .   .       .
       (8|)_}}- .      .        .
        `\__)    '. . ' ' .  . '

Uvacoder

                .' '.            __
       .        .   .           (__\_
        .         .         . -{{_(|8)
          ' .  . ' ' .  . '     (__/ 

Uvacoder

Magnific Image Pop-Up Modal for Hugo

A working demo of the pop-up can be found here.

I wanted a modal pop-up for images on my new Hugo site, and couldn't find one that worked with the styling that I do to the image path name. I'm new to Hugo, but I feel that the solution is simple and effective. The close button has been optimzed for accessibility as it is named close, but displays only × (×).

File Placement

Uvacoder

---
pageInfo:
  title: Dashy
  navLinks:
  - title: Home
    path: /
  - title: About
    path: /about
  - title: Source Code
    path: https://github.com/Lissy93/dashy