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