DEV Community: EinLinuus

NeoVim Setup for PHP and NodeJS Development

EinLinuus — Thu, 28 Jul 2022 00:14:00 +0000

Hi everyone! 👋

It's been a while since my last post, and today I want to show you how I sped up my development in the last weeks.

Until recently, I've been a big fan of Visual Studio Code and it was my primary editor for the last years. Over time, I learned more and more key bindings, started to really use the command palette and started to not do everything with the mouse - and guess what, it felt a lot faster than doing everything with the mouse.

Now, I still love VS Code, can really recommend it and I use it for example in the browser on GitHub. But since I tried Vim, I'm now using this as my primary editor.

Please note, I'm by far no (Neo)Vim expert and still learning it. In this article, I want to share my story about how I got into (Neo)Vim and what my setup looks like.

Why Vim?

When I first heard about Vim, I was like "why in the world would you use Vim when there is VS Code and all the other modern IDE's?". The only thing I knew about Vim at this time was how to exit Vim. But after a deeper look at Vim and some great input from a co-worker, I decided to at least try it for some time.

Here are the main reasons:

🚀 Speed. I was really impressed by how fast you can be with Vim - even when you're still learning it.
🌐 I can use it on the server. That's awesome, because I always used a FTP client when I needed to edit files on the server. Now, I can work with files on the server just as I do with files on my computer - directly from the terminal.
⌨️ I didn't really know any terminal-based text editor before.

How I learned Vim

Quick answer: Learning by doing :)

I started to use only Vim for a few days, which forced me to learn Vim commands and key bindings. No VS Code or any other text editor - only Vim. At the beginning, I was really slow and constantly looking up how to do basic stuff.

But every day I got faster, learned new commands and improved my workflow. And until now, I didn't go back to VS Code.

That's my config for Vim:

set encoding=UTF-8
" Set encoding

set number
" Show line numbers by default

syntax on
" Enable syntax highlighting by default

filetype plugin indent on
" show existing tab with 4 spaces width
set tabstop=4
" when indenting with '>', use 4 spaces width
set shiftwidth=4
" On pressing tab, insert 4 spaces
set expandtab

" Tab / Shift Tab to switch between tabs (:tabe <file>)
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>

NeoVim

After using Vim for a few weeks, I now moved to NeoVim. I really like Vim now, but there are some VS Code features I'd love to have in Vim. That's why I decided to use NeoVim.

That's how I wanted my NeoVim setup to look like:

Not too different to my normal Vim setup so I can still work with the default Vim editor if I can't use NeoVim (e.g. on servers)
Main use case:
- PHP (+ WordPress)
- React / NextJS
- Svelte / SvelteKit

You see, a pretty simple setup. So now let's actually set it up:

Installation & Setup

1. Install NeoVim

Follow the instructions on the NeoVim installation page or use the following command:

macOS (with brew): brew install neovim

Windows (with winget): winget install NeoVim.NeoVim

2. Install VimPlug

To manage the plugins / extensions, I decided to use VimPlug as the plugin manager. Read the installation guide here or use the following command:

macOS / Linux:

sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
    ni "$(@($env:XDG_DATA_HOME, $env:LOCALAPPDATA)[$null -eq $env:XDG_DATA_HOME])/nvim-data/site/autoload/plug.vim" -Force

3. NeoVim Config

Create the NeoVim config file ~/.config/nvim/init.vim and paste the following:

set encoding=UTF-8
set number
syntax on

" set tab to 4 spaces
filetype plugin indent on
set tabstop=4
set shiftwidth=4
set expandtab

" Tab / Shift Tab to navigate between tabs
nnoremap <Tab> :tabnext<CR>
nnoremap <S-Tab> :tabprevious<CR>

" CoC settings
set nobackup
set nowritebackup
set cmdheight=2
set updatetime=300
set shortmess+=c
if has("nvim-0.5.0") || has("patch-8.1.1564")
  set signcolumn=number
else
  set signcolumn=yes
endif
inoremap <silent><expr> <TAB>
      \ pumvisible() ? "\<C-n>" :
      \ CheckBackspace() ? "\<TAB>" :
      \ coc#refresh()
inoremap <expr><S-TAB> pumvisible() ? "\<C-p>" : "\<C-h>"
function! CheckBackspace() abort
  let col = col('.') - 1
  return !col || getline('.')[col - 1]  =~# '\s'
endfunction
if has('nvim')
  inoremap <silent><expr> <c-space> coc#refresh()
else
  inoremap <silent><expr> <c-@> coc#refresh()
endif
inoremap <silent><expr> <cr> pumvisible() ? coc#_select_confirm()
                              \: "\<C-g>u\<CR>\<c-r>=coc#on_enter()\<CR>"
nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
nnoremap <silent> K :call ShowDocumentation()<CR>
function! ShowDocumentation()
  if CocAction('hasProvider', 'hover')
    call CocActionAsync('doHover')
  else
    call feedkeys('K', 'in')
  endif
endfunction
autocmd CursorHold * silent call CocActionAsync('highlight')

