We are trying to boil up web creation & development process to reduce it to the essential. [Advertising] www.phpninja.es Web Repair, Bug Fixing and Maintenance Services.

¿What is a website? ¿How we make them? Our objective is to generate new knowledge by reviewing the essentials, and use that new knowledge to improve web development process and website creation.

A website is anything that can be interpreted by a browser.

• HTML, CSS, JS & TEXT
• Desktop x Mobile Devices x Tablets x Browsers x Versions
• Not persistent.
• Paradigm: API <> Front (newer).
• Paradigm: All server side rendered (old) WordPress*.
• Simulate Persistency: Local Storage + Server backend + real time data
• Events happening: sync / async
• UI [Sync]
• [Async] Observables https://github.com/sindresorhus/awesome-observables#readme

• Get information (any kind)
• Accomplish a task or goal (including ecommerce)
• Entertainment (News, Games and Porn)

• LIST (DATA)
• SEARCH (DATA)
• FILTER (DATA)
• SHARE (DATA)
• UPLOAD (FILES)
• DOWNLOAD (FILES)
• ADD / EDIT / UPDATE / REMOVE (DATA)
• Data Insights, Knowledge

• Information architecture

A browser is anything that can interprete HTML. A modern browser can include and evaluate JS files and render CSS rules.

• Information exchange SERVER <> CLIENT
• The DOM
• The BOM (Browser Object Model)
• Browser APIS: http://browserapis.wtf/ / https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API/Using
• Browser variations. Engines.
• Local & Session storage
• Browser ->uses Server ->uses Website ->uses some HTML generator backend

• External / Internal source
• Payloads: Formats. Json / xml / even rendered html.
• Fixtures
• Mocks

• HTTP Server
• HTTPS
• HTTP Status Codes

• Content Scanning, heat maps
• Elements: Position & Size
• Hierarchiy & Taxonomy: Information architecture

• Accesibility
• Goal: Complete tasks, get information, get entertained.
• web 1.0, web 2.0
• Localization: USD/Spanish/America [CURRENCY | LANGUAGE | GEO LOCATION]
• Web Performance Optimization: https://github.com/davidsonfellipe/awesome-wpo#readme

• Cut the mustard
• Progressive Enhacement https://github.com/TalAter/awesome-progressive-web-apps#readme
• Degrade to desktop

• Head
• Metas

• From Server side
• From Javascript
• Hardcode
• HTML can exist without CSS and JS. Needs a browser to run.

• Clases / Ids
• Inline styles
• Media Queries. Responsive.
• Frameworks
• Hardcode
• Mobile First
• Needs at least 1 HTML element to run
• Critical Path CSS https://github.com/addyosmani/critical-path-css-tools#readme
• PostCSS

• Must Watch Videos about Javacript: https://github.com/bolshchikov/js-must-watch#readme
• Frameworks
• asyn / sync
• jquery
• ESx Javascript syntax
• AJAX: based on a feature that was ignored for long
• Needs HTML env to run(?)

• Images, Fonts, Icons

• Builds
• Git
• Jenkins
• Automatic Tests
• Deploy

• UI interactions
• Responsive ?
• Errors in Console. Not monitored real time.
• Errors in UI or CSS. "Need the human to review".

• Forms / Urls
• https://github.com/qazbnm456/awesome-web-security#readme
• Pentesting: https://github.com/meitar/awesome-lockpicking#readme

• By doing
• Online Sources: Courses and Reference.

• Is web evolution progress? How to measure real progress.
• Important KPIs for Web development

• https://frontendmasters.com/books/front-end-handbook/2018/learning/ui-design-patterns.html
• http://browserapis.wtf/
• https://developer.mozilla.org/en-US/docs/Mozilla/Gecko/Chrome/API/Browser_API/Using
• Curated list of Awesome lists https://github.com/sindresorhus/awesome