The way things are done now?

[Mr. Black]

I know basic HTML and a tiny bit of CSS.

Things have changed majorly in the landscape, and I need to catch up on current practices.

For example, I just read that most sites are now serving content via HTTPS instead of HTTP because it's not only secure, but apparently faster.

These are the changes I need to know and why.

 

Is there some guide that can tell me what's current/best practices without a ton of reading?

[firey]

Easiest way is to look at how sites like Google, Microsoft, Pintrest, etc handle things.

[Mr. Black]

Well seeing the customer facing site doesn't exactly tell me what's going on behind the scenes ?

[exotoxic]

https://en.wikipedia.org/wiki/HTTP/2

[game_over]

What exactly are you trying to achieve? your question is quite broad.

Are you trying to brush up on certain languages, technologies or simply all of modern web development? In any case, you should decide which languages you want to focus on.

 

HTTPS doesn't need much attention.. just know that it should now be used as standard, why? it's more secure, new browsers will mark your website as unsecure if not using it, Google prefers (it is a minor ranking signal). As far a development goes, and 'serving content' just make sure you're not forcing anything to be loaded as http (usually caused by referencing the full url with protocol of assets) use relative paths and you're generally good to go...

[Jose_49]

On 5/1/2018 at 10:31 AM, Mr. Black said:

I know basic HTML and a tiny bit of CSS.

Things have changed majorly in the landscape, and I need to catch up on current practices.

For example, I just read that most sites are now serving content via HTTPS instead of HTTP because it's not only secure, but apparently faster.

These are the changes I need to know and why.

 

Is there some guide that can tell me what's current/best practices without a ton of reading?

That's a tough nut to crack. I was on the same boat, and on 2016 I decided to do something about it. Today, at least I'm a little bit aware of what's going on (There's a lot going on).

 

This is how I get up to date: 

• InfoQ https://infoq.com
• Google Chrome's Developer Channel https://www.youtube.com/user/ChromeDevelopers
• JSConf Channel: https://www.youtube.com/channel/UCzoVCacndDCfGDf41P-z0iA
• Thoughtworks Radar: https://www.thoughtworks.com/radar
• Smashing Magazine https://www.smashingmagazine.com

I also use feedly (Configured for tech, web development, SEO), and read it once a day:

https://feedly.com

 

What's up with the web today (Not listed in order of importance): 

 

I'm going to throw super technical terms, just so you go and Google them. There's a lot to learn:

