DEV Community: Tosin Adewale

Learning Markdown: yeah, that Dev.to Editor Syntax

Tosin Adewale — Tue, 28 Jun 2022 13:43:24 +0000

If you have been writing on Dev.to recently or even for awhile, you must have certainly come across the symbols (#,* etc) in the in-built text editor. For instance, to make a text or word bold, you just need to add 2 asterisk at the beginning and end of the word, just like this BOLD.

If you are as curious as me, you must have at some point felt like this is different from all of the regular word processor (like Microsoft Word) used locally on computer systems. And if just like me, you have also written on Medium, Hashnode, or even Github Documentation, you must noticed the same type of syntax. Which begs the question, what are these signs and symbols all about. Well, I looked and found the culprit - MARKDOWN

4 Basic Facts About Markdown

Markdown is a lightweight and easy-to-use syntax for styling all forms of writing on code storage or blogging platforms.
Markdown was created by John Gruber in 2004, and since then it is now one of the world's most popular markup languages on the internet.
Creating a Markdown file is as simple as using a text editor or a dedicated Markdown application to create a text file and save the file with a .md or .markdown extension.
You can style texts in Markdown as well as add images, links, tables, lists and even emojis with ease. Which makes it viable for creating presentation slides.

Why Do People Use Markdown instead of Popular Word Processors.

Markdown is extremely lightweight. The files occupy less disk space compared to .docx, .pptx or .doc file extensions.
Markdown files do not require specialized software to open them. Compared to other files types (.docx, .pptx or .doc etc) that can only be opened by proprietary software, Markdown is portable.
The fact that Markdown files do not required specialized software to open them also makes them taotally platform independent. They can be opened with a simple text editor, and all platform regardless of the maker comes along with a text editor.
Again, since Markdown files do not required specialized software to open them you do not have to worry if the application you are using suddenly stops working, there will always be other text editors that can similarly open the Markdown file. Imagine your MS Word software crashes, accessing contents of a .docx or .doc file is impossible on your computer locally, but with a .md or .markdown file extension, you can open with other text editors - Notepad, Notepad++, Atom, Sublime Text, VS Code, the options are endless.

What Is Markdown Used For?

Using Markdown for basic writing seems plausible, until you start asking yourself why should you use it instead of your normal word processor with buttons and clicks.

WEB - Markdown was designed for the web in the first place , so it shouldn't come as a surprise that most of these online editors and static site generators use Markdown. The reason being that it is easier to update website content using Markdown instead of users having to go deep into the HTML or CSS source code to make a text bold

<b>

or add a link using

<a href>

Some of the static site generators like Jekyll, Hugo use Markdown to update contents they are not built to connect to a database for CRUD Operation, so the best method is to have users use Markdown to manually create and update contents on the website.

DOCUMENT- By using a Markdown document authoring application, you can create and export Markdown-formatted documents to PDF or HTML files.
Below are some Markdown document authoring applications:
Windows: Ghostwriter, Markdown Monster
iOS/ Android: iA Writer
Web: Dillinger or Stack Edit
Linux: ReText, Ghostwriter
DOCUMENTATION - Companies like Github use a flavoured version of Markdown to host documentations. If you have been using Github for awhile , you must have noticed the numerous "README.md" files which mostly contain technical documentation regarding a repo or one's profile summary.
COLLABORATION - For some popular collaboration and team messaging applications like like Slack and Discord, they support some features of Markdown, thus bolding or italicising text on such platforms can be done easily with Markdown.

Summary

In the course of this article, we have learnt 4 Basic Facts About Markdown, 4 Reasons Why People Use Markdown and 4 Areas Where We Can Use Markdown.

In the upcoming articles, we are going to learn how static site generators like Jekyll and Hugo use Markdown to update site contents.

I hope you have learnt something new today. Do not forget to try out Markdown to write documentations too. See you next time.

Vercel vs Cloudfare Pages: Choose One

Tosin Adewale — Thu, 23 Jun 2022 20:20:38 +0000

Cloudfare Pages and Vercel are one of the best platforms for freely hosting Front-end apps. Making a decision between the two can be quite confusing.
Today, we are going to compare the two platforms based on 3 criterion:

1. Ease of Use

The designers at Cloudfare Pages and Vercel has done an exceptional work in simplifying the user workflow. Although, Vercel happens to further make it easier to deploy any type of project by grouping out the technologies in tiles, this way you get to know beforehand which technology is supported.

An added advantage is that templates are available on Vercel for you to deploy fast and then edit later to include your custom code.

Plus, when you do finally deploy your app you are provided with three different vercel domains for you to access your app, if you had to do that on Cloudfare Pages, that will require repeating the deployment process thrice instead of once.

On the other hand, for beginners who just want to deploy a simple front-end app, Cloudfare Pages comes in handy. The different front-end technologies are not grouped in tiles like that of Vercel, all you need to do is import your repository from Github through a one-click button.

2. Scope
On Vercel, you can deploy more than 8 different front-end technologies (NextJS, ReactJS,GatsbyJS etc) and each has its own template readily available to get you started immediately. Vercel's scope caters more to core developers' need for testing and deploying frontend apps fast.

Cloudfare Pages on the other hand has a wide suite of services catering to managing and creating domains, hosting whole websites, databases etc. Their business model is created to stand as an all-round solution to web developers, database administrators and even security experts.

3. Pricing
Vercel Pricing

Cloudfare Pages

Their paid plan are both very similar starting from $20 both, but the benefits on a scale differs depending on your needs. Vercel's paid plan benefits core developers more, while Cloudfare Pages is more beneficial to hobbyist as it promises unlimited sites even on a free plan.

In summary, we have compared Vercel and Cloudfare Pages based on 3 criterion Ease of Use, Scope and Pricing. I hope the article has made it easier for you to make a choice between the two platforms for deploying your project. It goes without saying that you can definitely use both. Try them out and see how they work.

Thanks for reading. See you next time.

Building and Deploying a Next.js App on Vercel

Tosin Adewale — Wed, 22 Jun 2022 08:31:07 +0000

Today, we will be discussing how to build and deploy a Next.js Blog on Vercel. Compared to No-Code Tools, building with Next.js and Vercel gives you total freedom to code from scratch or modify FREE templates to your taste.

To do that we will need 2 major things, a Github account and a Vercel account. If you do not have these two things ready, kindly create accounts before we proceed. If you have it already you can go on with the rest of the tutorial.

Why Next.js Blog and Why Vercel?

According to Microsoft, Next.js is a framework for creating server-rendered JavaScript apps based on React.js, Node.js, Webpack and Babel.js. It is basically a project boilerplate for React, crafted with attention to best practices, that allows you to create "universal" web apps in a simple, consistent way, with hardly any configuration.

Vercel is the best place to deploy any frontend app. Deployment is done with little to no special configuration giving developers more time to spend on building apps.

To start with:

Visit Vercel
Login with the Github Option
Enter your Github Login Credentials and
Verify your log in by entering the verification code sent to your phone/email inbox.
You will now be redirected to the Vercel Dashboard, as shown below:
Click on the "New Project" on the top-right hand side of the dashboard,
You will be redirected to this page, where you have the option of using a template or importing a project from your Github repo.
For the sake of this tutorial, we are going to use a template - A Next.js app and a Serverless Function API. Create a repository by clicking on the Github button.
Enter your preferred name for the project and deploy.
Congratulations, you just deployed a Next.js app.
To access your app, click on the auto-generated domain created Vercel - https://nextjs-rho-eight-22.vercel.app/, you will be redirected to a new tab showcasing your newly deployed Next.js.
To make changes to the source code of the Next.js app, you can access the source code through the repo created on your Github profile.

The fantastic team at Vercel has made the deployment process as straightforward as possible. It takes less than 5 minutes to deploy a Next.js app on Vercel.

In summary, we have learnt how to build and deploy a Next.js app on Vercel. To do that we need a Github account and a Vercel account linked to our Github account.
We then created a new project from the Vercel Dashboard, choose a Next.js template, cloned it to our Github repo and deployed the app live on an auto-generated domain by vercel at https://nextjs-rho-eight-22.vercel.app/

Thanks for reading, I hope this article has been of great help to you. Check my blog for more informative posts like this.

Build a Password Generator and Deploy to Cloudfare Pages in 3 minutes

Tosin Adewale — Mon, 20 Jun 2022 18:34:51 +0000

While we await the passwordless future promised by Big Tech, we still have a great deal of security decisions to make regarding using secure passwords.
Below is a chart of how the number of words, numbers or symbols influence the complexity of a password.

To create a secure passwords these days, there is Google Chrome password generator extension but due to security reasons, it is unsafe because hackers can access and steal the stored passwords from your browser.

This leaves us with one last option - use a simple random password generator that you can run and use locally on your smartphone or deploy on Google cloud, which we are going to learn how to do that here in this article. The App is built with HTML, CSS, Javascript and Bootstrap.

You can download the source code for the Random Password Generator App here on Github - Github repo

Don't forget to star the repo and fork the repo to add new features.

Requirements:
1) A simple interface - Button and a input field. I can't stress this enough, many users will likely want to generate a password immediately, not click checkboxes and move sliders.
2) Copy functionality.
3) Fully responsive design with Bootstrap.