" VimPlug plugin manager
call plug#begin()
Plug 'https://github.com/vim-airline/vim-airline'
Plug 'https://github.com/tpope/vim-commentary'
Plug 'https://github.com/ap/vim-css-color'
Plug 'https://github.com/rafi/awesome-vim-colorschemes'
Plug 'https://github.com/neoclide/coc.nvim'
Plug 'othree/html5.vim'
Plug 'pangloss/vim-javascript'
Plug 'evanleck/vim-svelte', {'branch': 'main'}
call plug#end()

" set the colorsheme
" list: https://github.com/rafi/awesome-vim-colorschemes
colorscheme minimalist

At the top, you can see some settings like the tab with, encoding and I also want syntax highlighting and line numbers enabled by default.

Next is a big config block for the CoC extension. I can't really explain what all this is doing, I got this from the CoC installation & setup guide. Basically, it enables the autocompletion window and creates some hotkeys like K to show the documentation.

Below that, you can find the VimPlug section. Here are all the plugins registered:

vim-airline: status/tabline showing things like the current git branch and vim mode.
vim-commentary: Comment stuff out, gcc to comment out lines
vim-css-color: Highlight color names
awesome-vim-colorschemes: A big collection of color schemes, I'm using minimalist (set with colorscheme <name>)
coc.nvim: Language Server Support, completion, ...
html5.vim: Syntax & indentation for HTML5 and SVG (required for vim-svelte)
vim-javascript: Syntax & indentation for JavaScript (required for vim-svelte)
vim-svelte: Syntax & indentation for Svelte

4. Install Plugins

Because we changed the NeoVim config, restart NeoVim first. There may be some errors because the plugins aren't installed yet. Use VimPlug to install the plugins specified in the config file:

:PlugInstall

5. Set Up CoC Extension

Once the plugins are installed, close NeoVim and navigate to the folder of the CoC extension:

macOS / Linux: ~/.local/share/nvim/plugged/coc.nvim/

Windows: ~/vimfiles/plugged/coc.nvim/

Now, install the dependencies and build the source code:

npm ci && npm run build

6. Extensions for the CoC Extension

You can now start NeoVim again and there shouldn't be any errors. To complete the setup, let's install some extensions for CoC, like a JS/TS language server and intelephense for PHP:

:CocInstall coc-tsserver coc-json coc-svelte @yaegassy/coc-intelephense

7. Optional: WordPress

I'm working with WordPress themes and plugins, but with the current setup every WordPress function is marked as error because the intelephense extension doesn't know I'm inside a WordPress theme with all the WordPress functions available. We can change that by opening the CoC config (:CocConfig) and adding "wordpress" to the list of intelephense.stubs. If you type "intelephense.stubs", you can use the autocompletion by CoC to create the whole list and then only append "wordpress" to the end of the list.

Full list:

{
    "intelephense.stubs": [
        "apache",
        "bcmath",
        "bz2",
        "calendar",
        "com_dotnet",
        "Core",
        "ctype",
        "curl",
        "date",
        "dba",
        "dom",
        "enchant",
        "exif",
        "FFI",
        "fileinfo",
        "filter",
        "fpm",
        "ftp",
        "gd",
        "gettext",
        "gmp",
        "hash",
        "iconv",
        "imap",
        "intl",
        "json",
        "ldap",
        "libxml",
        "mbstring",
        "meta",
        "mysqli",
        "oci8",
        "odbc",
        "openssl",
        "pcntl",
        "pcre",
        "PDO",
        "pdo_ibm",
        "pdo_mysql",
        "pdo_pgsql",
        "pdo_sqlite",
        "pgsql",
        "Phar",
        "posix",
        "pspell",
        "readline",
        "Reflection",
        "session",
        "shmop",
        "SimpleXML",
        "snmp",
        "soap",
        "sockets",
        "sodium",
        "SPL",
        "sqlite3",
        "standard",
        "superglobals",
        "sysvmsg",
        "sysvsem",
        "sysvshm",
        "tidy",
        "tokenizer",
        "xml",
        "xmlreader",
        "xmlrpc",
        "xmlwriter",
        "xsl",
        "Zend OPcache",
        "zip",
        "zlib",
        "wordpress"
    ]
}

And that's my current NeoVim setup. Maybe this will help some of you who want to get started with NeoVim.

What's your favorite editor or IDE? Are you using Vim / NeoVim too? Let me know in the comments!

Thank you for reading, happy coding and have a great day! 😊🚀

SQL: The basics and beyond

EinLinuus — Thu, 07 Jul 2022 20:10:08 +0000

Welcome back 👋

Today we'll take a look at SQL, starting with the basics and then moving forwards to more complicated concepts and queries. But before we start writing the first query, make sure you're familiar with the core concepts of SQL and relational databases. Making queries is important, but knowing how to structure a database even more.

What is SQL?

First things first, what the hell is SQL? If you don't know already, SQL stands for "Structured Query Language" and is a database query language. It's used to interact with databases like MySQL, Postgres or SQLite. The data in relational databases is organized in tables and rows.

How the data is organized

