DEV Community: Aivan Monceller

Creating Your Own Personalized Avatars with AI

Aivan Monceller — Mon, 02 Jan 2023 08:03:40 +0000

Have you ever wanted to create your own personalized avatars from photos, but found the process to be difficult or expensive? With the advent of artificial intelligence, it has become easier than ever to create unique and striking images using your own photos as a reference.

I have created a Google Colab tool that allows you to do just that, and it's completely free to use with just a Google account. This tool is based on the latest AI technology and allows you to train an AI text-to-image generator called Stable Diffusion.

To get started, simply upload your photos and follow the prompts to begin training the model. You can adjust the settings to fine-tune the model's performance and improve the accuracy of the generated images. Once you are satisfied with the results, you can save the model to your Google Drive and use it to generate images anytime.

This is a great opportunity to explore the capabilities of AI and see how it can be used to create novel and striking images. Give it a try and see what you can create!

Link to Google Colab below 👇🏼

https://colab.research.google.com/github/geocine/sd-easy-mode/blob/main/EasyMode_Stable_Diffusion.ipynb

3 Common Misconceptions about JSX

Aivan Monceller — Fri, 05 Jun 2020 14:09:09 +0000

I have personally held the distaste of seeing JSX being used in React. For years, I had very strong opinions against using it until I had no other choice but to learn it.

I want to share 3 misconceptions I had and how I realized that these things were not entirely true when you look at it from a certain point of view.

You're going to find that many of the truths we cling to depend greatly on our own point of view - Obiwan Kenobi

I will not try to preach that JSX has without any flaws. As with other tools, a tool is only as good as how you would use it.

JSX is now being used even outside of React, on projects like MDX, VueJS, StencilJS, SolidJS, Mitosis, AtomicoJS and Preact. In this blog, I will be focusing on the context of React to explain my thoughts regarding JSX.

No Separation of Concerns

JSX forces us to mix JavaScript and HTML together. This means that it is trying to force us to go against the mantra of Separation of Concerns due to the mixing of layout & logic.

Here’s the thing, using JSX to write your presentation code doesn’t necessarily mean giving up these principles. Let us look at this very simple component in React

const HelloWorld = ({name}) => {
   const message = `Hello ${name}`;

   return <h1>{message}</h1>
}

There’s no reason why that separation can’t occur in the context of JavaScript. In this example the layout & logic is separated like this:

const HelloWorld = ({name}) => {
   // component logic is confined above the JSX block
   // some logic to form message
   const message = `Hello ${name}`;

   // JSX is confined to this return block
   return <h1>{message}</h1>
}

One important thing to note is that separation of concerns is not equal to separation of file types. In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable. - VueJS Documentation

To better understand this, let us now try converting this component into an Angular component.

@Component({
  selector: 'hello-world',
  // template is confined in this property
  template: `<h1>{{message}}</h1>`
})
export class HelloWorldComponent {
  // component logic is confined in this class
  message: String;

  @Input()
  public set name(name: string) {
    // some logic to form message
    this.message = `Hello {name}`;
  }

}

On Angular, you can separate the template using files. I will be using MVVM/MVC terms to properly explain what is going on here.

Component Controller

@Component({
  selector: 'hello-world',
  templateUrl: './hello-world.html',
})
...

Component View

<h1>{{message}}</h1>

You may say that the template/layout example above is so simple so it doesn't really show the dark side of JSX. We could switch it up a bit by throwing it in a condition.

JSX

{render && <h1>{message}</h1>}

Angular Template

<h1 *ngIf="render">{{message}}</h1>

As you can see above they are just about the same, JSX using JavaScript & HTML, while Angular introducing *ngIf.

In this case, the conditional logic is actually mixed with the layout on both examples. Be it separated by JavaScript context in React, or separated by files in Angular.

In React, the layout is in the same file as the component. This gives you a clear idea about the component context and what is available at your disposal. However, you will likely have a very long file as time goes by even in Vue SFCs. Luckily, editors nowadays have a way to split the window so that you can work on different sections of the same file.

Even though I have stated here that you can confine JSX to the return part of the component. There is definitely no one stopping you from doing this.

const HelloWorld = ({name}) => {
   const message = <h1>{`Hello ${name}`}</h1>;

   return message;
}

If you have to declare multiple JSX pieces across your component, think of a better way to achieve this using multiple components.

Another Templating Syntax

While JSX is claiming that it's easy to learn it because you can write HTML on JavaScript, we can think that it is actually an abomination of what we have been trying to achieve separating HTML and JavaScript.

On common frontend libraries/frameworks we have actually come up with different solutions to keep the separation between HTML from JavaScript while making HTML dynamic: Angular Template Syntax, VueJS Template Syntax.

Did you notice that there is no such thing as a JSX Template Syntax or a React Template Syntax? This is probably the only page which explains JSX and it's just a very short documentation. Though it looks like it, JSX isn’t a templating engine, in the sense that Handlebars is a templating engine, similar to what I have linked above.

JSX is actually more than that, it is a syntax extension for JavaScript. Basically, it extends JavaScript so that HTML/XML like structures can be used with JavaScript.

