DEV Community: EmreKanbay

Regex Cheat Sheet - Regular Expressions Tutorial

EmreKanbay — Tue, 01 Oct 2024 11:26:01 +0000

This blog post is firstly published on my personal blogging site kanby.net

TL;DR

Most common regex patterns
Examples of regex patterns

Most Common Patterns

Important: a x b in this example a is preceeding by x and b is followed by x

^ means start of each line in string
$ means end of each line in string
() groups spesific pattern
(?:) means this pattern will match in string BUT will not return it. Eg. A phone number regex pattern must include country code but does not have to extract that part even though it must match on string.
[] matches specified single character, eg. [abc] will macth a or b or c. Ranges are supported too [a-c] will match same.
[^] matches every character except specified ones
. matches any single character
* 0 or more of the preceding element
+ 1 or more of the preceding element
? 0 or 1 of the preceding element
{n} Exactly n occurrences of the preceding element.
{n,} n or more occurrences of the preceding element.
{n,m} Between n and m occurrences of the preceding element
\d any digit
\D any non-digit
\w any word character (alphanumeric + underscore)
\W any non-word character
\s Matches any whitespace character
\S Matches any non-whitespace character
\ escape character, eg. İf you want to find . (which is a special character) in your string, you need to do this \.

With combining these, you can create highly complicated pattern match/extraction functions with Regex.

Examples

\^[a-z_]+\.com$\ will match .com domains
- [a-z_] means characters from a to z and underscore
- + means at least one of them
- \. means period (.)
- com is for just com
- ^ and $ is for searching from start of strin to end of each line
^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$ will match emails
^ Asserts the start of the string.
[a-zA-Z0-9._%+-]+ Matches one or more characters that can be:
- Letters (a-z, A-Z)
- Digits (0-9)
- Underscores (_)
- Dots (.)
- Percent signs (%)
- Plus signs (+)
- Hyphens (-)

@ Matches the "@" symbol, which is mandatory in all email addresses.
[a-zA-Z0-9.-]+ Matches one or more characters for the domain name, allowing:
- Letters (a-z, A-Z)
- Digits (0-9)
- Hyphens (-)
- Dots (.)
. Matches a literal dot (.) separating the domain name from the top-level domain (TLD).
[a-zA-Z]{2,} Matches the top-level domain (TLD) consisting of at least two letters (e.g., .com, .org).
$ Asserts the end of the string.

If you have any questions, Here is my Instagram @emrekanbay.en

Template Engine For Express JS

EmreKanbay — Mon, 30 Sep 2024 12:47:04 +0000

This blog post is firstly published on my blogging site kanby.net

TL;DR

The templating engine will give us the ability to use res.render() instead of res.send()
res.engine() will decide what res.render() will send

Start Here

We will create a directory which will contain our custom files inside. We will give it custom extention. In this tutorial, my extention will be "kanby".

Lets create our custom files in that pages folder.

now its time to create our template engine.

first we import required packages

const express = require("express");
const fs = require("fs");

Then write that how you want your template engine to work

app.engine('kanby', (filePath, options, callback) => { 
  fs.readFile(filePath, (err, content) => {

    // Error handler
    if (err) return callback(err)

    // process the content of file here
    // you can custumize however you want
    // this will change only #title# and #message#
    // but you can do advenced stuff with regular expressions. 
    // this example is the example used in express js docs
    const rendered = content.toString()
      .replace('#title#', `<title>${options.title}</title>`)
      .replace('#message#', `<h1>${options.message}</h1>`)
    return callback(null, rendered)
  })
})

After that, you need to define 2 more setting.

app.set('views', './pages') // specify the directory for pages
app.set('view engine', 'kanby') // register the template engine

Then you are ready !

You can use res.render() function to render your own files.

app.get('/', (req, res) => {
  res.render('landingpage', { title: 'Hey', message: 'Hello there!' })
})

First it will render landingpage.kanby, the it will send rendered content to client. please do not forget to add status code

res.status(200).render();

Future Plans

This is basically an enterance for templating engine developement. This is so simple

in my further blogs, i am thinking to create an advanced (usable) template engine for express JS.

If you have any questions, Here is my Instagram @emrekanbay.en

Vanilla JS server side rendering

EmreKanbay — Sat, 28 Sep 2024 10:10:49 +0000

This post is from my blogging site → kanby.net