You store your data in a database that can contain many tables. For example, the database "blog" contains the tables "users" and "posts". Each table has many columns. The "posts" table may have the columns "title", "image" and "description".

Relations

In relational databases, there are mostly no duplications. If we use the example above, we don't store the user information in the "posts" table, because one user can have multiple posts, which means the user information would be stored multiple times in the table. Instead, we store the user information in a separate table "users" and reference the user in the "posts" table.

Primary and foreign keys

In order to reference something, we need a unique identifier of the row we want to reference.

Note: Using something like the username may seems logical, but I highly recommend to use a separate, unique ID for each user that can't be changed. A username is unique, but if a user changes the username, you'd need to change the username everywhere you referenced it.

This unique identifier is called a primary key. When you use it as a reference, for example in the "posts" table, it's called a foreign key.

Conclusion: A foreign key references a primary key in another table that's unique for that table.

Create the database

To get started, we first need a database. You can install for example MySQL on your local machine, if available on a server or rent a database online.

But if you're just starting and want to follow along with this guide, you can use my SQL playground, based on SQLite:

Open the SQL-Playground on sql.webaze.net

CREATE TABLE IF NOT EXISTS users (
    id INT NOT NULL,
    name VARCHAR(255) NOT NULL,
    username VARCHAR(255) NOT NULL,
    PRIMARY KEY (id)
);

Executing this query will create a database called users and the columns

id (Integer) which is the primary key (see PRIMARY KEY (id)) and can't be null
name which is a varchar/string with a max length of 255, can't be null
username which is also a varchar/string with a max length of 255, can't be null

To prevent errors if the table already exists, I used CREATE TABLE IF NOT EXISTS instead of just CREATE TABLE.

Insert data

Now we have the database and table ready, let's create our first user. Insertions are made with the INSERT statement:

INSERT INTO users (id, name, username) VALUES (1, "Linus", "EinLinuus");

We can also insert multiple rows at once:

INSERT INTO
    users (id, name, username)
VALUES
    (1, "Linus", "EinLinuus"),
    (2, "John", "John_Doe");

This should give you the following result:

Query the users

With a few rows in our table, we can now query them. To select data from the database, use the SELECT statement:

/* Select everything (*) */
SELECT * FROM users;

/* Select only specific columns */
SELECT name, username FROM users;

Filtering

Getting all users at once may be useful in some cases, but most often you want to filter them, for example get a specific user by the username or search through them with a search keyword.

/* Get all users with the username "EinLinuus"  */
SELECT * FROM users
WHERE username = "EinLinuus";

/* Get the user with the id 2 */
SELECT * FROM users
WHERE id = 2;

/* Combinations with AND and OR */
SELECT * FROM users
WHERE id = 1 AND name = "Linus";

There are many operators you can use here:

/* is not */
SELECT * FROM users
WHERE username != "EinLinuus";

/* LIKE (% stands for anything) */
SELECT * FROM users
WHERE username LIKE "%Linuus%";

/* Greater / Less than */
SELECT * FROM users
WHERE id > 1;

Limits and pagination

To limit or offset your results, use LIMIT. You can use it simply limit the amount of rows returned, or to offset it (return X rows, but skip the first Y rows).

/* Return only 1 row */
SELECT * FROM users LIMIT 1;

/* Return only 5 rows and skip 1 row */
SELECT * FROM users LIMIT 1, 5;

Ordering

Ordering is possible too, just use ORDER BY followed by the column name and the direction.

/* Order ascending by id */
SELECT * FROM users ORDER BY id ASC;

/* Order descending by id */
SELECT * FROM users ORDER BY id DESC;

You can also order by multiple columns:

SELECT * FROM users
ORDER BY
   name DESC,
   id ASC;

Counting

Now if your multi-billion startup idea starts getting users, you might want to know how many users exactly:

SELECT COUNT(id) FROM users;

This will return one row with the count. But, the column name in the result is COUNT(id). You might want to have something more readable here, and that's why you can...

Rename columns

To rename a column, just use AS followed by the new name:

SELECT id AS user_id, username FROM users;
SELECT COUNT(id) as total_users FROM users;

Grouping

Grouping allows you to group multiple rows, for example we can get the amount of users with the same name:

SELECT COUNT(id) AS users, name
FROM users GROUP BY name;

Ordering inside the query

If you want to combine multiple of the above, make sure you respect this order:

SELECT Which columns you want to select
FROM Which table you want to query
WHERE Which rows you want to select
GROUP How you want to group the rows
ORDER In which order you want the result
LIMIT How many rows you want

Update rows

Updating rows is just as easy as inserting new ones. Use UPDATE to update a row and use WHERE and LIMIT from the SELECT guide to specify which rows you want to update.

UPDATE users
SET username = "JohnDoe"
WHERE id = 2;

/* Update multiple columns */
UPDATE users
SET name= "John D", username = "JohnDoe"
WHERE id = 2;

The query above changes the username user 2 to "JohnDoe".

Delete rows

Deleting works nearly the same, with the only difference that you just specify a table, because you're deleting the whole row.

