DEV Community: Hardik Chopra

Open Source Backend Server - AppWrite 🔥

Hardik Chopra — Sun, 24 Oct 2021 06:03:39 +0000

What is Appwrite?
Amazing Features
Why Appwrite is better?
Installation
Hands On
Bonus🔥

💡 What is Appwrite?

Appwrite is an open-source backend server for web and mobile applications. It is similar to Firebase, AWS Amplify, and Supabase in terms of features and APIs, including Authentication (User management), Database Management, Storage, and Cloud Functions.
It is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

Back to Contents

✨ Amazing Features!

It can run on any operating system and the Console User Interface provides you with a great variety of services you can use with your project!

Database -Store, query and manage access control to your app documents
Storage - Upload, download and preview your app and users files and media
Users - Authenticate, confirm and manage your users using multiple signin methods
GEO & Localization - Detect your users location, locale and fetch GEO related data
Functions - Run your backend code in a secure and isolated environment to customize your app
Console - Track your backend API usage and manage your project resources from a modern UI

..... and others including privacy, security and many more.

Back to Contents

🤔 Why Appwrite is better?

No Cost
Appwrite is open-source, so we can expect everything for free here. Others options by companies like Microsoft, Amazon etc. can get expensive as you scale your product up. Appwrite has an upper edge here.
Usage Statistics
Using the usage statistics provided by AppWrite, you can easily get to know which projects -
- take up the most space
- use more CPU time, You can even see
- the bandwidth usage on each project separately ..... and many more stats.
API support
Due to the amount of APIs that Appwrite provides to a user, building projects is much easier with having to do difficult task of bundling API servers together.
Task Manager
Using Appwrite, you can schedule an automatic function execution using cron syntax. This function can do anything from sending newsletter emails to buying you a pizza. No limitations at all.
Community Support
AppWrite has a great community support that is ready to help you all the time. If you have any doubt or query, you can have a chat in their discord server, and you will get your query resolved faster than any other forums.

Back to Contents

📩 Installation

The easiest way to start running your Appwrite server is by running our Docker installer tool from your terminal.
Before running the installation command, make sure you have Docker CLI installed on your host machine.

For Unix

docker run -it --rm \
    --volume /var/run/docker.sock:/var/run/docker.sock \
    --volume "$(pwd)"/appwrite:/usr/src/code/appwrite:rw \
    --entrypoint="install" \
    appwrite/appwrite:0.11.0

For Windows

docker run -it --rm ^
    --volume //var/run/docker.sock:/var/run/docker.sock ^
    --volume "%cd%"/appwrite:/usr/src/code/appwrite:rw ^
    --entrypoint="install" ^
    appwrite/appwrite:0.11.0

Note :

Hyper-V and Containers Windows features must be enabled to run Appwrite on Windows with Docker.
If you don't have these features available, you can install Docker Toolbox that uses Virtualbox to run Appwrite on a Virtual Machine.

Back to Contents

💥 Lets Try it Out

Appwrite can be used for Web, Apple, Flutter, Android etc. Here we will try to understand how to use it for Web.

Appwrite is a development platform providing you easy yet powerful API and management console to get your next project up and running quickly.

We will learn how ca you start using Appwrite products and build your next project. Before starting, make sure you have followed the Appwrite installation, and you have an Appwrite server instance up and running on your host machine or server.

Step 1 : Create Your First Appwrite Project

Go to your new Appwrite console and once inside click the
'Create Project' button on your console homepage. Choose a name for your project and click create to get started.

Step 2 : Add Your Web Platform

For you to init your SDK and interact with Appwrite services you need to add a web platform to your project. To add a new platform, go to your Appwrite console, choose the project you created in the step before and click the 'Add Platform' button.

From the options, choose to add a web platform and add your client app hostname. By adding your hostname to your project platform you are allowing cross-domain communication between your project and the Appwrite API.

Step 3 : Get Appwrite Web SDK

NPM
Use NPM (node package manager) from your command line to add Appwrite SDK to your project.

npm install appwrite

If you're using a bundler (like Browserify or webpack), you can import the Appwrite module when you need it:

import { Appwrite } from "appwrite";

CDN
To install with a CDN (content delivery network) add the following scripts to the bottom of your tag, but before you use any Appwrite services:

<script src="https://cdn.jsdelivr.net/npm/appwrite@4.0.4">
</script>

Init your SDK
Initialize your SDK code with your project ID which can be found in your project settings page.

// Init your Web SDK
const appwrite = new Appwrite();

appwrite
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your project ID
;

Step 4 : Make Your First Request