TL;DR (Too Long Didn't Read)

Function

const render = async (x, ...values) => {
  var rendered = "";
  for (let u = 0; u < x.length; u++) {
    rendered = rendered.concat(x[u]);
    if (u < x.length - 1) {
      if (typeof values[u] == "function") {
        var res = await values[u]()
        if(res) rendered += res;
      } else {
        rendered +=values[u]
            }
    }
  }
  return rendered;
};

Usage

const result = render`My string is = ${()=> {return (1 + 1)}}`

console.log(result)
// output -> My string is 2

What Is This?

By render, I meant being able to run async and sync functions inside of a string. Which may be called templating.

This is a basic function which uses template literals, it can run the functions inside of a string which lets us to do many things like, retrieve data from database, fetch data from an API, calculate stuff which is provided earlier and so on.

How it works

You may understand what it does from the code above if you have prerequisite knowledge about tagged templates, it just runs the functions and put the output of function in the place where function executed.

Warning

In many times using async functions inside async functions inside async functions are required and without using proper async await functionality, this stuff is getting too error prone. It may return [Object Promise][Object Promise][Object Promise]. With a simple Promise.all(), we can fix all of that.

Promise.all()

Examples below.

Rendering list

Just like react, we will use .map() function.

await render`
    Here is my headings:
    ${() => {
      return "".concat(
          ...[1,2,3,4,5].map((t) => {
            return `<h1>My number is: ${t}</h1>`
          }),
      );
    }}
// output: Here is my headings:
// <h1>My number is: 1</h1><h1>My number is: 2</h1><h1>My number is: 3</h1><h1>My number is: 4</h1><h1>My number is: 5</h1>

Examples

Retrieve data from DB

Promise.all() here is not necessary because there is no asynchronous function inside them

await render`
Here is my data
${async () => {
  const text = `SELECT * FROM table`;
  const values = [];
  var record = await pool.query(text, values);
  return "".concat(
    ...(await Promise.all(
      record.rows.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
`

Fetch data from api

await render`
Here is my data
${async () => {
  const res = fetch("https://example.com", {method:"GET"})
  const data = await res.json()
  return "".concat(
    ...(await Promise.all(
      data.first.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
`

Starter Cheat Sheets for Frameworks and Tools for Open Source

EmreKanbay — Fri, 30 Aug 2024 20:03:13 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

This is a single UI for cheat sheets of most common development frameworks (eg. nextJS) and tools (eg. git)

For example, you can find boilerplate code for expressJS, ReactJS and NGINX from same place!

And better yet, you can Create your own cheat sheets with CRUD functionality (Create, read, update, delete).

You need to get Neon Database String in order to start, yet LIVE DEMO does not uses database for you to try without a DB with lack of functionality.

LIVE DEMO -> https://open-source-starter-kit-demo.onrender.com/
(it can take up to 50 seconds to initial page load because of free tier deployment)

It includes a lot of frameworks and tools, but it is possible to enlarge this collection with much more.

This app should be beneficial for all open source devs regardless of what programming language or framework they use. That was the purpose.

Link to Kit

More details and how to start guide is on my github repository.

Github Repository -> https://github.com/EmreKanbay/Open-Source-Starter-Kit

LIVE DEMO -> https://open-source-starter-kit-demo.onrender.com/
(it can take up to 50 seconds to initial page load because of free tier deployment)

EmreKanbay / Cheat-Sheet-Manager

Cheat Sheet Manager

Special thanks to Zayd al-Muqaddim al-Qamar al-‘Aarabi for all his contributions.

NOTE: All the cheat sheets on this app is AI generated, obviously me alone writing all this stuff is not quite possible. But contributors are highly appreciated.

Dashboard design is from this codepen -> https://codepen.io/jaca90/pen/vZJZMx

What is this app?

This app is a single UI for cheat sheets of most used frameworks and most used tools for Open Source Softwares
You can find boilerplate codes and most used commands for the tools you use often like git, Markdown Sytax, Docker and so on
And best thing is, you can create your own cheat sheets from directly on frontend!

What is included (For now)

Git, Docker, Markdown Syntax, Lisances

NGINX, Apache, Ngrok, Certbot, SSH

Prettier, Eslint, Webpack

Postgres, MongoDB, MySQL Redis, Caassandra, Neo4j

React, Angular, Svelte, Vue, Ember, Jquery, Backbone, Preact, React Native, Flutter, Ionic

…

View on GitHub

Your Journey

Frankly, I was not sure what could be an open source starter kit when I read it first time. But after some thought, I came up with this because it was solving my own problems. It took so much energy and time from me but after seeing the final product, I can say that It definetely worths. I firmly believe that whenever I encounter a problem as a human being, I am not alone in facing it. So I hope this app can have a potential for future development and may be helpful for more developers :)