DELETE FROM users
WHERE id = 2;

Work with multiple tables

Things get much more interesting when we work with multiple tables. Let's add another table to our example:

CREATE TABLE IF NOT EXISTS posts (
    id INT NOT NULL,
    title VARCHAR(255) NOT NULL,
    user INT NOT NULL,
    PRIMARY KEY (id)
);

/* Insert some dummy data */
INSERT INTO posts (id, title, user) VALUES
(1, "Post 1", 1),
(2, "Post 2", 2),
(3, "Post 3", 2),
(4, "Post 4", 1);

If you followed along, you know how to get all posts, filter, order, update and delete them. But you may have noticed the connection between both tables:
The posts table is referencing users from the users table in the posts.user column.

Let's say we want to display all posts on a website. We create a simple SELECT statement to query all available posts:

SELECT * FROM posts;

This works, but we want to show the author's name as well. How can we do that?

Table joins

Inside one SQL query, we can join other tables to access their data as well.

There are different types of joins:

A INNER join connects all rows that are in both tables. If a user has no posts, that user gets skipped.

A LEFT join uses the first table as basis and connects, if possible, the second table.
The RIGHT join is basically the opposite of a left join, here is the second table the basis.

A FULL / FULL OUTER join connects both tables and missing data is represented as NULL.

Now, let's create a query with a JOIN to get all posts and their authors:

SELECT * FROM users
JOIN posts ON posts.user = users.id;

The ON field = otherField part tells the database which row(s) to select in the table we're joining. In this case, the column user in the posts table references a id in the users table.

We can also use the data from the other table inside our WHERE clause:

/* posts.* = Everything from the posts table */
SELECT posts.* FROM users
JOIN posts ON posts.user = users.id
WHERE users.name = "EinLinuus";

Beyond this

SQL is very powerful and can do much more than what I described in this article. Because it's a lot of work to write something like this, you can find the next part of this guide on my BMC-Page. Thank you very much ❤️

Content of Part 2:

Relations: One-to-Many and Many-to-Many
Working with dates (MySQL)
The check constraint
Working with tables
1. Edit tables / Alter
2. Delete tables / Drop
Security: SQL Injections

SQL: The basics and beyond (Part 2)

Thanks for reading 🤗

Use Contabo Object Storage with NodeJS

EinLinuus — Tue, 29 Mar 2022 21:25:00 +0000

Hi there! 👋

Recently, Contabo launched their new storage solution Object Storage. These object storages provide an S3 compatible API and can be used quite easily - in this post, I show you how.

Currently the launch discount campaign is running! You get a 20% lifetime discount - check out the plans here.

You can find the full source code for both NodeJS and Python3/Flask at the bottom.

Get your Object Storage

To follow along, you first need your own Object Storage. You can go directly to Contabo and order your Object Storage now. After you've completed the purchase, you can log in to your customer panel and select "Object Storage" in the sidebar. If you've never done this before, you'll be asked to set a password for the Object Storage Panel. After you've set your password, you can log in to the Object Storage Panel with your Contabo Email and the newly set password.

Now navigate to "Storage" - "Object Storage (Buckets)" in the sidebar and you should see your new Object Storage. Perfect!

I didn't find an option to change the language in this panel, so everything is in german, I'm sorry :(

Create a bucket

Your files are organized in buckets, so let's create our first bucket. Below your Object Storage in the Object Storage Panel is a button to create a new bucket.

Now name your bucket and choose a region where your bucket should be located. Create it and you should see your new bucket on the list.

Get the access keys

To connect with the S3 API of your storage, we need two keys to authenticate:

The Access Key and
the Secret Key.

You can generate them in the Object Storage Panel by navigating to "Account" - "Security and access". Scroll down to the section "S3 Object Storage". That's where you can see both tokens. If you don't, click "Regenerate secret key" to create a new secret key.

We'll need both keys later when connecting to the S3 API.

Setting up NodeJS and Express

For this example, I'll build a simple webserver with ExpressJS to handle file uploads and also return all currently stored files.

Open up a new folder and initialize a new npm project. We also need express for our webserver and aws-sdk to interact with the S3 API, so we install them too:

npm init -y
npm i express aws-sdk

To get started we first need the webserver, so let's start express:

// index.js
const express = require("express")
const AWS = require("aws-sdk")

const app = express()

/* 
 * Code goes here
 */

app.listen(4000, function() {
    console.log("🚀 App is running on http://localhost:4000")
})

Create the routes

For this simple project we need 3 routes:

GET /: The form to upload a file to our express server
POST /upload: The form handler to upload the file to the storage bucket
GET /list: A list of all files inside the storage bucket

Show the form

Well, before we can show a form, we first need a form. For this demo, I just created a quick HTML page form.html with a simple form on it to upload a file. Notice the form action /upload, this points to the route handling the file upload, and also the method post.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload</title>
</head>
<body>
    <h1>Upload a file to Contabo Object Storage</h1>

    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" accept="image/png,image/jpeg" name="fileToUpload" />
        <button type="submit">Upload the file</button>
    </form>
</body>
</html>

All we have left to do is use express to send the file on each GET request to the root path:

// Show the form
app.get("/", function(request, response) {
    response.sendFile(__dirname + "/form.html") // <- Point this to your HTML file containing the form
})

Done! You can test it by running node index.js to start the express server and open http://localhost:4000 in your browser. You should see the form.

Handle the file upload

To handle the file upload, we need the express-fileupload package to parse incoming multipart/form-data requests and extract the files:

npm i express-fileupload

And of course import it at the top of our index.js file:

const express = require("express")
const AWS = require("aws-sdk")

const fileUpload = require('express-fileupload') // NEW

Express-Fileupload is a middleware, so we need to register it to our express app:

const app = express()

// Middleware to handle incoming files
app.use(fileUpload({
    createParentPath: true
}))

In the next step, we create the actual route to handle the POST request with the file to upload:

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    /*
     * TODO Upload the file to the storage bucket
     */

    response.sendStatus(200)
})