Once your SDK object is set, access any of the Appwrite services and choose any request to send. Full documentation for any service method you would like to use can be found in your SDK documentation or in the API References section.

// Register User
appwrite
    .account.create('me@example.com', 'password', 'Jane Doe')
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        });

Step 5 : Listen to Changes

If you want to listen to changes in realtime from Appwrite, you can subscribe to a variety of channels and receive updates within milliseconds. Full documentation for Realtime can be found here.

// Subscribe to files channel
appwrite.subscribe('files', response => {
    if(response.event === 'storage.files.create') {
        // Log when a new file is uploaded
        console.log(response.payload);
    }
});

Lets put everything together

// Init your Web SDK
const appwrite = new Appwrite();

appwrite
    .setEndpoint('http://localhost/v1') // Your Appwrite Endpoint
    .setProject('455x34dfkj') // Your project ID

// Register User
appwrite
    .account.create('me@example.com', 'password', 'Jane Doe')
        .then(response => {
            console.log(response);
        }, error => {
            console.log(error);
        });

// Subscribe to files channel
appwrite.subscribe('files', response => {
    if(response.event === 'storage.files.create') {
        // Log when a new file is uploaded
        console.log(response.payload);
    }
});

Back to Contents

Bonus 🔥

Resources

Appwrite	🔗
Github Repo	Visit Repo
Documentation	Visit Docs
Discord	Join Sever
30 Days of Appwrite	Lets Start

Demos

Demo	🔗	🔗
Todo App with React JS	Visit Repo	See Live
Todo App with Vue JS	Visit Repo	See Live
Todo App with Angular	Visit Repo	See Live
Todo App with Svelte	Visit Repo	See Live

Announcing Appwrite 0.9: The open source Firebase alternative

Christy Jacob for Appwrite ・ Jul 7 '21

#flutter #android #kotlin #opensource

Authentication - Exploring Appwrite.io with React Series

Daryl Lukas ・ Jun 26 '21

#webdev #100daysofcode #react #appwrite

Magic URL authentication with Flutter + Appwrite

Damodar Lohani for Appwrite ・ Sep 8 '21

#flutter #opensource #news #serverless

If you got to learn something new and useful show some love by giving this post a ❤️

If you find it useful for you, save this post and share it with your programming buddies 😃

Have you tried Appwrite? Share your experience in the comment section! 💬

Future of DApps?

Hardik Chopra — Thu, 21 Jan 2021 14:50:51 +0000

Recently when I was reading an article, I saw the term DApps for the first time. For the ones who are also new to this term, let's have a brief introduction.

⚡ What are DApps?

Dapps are decentralized apps. They are like normal apps and offer similar functions, but the key difference is they are run on a peer-to-peer network, such as a blockchain ⛓️
That means no person or entity has control of the network.

🔑 Some DApps Alternatives

While researching about DApps I found some decentralized alternatives to popular apps that you must check out.

Alternative For	DApp
Facebook	MINDS
Youtube	DTUBE / LBRY
Whatsapp	SIGNAL
Reddit	AETHER
Dribble	CREARY
Medium	PUBLISH0x
Twitter	PEEPETH
Instagram	KARMA
Gmail	PROTONMAIL

DApps have many pros and cons, lets see some of them ➡️

PROS ➕

Censorship-resistant : With no single point of failure, it’s very difficult for governments or powerful individuals to control the network.
No downtime : Relying on a peer-to-peer system ensures the Dapps continue to work even if individual computers or parts of the -network go down.
Blockchain-based : As they are made of smart contracts, they can easily integrate cryptocurrencies into the basic
functionalities of the Dapp.
Open-source : This encourages the widespread development of the dapp ecosystem enabling developers to build better dapps with more useful or interesting functions.

CONS ➖

Hacks : As many are run on open-source smart contracts, it allows hackers the rare opportunity to probe the networks looking for weaknesses.
Usability : A lot of Dapps have poor user-interfaces, which have put a lot of users off.
Users : The more users a Dapp has, the more effective the network is at delivering those services. This is often referred to as the network effect. Dapp's struggle from low user numbers, which can make them less interactive. It can also make them less secure, as a Dapp's security can often rely on how many users it has.

The Question ⚠️

If you have worked with Dapps or have any knowledge about the same then give your reviews on being introduced years ago, why it has not been so popularized? and what do you think will be the future of Dapps? 💬 ⬇️

Have you tried these cool CSS Games?

Hardik Chopra — Thu, 14 Jan 2021 15:05:03 +0000

There are many topics in CSS which require practice to master.
Here I will be sharing some of the CSS games which I found worth trying if you want to make a strong grip on CSS.

1. CSS Battle

Compete with thousands of people by playing different CSS based games and completing various challenges.

