This repository is a compilation of useful information related to Web applications or Web development.
Understand boxes where everything is a box on a web page. To confirm this, open a web page in a browser and then try to inspect the elements of the web page. Here is another link to inspect the elements for understanding CSS details or using device emulation to visualize content on different devices.
CodePen and JSFiddle online playground for HTML.
Tailwind playground for CSS, try this and docs
Sample product/tool page uses HTML, Tailwind, Astro, Netlify-build, and GitHub repo.
RunJS playground for JavaScript to check syntax and basic testing of the script.
Codepen for side-by-side HTML, CSS, and Javascript editor windows to visualize code for web apps.
JavaScript-based websites and web apps leverage JavaScript frameworks and some popular technology stacks. JavaScript frameworks do change pretty fast, and there is a new name very often!
e.g., Node.js, Angular, Vue.js, Next.js, React, Svelte, etc. Because of these changes, stack shifts MEAN, MEVN, MERN, and others.
Front End Javascript Framework - React, Angular or Vue
DB Playground to try some queries
Railway.app - simple to start PostgreSQL/MySQL/MongoDB instance in cloud in minutes.
It has become imperative for developers to understand and design APIs to connect or integrate with so many other software or services.
Here is an online book on API-first world to emphasize API-first initiatives to produce and consume software and services. The way we consume APIs for bank payment gateways, online payments (UPI, stripe, etc.), and user messaging (SMS, Telegram, WhatsApp, etc.), for large software to survive with rapid changes in technologies, designers, and developers should pay attention to API-first approach if the software/service is online.
OpenAPI specification for RESTful APIs
Can I use - to see browser support for front-end web technologies. For example, look for querySelector
SSR web frameworks, SSR with React, another example
Browser permissions to simulate how the browser asks certain permissions courtesy to Felt.
Detecting device type in a web application or browser
Pay attention to security aspects while you develop portals. Security of web applications should not be an afterthought or left to other teams. Utilize free tools and websites for OSINT or Web Intelligence (WebINT). These steps could improve the ranking of your websites/portals.
Check your website's HTTP response headers, TLS certificates (X.509), (vulnerable or outdated) libraries used, consider VAPT, etc.
$ curl -I tryhackme.com
HTTP/1.1 301 Moved Permanently
Date: Mon, 01 Apr 2024 16:21:34 GMT
Connection: keep-alive
Cache-Control: max-age=3600
Expires: Mon, 01 Apr 2024 17:21:34 GMT
Location: https://tryhackme.com/
Server: cloudflare
CF-RAY: 86d9e9bbcc4b5514-DEL
$ curl -I example.com
HTTP/1.1 200 OK
Accept-Ranges: bytes
Age: 22884
Cache-Control: max-age=604800
Content-Type: text/html; charset=UTF-8
Date: Mon, 01 Apr 2024 16:21:59 GMT
Etag: "3147526947"
Expires: Mon, 08 Apr 2024 16:21:59 GMT
Last-Modified: Thu, 17 Oct 2019 07:18:26 GMT
Server: ECS (nyd/D132)
X-Cache: HIT
Content-Length: 1256
Robots Exclusion Protocol or Robots.txt file is a standard that tells crawlers or search engines which pages they are and are not allowed to show on their search engine results or disallow specific search engines from crawling the website altogether. Reference: http://www.robotstxt.org/robotstxt.html
A robots.txt file consists of one or more rules on each line. Each rule blocks or allows access for all or a specific crawler to a specified file path on the domain or subdomain where the robots.txt file is hosted. Note that unless you specify otherwise in your robots.txt file, all files are implicitly allowed for crawling.
# robots.txt
#
# This file is to prevent the crawling and indexing of certain parts <==
# of your site by web crawlers and spiders run by sites like Yahoo! <==
# and Google. By telling these "robots" where not to go on your site, <==
# you save bandwidth and server resources. <==
#
# This file will be ignored unless it is at the root of your host:
# Used: http://example.com/robots.txt
# Ignored: http://example.com/site/robots.txt
#
# For more information about the robots.txt standard, see:
# http://www.robotstxt.org/robotstxt.html
User-agent: Bing <== disallow crawling by Bing
Disallow: /
User-agent: *
Crawl-delay: 10
# Directories <==
Disallow: /includes/
Disallow: /misc/
Disallow: /modules/
Disallow: /profiles/
Disallow: /scripts/
Disallow: /themes/
# Files <==
Disallow: /CHANGELOG.txt
Disallow: /cron.php
Disallow: /INSTALL.mysql.txt
Disallow: /INSTALL.pgsql.txt
Disallow: /INSTALL.sqlite.txt
Disallow: /install.php
Disallow: /INSTALL.txt
Disallow: /LICENSE.txt
Disallow: /MAINTAINERS.txt
Disallow: /update.php
Disallow: /UPGRADE.txt
Disallow: /xmlrpc.php
# Paths (clean URLs) <==
Disallow: /admin/
Disallow: /comment/reply/
Disallow: /filter/tips/
Disallow: /node/add/
Disallow: /search/
Disallow: /user/register/
Disallow: /user/password/
Disallow: /user/login/
Disallow: /user/logout/
Disallow: /node/
Disallow: /node/*
# Paths (no clean URLs) <==
Disallow: /?q=admin/
Disallow: /?q=comment/reply/
Disallow: /?q=filter/tips/
Disallow: /?q=node/add/
Disallow: /?q=search/
Disallow: /?q=user/password/
Disallow: /?q=user/register/
Disallow: /?q=user/login/
Disallow: /?q=user/logout/
SITEMAP: https://www.mysite.ac.in/sitemap.xml
OWASP favicon database can be used to enumerate fingerprints (MD5 hashes) of known favicon files (favicon. ico) that are used on the websites. e.g. MD5 hash fa54dbf2f61bd2e0188e47f5f578f736 corresponds to WordPress, and MD5 hash d037ef2f629a22ddadcf438e6be7a325 for PHPMyAdmin. Thus, favicon files can help you find software on the website.
ModSecurity - Open Source Web Application Firewall (WAF) engine to filter HTTP requests and responses based on rules.
From the project page: Libmodsecurity is one component of the ModSecurity v3 project. The library codebase is an interface to ModSecurity Connectors, which take in web traffic and apply traditional ModSecurity processing. In general, it provides the capability to load/interpret rules written in the ModSecurity SecRules format and apply them to HTTP content provided by your application via Connectors.
Scratch - this should be encouraged before any programming
RunJS playground for JavaScript
CodePen for HTML/CSS/JavaScript
railway.app for DB in the cloud - now it's paid
Online GDB - good for C/C++
cplayground.com - for C/C++, uses clang compiler front-end from LLVm project.
Learning multiple tools (like the Swiss Army Knife) is essential for web developers. They can improve productivity during the development.
Some great tools I have come across recently:
Open Source Form Builder Framework for Vue JS
Netlify to deploy after pushing code from github
What technology is the website built with?
Web application servers can host multiple websites with different domain or sub-domain names. For this, they use virtual hosts. The web server checks the hostname requested from the HTTP headers and matches that against its virtual hosts. Virtual hosts are just text-based configuration files. If it finds a match, the correct website will be provided. If no match is found, the default website will be provided instead.
Note: Creating virtual host configurations on a web server does not create DNS entries for those host names. You must have or create the Address/CNAME records in DNS server resolving to the required IP address, or nobody else will be able to see your website.
Virtual Hosts can have their root directory mapped to different locations on the server hard drive. For example, eg.com is mapped to /var/www/eg, egdev.com is mapped to /var/www/egdev and egsec.com is mapped to /var/www/egsec directory (for Apache/Nginx server). Several combinations are possible with IP, ports, name-based hosts, and URL redirects.
There is no limit to the number of websites you can host on a web server.
Flavio Copes' website and online books
Great Bootcamp for Full-Stack Web Developer
Quincy Larsen's website and check this out on Responsive Web Design
The Missing Link - Web development and programming
Some links on Low code, No code
WCAG - Web Content Accessibility Guidelines and WCAG-2.1 guidelines are technical standards that help make the digital world accessible to people with disabilities.
Online whiteboard by excalidraw - open anywhere, save data locally in the browser, with nice and handy drawing tools
We Present - Plastic Free or how to publish a book - an elegant design with pictures and scroll. Zoom in a picture and play the slide show :)
Layoffs.fyi - see the airtable in action.
Simplify internship portal - a different grid/tiles for internships.
IGNCA website - a trove of information for art lovers.
Cotton Bee - notice the design elements in the slider, sidebars, highlight headings on hover, footer, etc.
Amazon dogs - liked the template page
Bathroom & Plumbing Glossary - I loved the simplicity of the glossary and the classified listing of items with a picture that anyone can understand.
McMaster Carr website and a video on why McMaster Carr is so fast - I loved the simplicity of design and the listing of items.
Professor GEORGE PALLIS personal web page
Jai Hind Project to celebrate Heros
Notice Board can reduce internal emails
A little better way to show links, even better with tiles having logo and text
India Stack (No Greed No Glory)
World Time Buddy - compare time zones and get a link to selected time zones to schedule meetings/calls.