Connect to the S3 API

Things are getting real, we'll now connect to the S3 API to interact with our storage bucket!

Right after we create the express app by calling express(), let's create the connection to the S3 API:

const app = express()

// Connect to S3
const s3 = new AWS.S3({
    endpoint: `contabo_storage_bucket_url`, // e.g. https://eu2.contabostorage.com/bucketname
    accessKeyId: "your_access_key_here",
    secretAccessKey: "your_secret_key_here",
    s3BucketEndpoint: true,
});

We can now use all the S3 functions with our new s3 variable.

Upload the file

Back in our POST /upload route, we need to parse the data from the file:

// inside POST /upload route
const file = request?.files?.["fileToUpload"] || null

// Return if the request doesn't contain the file
if(!file) return response.sendStatus(400)

// Destructure the content of the file object
const { name, mimetype, size, data } = file
const fileContent  = Buffer.from(data, ' ');

We can now call the s3.putObject function to upload a file to the storage bucket.

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    // Destructure the content of the file object
    const { name, mimetype, size, data } = file
    const fileContent  = Buffer.from(data, ' ');

    /* Add security checks (e.g. max size) here */

    s3.putObject({
        Body: fileContent, // The actual file content
        Bucket: "bucket_name",
        Key: name, // The name of the file
    }, function(err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            response.sendStatus(200)
        }
    });
})

Note: This is for demo purposes only. When used in production, make sure you validate the file before uploading (name, file size, file type, ...). I've added a comment in the code below where you should validation and security checks.

List all the files

You may want to show all uploaded files (e.g. inside a media browser), so let's also implement the route to list all files inside the bucket. For this demo, I'll just return the full result from the S3 API as JSON, but you can do whatever you want with it.

// Show all files
app.get("/list", function(request, response) {
    // Get all objects inside the bucket
    s3.listObjects({
        Bucket: "bucket_name",
    }, function (err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            // Return the list ("Contents") as JSON
            response.json(data.Contents)
        }
    })
})

Full Code

const express = require("express")
const AWS = require("aws-sdk")

const fileUpload = require('express-fileupload')

const app = express()

// Connect to S3
const s3 = new AWS.S3({
    endpoint: `contabo_storage_bucket_url`, // e.g. https://eu2.contabostorage.com/bucketname
    accessKeyId: "your_access_key_here",
    secretAccessKey: "your_secret_key_here",
    s3BucketEndpoint: true,
});

// Middleware to handle incoming files
app.use(fileUpload({
    createParentPath: true
}))

// Show the form
app.get("/", function(request, response) {
    response.sendFile(__dirname + "/form.html")
})

// Handle files
app.post("/upload", function(request, response) {
    const file = request?.files?.["fileToUpload"] || null

    // Return if the request doesn't contain the file
    if(!file) return response.sendStatus(400)

    // Destructure the content of the file object
    const { name, mimetype, size, data } = file
    const fileContent  = Buffer.from(data, ' ');

    /* Add security checks (e.g. max size) here */

    s3.putObject({
        Body: fileContent,
        Bucket: "your_bucket",
        Key: name,
    }, function(err, data) {
        console.log(err, data)
        if (err) {
            response.sendStatus(500)
        } else {
            response.sendStatus(200)
        }
    });
})

// Show all files
app.get("/list", function(request, response) {
    // Get all objects inside the bucket
    s3.listObjects({
        Bucket: "your_bucket",
    }, function (err, data) {
        if (err) {
            response.sendStatus(500)
        } else {
            // Return the list ("Contents") as JSON
            response.json(data.Contents)
        }
    })
})

app.listen(4000, function() {
    console.log("🚀 App is running on http://localhost:4000")
})

Python3 and Flask

from flask import Flask, render_template, request  # pip install flask
import boto3  # pip install boto3
import os
from werkzeug.utils import secure_filename
app = Flask(__name__)

session = boto3.session.Session()
client = session.client('s3',
                        region_name='eu2',
                        # e.g. https://eu2.contabostorage.com
                        endpoint_url='contabo_storage_bucket_url',
                        aws_access_key_id='your_access_key_here',
                        aws_secret_access_key='your_secret_key_here')