First create a file named "index.html" with the following code:

<body class="d-flex h-100 text-center text-white bg-dark">

<div class="cover-container d-flex w-100 h-80 p-3 mx-auto flex-column"> <header class="mb-auto"> <div> <h3 class="float-md-start mb-0"> <span class="fa fa-lock"></span> Password Generator</h3> </div>

</header>


<main class="px-3"> <h1>Generate Your Secure Password!</h1> <p class="lead"> <input type="text" class="form-control" name="gen-password" placeholder="Password shows here..."> </p> <span class="copied fa fa-check fa-2x" style="color:#32CD32" onclick="copy()">Copied</span> <span class="copy fa fa-copy fa-2x" onclick="copy()">Copy</span>
</p> <p class="lead"> <button class="btn btn-lg btn-secondary fw-bold border-white"> <span class="fa fa-key"></span> Generate Password </button>

</main>
<footer class="mt-auto text-white-50"> <p>We got tired of racking our brains for secure passwords.</p> <a href=""><span class="fa fa-github fa-2x" style="color:#FFFFFF"></span></a> </footer></div>

In the same file, we are going to add a script tag at the bottom of the page to add the javascript code that will generate the passwords:

<script> const display = document.querySelector("input"), button = document.querySelector("button"), copyBtn = document.querySelector("span.copy"), copyActive = document.querySelector("span.copied"); let chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+~`|}{[]:;?><,./-="; button.onclick = ()=>{ let i, randomPassword = ""; copyBtn.style.display = "block"; copyActive.style.display = "none"; for (i = 0; i < 18; i++) { randomPassword = randomPassword + chars.charAt( Math.floor(Math.random() * chars.length) ); } display.value = randomPassword; } function copy(){ copyBtn.style.display = "none"; copyActive.style.display = "block"; display.select(); document.execCommand("copy"); }
</script>

What the code inside the script does is in two folds;
1) Firstly, a random password not less than 18 characters is generated every time the "Generate Password" button is clicked and displayed in the input field using the allotted characters and symbols as in the variable "char".
2) Secondly, a copy function enables the user to easily click on an icon and the password is automatically copied with a generated "Copied" message displayed right below the input field.

Deploying on Cloudfare Pages

1) Visit Cloudfare Pages - https://pages.cloudflare.com

2) Create an account or login to your existing account.

3) On the dashboard, on your left hand side, click on the "Pages" tab.

4) On the "Pages" tab, click on the "Create a project" button,

5) Click on the "Connect to git" button

6) Connect to Github, Github will notify you with a verification code to your email linked to your github profile.

7) After that, select the repository containing the project you want to deploy.

8) On the set up and deployment page, in the Project name input field, write out the project name of your choice. Note that the site will be deployed as "the project name".pages.dev

After deployment, go to the "Pages" tab again:

Deploy the site and your website will be live in a matter of seconds. This took me less than 3 minutes even on my first try, so rest assured the steps is straightforward and esy to follow. try it out!

The Random Password Generator App is hosted live at: https://securepasswords.pages.dev/

I hope this helps and you have learnt something out of this. Thanks for reading, see you next time.
You can download the source code for the Random Password Generator App here on Github - https://github.com/Tosynn/Random-Passwords-Generator

*Don't forget to star the repo and fork the repo to add new features.
*