• GPDR (https://www.eugdpr.org) - Super Important, even if you're not from Europe. 
• HTTP/2 - HTTPS is not required for the standard. But the browsers are requiring it. Therefore it won't work on traditional HTTP. There's a service called Let's Encrypt that gives it for free (Needs renewal each 90 days). There's an app called certbot. HTTP/2 allows for something called multiplexing, and server push. 
• Bundlers - Webpack
• HTML 5.1
• SPA (Single Page Applications) with libraries such as React; frameworks such as Vue, Angular, Aurelia. 
• PWA (Progressive Web Applications) - https://developers.google.com/web/progressive-web-apps/
  • Basically it's: 
  • App Shell Architecture (Only load what the user needs to see in the first "paint"). Google more about First Meaningful Paint, and TTI (Time To Interaction)
  • Works offline with a technology called Service Workers. 
  • Notifications. 
  • Installable on Android devices.
  • You should aim to have whatever you're presenting to the user loaded in less than 3 seconds under regular 3G. Most new users are starting to enter the web in mobile devices, and we need to cater for that. Google will start penalizing sites with slow load times. 
• Google Pagespeed, SEO, and how Google will start penalizing sites that have a low FCP, aren't mobile friendly, and aren't using HTTPS. (See above)
• Machine Learning, which includes the overhyped Deep Learning (This is just starting to pick up). I've learned that it's overrated, and it's not a silver bullet. You are going to see the likes of Tensorflow, Keras, Gluon more common. There are courses in Coursera, and there's a paper from Gray Marcus that is worth reading. Check Reddit's Machine Learning community for more info. 
• ECMAScript 2015+ (Previously known as ES6). This is JavaScript's standard. It started to come out annually. People use Babel as a mechanism.
• JavaScript streams + Server Side Rendering. (To boast super high efficient web apps). 
• Functional Programming in JavaScript, and the concept of immutability,
• JavaScript Linters such as eslint with the AirBnB configuration (You'd learn a ton from their GitHub page)
• TypeScript
• Web Assembly (WASM)
• Container, and Container Orchestration Systems: Docker, Kuberentes (Respectively).
• Serverless Applications and services such as Amazon Lambda, Firebase, DynamoDB. Azure Functions. 
• Puppet, Ansible, Chef for spinning up servers on the premises. 
• Continuous Integration, Continuous Delivery, Continuous Deployment (Look for the differences, generally the Qones in last contain an additional step than the previous one didn't include).
• The dreaded and loosely understood "Microservices" architecture. 
• CSS Grids. Post-CSS, Auto-Prefixer, CSS Preprocessors such as SCSS (Sass). 
• Web Components standard (It hasn't picked up. People prefer using libraries such as React, and frameworks such as Angular) 
• WebXR, also known as Web Mixed Reality: Web AR + WebVR (Web Augmented Reality + Web Virtual Reality)
• Analytics: Facebook Pixel, Google Analytics + others.
• CSS Frameworks such as Bootstrap, Foundation are still used. 
• jQuery has slimmed down considerably over the years. I try to use the platform before recurring to jQuery. Haven't used it unless a library requires it.

 

There's probably a couple of things that I'm missing. Those are the ones that are coming to mind right now.

 

Edit, here's some more info: Server Side Languages: 

 

• PHP is still being used. It's a major player in the freelancing space. Anyone who tells you that this is complete and utter garbage, you can safely disagree. PHP has gotten better over the years with Facebook's HHVM and the glorious release of PHP 7. Wordpress, Facebook, Wikipedia are done in PHP (at least some of their parts). 
• C#/F# with ASP.NET Core. Very underrated IMO. There's a lot going on there. It's a Microsoft framework for web development. It's powerful, and it gets a lot done in little to no time. But, as any technology there's a big learning curve that comes with it. 
• JavaScript with the likes of NodeJS. The defacto runtime environment for JavaScript on the server. Most people use it because: 1) You don't have to learn a new syntax 2) You could theoretically move people from the front-end to the back-end without too much trouble. 
• Ruby with Ruby on Rails framework. Still used today, although it's been eaten by the popularity from Node. Still has a very mature base, and syntactically it hasn't changed over the years (A good tutorial from 2008 should work fine today!)
• Java, and its MVC Spring framework. You don't get to see this very often. Java is dreaded by many people. But according to my research, all of this bias is pure nonsense. I haven't' seen a good claim, other than the slow days of the JVM. Java is king when it comes to processing vast amount of data (Especially with Hadoop) 

Edited May 2, 2018 by Jose_49

[satukoro]

6 minutes ago, Jose_49 said:

That's a tough nut to crack. I was on the same boat, and on 2016 I decided to do something about it. Today, at least I'm a little bit aware of what's going on (There's a lot going on).

  

This is how I get up to date: 

• InfoQ https://infoq.com 
• Google Chrome's Developer Channel https://www.youtube.com/user/ChromeDevelopers
• JSConf Channel: https://www.youtube.com/channel/UCzoVCacndDCfGDf41P-z0iA
• Thoughtworks Radar: https://www.thoughtworks.com/radar
• Smashing Magazine https://www.smashingmagazine.com 

I also use feedly (Configured for tech, web development, SEO), and read it once a day:

https://feedly.com

 

What's up with the web today (Not listed in order of importance): 

 

I'm going to throw super technical terms, just so you go and Google them. There's a lot to learn:

• GPDR (https://www.eugdpr.org) - Super Important, even if you're not from Europe. 
• HTTP/2 - HTTPS is not required for the standard. But the browsers are requiring it. Therefore it won't work on traditional HTTP. There's a service called Let's Encrypt that gives it for free (Needs renewal each 90 days). There's an app called certbot. HTTP/2 allows for something called multiplexing, and server push. 
• Bundlers - Webpack
• HTML 5.1
• SPA (Single Page Applications) with libraries such as React; frameworks such as Vue, Angular, Aurelia. 
• PWA (Progressive Web Applications) - https://developers.google.com/web/progressive-web-apps/
  • Basically it's:  
  • App Shell Architecture (Only load what the user needs to see in the first "paint"). Google more about First Meaningful Paint, and TTI (Time To Interaction) 
  • Works offline with a technology called Service Workers. 
  • Notifications.  
  • Installable on Android devices. 
• Google Pagespeed, SEO, and how Google will start penalizing sites that have a low FCP, aren't mobile friendly, and aren't using HTTPS. 
• Machine Learning, which includes the overhyped Deep Learning (This is just starting to pick up). I've learned that it's overrated, and it's not a silver bullet. You are going to see the likes of Tensorflow, Keras, Gluon more common. There are courses in Coursera, and there's a paper from Gray Marcus that is worth reading. Check Reddit's Machine Learning community for more info. 
• ECMAScript 2015+ (Previously known as ES6). This is JavaScript's standard. It started to come out annually. People use Babel as a mechanism.
• JavaScript streams + Server Side Rendering. (To boast super high efficient web apps). 
• TypeScript
• Web Assembly (WASM)
• Container, and Container Orchestration Systems: Docker, Kuberentes (Respectively). 
• Serverless Applications and services such as Amazon Lambda, Firebase, DynamoDB. Azure Functions. 
• Puppet, Ansible, Chef for spinning up servers on the premises. 
• Continuous Integration, Continuous Delivery, Continuous Deployment (Look for the differences, generally the Qones in last contain an additional step than the previous one didn't include).
• The dreaded and loosely understood "Microservices" architecture.  
• CSS Grids. Post-CSS, Auto-Prefixer, CSS Preprocessors such as SCSS (Sass).  
• Web Components standard (It hasn't picked up. People prefer using libraries such as React, and frameworks such as Angular)  
• WebXR, also known as Web Mixed Reality: Web AR + WebVR (Web Augmented Reality + Web Virtual Reality) 

There's probably a couple of things that I'm missing. Those are the ones that are coming to mind right now.

I just kind of stumbled upon this thread, but thank you for the time put into this post! I'm a hobbyist web dev who deals mostly with Python/Django and Wordpress and this is extremely useful for those who used to know how to make websites back when HTML4 came out.

[greenwizard88]

HTTP2 is taken care of by the server. Likewise, HTTPS is a server side configuration.

 

HTML and CSS have been replaced with react and angular2 frameworks, and there's an entire software stack dedicated to compiling your client code into JS. This code gets downloaded and talks to the backend via an API. Front and back end are separate. There's a whole lot to learn if you're coming from a late 90's knowledgebase. Good luck!

[Jose_49]

2 minutes ago, satukoro said:

I just kind of stumbled upon this thread, but thank you for the time put into this post! I'm a hobbyist web dev who deals mostly with Python/Django and Wordpress and this is extremely useful for those who used to know how to make websites back when HTML4 came out.

Absolutely!

You have a nice lead when it comes to Python. Python is getting a lot of attention, due to being a powerful programming language for Data Science. The libraries such as Numpy and Pandas are implemented in C++, exposed with a Python API. Knowing how to handle Arrays, splices, and so on can give you a higher and better understanding when using the libraries I mentioned (Gluon, Keras, Tensorflow)

3 minutes ago, greenwizard88 said:

HTTP2 is taken care of by the server. Likewise, HTTPS is a server side configuration.

 

HTML and CSS have been replaced with react and angular2 frameworks, and there's an entire software stack dedicated to compiling your client code into JS. This code gets downloaded and talks to the backend via an API. Front and back end are separate. There's a whole lot to learn if you're coming from a late 90's knowledgebase. Good luck!

Technically speaking HTML and CSS are still used. Angular and React are built upon HTML and CSS, and you still use HTML and CSS to build with them. 

 

I personally try to avoid a library or a framework unless they're completely necessary. They introduce too much overhead (Longer page loads) if the application is too simple. Each 50 ms you add to page load has a higher potential of a user bouncing off the site before seeing it.

[exotoxic]

7 minutes ago, Jose_49 said:

I personally try to avoid a library or a framework unless they're completely necessary.

There is also the issue that your not actually learning the underlying language.