@app.route('/')
def show_form():
    return render_template('form.html')  # located in templates/form.html


@app.route('/upload', methods=['POST'])
def handle_upload():
    f = request.files['fileToUpload']  # Get the file
    filename = secure_filename(f.filename)
    f.save(filename)  # Save the file temporarily
    client.upload_file(filename,  # Path to local file
                       'your_bucket',  # Bucket name
                       filename)  # Name for remote file
    os.remove(filename)  # Remove the file after uploading
    return 'Done!'


if __name__ == '__main__':
    app.run(debug=True)

And that's it - now you know how to upload files to your Contabo Object Storage! 🥳

Thank you very much for reading and don't forget to follow me on Twitter @EinLinuus and also Hashnode and get notified everytime I publish a new post. 🙌

Have a nice day 🚀👋

Did you find this article valuable?

Support me by becoming a sponsor. Any amount is appreciated!

Sponsor

Live-Chat with SvelteKit and SocketIO

EinLinuus — Sun, 06 Feb 2022 20:44:52 +0000

Hi! 👋

Today we're taking a look at Socket.IO and how we can integrate it into our SvelteKit project. As an example, we'll be building a realtime chat app in this demo.

Setup the project

First, we need a SvelteKit project. If you already have a project, you can skip this step. If not, you can simply create one with the following commands:

npm init svelte@next live-chat-app
cd live-chat-app
npm install
npm run dev -- --open

I'm using Tailwind CSS in this demo. I've already written an article on how to add Tailwind CSS to SvelteKit.

Install the dependencies

All we need is Socket.IO for the server-side part (handling the incoming requests and connections) and the Socket.IO-Client for the client-side part (sending and receiving messages).

npm i socket.io socket.io-client

Inject the Socket.IO server

We can inject the Socket.IO server directly in the SvelteKit config:

// ... (other imports here)
import { Server } from 'socket.io'; // <-- Import the Socket.IO server

const config = {
    // ...

    kit: {
        adapter: adapter(),
        vite: {
            plugins: [
                {
                    name: 'sveltekit-socket-io',
                    configureServer(server) {
                        const io = new Server(server.httpServer);

                        // Socket.IO stuff goes here                

                        console.log('SocketIO injected');
                    }
                }
            ]
        }
    },

    // ...
};

export default config;

Server-side part

For this demo, I'll keep things simple and generate a random username for each client and just broadcast incoming messages along with the username and time.

// This is located in the svelte config (see above "Socket.IO stuff goes here")
io.on('connection', (socket) => {
    // Generate a random username and send it to the client to display it
    let username = `User ${Math.round(Math.random() * 999999)}`;
    socket.emit('name', username);

    // Receive incoming messages and broadcast them
    socket.on('message', (message) => {
        io.emit('message', {
            from: username,
            message: message,
            time: new Date().toLocaleString()
        });
    });
});

Please note: This guide is not a full Socket.IO guide. The example is pretty simple and only to show you how to use Socket.IO with SvelteKit.

Client-Side part

Connect to Socket.IO

Because you may want to use the Socket.IO connection in multiple components or pages, I recommend to separate the connection stuff:

// src/lib/realtime.js
import ioClient from "socket.io-client";
const ENDPOINT = "http://localhost:3000";

const socket = ioClient(ENDPOINT)

export const io = socket

Now we can import and use io everywhere in our project.

Layout

Before we add Socket.IO to the client-side, I'll create a simple UI for our demo. Because this is only the chat, I'll do this directly in the src/routes/index.svelte:

<script>
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {

    }
</script>

