Web development learning thread(Javascript, HTML, CSS, angular, vue.js).


Login or Register for Dates, Times and to Reply

 
Thread Tools Search this Thread
# 22  
Hi Ravinder,

It seems, at least based on your posts, that you are still thinking about web development in terms of the "obsolete" or more politely the "legacy" or "original" model of the web where the server is doing the heavy lifting as far as the UI goes.

In the current web development model JSON objects are sent around the network and these objects are processed "heavily" on the client side. So, from a web UI perspective, does not matter if the server is running PHP, Python, Ruby, or Node.js. From a web UI perspective it could be a big fat hamster processing the data on the server side as long as the hamster is pushing out JSON objects into the net, the data can be processed by clients (generally browsers, but not always) or others servers.

This is not a criticism, so please do not take it as negative; but you seem to primary view the architecture of the web based on a server pushing out HTML documents rendered for the UI. This model is "obsolete" (to be very direct) or at best "legacy" to be more kind to that very good, but very old model.

The current web dev model is to decouple the rendering of data from the data itself; and so that is why the strong trend in web development is to build Javascript based UIs that receives JSON objects from "devices on the net" and render the data in the UI using Javascript. The actual "plain vanilla HTML" in a modern day web apps is very little except what has been embedded in the Javascript chucks. The DOM is manipulated by client JS, not by the server.

So to answer your question about the fake JSON data site more directly (I hope), that site is a service (one of many) to web developers which returns "fake" JSON objects via REST'ful API calls so web developers can focus on developing in the UI, which mean in Javascript, and not spend a lot of time worrying about setting up a server to send out JSON data. You have all you need for data to learn from using the myriad free web dev tools and sites and "fake data" available on the net today. Plus, each month more and more tools and site are going live on the net.

The server side is important, but many web developers create very powerful web sites in today's world without an SQL based backend because of the rise of No SQL based models for storing and retrieving data objects, more likely than not, JSON objects.

It's no coincident that many young tech savvy web developers have their business cards and presentation contact information listed as a JSON object. It makes a statement to everyone when you list your contact information as a JSON object. It's basically tells everyone "I get it". You should be thinking in terms of JSON as well. If you have a database in MySQL already and the current logic is in PHP, you should think "how to I query and return JSON objects". If you are using Amazon (AWS) you should think the same. If you are using hamsters with big buck teeth to grab data, those hamsters need to send you a JSON object. If you don't have any database or data, then use free and fake JSON on the net and go from there!

The same is true for the buzzword we mostly loath, "the Internet of things". I'm not a huge fan of the "IOT" buzz; but the client-server model on the Internet is rapidly becoming "legacy" in favor of "peer to peer" and "publish-subscribe" communication models. What will all these devices send to each other? By now you should know, based on my text above, that is will more than likely be JSON objects over the next few years or more. Multiplayer gaming, team collaboration, messaging, command and control; all of these areas and more depend on peer-to-peer communications where the underlying data transmitted between devices is serialized JSON objects zipping across across cyberspace.

As you know, I am currently working on a publish-subscribe prototype toward a way to embed real-time peer-to-peer messaging in forum threads. So, in the future, when reading a thread or discussion here at unix.com, you may be able to comment and communicate with others (everyone, not just members) on these discuss threads, peer-to-peer in real-time. The technology at the heart of all of this is Javascript processing object encoded in JSON. It's not XML. It's not HTML. It is JSON encoded objects. As long as the hamster pushes out JSON, the other hamster can process the data.

Code:
{ name: "Neo", role: "Advocate", location: "Cyberspace", age: 999}

Or an array of objects:

Code:
[
{ name: "Neo", role: "Administrator", location: "Cyberspace",  age : 999},
{ name: "Ravinder", role: "Moderator", location: "India", age: 33},
]

The same is true for gaming, cybersecurity, AI, machine learning, location tracking, news, and more. The model of client-server as greatly evolved for the most part and the frontier is peer-to-peer messaging. This means your browser is communicating directly with mine. Of course there needs to be the infrastructure in place for peer-to-peer and publish-subscribe communications, and much of that, of course, will be based on servers that provide the infrastructure to enable peer-to-peer, device to device, browser to browser communications.

