For Code Newbies
Disclaimer: This article intends to be a primer so that you may gain insight in order to understand beginner OOP articles better (for example on wikipedia). In order to grasp more abstract concepts, suspend as much logic as you would when watching Star Trek. Message not sponsored by anyone I know. Some neurons dissipated during the writing of this.
New project in progress… Vanilla JS project with: 3 Login strategies 2 password reset strategies Security precautions
Just having some fun for a component of the kidda chat app
OMG! Objects What are objects Objects are a data type. JavaScript follows an ‘object based paradigm’. Which means in JS an object is a stand-alone entity (object) with properties. Properties come in key: value pairs. They are like variables. In the sense that variables reference some value in memory. The same way, in objects the property key: value pairs are akin to variables. Why? Think
Code a chat app Guide Introduction The features of the chat app Socket.IO methods Socket.IO events Callback functions Directory structure So far.. Set up index.html and style.css Sending a message from the client to the server Receiving the message from the client at the server Displaying the message to all connected clients Broadcasting “user is typing…” message Display greeting message when someone joins the chat
##Introduction note: work in progress So you have to code/make a website in 30 minutes for someone that scales on laptops, mobiles and tablets. What do you do? : Code your own front-end library overnight Use Twitter Bootstrap The answer is you use Twitter Bootstrap as you only have 30 minutes during lunch break. Because why do you want to waste your lunch break coding
Introduction CSS3 Grid Layout is great for controlling layout with rows AND columns! 1. Create the structure of the layout (i.e. # of rows and columns) 2. Place items on the layout (manually or through auto placement) Forge on Getting started Placing items on a grid: “display:grid” Setting grid columns and rows: grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto; Note 1.Grid-template-columns and rows help define
Just something I made as a primer. I’ve tried to condense as much information I could for ‘scoped’ learning
Guide Introduction What happens? Summary Set up the main project directory Install dependencies Directory structure Create a server in index.js Set up index.html Test your server 10.Make your first socket connection Conclusion Resources Note: This guide covers till setting up socket.IO to be used. A chat app using socket.IO will ensue in part 2 Introduction Socket.IO is a JavaScript library which allows real time bidirectional
Some notes I wrote in the process of making a short course on CSS3 grid layout
