livlog

The goals 💪🏻What & Why? ✌🏻Introducing Vue, React & Angluar 👍🏻Diving Into Vue.js Why Frontend UI Frameworks? Building complex frontend (JS-driven) interfaces can become very difficult, error-prone and cumbersome -Select and store all DOM elements -Attach event listeners -Store data (state) -Update the DOM Problem: We write impeerative code Imperative: Step by step, instruction after instruction M..

The goals 💪🏻Why? ✌🏻Understanding REST APIs 👍🏻Building a REST API What are services & APIs? As a (Web) developer you can't build all features on your own Use paid or free thired-party services / APIs to add certain features to your app Or: Build a service / API that can be consumed by others Build a javascript package vs URL-based API Javascript Package Expose certain functions objects, methods e..

The goals 💪🏻Publishing Options (Static vs Dynamic Website) ✌🏻Preparation Steps & Website Optimization 👍🏻Deploying (Publishing) A Website We need a hosting provider Configuring computers for serving websites is no easy task -> Proper hardware -> Software installation & configuration -> Exposing ports & accepting incoming requests -> Security => Hosting providers sell pre-configured remote machine..

The goals 💪🏻What are "Services" & "APIs"? ✌🏻Introducing Stripe For Handling Payments 👍🏻Using Stripe In Our Online Shop What are Services & APIs? Services are just that: Services you can use in your projects / websites - Packages like Axios or Express - Google Maps API - Google Analytics - Stripe Payments Expose "Actions" or "Endpoints" you can access from inside your code => API (Application Pro..

The goals 💪🏻Plan The Project ✌🏻Frontend: HTML, CSS & Browser-side JavaScript 👍🏻Backend: NodeJS & MongoDB - Customer & Admin So let's try to build our project step by step! Installing the packages Since we will use node, we initiate node program manager, and put '-y' which means we will say 'yes' for all the questions. And of course we need express! To make our server reopen itself every time whe..

The goals 💪🏻What's The Problem With Our Code? ✌🏻Code Refactoring 👍🏻The MVC Pattern Let's look around our code We check our code we've made till this date. And if there are some parts we need to fix. Too Large Code Files Can Become Hard To Maintain Separating functions by the type (blog function vs auth function) So we finished first refactoring here The MVC Pattern Class and constructor The cons..

The goals 💪🏻Security vs Authentication ✌🏻CSRF Attacks, XSS Attacks, SQL Injection 👍🏻Escaping & Sanitizing User Input Security vs Authentication Authentication Control expected actions by your website visitors. Grant some visitors (e.g. logged in visitors) more privileges than others Website Security Prevent unexpcted (potentially malicious)actions by visitors / other people Prevent exposing data..

The goals 💪🏻What is "Authentication"? ✌🏻Implementing Signup & Login 👍🏻Understanding Sessions & Cookies What is "Authentication"? In many websites, certain "areas" (pages) should only be accessible by authenticated (=logged in) users -Personal profile on a social network site -Our shopping cart and order history in an online shop -The administration area of our own blog website User Sign Up (crea..

The goals 💪🏻What & Why? ✌🏻Sending JS-driven Http Requests 👍🏻Handling Responses & Errors What is "Ajax"? Asynchronous JavaScript And XML XMLHttpRequest What is XML? Extensible Markup Language (XML) XML is a data format for formatting / structuring text data in a machine-readable way Looks like HTML - because HTML is based on XML HTML is standardized, XML is not Nowadays, XML isn't really used any..

The goals 💪🏻The Different Parts Of "Uploading Files" ✌🏻Selecting & Uploading Files 👍🏻Storing & Serving Uploaded Files The Two Sides Of File Uploads Username User image Save User When the code is like above, we get this page. Username User image Save User Here I put 'input' with type file, then it looks like this. We can make this field as essential field and can set the file format also. HTML at..