So, to answer your question more directly (I hope!), you do not need PHP to query the data in the fake JSON site mentioned in my earlier posts. You should query this in the UI, which means in Javascript, because your browser does not run PHP, Python, Fortran, Lisp, or the UNIX shell.

If you want to be a savvy web developer in 2019 and beyond you just think "Javascript and JSON object" first. You need to develop in a modern syntax checking code IDE like VSC, Sublime or Atom. The strong trend for most web developers today is VSC. It used to be Sublime and Atom and some still use them. You need to develop on your desktop in a Javascript engine that runs on your desktop, and that is called node.js, a Javascript engine based on V8 written in C++ that runs on "just about everything". In addition, you use use node package manager (npm) to manage your packages and dependancies. Generally, you need a templating engine for HTML, so that is generally done in a modern JS library like React.js, Vue.js or Angular.js. As you know I like Vue.js because it cleanly separates the HTML template from the Javascript and CSS like this:

Code:
<template>
</template>
<script>
</script>
<style scoped>
</style>

Personally, I am not a React.js fan because I'm not a fan of JSX (embedding the HTML into the Javascript directly), as I find this too confusing to maintain. YMMV. Some love React. I'm also not an Angular.js fan because since Javascript runs in the browser and node.js is based on Javascript, I prefer the templating framework to be in Javascript, but Angular is mostly based on TypeScript. However, there is a growing trend toward TypeScript as well, so the future is not clear; but I think it is safe to say that Javascript will continue to play a key wrote unless browsers are designed to render in TypeScript. Actually, I am not fully up-top-speed on TS and am typing over the end of my skies; and so I better stop commenting on TypeScript until I get smarter.

My recommendation is that you follow a more modern day tutorial (versus the older one you are following now). Here is a good one:

Modern JavaScript Tutorial #1 - Intro & Setup

This guy, "The Net Ninja" guy, is really good, to the point, and very fast and you can learn a lot from him if you watch and code along with his various series. He is currently pushing out free "modern JS" tutorials and they start out very basic, but are jammed pack with the information you need to be a savvy web developer in 2019.

Hope this helps!
These 2 Users Gave Thanks to Neo For This Post:
# 23  
Hey Ravinder,

Here is a more "2019'ish tutorial" Javascript / HTML tutorial which is easy to follow and is more in line with how developers do things in 2019:

Quick Autocomplete App With JS & JSON

Quote:
In this project we will build a simple web app that searches a JSON file using the Fetch API, Async/Await, Regex and high order array methods.
I recommended you code this tutorial using the same tools and technique as Brad.

Cheers.
This User Gave Thanks to Neo For This Post:
# 24  
Quote:
Originally Posted by Neo
Hey Ravinder,
Here is a more "2019'ish tutorial" Javascript / HTML tutorial which is easy to follow and is more in line with how developers do things in 2019:
Quick Autocomplete App With JS & JSON
I recommended you code this tutorial using the same tools and technique as Brad.
Cheers.
Thanks a TON Neo for letting me/us know this great video. I have gone through it, I understood the concept of it but syntax vice it will take sometime Smilie

Let me put my learning from the video in points here.

1- Create a folder structure where we can keep fake json data, html file, JS file and CSS file.

2- Now copy json data from respective site into the file in your local system OR create it directly from VSC.

3- Get icons link mentioned by tutor in video(font awesome).

4- Get respective css file from site mentioned by tutor(or we could ours too Smilie ).

5- Create HTML file with all necessary tags, important thing is to mention CSS file link into <head> tag then create <div> tags for having components in them. Have a <div> tag for containing HTML code which will be generated by JS after reading JSON file(NOTE: We always create HTML components by their id or class names so that we can later access them in JS file and we create a place for html(which is coming from JS) too, to show it on page.)