If you actually looked at the documentation I linked above, there is a lot to learn to get started with these templating engines as compared to JSX. In JSX, at the bare minimum, you only need to know JavaScript and HTML and a few extra exceptions. Below is an example of rendering items using a loop in JSX.

<div>
 {names.map(name => (
    <li>
      {name}
    </li>
 ))}
</div>

Looking at this you only need to know what the JavaScript .map does, HTML div and li and the extra {} for evaluating JavaScript code. I know, this does not look clean at first, it looks like an ugly soup of JS mashed with HTML. But, let me walk you through what is happening here.

<div>{}</div>

In JSX, HTML and JS is considered a valid JSX. However, to slap JS within an HTML you need to make use of {}. Now let us look inside the {}.

names.map(name => (<li>{name}</li>))

This is JavaScript returning a collection of <li/> which is an HTML but is also considered valid JavaScript in JSX.

While we can think that React and JSX go against how templates are done in MVVM/MVC frameworks, that is not entirely true. Here are some templating engines on popular backend frameworks that would look very familiar to you.

Blade Templates (PHP)

<div>
@foreach ($name as $names)
   <li>{{ $name }}</li>
@endforeach
</div>

Razor Templates (C#)

<div>
@foreach (var name in names)
{
  <li>@name</li>
}
</div>

Jinja Templates (Python)

<div>
{% for name in names %}
  <li>{{name}}</li>
{% endfor %}
</div>

As you can see this is about the same concept in PHP, C#, Python templating engines. You just have to know the language and some extras to actually remember it.

Now let us go back to the frontend. Let us look at the template engine of Handlebars, VueJS, Angular, and see how looping is implemented.

Handlebars

<div>
{{#each names}}
   <li>{{this}}</li>
{{/each}}
</div>

VueJS

<div>
  <li v-for="name in names">{{name}}<li>
</div>

Angular

<div>
  <li *ngFor="let name of names">{{ hero }}</li>
</div>

I must admit, these look cleaner in my opinion. But, I think once the props or the attributes get into a certain number, it will be harder to identify the scope and context of control structures. You also have to remember a lot of custom attributes. Other than that, it just takes getting used to.

To drive my point home, JSX is not a templating engine but it allows us to do what another templating engine has been doing for years. On top of that, it looks very familiar since you are dealing with JavaScript and HTML.

There are more uses to JSX other than conjuring templates, you can visit the list of links I mentioned in the introduction of this article. If you don't like React, you could still consider using JSX from those projects.

Personally, it was not React that got me started to like JSX. It was StencilJS. When I finally got the hang of it, I finally considered giving React a second chance.

Too Flexible

I agree that this could be a valid rant. As with things that are too flexible, it could easily be abused. On JSX its not only JavaScript and HTML that you should look out for. It can also be used with React components which would make it confusing for someone who doesn't know React.

A React element in JSX is also a function. Hence, JSX can be used to create cryptic code such as this

// Detect dark theme var iframe = document.getElementById('tweet-991748861910835200-767'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=991748861910835200&theme=dark" }

You wouldn't probably be doing this although there could be some use cases for this. While I don't have the actual implementation of this code, this could be using React Context and Render Props under the hood which is specifically what React provides.

If you are looking into JSX, it's highly likely you are exploring React and wonder what Render Props are. I don't want to turn this into a React course but would just try to make a point by showing how Render Props work.

I want to create a generic Mouse component that outputs the x and y coordinates of the mouse within the component. I can then display the x and y coordinate in whatever way I like. So this is how we do it in React using Render Props.

Mouse Component (React)

const Mouse = ({children, onMouseMove}) => {
  const [coords, setCoords] = useState({x:0,y:0});

  const onMouseMove = (event) {
    setCoords({x: event.clientX, y: event.clientY});
  }
  return (<div onMouseMove={onMouseMove}>
     children({
       x: coords.x, 
       y: coords.y
     })
  </div>)
}

Use Mouse Component (React)

<Mouse>
  ({x,y}) => {
     return <h1>The mouse position is ({x}, {y})</h1>
  }
</Mouse>

In this example, we can see that the Mouse component accepts a function and it invokes that function on its JSX block. The function which is passed also returns a JSX.

This is somewhat similar to how high order functions work in JavaScript. A higher-order function is a function that takes a function as an argument or returns a function

Let us now try to do this in Angular.

Mouse Component (Angular)

@Component({
  selector: 'mouse',
  template: `
  <div (mousemove)="handleMouseMove($event)">
    <ng-container *ngTemplateOutlet="template; context: coords" ></ng-container>
  </div>
  `,
})
export class Mouse {
  @ContentChild(TemplateRef) template;
  coords = { x: 0, y: 0 }

  handleMouseMove(event) {
    this.coords = {
      x: event.clientX,
      y: event.clientY
    }
  }
}

Use Mouse Component (Angular)

<mouse>
  <ng-template let-x="x" let-y="y">
     <h1>The mouse position is ({{x}}, {{y}})</h1>
  </ng-template>
</mouse>

I can actually say that this is much harder to understand if I don't know what ng-template, ng-container, and TempalateRefare and how they actually work. With JSX, we were able to achieve what we like with shorter succinct code.

Conclusion

There is actually nothing compelling about what I’ve done here — several technologies have been using some sort of templating engine for quite some time. I still like working with templates even though I have been working with JSX nowadays.

Maybe we should start using something for a considerable amount of time before actually hating it. The use of templates vs JSX, highly depends on what application you are building, your team’s preferences, experience, or perhaps whether or not you have code-capable designers on your team.

What do you like or don't like about JSX? Please share your thoughts.

A Beginner's Guide on Creating a Portfolio Website with Github and Gatsby

Aivan Monceller — Sat, 24 Aug 2019 09:38:46 +0000

As someone who is trying to build a presence online, having a website should be on top of your priority list. It is also a fun learning experience which will help you explore your inner creative child.

This guide will help you build a portfolio website and host it online for everyone to see. To be able to follow through, you must at least have some working knowledge about HTML, CSS, and JavaScript.

Setting up your Computer

We will be setting up our JavaScript development environment. The following software needs to be installed and setup on your computer.

NodeJS

NodeJS will be used to build the source code of our website and download packages that we need. Note that npm will be installed with NodeJS.

Download NodeJS. At the time of writing, this is the latest version. If you are using Windows, this page will show Windows downloads.
Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.
If you have successfully installed NodeJS you should be able to verify it by opening your Terminal/Command Prompt and type the following commands.

node -v     # will show currently installed version of NodeJS
npm -v      # will show currently installed version of npm

VS Code

VS Code is a source-code editor. It includes support for embedded Git control and GitHub.

Download VS Code. If you are using Windows, this page will show Windows downloads.
Once you have downloaded the installer, go ahead follow the prompts to install it to your computer.

Git and Github

Git will help us save versions of our source code to GitHub. You must create a GitHub account and setup Git after by following the instructions below:

Creating a Github Account

Go to https://github.com. Enter a username, email and password.
There will be three (3) steps until you reach this page.

Creating the Repository

Once you have verified your email, you will be redirected to this page. Here we will create a repository named username.github.io so example in my case it would be geocine.github.io

Setting up your SSH Key

To be able to upload the files from our computer to GitHub, we need to create an SSH key and set it up on GitHub.

Generating a new SSH Key

Open your Terminal/Git Bash
Enter the text below, substitute the email with your email
When you're prompted to "Enter a file in which to save the key," press Enter. This accepts the default file location.
At the prompt, type a secure passphrase. Note that nothing will show while you are typing.

Adding a new SSH key to your GitHub account

If you have properly followed the instructions above, a file will be generated on your ~/.ssh folder:

Go to your ~/.ssh folder on Mac or C:/Users/YOUR_USER_NAME/.ssh on Windows. You will see a file named id_rsa.pub. Open it and copy its contents.
Go to the settings page of your GitHub account.
Click on SSH and GPG Keys > New SSH Key
Add your SSH Key from Step 1 then press Add SSH Key
If prompted, confirm your GitHub password.

Choosing a Template

Let us open the Gatsby Starters page and choose a template. You'll be able to see something like this:

I'll be using the gatsby-starter-portfolio create by LekovicMilos

Setting up your Git Repository

We will be using our GitHub account to create a website, we shall be hosting it on username.github.io so example in my case it would be geocine.github.io

Create a folder on your computer, use your GitHub username. In my case, I will create geocine.github.io
Go to the template of your choice, scroll down. Click on the Source link.
Copy the link as shown on the screenshot below:
Go inside your folder, in my case it's geocine.github.io. Clone the starter
```
git clone git@github.com:LekovicMilos/gatsby-starter-portfolio.git
```
Once the cloning process is done. Your folder structure should look like this
We will rename gatsby-starter-portfolio to gatsby. Now your directory structure should look like this
Create a .gitignore file on your root directory and paste the following:
While you are root folder, let us initialize git
```
git init
```
Now go inside the gatsby folder and delete the .git folder
```
rm -rf .git
```
While you are inside the gatsby folder, let us install the dependencies.
Open the package.json file and edit the scripts portion. Add a clean property and edit the build property:
Go back to the root folder. Open the GitHub repository you have created a while ago from Creating the Repository and copy the command highlighted.

While on the root folder, execute the command from Step 12

git remote add origin git@github.com:geocine/geocine.github.io.git

Go back to the gatsby folder. Let us build the project
```
npm run build
```
Go back to the root folder. Now let us commit our code and push it.
Now you should be able to see your site at username.github.io. Mine should be at geocine.github.io

Note that we pushed the build files on the master branch and saved gatsby on a subdirectory because username.github.io only serves from the master branch. See more details here

Development Workflow

Now that your site is up and running. I will describe the development workflow

Editing/Development

You must be inside the gatsby folder when you are developing. To further know what can be configured on the template you downloaded. Just visit the repository and follow the README.

I will not be able to give you specific instructions on how to use a starter. Starter authors have different ways of configuring the starters they have created.

Editing

Open the gatsby folder in VS Code

Development

To run gatsby in development mode. While you are inside the gatsby folder, open your Terminal/Command Prompt and run this command:

npm run develop

Deployment

Once you are finished with editing things on the starter template, you need to deploy it to GitHub.

Build

First, you need to build gatsby so that it will generate all the necessary static files for your website. While you are on the gatsby directory, execute the following command:

npm run build

Deployment

You need to be on the root directory which is the username.github.io or geocine.github.io in my case to push things to Github. Execute the following commands:

git add .
git commit -m "your message"
git push -u origin master

If you have any questions regarding the setup or need any help with yours, please leave a comment.

What dev thing haven't you done that you feel like you should have by now?

Aivan Monceller — Tue, 13 Aug 2019 15:25:27 +0000

I wanted to share this question posted by Chris Sevilleja on Twitter.

// Detect dark theme var iframe = document.getElementById('tweet-1160228432732512256-385'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1160228432732512256&theme=dark" }

I answered his tweet and he has recommended resources to pursue what I have listed.

// Detect dark theme var iframe = document.getElementById('tweet-1160591185670356994-727'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1160591185670356994&theme=dark" }

// Detect dark theme var iframe = document.getElementById('tweet-1160616581090594816-607'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1160616581090594816&theme=dark" }

This post is a long-form version of what I have shared on Twitter. I only listed three (3) on Twitter to fit the short-form content.

Create a self-compiling compiler

A self-compiling compiler is a compiler that can compile its own source code. The process involved in accomplishing this kind of thing is not new. This technique is called boostrapping, something that has been used even before the '80s. A few examples of modern programming languages that have a self-compiling compiler are the following: Go, Rust, TypeScript, etc.

When creating a new programming language, you need to create a compiler. The initial version of the compiler will be written in a different (existing) programming language. Once you have a compiler you can use it to rewrite the compiler into the intended language and compile subsequent versions of that compiler.

If there is such a thing, I am trying to hit multiple birds with one stone.

Learn Go towards having advanced knowledge of its constructs
Write an interpreter and a compiler to understand how the code we write gets transformed so that the computer will be able to execute it
Learn programming paradigms that I have never encountered before and implement it. This will pave the way in opening new neural pathways in my mind.

To achieve this I am following books written by Thorsten Ball: Writing an Interpreter in Go and Writing a Compiler in Go. In my opinion, these books are very concise, clear and short. It explains complex concepts without being too academic. The author doesn't use any third-party libraries or frameworks, just the standard Go library. Thus, you may follow this book in any programming language you are comfortable with. It also progresses step-by-step in a test-driven manner of implementing the pieces of the interpreter/compiler.

Website Development Workflow

Do you know the feeling of being professionally competent at something but unable to offer your expertise to friends or other people due to reasons?

I have been developing websites my entire career but I cannot compete against a web development studio's speed in delivering something of value to a client.

This doesn't mean that I just can't. The stuff I do at work is not about spinning company websites all day. I am also distracted what to use when it comes to building a website for someone. I do not have a clear workflow on how to spin up a website from zero to production.

When you are building a content-based website, you have to think of three (3) people: the developer, the content creator, and the audience.

You need to have good developer experience so that you could easily hand over the website to another developer. You should also make it simple for the content creator to use. The content creator should never need the developer to create content or any kind of reasonable customization.

Thinking of your audience, you should consider that people should be able to view the website on different devices. You need to factor in accessibility and user experience.

Being part of several non-profit organizations, I have been genuinely wanting to help them create their websites. I also want to help small entrepreneurs to have their businesses online.

To achieve this, I am currently exploring The Power of Serverless for Frontend Developers and the JAM Stack.

Get Confident with Algorithms

My Impostor Syndrome is at its strongest when the topic of algorithms comes into play.

I have a Computer Science background and have even joined ACM competitions in the past. Still, I don't see myself acing any algorithm interview any time soon.

I have somehow convinced my self that learning algorithms is important and I am currently consuming the following resources:

Alogrithm Design and Techniques @edX
JavaScript Data Structures and Algorithms
Grokking Algorithms An Illustrated Guide For Programmers And Other Curious People
The Impostor's Handbook
Interview Cake - having second thoughts on trying this.

How about you? What dev thing haven't you done that you feel like you should have by now?

Developers meet Designers, Designers meet Developers

Aivan Monceller — Wed, 17 Apr 2019 13:29:55 +0000

Is there such a community where Developers ⇄ Designers can meet and collaborate? I am a developer who has an eye for design.

That doesn't mean that I can do what professional designers do, I just know what looks good vs the obvious not.

I do create my own opensource logos, templates, etc. But most of the time, I find myself copying other's designs or totally give up and head to Fiverr.

I once had an opportunity to work on a project with a designer who knows UX and HTML/CSS development. It was an awesome experience.

It was my first time to trust someone with a design which we both agreed. He was not just a designer, we both had enough knowledge to communicate requirements on our sides.

Now, why am I looking if I already found a person who could work with me? Here is the thing, not all people are like you and me folks.

We are the ones who have a very long list of TODOs that is piling up very fast but slowly being ticked. We are obsessed with new ideas which most of the time lead to half-baked outputs.

S.O.S.: you might suffer from F.O.M.O.! ( About Fear of Missing Out and Shiny Object Syndrome)

Davide de Paolis ・ Apr 8 '19

#career #selfimprovement #personaldevelopment #productivity

We love opensource and definitely find time out of our 9-5 job and our weekends. In fact, we consider this as one of our leisure activities.

Working for years, I only met a single person who shares the same enthusiasm. And no, he is not a designer, he is an awesome developer just like me.

So how about, we start establishing an alliance where we can do stuff together. Let us build our portfolios together and work our way towards intentional career building.

Creating your Blog using GatsbyJS and Dev.to API

Aivan Monceller — Sun, 31 Mar 2019 06:36:50 +0000

TLDR: You can go to the demo on what this is all about. Nonetheless, this is really very easy even if you don't know about GatsbyJS.

I have seen a couple of Dev.to API articles here and decided to make something useful with it.

If you already have a blog, this article is also for you. I have been struggling to create some content on my own domain because I feel no one would even bother visiting my site.

At Dev.to though, I just keep coming back to write articles because I know someone would be reading it somehow.

Instead of cross-posting from my own blog to Dev.to, I thought I could do the other way around. I am introducing this very basic Dev.to Gatsby source that you could use with your Gatsby website.

geocine / gatsby-source-dev

Gatsby source plugin that fetches user articles from Dev.to

gatsby-source-dev

A Gatsby plugin that fetches user articles from Dev.to’s /articles?username combined with /articles/${id} endpoint.

Usage

Install gatsby-source-dev in your project:

yarn add gatsby-source-dev
npm install gatsby-source-dev

Then add the plugin to your gatsby-config.js file:

{
  resolve: "gatsby-source-dev",
  options: {
    // This is your username on Dev.to
    username: ''
  }
}

The plugin will store the Dev.to API response in Gatsby. Here's an example of a query that fetches an articles title, id, and description.

{
  allDevArticles {
    edges {
      node {
        article {
          id
          title
          description
        }
      }
    }
  }
}

The node contains the entire response from Dev.to’s endpoint.

Pagination is not yet implemented

View on GitHub

If you do not know what a gatsby source or have never really touched Gatsby, you don't need to worry since I created a starter.

geocine / gatsby-starter-devto

A GatsbyJS starter template that leverages the Dev.to API

Gatsby Starter Dev.to

This is a demo usage of the gatsby-source-dev plugin

Also using html-react-parser to render html as components as described on my blog post

View on GitHub

Here are the steps how to create your own blog using this starter:

1 - Clone the github repository

    git clone git@github.com:geocine/gatsby-starter-devto.git

2 - Open gatsby-config.js and change line 13 with your Dev.to username

    module.exports = {
      siteMetadata: {
        title: 'Gatsby + Dev.to Starter',
      },
      plugins: [
        ...
        {
          resolve: 'gatsby-source-dev',
          options: {
            // your Dev.to username
            username: 'geocine'
          },
        },
        ...
      ],
    }

3 - Install and start

     yarn
     yarn start

4 - Navigate to http://localhost:8000

This is how it should look like using my username geocine.

This is still a work in progress, I will be adding more features, feel free to create a pull request. I hope you like it.

If you want to learn more about gatsby, checkout this article below:

GatsbyJS a Dynamic Static Site Generator

Aivan Monceller ・ Feb 28 '19

#gatsby #graphql #react #jamstack

What are your favorite programming language syntax features?

Aivan Monceller — Wed, 27 Mar 2019 16:31:17 +0000

I have my own non-exhaustive list, and these are purely based on what I have used: JavaScript, TypeScript, C#

Safe Navigation Operator

This is also known as optional chaining operator, safe call operator, null-conditional operator.

Instead of writing multiple nested ifs, we just use usual chaining, but put question mark symbols ? before dots (or other characters used for chaining).

String name = articles?[0]?.author?.name;

Null Coalescing Operator

This is the shorthand of the ternary conditional if operator x ? x : y

string pageTitle = suppliedTitle ?? "Default Title";

In JavaScript the OR operator || has the same behavior as the above. It returns the first operand if it evaluates to true, otherwise, it returns the second operand. When the left hand side is true, the right hand side is not even evaluated; it is "short-circuited."

 let pageTitle = suppliedTitle || "Default Title"

Lambda

This is also known as anonymous function, function literal, lambda abstraction, or lambda expression.

const hello = (name) => `Hello ${name}`

You can do a lot of things with this construct. Currying, closures, high order functions etc.

Auto Implemented Properties

In C# auto-implemented properties make property-declaration more concise when no additional logic is required in the property accessors.

public string Name { get; set; }

In C# 6 and later, you can initialize auto-implemented properties similarly to fields:

public string FirstName { get; set; } = "Jane";

You can learn more about automatic properties here

Async/Await

The async/await pattern is a syntactic feature of many programming languages that allows an asynchronous, non-blocking function to be structured in a way similar to an ordinary synchronous function.

public async Task<int> FindPageSize(Uri uri) 
{
    byte[] data = await new WebClient().DownloadDataTaskAsync(uri);
    return data.Length;
}

async function createNewDoc() {
  let response = await db.post({}); // post a new doc
  return await db.get(response.id); // find by id
}

Intersection / Union Types

In TypeScript, the intersection type combines types, so that you can have all properties and members of both types on your particular object or method.

target: string & Element;

Union types, meanwhile, are an either/or scenario. Instead of combining types to receive all members and properties, we use union types to specify that a method accepts either of several different types.

target: number | string;

JSON Serialize / Deserialize

JavaScript makes it very easy for us to serialize and deserialize JSON.

const obj = { name: 'Aivan' }
JSON.stringify(obj) // serialize object to JSON string

const str = `{name : "Aivan"}`
JSON.parse(str) // deserialize string to object

Template Literals

Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.

`string text 
   ${expression} 
 string text`

Destructuring and Spread Operator

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

This is taken from the MDN

Object Property Value Shorthand

Instead of writing your objects like this:

const name = 'Aivan'
const obj = { name: name } // { name: 'Aivan'}

You can write it like this. This is possible if the name of the key and the variable name of the value is the same.

const name = 'Aivan'
const obj = { name } // { name: 'Aivan'}

Annotations / Decorators

Decorators provide a very simple syntax for calling higher-order function. It also allows for a cleaner syntax for applying wrappers around your code, resulting in something that detracts less from the actual intention of what you’re writing.

@Wove()
class DataMapper {
  // ...
}

You can learn more about decorators here.

Default Parameters

Default parameters allow named parameters to be initialized with default values if no value or undefined is passed.

function multiply(a, b = 1) {
  return a * b;
}

// you can call it like this
multiply(1) // 1
multiply(2, 2) // 4

GatsbyJS a Dynamic Static Site Generator

Aivan Monceller — Thu, 28 Feb 2019 13:41:02 +0000

I will try to explain what a Static Site Generator (SSG) is. An SSG is a cross between a static site and a Content Management System (CMS) in the sense that the static content is generated from a data source.

The final output would be a static site which can be served through a Content Delivery Network (CDN) or any web server. You will not need to run a backend, database and things like that. You can even just run it on your computer by opening the HTML file on your browser.

This post has good points on explaining what an SSG is.

Article No Longer Available

Its Dynamic Capability

An SSG is not totally static. It achieves dynamic content through the process of gathering data from a source and transforming that data into human consumable content through templates.

The keyword here is generator. The generator is responsible for this process and this happens only once every time we need to update our content. Most SSGs use files as a data source. The most common file is a markdown file.

If you don't know what is markdown go and check this post:

Markdown Cheatsheet for developers

Rattanak Chea ・ Nov 13 '18

#markdown #cheatsheet

Being able to edit content through a file is not truly dynamic. What if we can pull our data from a dynamic source like an API, database or CMS? It is indeed possible, enter Gatsby!

Gatsby

I would like to introduce you to Gatsby. Before I start, just wanted to let you know there are tons of SSGs available. Check out this list by the Netlify team, it contains around ~248 static site generators.

What makes Gatsby different?

Gatsby introduced the concept of "bring your own data". Most of the SSGs can only take content from files. That is where Gatsby shines and it shines with class. I'll quote from their website:

Gatsby’s rich data plugin ecosystem lets you build sites with the data you want — from one or many sources: Pull data from headless CMSs, SaaS services, APIs, databases, your file system, and more directly into your pages using GraphQL.

What is GraphQL and how does it fit in the picture?

I will probably save an introduction to GraphQL on a different post. But here is a good post which explains what is it:

What is GraphQL?

Grigor Khachatryan ・ Jun 17 '18

#graphql #javascript #facebook #node

Hold your horses, we don't need to setup any GraphQL server to use GraphQL in Gatsby. We don't even need to transform our existing APIs to GraphQL. So why are we even talking about GraphQL?

The diagram below from the Gatsby site shows how GraphQL is being used. Gatsby exposes your data source whichever it may be through GraphQL. This means you don't have to deal with different things if you have a lot of different data sources.

If you are integrating a data source, there is a high chance that a plugin is already written for that. Make sure you check the Gatsby plugins page and look for gatsby-source.

If you do not see a plugin for your use case, it's really easy to start writing your own Gatsby source plugin. A detailed guide can be found here.

Dynamic Templates

A template engine will pre-process data with a template to produce a result document or any kind of formatted output. Once the output is produced, it stops there.

Gatsby is built with React so the way you display stuff is through JSX. It will also produce an output similar to a regular SSG. When you load the produced output on a browser, ReactJS kicks in which will enable you to provide better user experiences by making your site interactive, fast and less janky.

If you have been using ReactJS, it will mostly be the same experience just like how you use it with or without Gatsby. You don't have to switch context to an obscure build system or even a language you haven't used before.

Why is Gatsby so fast?

We already got rid a lot of overhead by using an SSG. Gatsby took this a couple of notches higher.

Performance in Gatsby is not optional, it's built-in. I designed Gatsby with the goal that when using it, it'd be really really hard to build a slow site

You can read a detailed talk about this by (founder of Gatsby) Kyle Matthews here. Try it for yourself to see the difference, watch this webinar by the Gatsby team.

Getting Started with GatsbyJS and WordPress

Aivan Monceller — Sun, 24 Feb 2019 12:53:07 +0000

Do you know how to create a static website with HTML, CSS, and JavaScript? I believe you have used WordPress once to create your own blog.

You can use WordPress, without knowing how to create your own themes and plugins. There are a lot in the wild. But then it starts to get complicated once you start tinkering on things the way you want it to.

What if there's a way to turn WordPress into an API or a data source in which you could pull content and display it anywhere?

In this post, we will be setting up WordPress in Headless mode, create a basic HTML/CSS template, and use GatsbyJS to integrate our template with WordPress.

WordPress

I will assume you know how to install WordPress. If not, here is a step by step guide.

To setup WordPress in Headless mode, we will need to install the following plugins:

WP API Menus - This will expose the Menus as an API. The built-in WordPress API does not expose menus.
Advanced Custom Fields - We would be able to create custom fields based on rules and be able to access it through an API
Custom Post Type UI - Sometimes Pages and Posts are not enough, we would like to create custom posts like Products, Movies, etc.
Postlight Headless Theme - This theme will remove the Webpages on the client-facing frontend and will replace it with JSON.

Running in Headless mode means we will still be using the WordPress Dashboard to manage content but we will be serving those through an API. Hence, we won't be using WordPress to show the generated content to our visitors.

Make sure you have at least 1 post and 1 page on your WordPress site. Make sure at least 1 post has at least 1 tag. We will be using this for the latter part.

HTML/CSS Template

Now that we have a WordPress setup. Let us start creating the base template of our website. I will be using the Holy Grail layout from this article at Alligator.io

Holy Grail is a layout pattern that’s very common on the web. It consists of a header, a main content area with fixed-width navigation on the left, content in the middle and a fixed-width sidebar on the right and then a footer.

Here is the demo I built on Codepen.io. We will be using this as our layout on GatsbyJS.

GatsbyJS

If you are following this guide, I assume you have NodeJS setup on your machine. If not, here is a step by step guide.

GatsbyJS is ReactJS under the hood so it would be easier to follow this if you have basic understanding of React or frontend frameworks in general. Here is a good starter to ReactJS Basics by Maximilian Schwarzmüller. Don't worry, you should still be able to follow this guide.

Setting up GatsbyJS

We will be using the gatsby-starter-wordpress. Here gatsbyhg is the name of our project, you may use any name you want.

GatsbyCentral / gatsby-starter-wordpress

LOOKING FOR MAINTAINER - - - A GatsbyJS starter template that leverages the WordPress API, ACF and more

Gatsby v2 WordPress Starter

This starter is forked from the gatsby-starter-netlify-cms and modified to use WordPress instead of netlify-cms, using the gatsby-source-wordpress plugin as the data connector.

Demo: https://gatsby-starter-wordpress.netlify.com/

Looking for maintainer: If you're interested in taking over the maintenance of this starter, please reach out in an issue. We're not working with Gatsby any more (it got way too complicated, hello nextjs), and so we're not maintaining this.

Use It Now

gatsby new NAME https://github.com/GatsbyCentral/gatsby-starter-wordpress

Edit gatsby-config.js, change baseUrl
- Make sure you have at least 1 post and 1 page on your WordPress site
- Make sure at least 1 post has at least 1 tag
Ensure the permalink structure in your WordPress installation is set to Post Name instead of the deafult Plain, or else the gatsby-source-wordpress plugin won't be able to communicate with WordPress
Rejoice
- For more information on the source plugin, check out the…

View on GitHub

npx gatsby new gatsbyhg https://github.com/GatsbyCentral/gatsby-starter-wordpress

You can preview what's on this gatsby starter template by running it

yarn start

Then, navigate to http://localhost:8000/

Connecting to our WordPress site

To connect to our WordPress site. Open the gatsby-config.js file. Look for baseUrl, modify it to point to your site without the https://. Start the project and check if the content displayed is indeed from your WordPress site.

yarn start

Integrating our HTML/CSS template

The gatsby-starter-wordpress already has a template built with it. We will replace this with our Holy Grail layout.

First, let's edit the src/components/Layout.js to match our layout.
We will be specifically modifying this portion:

 <div>
   <Helmet title="Home | Gatsby + WordPress" />
   <Navbar />
   <div>{children}</div>
 </div>

To this :

  <div className="layout">
    <Helmet title="Home | Gatsby + WordPress" />
    <header>Header</header>

    <Navbar />

    <main>{children}</main>

    <aside>Sidebar</aside>

    <footer>Footer</footer>
  </div>

Next we add a CSS file called style.css under src/components/ with the following content:

/* Layout */

.layout {
  display: grid;

  grid-template-areas:
    "header header header"
    "nav content side"
    "footer footer footer";

  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;

  height: 100vh;
}

header {
  grid-area: header;

  display: flex;
  justify-content: space-between;  
}

nav {
  grid-area: nav;
  margin-left: 0.5rem;
}

main {
  grid-area: content;
}

aside {
  grid-area: side;
  margin-right: 0.5rem;
}

footer {
  grid-area: footer;
}

/* Theme */
/* This is optional, you can use your own style for this */

body {
  padding: 0;
  margin: 0;
  font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

header {
  font-size: 18px;
  color: #fff;
  min-height: 20px;
  background: #0a2b4e;
  padding: 20px;
}

nav,
aside {
  background: #666;
  padding: 10px;
  color: #fff;
}

footer {
  background: black;
  color: #fff;
  padding: 20px;
}

.navbar-item {
  display: inline-block;
  color: #fff;
  padding: 10px;
}

.navbar-item img {
  height: 20px;
}

.pagination {
  margin: 0;
  background: black;
}

.pagination a {
  color: #fff;
}

Modify style imports on src/components/Layout.js

import './style.css' // add this
import './style/all.sass' // remove this, we won't be needing this anymore

You can view the demo here. The source code is here.

Challenges in Headless WordPress with GatsbyJS

Aivan Monceller — Sat, 23 Feb 2019 06:25:22 +0000

Fellow developers, who have used Headless WordPress with GatsbyJS on one of your latest projects what were the major challenges you encountered and how did you go about solving it?

In this post, I will try to share my experience working on a recent project with this stack.

Gutenberg Editor

The Gutenberg editor is a new editor developed by the WordPress team which was released in version 5 of WordPress. You can get a feel of this editor by trying it out on this website setup by Tom J Nowell and the official Gutenberg project here. I realized that this is exactly what I need for my users' needs

Rendering generated content on Gatsby

The very basic way to render content coming from WordPress is this way

return (<div
   dangerouslySetInnerHTML={{
      __html: data.WordPressPage.content
   }}
/>)

How will you be able to render an image gallery which opens a modal when you click on one of the images if the markup generated by WordPress is something like this?

<div class="gallery">
  <img src="https://placekitten.com/200/300" />
  <img src="https://placekitten.com/g/200/300" />
</div>

I have used html-react-parser and transformed this HTML string into a component.

Check the code below. Note that the custom Gallery component I implemented here doesn't have that modal I talked about earlier. But since its already a React component, we can do just about anything.

Style of preview should match rendered Gatsby content

Here we should at least sync the styles of the preview with the rendered content.

Either we repurpose an existing block or create our own custom blocks so that it will look exactly the same on the editor and the site. FYI, blocks are written in React.

I created overrides of the block styles at the theme level and made sure the same is shown on Gatsby. If we don't do this then the editor is not a WYSIWYG anymore.

The major challenge here is, the user can install some new blocks then we have to write support code and make sure it doesn't break the others.

ACF on Gutenberg Editor Page

At first, you'll think that your Advanced Custom Fields are broken if you have placed fields below the title. With Gutenberg activated, ACF will only show if you place it below the content.

I haven't tried placing it on the sidebar but I am guessing it should work too.

Publishing Content

I have chosen Netlify to host the content generated by Gatsby. It's fast and reliable.

Instant Feeback

I understand users need a way to validate what they have just published instantly.

I have explored this plugin to solve this issue. During save, this will call a build hook on Netlify to trigger the deployment.

Make sure you have something set for both Production and Staging, else the plugin will not work.

It will still take some time to reflect changes on the actual site.

Gatsby Cache

There are some instances where I have to clear the cache just to see the changes that I have done.

I am not sure, what is causing this. It doesn't happen too often though. There is already an open issue at Gatsby.

I could explore server-side rendering using Next.js but I really like the Gatsby workflow.

Global Settings

There are some things I wanted for the user to be able to configure like the following: footer text, company address, email, etc.

I haven't tried to look into solutions yet. I am interested in how you guys will approach this.

Forms

I used the form submission API provided by Netlify. It was not a straightforward journey.

I had everything correctly setup by following this documentation yet I was not receiving any submissions.

You should put this in mind. Do not try to test the form with your usual testing instincts. Netlify will automatically block form submissions if it looks like spam without you even knowing. You should test it like filling out a real form not the garbled test strings from muscle memory.

I wish there was a way on Netlify forms to at least see how many messages were blocked or even disable the filtering on development mode.

My users wanted to have the messages straight to their emails so I integrated with Zapier.

Pages on Gatsby

I am creating pages in Gatsby using the gatsby-node.js but there are specific pages I want to explicitly create because they have specific styling and stuff.

For these pages, I query the WordPress API via the page id. These page ids I also exclude on the auto-creation at gatsby-node.js. This is done to make sure that the page will work even though the title or slug is changed.

However, if a slug is changed, there will be no route to handle it on Gatsby. Maybe, I am trying to create a non-issue here but this is worth mentioning.

Conclusion

If you are a frontend developer who hasn't really done any react or WordPress development in the past. This is something I think you should at least try.

This workflow is really something that I would like to 'perfect' it allows us to create anything out of a WordPress API.

I hope these challenges would help you decide if this is something for you. I do expect to get some feedback from the community as well about the challenges you encountered with this stack and how you solved or plan to solve it.