Click Here to Play

2. Flexbox Froggy

Guide Froggy to the lilypad using Flexbox properties. This game is fantastic to visualize flexbox properties as you practice them.

Click Here to Play

3. CSS Diner

Have you ever felt confused using CSS Selectors? Well, this game is for you. Write different CSS Selectors to place different objects as mentioned.

Click Here to Play

4. Grid Garden

CSS Grids is a must to learn and it gives a solution to the menace of aligning the content.
Gird Garden is possibly the best way to get a good grip on CSS Grid.

Click Here to Play

5. Flexbox Defense

Yet another way to practice flex-box properties.

Click Here to Play

If you got to learn something new and useful show some love by giving this post a ❤️

If you also know other cool games then do share them in the comment section below ⬇️

If you like this article then do check out my other ones 😎

Article No Longer Available

Go in 2 minutes

Hardik Chopra — Thu, 07 Jan 2021 07:19:16 +0000

Golang or Go was developed at Google as an open-source programming language and is one of the most trending programming languages among developers. Used by Google, Netflix, Twitter, and millions of users let's take a look at it.

What is Go?

Golang is a procedural and statically typed programming language. The goal was to create a language, loosely based on the syntax of C. It can be used in place of Python, Node.js, or PHP in the backend.

Go is not a free-form language, its conventions specify many formatting details, including how indentation and spaces are to be used. The language requires that none of its declared variables or imported libraries are unused, and all return statements are compulsory.

Why Go?

Go is a general-purpose language so it can be used for almost anything.
Mostly for scalable and efficient (web) services.
Another area is cloud applications. Google has high hopes for it becoming the defacto cloud language

Some features of Go

One defining feature of Go is concurrency, which means that multiple processes can be executed at the same time, which makes Go an efficient language.
It’s compilation time is very fast.
It supports the patterns which adapt to the surrounding environment similar to dynamic languages.
It supports the interfaces and embedded types.
It doesn’t require any external dependencies for the production of the statically linked native binaries.

Statistics

Here are some stats from Stack Overflow 2020 Developer Survey.

From last year, Go has jumped from 10th position to 5th position, making it in the list of Top 5 most loved programming language

Go is also one of the Top 3 languages associated with the highest salaries globally.

Bonus 🔥

So up to this point, we have seen and understand what is Go and why to use go, now let's see how to write Go. It is a beginner's guide so we will just write code for everyone's favorite, Hello World!

INPUT

package main

import "fmt"

func main() {
    fmt.Println("Hello World !")
}

OUTPUT

Hello World !

If you got to learn something new and useful show some love by giving this post a ❤️

If you have read so far, save this post and share it with your programming buddies 😃

Resources 👑

How to Code in Go (Tutorial Series)

DigitalOcean for DigitalOcean ・ Dec 30 '19

#go #tutorial #beginners #series

The Top 10 Places to Learn Go

Jeremy Morgan for Pluralsight ・ Nov 23 '19

#go #beginners #programming

Do you something else about Go? Do share that with the community in the comment section 💬

Do you know Markdown!

Hardik Chopra — Thu, 31 Dec 2020 09:44:28 +0000

If you write articles on DEV you might know markdown but if you don't know, let's learn it.

Markdown is a lightweight markup language that you can use to add formatting elements to plain text documents. Markdown is used widely in the community, being it either writing README for Github or writing dev articles, markdown is used everywhere.

I will be discussing some basics and resources related to markdown.

Syntax
- Headings
- Formatting Texts
- Links
- Images
- Code Snippet
- Lists
- Blockquotes
- Tables
- Horizontal Lines
- Emoticons
Practice online
Bonus!

Headings

Just like we have h1,h2....h6 tags in HTML, we have these heading tags in markdown as well. We use this with the help of #

INPUT:

# This is Heading
## This is Heading
### This is Heading
#### This is Heading
##### This is Heading
###### This is Heading

OUTPUT:

This is Heading

Back to Contents

Formatting Texts

You have different formatting options in markdown. You can use bold or italics but you have not the option of underlining text in pure markdown.

To bold, enclose the text between 2 asterisks on both sides. ** **
To make the text emphasized, enclose text between 1 asterisk on both sides. * *
To make bold and emphasized both, enclose text between 3 asterisks. *** ***
For Strikethrough text, enclose it between ~~ ~~

INPUT:

**Bold**
*Emphasized*
***Both***
~~Strikethrough~~

OUTPUT:

Bold
Emphasized
Both
~~Strikethrough~~

Note: Instead of asterisks(*), underscore(_) can also be used.

Back to Contents

Links

