Building a Landing Page with Webflow, a No-Code Tool

Ngoako Ramokgopa — Fri, 17 Mar 2023 05:51:13 +0000

It was a wonderful Wednesday morning when my manager notified me that I had to take on an urgent landing page project. I only had seven days, including the weekend, to complete the landing page using Webflow, a no-code tool that I had heard of but never used before.

Some context about my experience: I had been primarily working as a developer in the JavaScript and React ecosystem. I had some design background and a good knowledge of design tools like the Adobe Suite and Figma, so I thought it would be easy (spoiler: it wasn't).

However, I had some restrictions to consider, including copying an existing template from React to Webflow. Here are my thoughts on the positives and negatives of Webflow:

Negatives

Restrictive Design

Webflow may not be suitable for those who prefer to design their own sites from scratch with CSS. You may not always be able to recreate designs pixel-perfectly, and you won't have the same level of fine-grained control you get with CSS and JavaScript. One significant restriction I encountered was with dropdowns. The dropdown element/component is specific to Webflow and may not function well as an accordion in the FAQ section of the site. The text kept breaking out, and there was no way to make it wrap to the next line. I did a lot of research on the forums and discovered that there was no workaround. While I understand that they may have been created for another purpose, they look like accordions, so it's understandable that someone would use them that way. An accordion element would be useful if Webflow doesn't plan on fixing the dropdown element to be more versatile.

No Multi-Select Tool

It's frustrating that Webflow, a software that looks like a design software, can't multi-select elements on the page like Adobe Suite and Figma can.

Expensive Plans

Webflow's starting plan is expensive if you want to get it hosted and use their forms on collections as storage. While I don't mind paying for a tool, the starting plan is too steep for me. It's more cost-effective to hire a developer and pay them once with lower monthly hosting costs than to pay for Webflow's monthly plans at the moment.

Positives

Templates

Webflow has a vast selection of templates, both free and paid, which are beneficial for both developers and non-coders. These templates can get you from 0 to 100 in just a few clicks.

Responsiveness and Positioning

Webflow excels in handling the annoying responsiveness and positioning issues that can be a pain to deal with for developers. With Webflow, you don't have to worry about manually adjusting the layout of your website for different screen sizes or devices. The platform offers intuitive and flexible options for responsive design, allowing you to create a website that adapts seamlessly to different screen sizes. The positioning tools are also easy to use and give you a lot of control over the layout of your site. Overall, if you want to create a responsive and well-designed website without having to worry about the technical details, Webflow is a great option.

Tutorials and Documentation

Webflow University's tutorials are clear and humor-filled, and their documentation is very well done, making it one of the best in the business.

It was a frustrating experience, the deadline didn't help, but I'm glad I tried it and would be opening to using it again.

Connect a Railway database(postgreSQL) with node-postgres in Express

Ngoako Ramokgopa — Thu, 24 Nov 2022 20:15:42 +0000

There are two options for connecting to Railway's postgres database. Using a connection string or a psql command. This tutorial is going to cover the former(connection string).

1. Get a postgres database running

First thing's first, let's get the database up and running.
1.1. Go to https://railway.app and click the "Start a New Project" button.

1.2. Choose the "Provision PostgreSQL" option and wait for it to finish setting up.

1.3. Select PostgreSQL card.

1.4. Go to the "Connect" tab.

1.5. Copy the "Postgres Connection URL" provided for use in the express app

2. Create and setup the express app

2.1. Initialise a javascript project with npm in the project directory

npm init -y

2.2. Install express

npm install express

2.3. Create express app file and setup express

2.4. Initialise the express app

// In index.js
const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello, World!");
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Okay now to the main idea of this post.

3. Connect postgreSQL with express app via `node-postgres`

3.1. Install node-postgres for interfacing with the database

npm install pg

3.2. Create a separate file for the node-postgres setup.

3.3. Initialise node-postgres connection passing the connection string from the database as part of the new Pool object

// In db.js
const { Pool } = require("pg");

// The secret connection string you copied earlier
const connectionString =
  "postgresql://postgres:dr75i6HaC0sDZDTjtLCt@containers-us-west-37.railway.app:6233/railway";

const pool = new Pool({
  connectionString,
});

module.exports = pool;

3.4. Start making calls to your db via express. See example of getting posts from and existing post table

// In index.js
const express = require("express");
const pool = require("./db");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello, World!");
});

app.get("/posts", async (req, res) => {
  const posts = await pool.query("SELECT * FROM posts;");
  res.send({ posts });
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

That is it. You can find the code used in this tutorial at this github repo

DEV Community: Ngoako Ramokgopa