Hi there. This is my first blog entry on my new website.

This Christmas break, my wife and I decided to update our websites. Her website was using Concrete5, and mine was a manually edited, single page, static site.

We decided to use this as an opportunity to learn some new Web technologies. As someone who doesn't work in web development, I find it fairly hard to keep up with the latest Web technologies.

This time around, we decided to use the Gatsby static site generator. So launched an exciting delve into many other new (to us, anyway!) web technologies. Since I didn't really know what many of these were, here are my descriptions on a few of them:

• Gatsby

  Gatsby is a static site generator. It builds single page applications using ReactJS. As you'd expect, you can define sites programatically. There is a plugin system that allows you to pull in content from a variety of sources. On this site, I pull in my content from Markdown files.

• ReactJS

  ReactJS is a framework for defining User Interface components in Javascript. They are UI because they provide an interface for the user. They are components in that each component performs a limited function. Components can be used in different pages and applications, and components can be built on top of each other. The reason that React is in the name is that components can share data with each other, and they can automatically react to changes.

• Styled JSX

  ReactJS components are defined in JSX files. Styled JSX is a library that lets you programatically write CSS in the same file to format the component. There are a couple advantages to this. For example, Styled JSX can enforce a local scoping so that CSS rules only apply to elements created by the component the style is being defined in.

  Here's an example from my publications page:

  <style jsx>{`
    span.me {
      text-decoration: underline;
    }
  `}</style>

  There are a lot of other CSS-in-Javascript libraries too.

• PostCSS

  PostCSS is a modular post-processor for CSS. I'm using postcss-nested to allow nesting of CSS rules that is not normally allowed. There are a lot of other interesting plugins available too.

• Semantic UI

  I think of Semantic UI as an abstraction layer for CSS. They define a number of semantic elements or components, and provide nice looking implementations of those semantic elements. Here's an example of some of the components you can easily build using Semantic UI.

• Semantic UI React

  Semantic UI React encapsulates the components of Semantic UI into ReactJS components. In "regular" Semantic UI, you specify components using CSS:

  <div class="card">
    <div class="image">
      <img src="/images/avatar2/large/matthew.png">
    </div>
    <div class="content">
      <div class="header">Matt Giampietro</div>
      <div class="meta">
        <a>Friends</a>
      </div>
      <div class="description">
        Matthew is an interior designer living in New York.
      </div>
    </div>
    <div class="extra content">
      <span class="right floated">
        Joined in 2013
      </span>
      <span>
        <i class="user icon"></i>
        75 Friends
      </span>
    </div>
  </div>

  In React, though, you can refer to them like ReactJS components (which are basically just specialized HTML tags):

  <Card>
   <Image src='/images/avatar/large/matthew.png' />
   <Card.Content>
     <Card.Header>Matthew</Card.Header>
     <Card.Meta>
       <span className='date'>Joined in 2015</span>
     </Card.Meta>
     <Card.Description>
       Matthew is a musician living in Nashville.
     </Card.Description>
   </Card.Content>
   <Card.Content extra>
     <a>
       <Icon name='user' />
       22 Friends
     </a>
   </Card.Content>
  </Card>

  Almost all of this site is built using Semantic UI React. I started from fabien0102's Semantic UI Gatsby Starter, which I really liked because the components are built mostly with Semantic UI React, and so you can just "read" them to understand what's going on.

  I really liked the appearance of greglobinski's Hero Blog Starter, however, so I implemented some of that in Semantic UI. I like the result!