6- Create JS file(where we will create 2 main functions, 1st is to fetch json values from JSON file and keep it into an array. We will also put regex in it to make sure any character is matching from array's value should come in output. 2nd function is for creating HTML file from array which we got from 1st function, later we will pass this newly created HTML output into tag which we created in HTML file to hold these values.

I have followed tutorial and created it, will try to do some more experiments with UI by adding few of my thoughts and share with everyone here.


@Neo, also I could try this for forum's user's search functionality too(which we discussed sometime back) Smilie May be when get some more hands on.


Thanks,
R. Singh

Last edited by RavinderSingh13; 04-29-2019 at 08:02 AM..
This User Gave Thanks to RavinderSingh13 For This Post:
# 25  
Yes we can use the ideas in that video for the forums

Glad you found that tutorial helpful, Ravinder.

Great job! Well done!
This User Gave Thanks to Neo For This Post:
# 26  
Quote:
Originally Posted by RavinderSingh13
Thanks a TON Neo for letting me/us know this great video. I have gone through it, I understood the concept of it but syntax vice it will take sometime Smilie

Let me put my learning from the video in points here.

1- Create a folder structure where we can keep fake json data, html file, JS file and CSS file.

...
Hey Ravinder,

In that tutorial, FYI only, the data was not fake. That is real JSON data about a real subject.
This User Gave Thanks to Neo For This Post:
Login or Register for Dates, Times and to Reply

Previous Thread | Next Thread
Thread Tools Search this Thread
Search this Thread:
Advanced Search

Test Your Knowledge in Computers #1003
Difficulty: Medium
In the 1970s, Grace Hopper, also known as "Grandma COBOL", pushed for the Defense Department to replace large, centralized systems with networks of small, distributed computers.
True or False?

7 More Discussions You Might Find Interesting

1. Web Development

Google Trends: react.js angular.js vue.js

While I'm on the subject of Google trends, here is a global trend since 2004 comparing react.js, angular.js, vue.js It's no secret I'm a vue.js fan and coder, but not because of the trend line (which I just saw for the first time a few minutes ago) My experience is that vue.js, a late arrival... (0 Replies)
Discussion started by: Neo
0 Replies

2. Web Development

Simple Vue.js Component to Redirect to External Web Page Using Vue Router

Vue Router has some quirks and on of the quirks is that it is not reliable when adding external links using the vue-router library. After struggling with many solutions, I have found that creating a simple Vue.js component like this one seems to work the best (so far): Component Example: ... (0 Replies)
Discussion started by: Neo
0 Replies

3. Web Development

HTML down, CSS help, ahhhh

I am having some problems. I have been able to learn HTML, but when I try and encode CSS, nothing happens, what is the major issue here. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>MY CSS</title> <style... (7 Replies)
Discussion started by: N-Training
7 Replies

4. Programming

Looking For the Best Way to Rotate an Image: JavaScript, PHP, HTML etc

Hey All, What I'm looking for is a way to rotate an image by non 90 degree angles (ie 90, 180, 270, 360). I am able to do it in PHP, but there are errors in the image, some pixels end up colored incorrectly and the image ends up resized and I lose transparency. I've done my share of searching on... (1 Reply)
Discussion started by: pmd006
1 Replies

5. Web Development

Learning HTML

I have tried to create a web page browser window. An example, I copied what the book pretty much wanted but get only the header. What should I change? Also Anyone know any good books for this? Many thanks. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Translation/EN" ... (4 Replies)
Discussion started by: N-Training
4 Replies

6. Shell Programming and Scripting

Javascript or HTML to retrieve apache username

I have a internal wesbite set up and any visitor must enter username / passwd as defined in apache (I've set these up using htpasswd) I use cgi scripts set up using ksh or javascript to populate pages / tables etc. I want to be able to get the apache username that the used authorised... (3 Replies)
Discussion started by: frustrated1
3 Replies

7. Web Development

Help with passing HTML values in to JavaScript

Not sure if this is the right place to ask this but here goes. I am creating a cheat sheet for co-workers. The concept is that you pick wire size and conduit size and the amount of wires that will fit is displayed. I haven't used alot of drop downs and can't quite figure out the way the get id... (3 Replies)
Discussion started by: zero3ree
3 Replies

Featured Tech Videos