It is very easy to add links or hrefs in markdown. Write the text inside square brackets [] and put the link in round brackets ().

INPUT:

[My Dev Profile](https://dev.to/hardikchopra242)

OUTPUT:

My Dev Profile

Back to Contents

Images

Adding images is very much similar to adding links. One difference is that we put an exclamation mark ! in front. In the square brackets, we write the Alt text and in the round brackets, we give the link to our image.

INPUT:

![Meme](https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.YIPISOt_bX8dMMUBzE-hPAHaFj%26pid%3DApi&f=1)

OUTPUT:

Back to Contents

Code Snippet

There are two options to add code snippets, one is inside a continuous line and the second is a whole code snippet block.
For inline we use a single back-tick and for a snippet block, we enclose the code in three back-tick pairs.

INPUT:

OUTPUT:

This is how inline code looks like

Write your code
Here and it
will turn into a 
code block

Back to Contents

Lists

You can add ordered or unordered lists in the markdown by just numbering them or putting asterisks * ahead of every element

INPUT:

Ordered List

1. List Item   
2. List Item
  1. List 2       //For nested lists, use two-space indentation
  2. List 2
  3. List 2
3. List Item


Unordered List

* List Item      //Inplace of * , - and + can also be used 
* List Item    
  * List 2
  * List 2
  * List 2
* List Item

OUTPUT:

Ordered List

List Item
List Item
1. List 2
2. List 2
3. List 2
List Item

Unordered List

List Item
List Item
- List 2
- List 2
- List 2
List Item

Back to Contents

Blockquotes

Blockquotes can be added using > at the start of a line. You can also use nested blockquotes.

INPUT:

>This is a BlockQuote.
>This is a BlockQuote.
>>This is a ***nested*** BlockQuote.

OUTPUT:

This is a BlockQuote.
This is a BlockQuote.

This is a nested BlockQuote.

Back to Contents

Tables

To make tables, every column should be separated using | and :--------: can be used to make the column headings bold.

INPUT:

| Column 1       | Column 2     | Column 3     |
| :------------- | :----------: | :-----------: |
|  Row 1 | To escape   | the pipes,    |
| Row 2   | Use backslash| Like this  \| |

OUTPUT:

Column 1	Column 2	Column 3
Row 1	To escape	the pipes,
Row 2	Use backslash	Like this \

Back to Contents

Horizontal Lines

There are three different ways to make a horizontal line. These are:
Using three continuous -, *, and _.

INPUT:

Paragraph 1

---

Paragraph 2

___

Paragraph 3

***

OUTPUT:
Paragraph 1

Paragraph 2

Paragraph 3

Don't forget to give a line space above and below the syntax.

Back to Contents

Emoticons

To use emoticons in your markdown place emoticon code inside two colons : emoticon_code :

INPUT:

:smile: :mask: :bug:

OUTPUT:
😄 😷 🐛

For markdown emoji cheatsheet click here

Back to Contents

Practice Online

To practice markdown, you can refer to some of the following websites. Anytime if you feel like you should try something out, jump to one of these websites and write markdown!

Dillinger 👑
JBT Markdown

Back to Contents

Bonus!!🔥

Typora

Typora is a markdown editor. One of my friends suggested me to use Typora for making notes and it's fantastic!
When we learn something new we have to note that somewhere so that we can recall that later. Typora can be used for this purpose.

Features:

Ton of themes
Live preview of what you write in markdown
Many editing options

Download Typora

Back to Contents

If you got to learn something new and useful show some love by giving this post a ❤️

If you find it useful for you, save this post and share it with your programming buddies 😃

Do you know any other markdown tricks? Do share it in the comment section!💬

Master VS Code + Resources!

Hardik Chopra — Thu, 24 Dec 2020 07:29:11 +0000

Most of the time of a developer is spent on an IDE/ Code Editor. So it is very important to work in an environment that suits your needs and is comfortable for you.
We will be talking about customizing one of the most popular Code Editor VS Code

Themes
Fonts
Icons
Keyboard Shortcuts
Extensions
Something Special !
Resources

Don't Miss the Bonus and Resources at the end 🔥!

Themes

To customize the theme in VS Code, go to Settings and select color themeor type ctrl/cmd + K + ctrl/cmd + T.
Here you can find some pre-installed themes in VS Code.

You can also download themes from the extension search.
Some popular themes are :

Fonts

To customize the font of VS Code go to settings ctrl+, > User > Text Editor > Font.
You can find the font-family option here, where you can change the font-family, font-style of your choice!

Personal Favorites:

Icons

You change the folder and file icons in VS Code. To see the pre-installed options, go to Settings > File Icon Theme.

Make sure the Seti is selected on VS Code.
I use the Material Icon Theme (The Best 👑)

Keyboard Shortcuts

Keyboard Shortcuts saves you a lot of time as a developer and VS Code has got you covered. VS Code has many inbuilt shortcuts.
To preview the shortcuts, go to Settings > Keyboard Shorcuts or press ctrl/cmd + K + ctrl/cmd + S

The best thing is that you can also customize these shortcuts and can override them very easily!

Extensions

Extensions are a very powerful tool in any IDE. VS Code has many of them and specifically for customization following are my picks.

Sublime Text Keymap
Are you an avid Sublime user, nervous to switch over to VS Code? This extension will make you feel right at home, by changing all of the shortcuts to match those of Sublime.
Prettier
DONT spend time formatting your code. Let Prettier do it for you It's super easy to set up and can be configured to format your code automatically on save.
Better Comments
This extension color codes various types of comments to give them different significance and stand out from the rest of your code. Use green color for informatory comments and red color for ToDo comments and much more!

Bonus 🔥

Font ligatures

Font Ligatures are when multiple characters appear to combine into a single character. Simplistically, when you type two or more characters and they magically attach to each other. VS Code now supports font-ligatures.

To activate font-ligatures you need the fonts that also support font-ligatures, examples of such fonts are --> Fira-code, Inconsolota, and many such.

Step by Step Guide to activate Font Ligatures

If you got to learn something new and useful show some love by giving this post a ❤️

Do you know any other customization tricks? Do share it in the comment section!

More Resources :

Try out different programming fonts online click here
50 VS Code themes for 2020

Geoff Stevens for Software.com ・ Jan 6 '20

#vscode #2020
Article No Longer Available
10 Visual Studio Code Tricks To Unleash Your Productivity

Gedalya Krycer ・ Dec 22 '20

#productivity #webdev #beginners #vscode

If you have read so far, save this post and share it with your programming buddies 😃

Cool Extensions for VS Code

Hardik Chopra — Thu, 17 Dec 2020 09:19:38 +0000

VS Code is among the most popular, free, open-source code-editors out there, and one of the reasons for such high demand is the extensions and plugins it offers.

If you are a VS Code user you must be familiar with some popular extensions like Live-Server and Prettier. If you haven't you must check them out.
Here I am sharing my list of cool extensions for VS Code that you might don't know and can make your life easy.

1. Path Intellisense

In large projects, remembering specific file names and the directories your files are in can get tricky. This extension will provide you IntelliSense for just that. As you start typing a path in quotations, you will get IntelliSense for directories and file names. This will save you from spending a lot of time in the file explorer.

2. Git Lens

There are a bunch of git extensions out there, but one is the most powerful with tons of features. You get blame information, line and file history, commit searching, and so much more. If you need help with your Git workflow, start with this extension!

3. Bracket Pair Colorizer

With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer, as its same suggests, colors matching brackets to make your code much more readable. Trust me, you want this!

4. Browser Preview

If you use the Live-Server Extension, this one goes another step further in terms of convenience. It gives you a live-reloading preview right inside of VS Code. No more having to tab over to your browser to see a small change!

5. Javascript Code Snippet

This extension provides you snippets for popular pieces of modern (ES6) JavaScript code. Now there's no need to retype the same piece of code over and over again.

6. ES Lint

This extension can be configured to auto-format your code as well as "yell" with linting errors/warnings. VS Code specifically is also perfectly configured to show you these errors/warnings.

7. Auto Rename Tags

Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!

8. Quokka.js

Need a quick place to test out some JavaScript? Quokka gives you a JavaScript (and TypeScript) scratchpad in VS Code. This means you can test out a piece of code right there in your favorite editor!

9. Better Comments

This extension color codes various types of comments to give them different significance and stand out from the rest of your code.
You can color informatory comments with green color, to-do comments with orange color, and just like that.

10. Better Align

If you're the kind of person who loves perfect alignment in your code, you need to get Better Align. You can align multiple variable declarations, trailing comments, sections of code, etc. There's no better way to get a feel for how amazing this extension is than installing it and giving it a try!

Bonus!🔥

# Polacode

You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It's super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!

Demo:

If you got to learn something new and useful show some love by giving this post a ❤️
If you also know some cool extensions then do share them in the comment section below.

To download and to learn more about these extensions visit the links:
*Path Intellisense
*Git Lens
*Bracket Pair Colorizer
*Browser Preview
*Javascript Code Snippet
*ES Lint
*Auto Rename Tags
*Quokka
*Better Comments
*Better Align
*Polacode
*Live-Server
*Prettier

If you have read so far, save this post and share it with your programming buddies 😃