<div class="h-screen w-screen bg-zinc-800">
    <div class="h-full w-full max-w-md mx-auto bg-zinc-500 flex flex-col">

        <header class="px-6 py-4 border-b border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center justify-between">
            <span class="font-bold text-xl">My Chat app</span>
            <span>{username}</span>
        </header>

        <div class="h-full w-full p-4">
            {#each messages as message}
                <div class="bg-zinc-300 rounded-xl rounded-tl-none px-4 py-3 my-4 w-fit">
                    <span class="flex items-center space-between gap-4">
                        <b>{message.from}</b>
                        <i>{message.time}</i>
                    </span>
                    {message.message}
                </div>
            {/each}
        </div>

        <form action="#" on:submit|preventDefault={sendMessage}
            class="px-6 py-4 border-t border-zinc-800 bg-zinc-700 text-white shrink-0 flex items-center"
        >
            <input type="text" bind:value={textfield} placeholder="Type something..." class="bg-transparent border-none px-4 py-3 w-full" />
            <button type="submit" class="shrink-0 border border-white rounded-lg px-4 py-3">Send</button>
        </form>

    </div>
</div>

As you can see, I'm storing all messages inside the messages array and output them inside the each loop.

To send messages, I've attached a listener to the form sendMessage.

Send messages

First, we need to import io from the file we just created (realtime.js).
In our send function, we can simply trigger the message event (that's how we called it in the server-side part) with the message:

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

Receive messages

To receive messages, we need to listen to the message event (that's how we called it in the server-side part). The object we receive is the same object we sent (server-side) and we can just add it to the messages array:

<script lang="ts">
    import { io } from "$lib/realtime";
    import { onMount } from "svelte";

    let textfield = ""
    let username = ""

    let messages = []

    onMount(() => {
        io.on("message", message => { // Listen to the message event
            messages = [...messages, message]
        })
        io.on("name", name => { // Another listener for the name:
            username = name // Update the name so it can be displayed
        })
    })

    function sendMessage() {
        const message = textfield.trim()
        if(!message) return

        textfield = ""
        io.emit("message", message) // Send the message
    }
</script>

Now, run npm run dev and test it out:

And that's it - now you can send data in realtime between the server and the client! 🚀

Thanks for reading and have a great day 🤗

This article helped you? ⬇️

How to show your FAQ directly in Google search results

EinLinuus — Wed, 07 Jul 2021 22:15:08 +0000

Optimizing your website to rank as high as possible for specific keywords is great - but did you know, that you can do much more awesome things as a developer to change the appearance of your website on Google? Today I'll show you an example of how to show your frequently asked questions directly in the search results using structured data.

By the way, you can do the same for recipes, events, products, courses and more.

How this works

We'll add additional HTML-Microdata or JSON-LD to our website, so bots can easily understand how to read (and display) the content.

In this example, I'll show you how to do this with HTML-Microdata because I think that's easier to understand and implement.

HTML-Markup

Let's create a section that contains all of the questions:

<section>
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div>
      <h3>Question goes here</h3>
      <!-- Answer to question 1 -->
      <div>
         <p>The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div>
      <h3>Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div>
         <p>The second answer goes here</p>
      </div>
   </div>
</section>

That was easy. Now we add the HTML-Microdata. First, we add the schema.org-types to the elements, FAQPage to the section, Question to the question elements and Answer to the answers:

<section itemscope itemtype="https://schema.org/FAQPage">
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div itemscope itemtype="https://schema.org/Question">
      <h3>Question goes here</h3>
      <!-- Answer to question 1 -->
      <div itemscope itemtype="https://schema.org/Answer">
         <p>The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div itemscope itemtype="https://schema.org/Question">
      <h3>Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div itemscope itemtype="https://schema.org/Answer">
         <p>The second answer goes here</p>
      </div>
   </div>
</section>

Next we set the properties to the elements. To set the name (title) of the question, we use the itemprop="name" Attribute. Same thing for acceptedAnswer, the question itself (mainEntity) and the text content of the answer (text):

<section itemscope itemtype="https://schema.org/FAQPage">
   <h2>FAQ</h2>
   <!-- Question 1 -->
   <div itemscope itemtype="https://schema.org/Question" itemprop="mainEntity">
      <h3 itemprop="name">Question goes here</h3>
      <!-- Answer to question 1 -->
      <div itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
         <p itemprop="text">The answer goes here</p>
      </div>
   </div>
   <!-- Question 2 -->
   <div itemscope itemtype="https://schema.org/Question" itemprop="mainEntity">
      <h3 itemprop="name">Second question goes here</h3>
      <!-- Answer to question 2 -->
      <div itemscope itemtype="https://schema.org/Answer" itemprop="acceptedAnswer">
         <p itemprop="text">The second answer goes here</p>
      </div>
   </div>
</section>

And that's it!

Test & Preview

Live-Demo: https://linus.link/dev-to/google-faq.html

If you want to validate your markup, head over to

https://search.google.com/test/rich-results

and paste the URL you want to validate. You can also check your code directly, for example you can paste the code above inside the "code" textfield.

If everything is valid, you should also be abled to click on "Preview results" to see an example on how the result could be displayed on Google.

Guidelines

Please read the guidelines by Google to prevent your site from getting blocked:

https://developers.google.com/search/docs/data-types/faqpage#guidelines

(In short: DON'T use this with content provided by users or for advertising and always show the full question and answer)

Done!

That is it! 😃 Now you can implement this on your website to show your customers the information they need directly in the Google Search!

I hope you learned something new today! Thank's for reading 😊

Fixed navigations and sections - here is scroll-padding

EinLinuus — Sat, 17 Apr 2021 22:04:57 +0000

When having a fixed navigation bar at the top, you might came up with the same problem:

You create a link to scroll to another section on the page, but the fixed navigation bar at the top hides the headline of the section the browser scrolled to.

scroll-padding-top: 100px;

That's it. This CSS property adds 100px space between the element with the ID you want to scroll to and the page top. The only thing you have to do now is to replace the 100px with the height of your navigation bar and maybe a bit of extra space.



html {
   scroll-padding-top: 100px;
}

Live example

That's not all

You can also use scroll-padding, scroll-padding-bottom, scroll-padding-right and scroll-padding-left.

Compatibility

Source: caniuse.com

How to upload files with PHP correctly and securely

EinLinuus — Sat, 17 Apr 2021 18:44:32 +0000

If you just want the sourcecode - scroll to the end of the page or click here. But I recommend reading the article to understand why I'm doing things as I do and how it works.

Hey Guys,

in this post, I'll show you how to upload files to your server using HTML and PHP and validate the files. I hope it's useful for some of you and now happy coding :)

Security information

First of all, the most important thing I want to tell you, the $_FILES variable in PHP (except tmp_name) can be modified. That means, do not check e.g. the filesize with $_FILES['myFile']['size'], because this can be modified by the uploader in case of an attack. In other words, when you validate the upload with this method, attackers can pretend that their file has another file size or type.

As you can see, there is a lot we need to take care of. Maybe it's worth considering to use an already existing service. With Uploadcare you can upload and manage files quickly and easily via their PHP integration.

So, let's move on and create our own, secure, file upload.

HTML Setup

Before PHP can handle files, we send them to PHP using a basic HTML form:

<form method="post" action="upload.php" enctype="multipart/form-data">
   <input type="file" name="myFile" />
   <input type="submit" value="Upload">
</form>

That's it. Note the action="upload.php", that's the PHP script handling the upload. And we use the name myFile to identify the file in PHP.

PHP Validation

Now, let's validate the file in the upload.php file.

First of all, we have to check if there is a file passed to our script. We do this using the $_FILES variable:

if (!isset($_FILES["myFile"])) {
   die("There is no file to upload.");
}

But remember, for security reasons, we can't get the filesize using $_FILES. When the user uploads the file, PHP stores it temporarily and you can get the path using $_FILES['myFile']['tmp_name']. That's what we use now to get the real size and type of the file.

$filepath = $_FILES['myFile']['tmp_name'];
$fileSize = filesize($filepath);
$fileinfo = finfo_open(FILEINFO_MIME_TYPE);
$filetype = finfo_file($fileinfo, $filepath);

Now we have the real information, let's validate the filesize. We don't want to allow users to upload empty files, so first, we check if the file size is greater than 0:

if ($fileSize === 0) {
   die("The file is empty.");
}

And if anyone can upload files, you might want to set a limit of how large a file can be:

if ($fileSize > 3145728) { // 3 MB (1 byte * 1024 * 1024 * 3 (for 3 MB))
   die("The file is too large");
}

Great. But you'll usually only allow specific types to be uploaded, e.g. .png or .jpg for profile images. For more flexibility, let's create an array with all allowed file types:
(Thanks to Gary Marriott and Renorram Brandão for pointing me out, we have to store the extensions for each type here in the array so we can append it later to the filename)

$allowedTypes = [
   'image/png' => 'png',
   'image/jpeg' => 'jpg'
];

You can find a list of MIME-Types here (It's in german, but there is a great table with all MIME-Types and file extensions).

Now let's check if the type of the file is allowed:

if(!in_array($filetype, array_keys($allowedTypes))) {
   die("File not allowed.");
}

And we're done with validating! In the last step, we move the file to our uploads directory (or wherever you want to). For this, I define a variable with my target directory, then grab the current filename and extension and build the new, target file path:

$filename = basename($filepath); // I'm using the original name here, but you can also change the name of the file here
$extension = $allowedTypes[$filetype];
$targetDirectory = __DIR__ . "/uploads"; // __DIR__ is the directory of the current PHP file

$newFilepath = $targetDirectory . "/" . $filename . "." . $extension;

Finally, move the file:

if (!copy($filepath, $newFilepath )) { // Copy the file, returns false if failed
   die("Can't move file.");
}
unlink($filepath); // Delete the temp file

echo "File uploaded successfully :)";

That's it! Now you have a secure file upload where you can strictly define which files can be uploaded and which not!

Full code

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Part from this tutorial -->
    <form method="post" action="upload.php" enctype="multipart/form-data">
        <input type="file" name="myFile" />
        <input type="submit" value="Upload">
    </form>
    <!-- End of part from this tutorial -->
</body>
</html>

upload.php:

<?php

if (!isset($_FILES["myFile"])) {
    die("There is no file to upload.");
}

$filepath = $_FILES['myFile']['tmp_name'];
$fileSize = filesize($filepath);
$fileinfo = finfo_open(FILEINFO_MIME_TYPE);
$filetype = finfo_file($fileinfo, $filepath);

if ($fileSize === 0) {
    die("The file is empty.");
}

if ($fileSize > 3145728) { // 3 MB (1 byte * 1024 * 1024 * 3 (for 3 MB))
    die("The file is too large");
}

$allowedTypes = [
   'image/png' => 'png',
   'image/jpeg' => 'jpg'
];

if (!in_array($filetype, array_keys($allowedTypes))) {
    die("File not allowed.");
}

$filename = basename($filepath); // I'm using the original name here, but you can also change the name of the file here
$extension = $allowedTypes[$filetype];
$targetDirectory = __DIR__ . "/uploads"; // __DIR__ is the directory of the current PHP file

$newFilepath = $targetDirectory . "/" . $filename . "." . $extension;

if (!copy($filepath, $newFilepath)) { // Copy the file, returns false if failed
    die("Can't move file.");
}
unlink($filepath); // Delete the temp file

echo "File uploaded successfully :)";