Arik Chakma
3 months ago
commit
7e0dd7dd51
144 changed files with 2665 additions and 1060 deletions
@ -0,0 +1 @@ |
||||
/// <reference types="astro/client" />
|
||||
@ -0,0 +1,16 @@ |
||||
name: Clears API Cloudfront Cache |
||||
on: |
||||
workflow_dispatch: |
||||
jobs: |
||||
aws_costs: |
||||
runs-on: ubuntu-latest |
||||
steps: |
||||
- name: Clear Cloudfront Caching |
||||
run: | |
||||
curl -L \ |
||||
-X POST \ |
||||
-H "Accept: application/vnd.github+json" \ |
||||
-H "Authorization: Bearer ${{ secrets.GH_PAT }}" \ |
||||
-H "X-GitHub-Api-Version: 2022-11-28" \ |
||||
https://api.github.com/repos/roadmapsh/infra-ansible/actions/workflows/playbook.yml/dispatches \ |
||||
-d '{ "ref":"master", "inputs": { "playbook": "roadmap_web.yml", "tags": "cloudfront-api", "is_verbose": false } }' |
||||
@ -1,4 +1,4 @@ |
||||
name: Clears Cloudfront Cache |
||||
name: Clears Frontend Cloudfront Cache |
||||
on: |
||||
workflow_dispatch: |
||||
jobs: |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,227 @@ |
||||
import React, { useState } from 'react'; |
||||
import { CheckIcon } from './ReactIcons/CheckIcon.tsx'; |
||||
import { pageProgressMessage } from '../stores/page.ts'; |
||||
import { httpPost } from '../lib/http.ts'; |
||||
|
||||
type InputProps = { |
||||
label: string; |
||||
name: string; |
||||
type: string; |
||||
value: string; |
||||
onChange: ( |
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, |
||||
) => void; |
||||
required?: boolean; |
||||
rows?: number; |
||||
}; |
||||
|
||||
function Input(props: InputProps) { |
||||
const { label, name, type, value, onChange, required, rows } = props; |
||||
return ( |
||||
<div className="mb-4"> |
||||
<label htmlFor={name} className="block text-sm font-medium text-gray-700"> |
||||
{label} {required && <span className="text-red-500">*</span>} |
||||
</label> |
||||
{type === 'textarea' ? ( |
||||
<textarea |
||||
placeholder={label} |
||||
id={name} |
||||
name={name} |
||||
value={value} |
||||
onChange={onChange} |
||||
rows={rows} |
||||
className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" |
||||
autoComplete="off" |
||||
data-1p-ignore="" |
||||
data-form-type="other" |
||||
data-lpignore="true" |
||||
></textarea> |
||||
) : ( |
||||
<input |
||||
type={type} |
||||
id={name} |
||||
placeholder={label} |
||||
name={name} |
||||
value={value} |
||||
onChange={onChange} |
||||
required={required} |
||||
className="mt-1 block w-full rounded-md border border-gray-300 p-2 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" |
||||
autoComplete="off" |
||||
data-1p-ignore="" |
||||
data-form-type="other" |
||||
data-lpignore="true" |
||||
/> |
||||
)} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export function AdvertiseForm() { |
||||
const [status, setStatus] = useState<'submitting' | 'submitted'>(); |
||||
const [error, setError] = useState<string | null>(null); |
||||
|
||||
const [formData, setFormData] = useState({ |
||||
firstName: '', |
||||
lastName: '', |
||||
title: '', |
||||
company: '', |
||||
email: '', |
||||
phone: '', |
||||
message: '', |
||||
updates: false, |
||||
}); |
||||
|
||||
const handleInputChange = ( |
||||
e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, |
||||
) => { |
||||
const { name, value, type, checked } = e.target as any; |
||||
setFormData({ |
||||
...formData, |
||||
[name]: type === 'checkbox' ? checked : value, |
||||
}); |
||||
}; |
||||
|
||||
async function handleSubmit(e: React.FormEvent) { |
||||
e.preventDefault(); |
||||
|
||||
pageProgressMessage.set('Please wait'); |
||||
|
||||
// Placeholder function to send data
|
||||
console.log('Form data:', formData); |
||||
|
||||
const { response, error } = await httpPost( |
||||
`${import.meta.env.PUBLIC_API_URL}/v1-advertise`, |
||||
formData, |
||||
); |
||||
if (!response || error) { |
||||
pageProgressMessage.set(''); |
||||
setError(error?.message || 'Something went wrong. Please try again.'); |
||||
return; |
||||
} |
||||
|
||||
setStatus('submitted'); |
||||
pageProgressMessage.set(''); |
||||
} |
||||
|
||||
if (status === 'submitted') { |
||||
return ( |
||||
<div className="flex flex-col items-center justify-center rounded-md border bg-gray-50 p-12 text-center"> |
||||
<CheckIcon additionalClasses="h-12 w-12 text-green-500 mb-5" /> |
||||
<h2 className="text-balance text-xl font-semibold text-gray-900"> |
||||
Thank you for your interest in advertising with roadmap.sh |
||||
</h2> |
||||
<p className="mt-2 text-sm text-gray-500"> |
||||
We will get back to you soon. |
||||
</p> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
return ( |
||||
<> |
||||
<h2 className="mb-5 text-balance text-2xl font-bold"> |
||||
Ready to learn more? Fill out the form below to get started! |
||||
</h2> |
||||
{error && ( |
||||
<div className="relative mb-4 rounded border border-red-400 bg-red-100 px-4 py-3 text-red-700"> |
||||
{error} |
||||
</div> |
||||
)} |
||||
<form className="mb-5" onSubmit={handleSubmit}> |
||||
<div className="grid gap-0 sm:grid-cols-2 sm:gap-4"> |
||||
<Input |
||||
label="First Name" |
||||
name="firstName" |
||||
type="text" |
||||
value={formData.firstName} |
||||
onChange={handleInputChange} |
||||
required |
||||
/> |
||||
<Input |
||||
label="Last Name" |
||||
name="lastName" |
||||
type="text" |
||||
value={formData.lastName} |
||||
onChange={handleInputChange} |
||||
required |
||||
/> |
||||
</div> |
||||
|
||||
<div className="grid gap-0 sm:grid-cols-2 sm:gap-4"> |
||||
<Input |
||||
label="Title" |
||||
name="title" |
||||
type="text" |
||||
value={formData.title} |
||||
onChange={handleInputChange} |
||||
required |
||||
/> |
||||
|
||||
<Input |
||||
label="Company" |
||||
name="company" |
||||
type="text" |
||||
value={formData.company} |
||||
onChange={handleInputChange} |
||||
required |
||||
/> |
||||
</div> |
||||
|
||||
<div className="grid gap-0 sm:grid-cols-2 sm:gap-4"> |
||||
<Input |
||||
label="Email" |
||||
name="email" |
||||
type="email" |
||||
value={formData.email} |
||||
onChange={handleInputChange} |
||||
required |
||||
/> |
||||
|
||||
<Input |
||||
label="Phone" |
||||
name="phone" |
||||
type="tel" |
||||
value={formData.phone} |
||||
onChange={handleInputChange} |
||||
/> |
||||
</div> |
||||
|
||||
<Input |
||||
label="Message (Optional)" |
||||
name="message" |
||||
type="textarea" |
||||
value={formData.message} |
||||
onChange={handleInputChange} |
||||
rows={4} |
||||
/> |
||||
<div className="mb-4 flex items-start"> |
||||
<div className="flex h-5 items-center"> |
||||
<input |
||||
id="updates" |
||||
name="updates" |
||||
type="checkbox" |
||||
checked={formData.updates} |
||||
onChange={handleInputChange} |
||||
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" |
||||
/> |
||||
</div> |
||||
<div className="ml-3 text-sm"> |
||||
<label htmlFor="updates" className="font-medium text-gray-700"> |
||||
I want to receive occasional updates about new products or |
||||
advertising opportunities with roadmap.sh |
||||
</label> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<button |
||||
type="submit" |
||||
className="flex justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" |
||||
> |
||||
Send |
||||
</button> |
||||
</div> |
||||
</form> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,17 @@ |
||||
interface FacebookIconProps { |
||||
className?: string; |
||||
} |
||||
|
||||
export function FacebookIcon(props: FacebookIconProps) { |
||||
const { className } = props; |
||||
return ( |
||||
<svg |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
viewBox="0 0 448 512" |
||||
fill="currentColor" |
||||
className={className} |
||||
> |
||||
<path d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z" /> |
||||
</svg> |
||||
); |
||||
} |
||||
@ -1,49 +1,29 @@ |
||||
type LinkedInIconProps = { |
||||
interface LinkedInIconProps { |
||||
className?: string; |
||||
}; |
||||
} |
||||
|
||||
export function LinkedInIcon(props: LinkedInIconProps) { |
||||
const { className } = props; |
||||
|
||||
return ( |
||||
<svg |
||||
width="24" |
||||
height="24" |
||||
viewBox="0 0 24 24" |
||||
fill="none" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
className={className} |
||||
x="0px" |
||||
y="0px" |
||||
width="100" |
||||
height="100" |
||||
viewBox="0,0,256,256" |
||||
> |
||||
<g transform="translate(-26.66667,-26.66667) scale(1.20833,1.20833)"> |
||||
<g |
||||
fill="none" |
||||
fillRule="nonzero" |
||||
stroke="none" |
||||
strokeWidth="1" |
||||
strokeLinecap="butt" |
||||
strokeLinejoin="miter" |
||||
strokeMiterlimit="10" |
||||
strokeDasharray="" |
||||
strokeDashoffset="0" |
||||
fontFamily="none" |
||||
fontWeight="none" |
||||
fontSize="none" |
||||
textAnchor="none" |
||||
style={{ mixBlendMode: 'normal' }} |
||||
> |
||||
<g transform="scale(5.33333,5.33333)"> |
||||
<path |
||||
d="M42,37c0,2.762 -2.238,5 -5,5h-26c-2.761,0 -5,-2.238 -5,-5v-26c0,-2.762 2.239,-5 5,-5h26c2.762,0 5,2.238 5,5z" |
||||
fill="#0288d1" |
||||
></path> |
||||
<g clipPath="url(#clip0_2344_20)"> |
||||
<path |
||||
d="M12,19h5v17h-5zM14.485,17h-0.028c-1.492,0 -2.457,-1.112 -2.457,-2.501c0,-1.419 0.995,-2.499 2.514,-2.499c1.521,0 2.458,1.08 2.486,2.499c0,1.388 -0.965,2.501 -2.515,2.501zM36,36h-5v-9.099c0,-2.198 -1.225,-3.698 -3.192,-3.698c-1.501,0 -2.313,1.012 -2.707,1.99c-0.144,0.35 -0.101,1.318 -0.101,1.807v9h-5v-17h5v2.616c0.721,-1.116 1.85,-2.616 4.738,-2.616c3.578,0 6.261,2.25 6.261,7.274l0.001,9.726z" |
||||
fill="#ffffff" |
||||
></path> |
||||
</g> |
||||
</g> |
||||
d="M0 0V24H24V0H0ZM8 19H5V8H8V19ZM6.5 6.732C5.534 6.732 4.75 5.942 4.75 4.968C4.75 3.994 5.534 3.204 6.5 3.204C7.466 3.204 8.25 3.994 8.25 4.968C8.25 5.942 7.467 6.732 6.5 6.732ZM20 19H17V13.396C17 10.028 13 10.283 13 13.396V19H10V8H13V9.765C14.397 7.179 20 6.988 20 12.241V19Z" |
||||
fill="currentColor" |
||||
/> |
||||
</g> |
||||
<defs> |
||||
<clipPath id="clip0_2344_20"> |
||||
<rect width="24" height="24" rx="2" fill="white" /> |
||||
</clipPath> |
||||
</defs> |
||||
</svg> |
||||
); |
||||
} |
||||
|
||||
@ -0,0 +1,33 @@ |
||||
import { type LucideIcon, Star } from 'lucide-react'; |
||||
import { cn } from '../../lib/classname.ts'; |
||||
|
||||
type ResourceSeparatorProps = { |
||||
text: string; |
||||
className?: string; |
||||
labelClassName?: string; |
||||
icon?: LucideIcon; |
||||
}; |
||||
|
||||
export function ResourceListSeparator(props: ResourceSeparatorProps) { |
||||
const { text, icon: Icon, className = '', labelClassName = '' } = props; |
||||
|
||||
return ( |
||||
<p |
||||
className={cn( |
||||
'relative mt-6 flex items-center justify-start text-purple-600', |
||||
className, |
||||
)} |
||||
> |
||||
<span |
||||
className={cn( |
||||
'relative left-3 z-50 inline-flex items-center gap-1 rounded-md border border-current bg-white px-2 py-0.5 text-xs font-medium', |
||||
labelClassName, |
||||
)} |
||||
> |
||||
{Icon && <Icon className="inline-block h-3 w-3 fill-current" />} |
||||
{text} |
||||
</span> |
||||
<hr className="absolute inset-x-0 flex-grow border-current" /> |
||||
</p> |
||||
); |
||||
} |
||||
@ -0,0 +1,57 @@ |
||||
import { cn } from '../../lib/classname.ts'; |
||||
import type { AllowedLinkTypes } from '../CustomRoadmap/CustomRoadmap.tsx'; |
||||
|
||||
const linkTypes: Record<AllowedLinkTypes, string> = { |
||||
article: 'bg-yellow-300', |
||||
course: 'bg-green-400', |
||||
opensource: 'bg-black text-white', |
||||
'roadmap.sh': 'bg-black text-white', |
||||
roadmap: 'bg-black text-white', |
||||
podcast: 'bg-purple-300', |
||||
video: 'bg-purple-300', |
||||
website: 'bg-blue-300', |
||||
official: 'bg-blue-600 text-white', |
||||
feed: 'bg-[#ce3df3] text-white', |
||||
}; |
||||
|
||||
const paidLinkTypes: Record<string, string> = { |
||||
course: 'bg-yellow-300', |
||||
}; |
||||
|
||||
type TopicDetailLinkProps = { |
||||
url: string; |
||||
onClick?: () => void; |
||||
type: AllowedLinkTypes; |
||||
title: string; |
||||
isPaid?: boolean; |
||||
}; |
||||
|
||||
export function TopicDetailLink(props: TopicDetailLinkProps) { |
||||
const { url, onClick, type, title, isPaid = false } = props; |
||||
|
||||
return ( |
||||
<a |
||||
href={url} |
||||
target="_blank" |
||||
className="group font-medium text-gray-800 underline underline-offset-1 hover:text-black" |
||||
onClick={onClick} |
||||
> |
||||
<span |
||||
className={cn( |
||||
'mr-2 inline-block rounded px-1.5 py-0.5 text-xs uppercase no-underline', |
||||
(isPaid ? paidLinkTypes[type] : linkTypes[type]) || 'bg-gray-200', |
||||
)} |
||||
> |
||||
{type === 'opensource' ? ( |
||||
<> |
||||
{url.includes('github') && 'GitHub'} |
||||
{url.includes('gitlab') && 'GitLab'} |
||||
</> |
||||
) : ( |
||||
type |
||||
)} |
||||
</span> |
||||
{title} |
||||
</a> |
||||
); |
||||
} |
||||
@ -0,0 +1,452 @@ |
||||
--- |
||||
title: 'Top 10+ Backend Technologies to Use in @currentYear@: Expert Advice' |
||||
description: 'Looking for the best backend technologies in @currentYear@? Check out our expert list of top tools for developers.' |
||||
authorId: fernando |
||||
excludedBySlug: '/backend/technologies' |
||||
seo: |
||||
title: 'Top 10+ Backend Technologies to Use in @currentYear@: Expert Advice' |
||||
description: 'Looking for the best backend technologies in @currentYear@? Check out our expert list of top tools for developers.' |
||||
ogImageUrl: 'https://assets.roadmap.sh/guest/backend-technologies-pnof4.jpg' |
||||
isNew: true |
||||
type: 'textual' |
||||
date: 2024-08-27 |
||||
sitemap: |
||||
priority: 0.7 |
||||
changefreq: 'weekly' |
||||
tags: |
||||
- 'guide' |
||||
- 'textual-guide' |
||||
- 'guide-sitemap' |
||||
--- |
||||
|
||||
 |
||||
|
||||
Backend technologies are the key to building robust and scalable applications. They power all platforms and products on the web without even being visible to the users. |
||||
|
||||
While backend programming languages form the foundation of backend development, they aren't enough on their own. Understanding and leveraging the right backend technologies can significantly enhance your development workflow and application performance. |
||||
|
||||
As a [backend developer](https://roadmap.sh/backend), you’ll be faced with too many options while trying to define your backend technology stack, and that can feel overwhelming. |
||||
|
||||
So, in this article, we’re going to cover the best backend technologies in the following categories: |
||||
|
||||
- Databases |
||||
- Version control systems |
||||
- Containerization and orchestration |
||||
- Cloud platforms |
||||
- APIs & Web Services |
||||
- Caching systems |
||||
- Message brokers |
||||
- Authentication and Authorization systems |
||||
- CI/CD |
||||
- Monitoring & Logging |
||||
|
||||
These should help you stay up-to-date or reach the required level to succeed as a backend developer. |
||||
|
||||
## Databases |
||||
|
||||
 |
||||
|
||||
We can’t have a list of backend technologies to learn without covering databases. After all, databases are a core piece of the best backend technologies in use today and the backbone of any application, providing the necessary storage and retrieval of data. Choosing the right type of database depends on your application's requirements, such as data consistency, scalability, and complexity. |
||||
|
||||
### SQL Databases |
||||
|
||||
SQL databases (or relational databases as they’re also called) bring structure to your data and a standard querying language known as SQL. |
||||
|
||||
#### PostgreSQL |
||||
|
||||
PostgreSQL is an advanced open-source relational database known for its reliability and extensive feature set. It supports a wide range of data types and complex queries, making it ideal for applications that require ACID compliance and advanced data handling capabilities. PostgreSQL is commonly used in financial systems, data warehousing, and applications needing strong data integrity and complex reporting. |
||||
|
||||
PostgreSQL also offers robust support for JSON and JSONB data types, enabling seamless integration of relational and NoSQL capabilities within a single database system. Its powerful indexing mechanisms ensure efficient query performance even with large datasets. |
||||
|
||||
Additionally, PostgreSQL provides advanced security features like row-level security and multi-factor authentication, making it a secure choice for handling sensitive data. |
||||
|
||||
#### MySQL |
||||
|
||||
MySQL is a widely used open-source SQL database praised for its speed, reliability, and ease of use. It is particularly popular backend technology for web applications and online transaction processing (OLTP) due to its performance and robust community support. MySQL is often the database of choice for content management systems, e-commerce platforms, and logging applications. |
||||
|
||||
MySQL also supports a variety of storage engines, including InnoDB, which provides ACID compliance, foreign key support, and transaction-safe operations, making it suitable for a wide range of applications. |
||||
|
||||
Its replication capabilities, including master-slave and group replication, ensure high availability and scalability for large-scale deployments. Additionally, MySQL offers advanced security features such as data encryption, user authentication, and role-based access control, enhancing its suitability for handling sensitive data. |
||||
|
||||
#### Microsoft SQL Server |
||||
|
||||
SQL Server is a relational database management system from Microsoft that offers great performance, scalability, and deep integration with other Microsoft products. It provides comprehensive tools for database management, including advanced analytics and business intelligence features. SQL Server is ideal for enterprise-level applications, data warehousing, and environments where integration with Microsoft services, such as Azure, is beneficial. |
||||
|
||||
MSSQL Server also includes robust security features, such as transparent data encryption, dynamic data masking, and advanced threat protection, making it a trusted choice for handling sensitive data. It supports a wide range of data types, including spatial and XML data, and offers powerful indexing and query optimization techniques to ensure efficient data retrieval and processing. |
||||
|
||||
SQL Server's integration with Visual Studio and other Microsoft development tools helps to streamline the development process. |
||||
|
||||
#### SQLite |
||||
|
||||
SQLite is a self-contained, serverless, and zero-configuration database engine known for its simplicity and ease of use. It is lightweight and efficient, making it perfect for small to medium-sized applications, mobile apps, desktop applications, and prototyping. SQLite is embedded within the application, eliminating the need for a separate database server, which simplifies deployment and maintenance. |
||||
Its single-disk file format makes it highly portable across various operating systems and platforms. |
||||
SQLite's efficient memory and disk usage allow it to perform well even on devices with limited resources, such as IoT devices and embedded systems. |
||||
|
||||
This makes SQLite an excellent choice for applications where simplicity, reliability, and low overhead are essential. |
||||
|
||||
### NoSQL Databases |
||||
|
||||
On the other hand, NoSQL databases allow for more flexibility by removing the need for a fixed schema and structure to your data. Each solution presented here covers a different type of unstructured database, and it’s up to you to decide if that focus actually makes sense for your business logic or not. |
||||
|
||||
#### MongoDB |
||||
|
||||
MongoDB is a document-oriented database that offers flexibility and scalability. It handles unstructured data with ease, making it ideal for applications with large-scale data and real-time analytics. MongoDB is commonly used in content management systems, e-commerce platforms, and applications that require a dynamic schema. Its ability to store data in JSON-like documents allows for easy data retrieval and manipulation. |
||||
|
||||
#### DynamoDB |
||||
|
||||
DynamoDB is a fully managed NoSQL database service provided by AWS. It is designed for high-performance applications requiring seamless scalability and high availability. DynamoDB is best suited for high-traffic web applications, gaming, and IoT applications. Its serverless nature means it can automatically scale up or down based on demand, ensuring consistent performance and cost-efficiency. |
||||
|
||||
#### Cassandra |
||||
|
||||
Cassandra is an open-source distributed NoSQL database known for its high availability and fault tolerance without compromising performance. It is ideal for large-scale applications and real-time big data analytics. Cassandra's distributed architecture makes it perfect for environments requiring continuous availability and the ability to handle large amounts of data across multiple nodes. It is commonly used in social media platforms, recommendation engines, and other data-intensive applications. |
||||
|
||||
## Version Control Systems |
||||
|
||||
 |
||||
|
||||
Version control systems are essential for managing changes to source code over time, allowing multiple developers to collaborate effectively and maintain a history of changes. |
||||
|
||||
### Git |
||||
|
||||
When it comes to picking the right version control tool, Git is the most widely used one. It provides a powerful, flexible, and distributed model for tracking changes. Git’s architecture supports nonlinear development, allowing multiple branches to be created, merged, and managed independently. This makes Git essential for code collaboration and version tracking, making it a foundational tool for any developer. |
||||
|
||||
Let’s go through some of the key benefits that make Git one of the leading backend technologies in web development. |
||||
|
||||
#### Distributed Version Control |
||||
|
||||
Unlike centralized version control systems (CVCS) where a single central repository holds the entire project history, Git allows each developer to have a complete copy of the repository, including its history. This decentralized approach enhances collaboration and ensures that work can continue even if the central server is down. |
||||
|
||||
#### Branching and Merging |
||||
|
||||
**Branching**: Git’s lightweight branching model allows developers to create, delete, and switch between branches effortlessly. This facilitates isolated development of features, bug fixes, or experiments without impacting the main codebase. |
||||
|
||||
**Merging**: Git provides powerful merging capabilities to integrate changes from different branches. Tools like merge commits and rebasing help manage and resolve conflicts, ensuring a smooth integration process. |
||||
|
||||
#### Performance |
||||
|
||||
Git is designed to handle everything from small to very large projects with speed and efficiency. Its performance for both local operations (like committing and branching) and remote operations (like fetching and pushing changes) is optimized, making it suitable for high-performance needs. |
||||
|
||||
#### Commit History and Tracking |
||||
|
||||
Commit Granularity: Git encourages frequent commits, each with a descriptive message, making it easier to track changes, understand the project history, and identify when and why a change was made. |
||||
|
||||
**History Viewing**: Commands like git log, git blame, and git bisect allow developers to explore the project’s history, pinpoint the introduction of bugs, and understand the evolution of the codebase. |
||||
|
||||
#### Collaboration |
||||
|
||||
While strictly not part of Git’s feature set, these functionalities enhance the basic set of features provided by the version control system. |
||||
|
||||
**Pull Requests**: Platforms like GitHub, GitLab, and Bitbucket build on Git’s capabilities, offering features like pull requests to facilitate code reviews and discussions before integrating changes into the main branch. |
||||
|
||||
**Code Reviews**: Integrating with continuous integration (CI) systems, Git platforms enable automated testing and code quality checks, ensuring that changes meet project standards before merging. |
||||
|
||||
#### Staging Area |
||||
|
||||
Git’s staging area (or index) provides an intermediate area where changes can be formatted and reviewed before committing. This allows for more granular control over what changes are included in a commit. |
||||
|
||||
### GitHub |
||||
|
||||
GitHub is a web-based platform that leverages Git for version control. It provides an extensive list of collaborative features, including (as already mentioned) pull requests, code reviews, and project management tools. |
||||
|
||||
#### Key Features and Benefits |
||||
|
||||
**Pull Requests and Code Reviews**: Facilitate discussions around proposed changes before integrating them into the main codebase. Developers can review code, leave comments, and suggest improvements. Built-in tools for reviewing code changes ensure collaborations are following coding standards and catch potential issues early. |
||||
|
||||
**Project Management**: GitHub Issues allow tracking of bugs, enhancements, and tasks. Milestones help in organizing issues into targeted releases or sprints. Kanban-style boards provide a visual way to manage tasks, track progress, and organize workflows. |
||||
|
||||
**Continuous Integration and Deployment**: Automate workflows for CI/CD, testing, deployment, and more. GitHub Actions supports custom scripts and pre-built actions to streamline DevOps processes. |
||||
|
||||
**Community and Collaboration**: Developers can host static websites directly from a GitHub repository with Github Pages, they’re ideal for project documentation or personal websites. Integrated wikis can be used for detailed project documentation. And through forking, starring, and following repositories the platform encourages collaboration and knowledge sharing. |
||||
|
||||
GitHub’s extensive features and strong community support make it the de facto choice for many companies and developers, both for open-source and private projects. |
||||
|
||||
### GitLab |
||||
GitLab is a web-based platform for version control using Git, known for its robust CI/CD pipeline integration. It offers a comprehensive set of tools for the entire DevOps lifecycle, making it suitable for continuous integration, deployment, and monitoring. |
||||
|
||||
#### Key Features and Benefits |
||||
|
||||
**Integrated CI/CD**: Built-in continuous integration and continuous deployment pipelines allow backend developers to automate building, testing, and deploying code changes. With Gitlabs they can even automatically configure CI/CD pipelines, deploy applications, and monitor performance, all through the same platform. |
||||
|
||||
**Security and Compliance**: Gitlabs provides key security capabilities for backend development: built-in static and dynamic application security testing (SAST/DAST). |
||||
|
||||
**Collaboration and Communication**: Instead of Pull Requests like Github, Gitlabs provides the concept of “Merge Requests”: a simplified code review process with inline comments and suggestions. |
||||
|
||||
GitLab’s all-in-one platform makes it an excellent choice for teams looking to streamline their DevOps processes and improve collaboration and productivity. |
||||
|
||||
### Bitbucket |
||||
|
||||
Bitbucket is a Git-based source code repository hosting service that provides both commercial plans and free accounts for small teams. It integrates seamlessly with Atlassian products like Jira and Trello, making it a great choice for teams already using these tools. |
||||
|
||||
**Repository Hosting**: Bitbucket supports both Git and Mercurial version control systems. And it offers unlimited private repositories for teams. |
||||
|
||||
**Integration with Atlassian Products**: Seamlessly integrates with Jira for issue tracking and project management. It can create branches from Jira issues and view development progress which is a fantastic integration for big teams using both tools. If, on the other hand, you’re using Trello, it can connect to Trello’s boards for visual task management and tracking. |
||||
|
||||
**Continuous Integration and Deployment**: Integrated CI/CD service for automating builds, tests, and deployments. It can be configured with a YAML file for custom workflows. |
||||
|
||||
**Security and Permissions**: Control who accesses specific branches to enforce workflows and protect critical branches. You can even enhance security with two-factor authentication. |
||||
|
||||
Bitbucket’s integration with Atlassian’s suite of products, along with its robust CI/CD capabilities, make it an attractive option for teams seeking a tightly integrated development and project management environment. |
||||
|
||||
## Containerization and Orchestration |
||||
|
||||
 |
||||
|
||||
While backend developers aren’t always directly involved in the deployment process, understanding the basics of containerization and orchestration can help them work and interact with the team in charge of devops (who usually set up these CI/CD pipelines). |
||||
|
||||
While this is not an exhaustive list of backend technologies, the two main ones to learn about are: |
||||
|
||||
### Docker |
||||
|
||||
Docker is a platform for developing, shipping, and running applications in containers. Containers package software and its dependencies, ensuring it runs consistently across different environments. Docker simplifies application deployment and testing, making it ideal for microservices architectures and continuous integration/continuous deployment (CI/CD) pipelines. |
||||
|
||||
### Kubernetes |
||||
|
||||
Kubernetes is an open-source system for automating the deployment, scaling, and management of containerized applications. It orchestrates containers across clusters of machines, providing high availability, scalability, and efficient resource utilization. Kubernetes is perfect for complex, large-scale applications requiring robust infrastructure management and automated scaling. |
||||
|
||||
## Cloud Platforms |
||||
|
||||
 |
||||
|
||||
Cloud platforms provide a range of services and infrastructure that allow developers to deploy, manage, and scale applications without maintaining physical servers. Mind you, the “cloud” is nothing else than someone else’s servers that you don’t have to manage. |
||||
|
||||
These platforms all offer very similar types of managed services (each with its own flavor) that allow you to set up powerful and scalable infrastructures with a few clicks. |
||||
|
||||
### Amazon Web Services (AWS) |
||||
|
||||
Amazon Web Services (AWS) is a very complete cloud computing platform offered by Amazon. It provides a broad range of services, including computing power, storage solutions, and databases, catering to various needs and applications. |
||||
|
||||
#### Key Characteristics of AWS |
||||
|
||||
**Scalability**: AWS provides scalable solutions that allow businesses to easily adjust resources based on demand. |
||||
Global Reach: With data centers located worldwide, AWS offers high availability and low latency for global applications. |
||||
|
||||
**Diverse Service Offerings**: AWS offers a wide range of services, including EC2 for computing, S3 for storage, and RDS for databases. |
||||
|
||||
**Security and Compliance**: AWS provides robust security features and complies with numerous industry standards and regulations. |
||||
|
||||
**Cost Management**: Flexible pricing models and cost management tools help businesses optimize their cloud spending. |
||||
|
||||
### Google Cloud Platform (GCP) |
||||
|
||||
Google Cloud Platform (GCP) is a suite of cloud computing services provided by Google. Like AWS and Microsoft Azure, GCP offers a variety of services, including computing power, storage, machine learning, and data analytics. |
||||
|
||||
#### Key Characteristics of GCP |
||||
|
||||
**AI and Machine Learning**: GCP excels in providing advanced AI and machine learning tools, leveraging Google's expertise. |
||||
|
||||
**Big Data and Analytics**: GCP offers powerful analytics tools, including BigQuery, for handling large-scale data processing. |
||||
|
||||
**Networking**: GCP provides a robust and secure global network infrastructure. |
||||
|
||||
**Integration with Google Services**: Seamless integration with Google Workspace and other Google services enhances productivity and collaboration. |
||||
|
||||
**Open Source Support**: GCP supports various open-source technologies, promoting flexibility and innovation. |
||||
|
||||
### Microsoft Azure |
||||
|
||||
Microsoft Azure is a cloud computing service created by Microsoft, offering a wide range of cloud services, including those for computing, analytics, storage, and networking. |
||||
|
||||
#### Key Characteristics of Microsoft Azure |
||||
|
||||
**Integration with Microsoft Products**: Azure offers seamless integration with popular Microsoft software and services. |
||||
|
||||
**Hybrid Cloud Capabilities**: Azure supports hybrid cloud environments, enabling smooth integration between on-premises and cloud resources. |
||||
|
||||
**Comprehensive Service Range**: Azure provides a broad spectrum of services, including Azure Virtual Machines, Azure SQL Database, and Azure DevOps. |
||||
|
||||
**Enterprise-Grade Security**: Azure emphasizes security with advanced features and compliance with industry standards. |
||||
|
||||
**Developer and IT Pro Tools**: Azure offers a wide range of tools for developers and IT professionals, including Visual Studio and Azure DevOps. |
||||
|
||||
At a high level, all of these providers are very similar to each other, to the point where backend developers experienced in one of them, can extrapolate their understanding of the environment into others with minimum ramp-up time. |
||||
|
||||
## APIs and Web Services |
||||
|
||||
 |
||||
|
||||
APIs (or Application Programming Interfaces) and web services are another mandatory incorporation to the list of top backend technologies any developer should keep in mind. They enable communication between different software systems. |
||||
|
||||
The three most common types of APIs right now, are REST, GraphQL and gPRC, let’s take a closer look at each one of them. |
||||
|
||||
### REST |
||||
|
||||
REST is a standard architecture for web services, known for its simplicity and scalability. It operates on stateless principles and uses standard HTTP methods (GET, POST, PUT, DELETE) to perform CRUD (Create, Read, Update, Delete) operations. RESTful APIs are typically used to access and manipulate web resources using URLs. |
||||
|
||||
REST is ideal for web applications and services due to its ease of implementation and broad compatibility with various web technologies. It is commonly used for developing APIs for web and mobile applications, providing endpoints that clients can interact with to perform various operations. RESTful APIs are also ideal for integrating with third-party services, enabling data exchange and interaction between different systems. |
||||
|
||||
#### Key Characteristics of REST |
||||
|
||||
**Statelessness**: Each request from a client contains all the information needed to process the request, without relying on stored context on the server. |
||||
|
||||
**Uniform Interface**: REST APIs follow standard conventions, making them easy to understand and use. This includes using standard HTTP methods and status codes. |
||||
|
||||
**Client-Server Architecture**: Separates the client and server concerns, improving scalability and flexibility. Clients handle the user interface and user experience, while servers handle data storage and business logic. |
||||
|
||||
**Cacheability**: Responses from REST APIs can be cached to improve performance, reducing the need for repeated requests. |
||||
|
||||
**Layered System**: REST allows for a layered system architecture, enabling intermediaries like load balancers and proxy servers to enhance security, performance, and scalability. |
||||
|
||||
If you’d like to know more about REST, you can read the full definition directly from [its source here](https://ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm). |
||||
|
||||
### GraphQL |
||||
|
||||
GraphQL is a query language for APIs and a runtime for executing those queries by using a type system you define for your data. Unlike REST, where multiple endpoints return fixed data structures, GraphQL allows clients to request exactly the data they need. This flexibility reduces the amount of data transferred over the network and can significantly improve performance. |
||||
|
||||
GraphQL is ideal for applications with complex and dynamic data requirements. |
||||
|
||||
#### Key Characteristics of GraphQL |
||||
|
||||
**Declarative Data Fetching**: Clients specify the structure of the response, ensuring they receive only the data they need. |
||||
|
||||
**Strongly Typed Schema**: The API schema is strongly typed, providing clear and detailed documentation of available data and operations. |
||||
|
||||
**Single Endpoint**: Unlike REST, GraphQL uses a single endpoint to serve all requests, simplifying the API architecture. |
||||
|
||||
**Real-time Data**: Supports real-time updates through subscriptions, enabling clients to receive live data changes. |
||||
|
||||
### gRPC |
||||
|
||||
gRPC is a high-performance, open-source RPC (Remote Procedure Call) framework developed by Google. gRPC is designed for low-latency, high-throughput communication, making it suitable for microservices architectures and real-time communication systems. |
||||
|
||||
gRPC is ideal for applications that require efficient, reliable, and bi-directional communication. |
||||
|
||||
#### Key Characteristics of gRPC |
||||
|
||||
**Protocol Buffers**: Uses Protocol Buffers for compact, efficient, and platform-neutral serialization of structured data. |
||||
|
||||
**HTTP/2**: Utilizes HTTP/2 for multiplexing, flow control, header compression, and efficient binary transport. |
||||
|
||||
**Bi-directional Streaming**: Supports multiple types of streaming, including client-side, server-side, and bi-directional streaming. |
||||
|
||||
**Cross-Language Compatibility**: Provides support for multiple backend programming languages, enabling interoperability between different systems. |
||||
|
||||
## Caching Systems |
||||
|
||||
 |
||||
|
||||
Caching systems store copies of frequently accessed data to reduce latency and improve application performance. They are essential for speeding up data retrieval and reducing the load on primary data stores. |
||||
|
||||
Implementing a successful caching strategy is not trivial, and one key aspect of it is the backend technology used for the implementation. While there might be multiple options out there, the industry currently recognizes only one de facto choice: Redis. |
||||
|
||||
### Redis: a fast in-memory storage solution |
||||
|
||||
Redis is an in-memory data structure store that can function as a database, cache, and message broker. It supports various data structures such as strings, hashes, lists, sets, sorted sets, bitmaps, hyperloglogs, and with the right add-ons, even vectors. Redis uses a key-value storage mechanism, which makes it simple yet powerful for a wide range of use cases. |
||||
|
||||
Let’s quickly review some of the characteristics of Redis that make it such a fantastic option. |
||||
|
||||
#### High Availability and Scalability |
||||
|
||||
- **Redis Sentinel**: Provides high availability and monitoring, automatically promoting a slave to master in case of failure, ensuring minimal downtime. |
||||
|
||||
- **Redis Cluster**: Supports automatic sharding, allowing Redis to scale horizontally. It partitions data across multiple nodes, ensuring that the system can handle large datasets and high throughput. |
||||
|
||||
#### Performance and Use Cases |
||||
|
||||
Redis's in-memory architecture gives it unmatched I/O speed, making it ideal for real-time applications such as: |
||||
|
||||
- **Gaming**: Managing leaderboards, player sessions, and real-time statistics. |
||||
- **Chat Applications**: Storing messages, user presence information, and delivering real-time notifications. |
||||
- **Analytics**: Real-time data processing and analytics, where rapid data access and manipulation are crucial. |
||||
- **Caching**: Reducing database load by caching frequently accessed data, improving application response times. |
||||
|
||||
#### Persistence and Durability |
||||
|
||||
- **RDB (Redis Database)**: Creates snapshots of the dataset at specified intervals, allowing data to be restored from the last snapshot. |
||||
- **AOF (Append Only File)**: Logs every write operation received by the server, providing a more durable solution that can replay the log to reconstruct the dataset. |
||||
- **Hybrid Approach**: Combining RDB and AOF to leverage the benefits of both methods, balancing performance and data durability. |
||||
|
||||
#### Advanced Features |
||||
|
||||
On top of all of that, Redis even provides some very powerful out-of-the-box features: |
||||
|
||||
- **Lua Scripting**: Supports server-side scripting with Lua, enabling complex operations to be executed atomically. |
||||
- **Pub/Sub Messaging**: Allows for message broadcasting to multiple clients, supporting real-time messaging and notifications. You can create whole event-based architectures around Redis. |
||||
- **Modules**: Extend Redis functionality with custom modules, such as RedisGraph for graph database capabilities and RedisJSON for JSON document storage. |
||||
|
||||
Redis's robust feature set, combined with its high performance and flexibility, makes it a versatile tool for developers looking to build scalable and responsive applications. |
||||
|
||||
## Message Brokers and Streaming Platforms |
||||
|
||||
 |
||||
|
||||
Message brokers and streaming platforms facilitate communication between different parts of a system, enabling efficient data exchange and processing. They are crucial for building scalable and resilient applications and they are the core of reactive architectures (also known as event-based architectures). |
||||
|
||||
### RabbitMQ |
||||
|
||||
RabbitMQ is an open-source message broker that implements the Advanced Message Queuing Protocol (AMQP). It supports multiple messaging protocols and can be deployed in distributed and federated configurations. RabbitMQ is ideal for use cases that require reliable message delivery, complex routing, and interoperability with other messaging systems. It is commonly used in financial systems, order processing, and other applications that need robust messaging capabilities. |
||||
|
||||
### Apache Kafka |
||||
|
||||
Apache Kafka is a distributed streaming platform designed for high-throughput, low-latency data processing. It excels at handling real-time data feeds, making it suitable for applications that require continuous data integration and processing. Kafka’s publish-subscribe messaging system is fault-tolerant and scalable, making it ideal for big data applications, real-time analytics, event sourcing, and log aggregation. Its ability to store streams of records in a fault-tolerant manner also makes it useful for building event-driven architectures and microservices. |
||||
|
||||
As backend developers, understanding how to take advantage of these message queues is critical to the development of scalable and resilient platforms. It is definitely a must-have skill and you need to master it. |
||||
|
||||
## Authentication and Authorization |
||||
|
||||
 |
||||
|
||||
Authentication and authorization technologies are essential for securing applications, ensuring that users are who they claim to be and have the appropriate permissions to access resources. |
||||
|
||||
This space is filled with solutions and methodologies, so it’s not easy to pick one option here, however, these two are very common solutions used to implement both, authZ (authorization) and authN (authentication). |
||||
|
||||
### OAuth |
||||
|
||||
OAuth is an open standard for access delegation commonly used to grant websites or applications limited access to a user’s information without exposing their passwords. It is widely used in single sign-on (SSO) systems, enabling users to log in to multiple applications with a single set of credentials. OAuth is ideal for third-party applications that need access to user data, such as social media integrations and API access management. |
||||
|
||||
### JWT (JSON Web Tokens) |
||||
|
||||
JWT is a compact, URL-safe means of representing claims to be transferred between two parties. The claims in a JWT are encoded as a JSON object, which is used as the payload of a JSON Web Signature (JWS) structure or as the plaintext of a JSON Web Encryption (JWE) structure. JWTs are commonly used for authentication and authorization in web applications, providing a secure way to transmit information between parties. They are particularly useful in stateless authentication systems, where user state is not stored on the server (like when dealing with RESTful APIs). |
||||
|
||||
## CI/CD Pipelines |
||||
|
||||
 |
||||
|
||||
CI/CD (Continuous Integration/Continuous Deployment) pipelines automate the process of code integration, testing, and deployment, enabling faster and more reliable software delivery. This is one of the key areas backend developers need to understand to avoid creating code that simply gets in the way of the deployment process. |
||||
|
||||
### GitHub Actions |
||||
|
||||
GitHub Actions is an integrated CI/CD service within GitHub repositories, allowing developers to automate build, test, and deployment workflows. It supports a wide range of actions and integrations, making it highly customizable and versatile for various development workflows. |
||||
|
||||
### CircleCI |
||||
|
||||
CircleCI is a continuous integration and delivery platform that automates the building, testing, and deployment of applications. It supports multiple backend languages and integrates with various version control systems, making it a popular choice for diverse development environments. CircleCI is known for its speed and ease of setup, providing robust tools for optimizing and monitoring CI/CD pipelines. |
||||
|
||||
### GitLab CI/CD |
||||
|
||||
GitLab CI/CD is an integrated part of the GitLab platform (similar to how GitHub actions are a part of GitHub), offering continuous integration, delivery, and deployment features within the GitLab ecosystem. It allows developers to manage their entire DevOps lifecycle in a single application, from planning and coding to monitoring and security. GitLab CI/CD is particularly useful for teams seeking a seamless and comprehensive CI/CD solution. |
||||
|
||||
### Jenkins |
||||
|
||||
If instead of a SaaS, you’re looking for a solution that you can potentially self-host, then you might want to look into Jenkins. Jenkins is an open-source automation server that provides hundreds of plugins to support building, deploying, and automating your software development process. It is highly extensible and can be integrated with a wide array of tools and technologies. Jenkins is ideal for complex, large-scale projects requiring a customizable and powerful CI/CD environment. |
||||
|
||||
## Monitoring and Logging |
||||
|
||||
 |
||||
|
||||
Understanding how the systems that you develop behave and perform on a daily basis is crucial to launching a successful product. Here’s where monitoring and logging come into play. Monitoring and logging are crucial pieces of backend technology used for maintaining the health, performance, and security of applications. These tools help detect issues, analyze performance, and ensure system reliability. |
||||
|
||||
### ELK Stack (Elasticsearch, Logstash, Kibana) |
||||
|
||||
The ELK Stack is a set of tools for searching, analyzing, and visualizing log data in real time. Elasticsearch is a search and analytics engine, Logstash is a server-side data processing pipeline, and Kibana is a visualization tool. Together, they provide a powerful platform for centralized logging and monitoring, making them ideal for applications requiring detailed log analysis and real-time insights. |
||||
|
||||
### Grafana |
||||
|
||||
Grafana is an open-source platform for monitoring and observability that integrates with various data sources. It provides powerful visualizations, dashboards, and alerting capabilities, making it a popular choice for monitoring infrastructure and application performance. Grafana is particularly useful for teams needing a flexible and customizable monitoring solution. |
||||
|
||||
### Loki |
||||
|
||||
Loki is a log aggregation system designed to work with Grafana. It is optimized for cost-effective and scalable logging, making it suitable for applications with high log volumes. Loki simplifies log management by allowing developers to query logs using the same language as Grafana, providing seamless integration for comprehensive observability. |
||||
|
||||
### Prometheus |
||||
|
||||
Prometheus is an open-source monitoring and alerting toolkit designed for reliability and scalability. It collects and stores metrics as time series data, providing powerful querying language and alerting capabilities. Prometheus is ideal for monitoring applications and infrastructure, particularly in cloud-native and microservices environments, where dynamic and ephemeral resources are common. |
||||
|
||||
In the end, you might want to go with one or several of these options, the point is that you, as a developer, should be aware of them and what type of value they add to the project. |
||||
|
||||
## Conclusion |
||||
|
||||
As backend developers, focusing on a backend programming language and a backend framework is not going to be enough. The backend ecosystem is very rich, and there are many areas that are either directly or indirectly related to the daily tasks that a backend dev needs to work on. |
||||
|
||||
This is why you need to stay up-to-date and look at the trends that develop within each area to make sure you’re still working with and focusing on the right solutions. |
||||
|
||||
If you'd like more details on the type of backend development technologies you should be focusing on to excel at your role as a backend developer, check out our [Backend Developer roadmap](https://roadmap.sh/backend). |
||||
@ -0,0 +1,53 @@ |
||||
--- |
||||
title: 'Basic HTML Website' |
||||
description: 'Create simple HTML only website with multiple pages.' |
||||
isNew: false |
||||
sort: 1 |
||||
difficulty: 'beginner' |
||||
nature: 'HTML' |
||||
skills: |
||||
- 'HTML' |
||||
- 'Layouts' |
||||
- 'semantic HTML' |
||||
seo: |
||||
title: 'Basic HTML Website Project' |
||||
description: 'Create a simple HTML only website with multiple pages.' |
||||
keywords: |
||||
- 'basic html' |
||||
- 'html project idea' |
||||
roadmapIds: |
||||
- 'frontend' |
||||
--- |
||||
|
||||
> Goal of this project is to teach you how to structure a website using HTML i.e. different sections of a website like header, footer, navigation, main content, sidebars etc. Do not style the website, only focus on the structure. Styling will be done in separate projects. |
||||
|
||||
In this project, you are required to create a simple HTML only website with multiple pages. The website should have following pages: |
||||
|
||||
- Homepage |
||||
- Projects |
||||
- Articles |
||||
- Contact |
||||
|
||||
The website should have a navigation bar that should be present on all pages and link to all the pages. |
||||
|
||||
You are not required to style the website, you are only required to create the structure of the website using HTML. Goals of this project are: |
||||
|
||||
- Learn how to create multiple pages in a website. |
||||
- Structure a website using HTML in a semantic way. |
||||
- Structure in a way that you can easily add styles later. |
||||
- Add SEO meta tags to the website. |
||||
|
||||
You can use the following mockup example to create the structure of the website (remember, you are not required to style the website, only focus on the structure that you can style later): |
||||
|
||||
 |
||||
|
||||
Again, make sure that your submission includes the following: |
||||
|
||||
- Semantically correct HTML structure. |
||||
- Multiple pages with a navigation bar. |
||||
- SEO meta tags in the head of each page. |
||||
- Contact page should have a form with fields like name, email, message etc. |
||||
|
||||
<hr /> |
||||
|
||||
After completing this project, you will have a good understanding of how to structure a website using HTML, basic SEO meta tags, HTML tags, forms etc. You can now move on to the next project where you will learn how to style this website using CSS. |
||||
@ -0,0 +1,8 @@ |
||||
# Animations |
||||
|
||||
`Animations` can add visual cues that notify users about what's going on in your app. They are especially useful when the UI changes state, such as when new content loads or new actions become available. Animations also add a polished look to your app, which gives it a higher quality look and feel. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Google developers: Animations](https://developer.android.com/develop/ui/views/animations/overview) |
||||
- [@video@Google developers: Animations](https://www.youtube.com/watch?v=N_x7SV3I3P0) |
||||
@ -0,0 +1,8 @@ |
||||
# ConstraintLayout |
||||
|
||||
Lets you create large, complex layouts with a flat view hierarchy—no nested view groups. It's similar to `RelativeLayout` in that all views are laid out according to relationships between sibling views and the parent layout, but it's more flexible than RelativeLayout and easier to use. Its available on xml and jetpack compose. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: ConstraintLayout in xml](https://developer.android.com/develop/ui/views/layout/constraint-layout) |
||||
- [@official@Android developers: ContraintLayout in compose](https://developer.android.com/develop/ui/compose/layouts/constraintlayout) |
||||
@ -0,0 +1,8 @@ |
||||
# Drawer |
||||
|
||||
The **Navigation Drawer** in Android is a sliding menu from the left that simplifies navigation between important app links. It opens by sliding or via an icon in the `ActionBar`. It’s an overlay panel that replaces a screen dedicated to displaying options. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: DrawerLayout](https://developer.android.com/reference/androidx/drawerlayout/widget/DrawerLayout) |
||||
- [@article@Navigate Drawer Tutorial](https://www.digitalocean.com/community/tutorials/android-navigation-drawer-example-tutorial) |
||||
@ -0,0 +1,9 @@ |
||||
# ListView |
||||
|
||||
Displays a vertically-scrollable collection of views, where each view is positioned immediatelybelow the previous view in the list. |
||||
|
||||
For a more modern, flexible, and performant approach to displaying lists, use `RecyclerView`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Android developers: ListView](https://developer.android.com/reference/android/widget/ListView) |
||||
@ -1 +1,8 @@ |
||||
# Build Environments |
||||
|
||||
You can define different named build configurations for your project, such as `development` and `production`, with different defaults. Each named configuration can have defaults for any of the options that apply to the various builder targets, such as `build`, `serve`, and `test`. The Angular CLI can replace files for each environment if you pass a `--configuration` flag with the named configuration when running a CLI command. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Build environments](https://angular.dev/tools/cli/environments#using-environment-specific-variables-in-your-app) |
||||
- [@article@Building an Angular application in various environments using Angular CLI and server](https://medium.com/yavar/building-an-angular-application-in-various-environments-using-angular-cli-and-server-18f94067154b) |
||||
@ -1 +1,8 @@ |
||||
# @case |
||||
|
||||
If no `@case` matches the `@switch` condition and there is no `@default` block, nothing is shown. Otherwise, the content inside the `@case` that matches the condition will be displayed. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - @switch](https://angular.dev/guide/templates/control-flow#switch-block---selection) |
||||
- [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/) |
||||
@ -1 +1,9 @@ |
||||
# CLI Builders |
||||
|
||||
A number of Angular CLI commands run a complex process on your code, such as building, testing, or serving your application. The commands use an internal tool called `Architect` to run CLI builders, which invoke another tool (bundler, test runner, server) to accomplish the desired task. Custom builders can perform an entirely new task or to change which third-party tool is used by an existing command. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - CLI Builders](https://angular.dev/tools/cli/cli-builder) |
||||
- [@video@Angular Builders – Creating Custom Builder from Scratch](https://www.youtube.com/watch?v=QbDkDLnXAZE) |
||||
- [@opensource@Angular Builders](https://github.com/just-jeb/angular-builders) |
||||
@ -1 +1,9 @@ |
||||
# Creating Libraries |
||||
|
||||
If you have developed features that are suitable for reuse, you can create your own libraries. These libraries can be used locally in your workspace, or you can publish them as npm packages to share with other projects or other Angular developers. Putting code into a separate library is more complex than simply putting everything in one application. It requires more of an investment in time and thought for managing, maintaining, and updating the library. This complexity can pay off when the library is being used in multiple applications. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Creating Libraries](https://angular.dev/tools/libraries/creating-libraries) |
||||
- [@official@Angular Official Docs - File Structure: Library project files](https://angular.dev/reference/configs/file-structure#library-project-files) |
||||
- [@opensource@NG Packagr](https://github.com/ng-packagr/ng-packagr) |
||||
@ -1 +1,10 @@ |
||||
# Cross-site Request Forgery |
||||
|
||||
Cross-site request forgery, also known as one-click attack or session riding and abbreviated as CSRF or XSRF, is a type of malicious exploit of a website or web application where unauthorized commands are submitted from a user that the web application trusts. There are many ways in which a malicious website can transmit such commands; specially-crafted image tags, hidden forms, and JavaScript fetch or XMLHttpRequests, for example, can all work without the user's interaction or knowledge. Unlike cross-site scripting (XSS), which exploits the trust a user has for a particular site, CSRF exploits the trust that a site has in a user's browser. In a CSRF attack, an innocent end user is tricked by an attacker into submitting a web request that they did not intend. This may cause actions to be performed on the website that can include inadvertent client or server data leakage, change of session state, or manipulation of an end user's account. Angular provides built-in protection against CSRF attacks through the `HttpClientXsrfModule` module. This module automatically adds a token to outgoing requests and validates it on the server side. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Cross Site Request Forgery](https://angular.dev/best-practices/security#cross-site-request-forgery) |
||||
- [@official@HttpClientXsrfModule](https://angular.dev/api/common/http/HttpClientXsrfModule) |
||||
- [@video@Configure the CSRF Protection With Spring Security 6 and Angular](https://www.youtube.com/watch?v=tgjLsEmxcuY) |
||||
- [@video@Angular security - CSRF prevention using Double Submit Cookie](https://www.youtube.com/watch?v=lZfF4MOTeNM) |
||||
|
||||
@ -1 +1,9 @@ |
||||
# Cross-site Script Inclusion |
||||
|
||||
Cross-site script inclusion, also known as JSON vulnerability, can allow an attacker's website to read data from a JSON API. The attack works on older browsers by overriding built-in JavaScript object constructors, and then including an API URL using a `<script>` tag. Angular's HttpClient library recognizes this convention and automatically strips the string ")]}',\n" from all responses before further parsing. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Cross Site Script Inclusion](https://angular.dev/best-practices/security#cross-site-script-inclusion-xssi) |
||||
- [@article@XSSI Cross Site Script Inclusion](https://book.hacktricks.xyz/pentesting-web/xssi-cross-site-script-inclusion) |
||||
- [@article@Testing for Cross Site Script Inclusion](https://owasp.org/www-project-web-security-testing-guide/v41/4-Web_Application_Security_Testing/11-Client_Side_Testing/13-Testing_for_Cross_Site_Script_Inclusion) |
||||
@ -1 +1,10 @@ |
||||
# Debugging Tests |
||||
|
||||
If your tests aren't working as you expect them to, you can inspect and debug them in the browser. Be sure to set breakpoints to track your application's execution. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Debugging tests](https://angular.dev/guide/testing/debugging) |
||||
- [@official@Angular Official Docs - Devtools](https://angular.dev/tools/devtools) |
||||
- [@video@Debug Like a Pro: Essential Breakpoint Techniques in Angular](https://www.youtube.com/watch?v=Be9Q1cchurQ) |
||||
- [@video@Debug Angular 17 Code in VS Code with Break Points and Extensions](https://www.youtube.com/watch?v=r50UXhT9hc0) |
||||
@ -1 +1,8 @@ |
||||
# @default |
||||
|
||||
The `@default` clause is used to render a template when none of the `@case` blocks matches the value of the `@switch` conditional. `@default` is optional and can be omitted. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - @switch](https://angular.dev/guide/templates/control-flow#switch-block---selection) |
||||
- [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/) |
||||
@ -1 +1,14 @@ |
||||
# Deployment |
||||
|
||||
The Angular CLI command `ng deploy` executes the deploy CLI builder associated with your project. A number of third-party builders implement deployment capabilities to different platforms. You can add any of them to your project with `ng add`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Deployment](https://angular.dev/tools/cli/deployment) |
||||
- [@official@Firebase Hosting](https://firebase.google.com/docs/hosting) |
||||
- [@official@Vercel: Angular Solutions](https://vercel.com/solutions/angular) |
||||
- [@official@Netlify](https://docs.netlify.com/frameworks/angular/) |
||||
- [@official@Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-an-angular-site/#create-a-new-project-using-the-create-cloudflare-cli-c3) |
||||
- [@official@AWS Amplify](https://docs.amplify.aws/angular/) |
||||
- [@opensource@NGX AWS Deploy](https://github.com/Jefiozie/ngx-aws-deploy) |
||||
- [@opensource@Angular CLI GitHub Pages](https://github.com/angular-schule/angular-cli-ghpages) |
||||
@ -1 +1,11 @@ |
||||
# Dynamic Components |
||||
|
||||
In addition to using a component directly in a template, you can also dynamically render components. There are two main ways to dynamically render a component: in a template with `NgComponentOutlet`, or in your TypeScript code with `ViewContainerRef`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Programmatically rendering components](https://angular.dev/guide/components/programmatic-rendering) |
||||
- [@video@Dynamic Component in Angular (2024)](https://www.youtube.com/watch?v=ncbftt3NWVo) |
||||
- [@article@New Input Binding for NgComponentOutlet](https://medium.com/ngconf/new-input-binding-for-ngcomponentoutlet-cb18a86a739d) |
||||
- [@article@Render dynamic components in Angular using ViewContainerRef](https://dev.to/railsstudent/render-dynamic-components-in-angular-using-viewcontainerref-160h) |
||||
- [@video@Mastering ViewContainerRef for dynamic component loading in Angular17](https://www.youtube.com/watch?v=Ra4PITCt8m0) |
||||
@ -1 +1,8 @@ |
||||
# @else if |
||||
|
||||
With the new control flow syntax, you gain `@else if` conditional blocks, something that is not possible with `@ngIf`. This addition makes the control flow syntax close to what we would write with just plain JavaScript. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - @if](https://angular.dev/api/core/@if) |
||||
- [@article@Angular @if: Complete Guide](https://blog.angular-university.io/angular-if/) |
||||
@ -1 +1,11 @@ |
||||
# End-to-End Testing |
||||
|
||||
End-to-end or (E2E) testing is a form of testing used to assert your entire application works as expected from start to finish or "end-to-end". E2E testing differs from unit testing in that it is completely decoupled from the underlying implementation details of your code. It is typically used to validate an application in a way that mimics the way a user would interact with it. The `ng e2e` command will first check your project for the "e2e" target. If it can't locate it, the CLI will then prompt you which e2e package you would like to use and walk you through the setup. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - End to End Testing](https://angular.dev/tools/cli/end-to-end) |
||||
- [@official@Cypress Official Docs - Your First Test with Cypress](https://docs.cypress.io/guides/end-to-end-testing/writing-your-first-end-to-end-test) |
||||
- [@official@Nightwatch Official Docs - Writing Tests: Introduction](https://nightwatchjs.org/guide/writing-tests/introduction.html) |
||||
- [@official@Webdriver Official Docs - Getting Started](https://webdriver.io/docs/gettingstarted/) |
||||
- [@official@Puppeteer Angular Schematic](https://pptr.dev/guides/ng-schematics/#getting-started) |
||||
@ -1 +1,8 @@ |
||||
# HTTP Vulnerabilities |
||||
|
||||
Angular has built-in support to help prevent two common HTTP vulnerabilities, cross-site request forgery (CSRF or XSRF) and cross-site script inclusion (XSSI). Both of these must be mitigated primarily on the server side, but Angular provides helpers to make integration on the client side easier. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Security](https://angular.dev/best-practices/security) |
||||
- [@article@Angular | HackTricks](https://book.hacktricks.xyz/network-services-pentesting/pentesting-web/angular) |
||||
@ -1 +1,11 @@ |
||||
# HttpClient CSRF |
||||
|
||||
HttpClient includes a built-in mechanism to prevent XSRF attacks. When making HTTP requests, an interceptor reads a token from a cookie (default name: XSRF-TOKEN) and sets it as an HTTP header (X-XSRF-TOKEN). Since only code running on your domain can read this cookie, the backend can verify that the HTTP request originates from your client application and not from an attacker. |
||||
|
||||
However, HttpClient only handles the client-side aspect of XSRF protection. Your backend service must be configured to set the cookie for your page and verify that the header is present on all relevant requests. Without this backend configuration, Angular’s default XSRF protection will not be effective. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Security](https://angular.dev/best-practices/security#httpclient-xsrf-csrf-security) |
||||
- [@article@How can you protect Angular Web app from cross site request forgery?](https://www.linkedin.com/advice/3/how-can-you-protect-angular-web-app-from-cross-site-pyqwc) |
||||
- [@article@Cross Site Request Forgery: XSRF protection in Angular](https://borstch.com/blog/development/cross-site-request-forgery-xsrf-protection-in-angular) |
||||
@ -1 +1,10 @@ |
||||
# Hydration |
||||
|
||||
Hydration is the process that restores the server-side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes. Hydration can be enabled for server-side rendered (SSR) applications only. You can enable hydration manually by visiting your main application component or module and importing `provideClientHydration` from `@angular/platform-browser`. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Hydration](https://angular.dev/guide/hydration) |
||||
- [@official@Angular Official Docs - provideClientHydration](https://angular.dev/api/platform-browser/provideClientHydration) |
||||
- [@article@Angular Hydration](https://www.bacancytechnology.com/blog/angular-hydration) |
||||
- [@video@Angular SSR Deep Dive (With Client HYDRATION)](https://www.youtube.com/watch?v=U1MP4uCuUVI) |
||||
@ -1 +1,10 @@ |
||||
# Local Setup |
||||
|
||||
To install Angular CLI on your local system, you need to install `Node.js`. Angular requires an active LTS or maintenance LTS version of Node. Angular CLI uses Node and its associated package manager, npm, to install and run JavaScript tools outside the browser. Once you have Node installed, you can run `npm install -g @angular/cli` to install the Angular CLI. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Local set-up](https://angular.dev/tools/cli/setup-local) |
||||
- [@official@Angular Official Docs - Version compatibility guide](https://angular.dev/reference/versions) |
||||
- [@video@How To Install Angular CLI In Windows 10 | In Under 2 Minutes!](https://www.youtube.com/watch?v=vjgACKkPENg) |
||||
- [@video@How to Install Multiple Versions of Angular in Your Development Environment](https://www.youtube.com/watch?v=LYNG3kcKRQ8) |
||||
@ -1 +1,12 @@ |
||||
# Multiple Locales |
||||
|
||||
To deploy an Angular application with multiple locales, follow these steps: |
||||
|
||||
1. Place different versions of your app in locale-specific directories |
||||
2. Use the HTML `<base>` tag with the `href` attribute to set the base URL for relative links. |
||||
3. Deploy each language version in a different subdirectory. Redirect users to their preferred language based on the `Accept-Language` HTTP header. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Deploy Multiple Locales](https://angular.dev/guide/i18n/deploy) |
||||
- [@video@How Make Multi-Language Angular Websites - Full Guidance On Angular Localization](https://www.youtube.com/watch?v=vSwYuyH4kMA) |
||||
@ -1,9 +1,11 @@ |
||||
# Testing services |
||||
# Testing services with dependencies |
||||
|
||||
In an Angular application, Services are responsible for fetching, storing and processing data. Services are singletons, meaning there is only one instance of a Service during runtime. They are fit for central data storage, HTTP and WebSocket communication as well as data validation. |
||||
When you add a dependency to your service, you must also include it in your tests. For isolated tests, pass an instance of the injectable dependency class into the service’s constructor. Using the `inject` function can add complexity. Injecting the real service is often impractical because dependent services can be difficult to create and control. Instead, mock the dependency, use a dummy value, or create a spy on the relevant service method. By using the TestBed testing utility, you can let Angular’s dependency injection handle service creation and manage constructor argument order. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Website](https://angular.dev/guide/testing/services) |
||||
- [@article@Testing-Angular.com](https://testing-angular.com/testing-services/) |
||||
- [@feed@Explore top posts about Testing](https://app.daily.dev/tags/testing?ref=roadmapsh) |
||||
- [@video@Testing the Service which has another service injected through Dependency Injection](https://www.youtube.com/watch?v=ACb8wqwgOV4) |
||||
- [@video@Testing Services which has HttpClient as dependency by using Jasmine Spy](https://www.youtube.com/watch?v=15othucRXcI) |
||||
- [@video@Angular Unit Tests with the inject() function](https://www.youtube.com/watch?v=Tvsa4OMUGXs) |
||||
|
||||
@ -1 +1,8 @@ |
||||
# Slow Computations |
||||
|
||||
On every change detection cycle, Angular synchronously evaluates all template expressions in components based on their detection strategy and executes the `ngDoCheck`, `ngAfterContentChecked`, `ngAfterViewChecked`, and `ngOnChanges` lifecycle hooks. To remove slow computations, you can optimize algorithms, cache data with pure pipes or memoization, and limit lifecycle hook usage. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Slow Computations](https://angular.dev/best-practices/slow-computations) |
||||
- [@article@Angular Performance Optimization](https://davembush.medium.com/angular-performance-optimization-5ec630d2b8f1) |
||||
@ -1,3 +1,9 @@ |
||||
# Angular SSG |
||||
|
||||
SSG (Static Site Generator), helps in building the HTML full website, during the process of building and serving that HTML Page. This method helps to generate the HTML website on the client side before its being served on the server side. Therefore, whenever a user requests a HTML Page, firstly HTML page will be rendered and secondly, the angular app will be rendered. The SSG can be used only if your website is static (or) it's content doesn't changes frequently. |
||||
SSG (Static Site Generator) helps in building the HTML full website during the process of building and serving that HTML page. This method helps to generate the HTML website on the client side before it's served on the server side. Therefore, whenever a user requests a HTML page, the HTML page will be rendered, and secondly, the Angular app will be rendered. The SSG can be used only if your website is static or its content doesn't change frequently. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Prerendering (SSG)](https://angular.dev/guide/prerendering) |
||||
- [@video@Angular 16 Pre Rendering Static Pages - Static Site Generation SSG](https://www.youtube.com/watch?v=vmOWJvm3apA) |
||||
- [@podcast@Angular Air with Alyssa Nicoll - SSR, SSG, ISR, & SOS](https://www.youtube.com/watch?v=b0pUU7RJbBQ) |
||||
@ -1 +1,8 @@ |
||||
# @switch |
||||
|
||||
The `@switch` blocks displays content selected by one of the cases matching against the conditional expression. The value of the conditional expression is compared to the case expression using the `===` operator. `@switch` does not have fallthrough, so you do not need an equivalent to a break or return statement. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - @switch](https://angular.dev/guide/templates/control-flow#switch-block---selection) |
||||
- [@article@Angular @switch: Complete Guide](https://blog.angular-university.io/angular-switch/) |
||||
@ -1 +0,0 @@ |
||||
# Template Ref Vars |
||||
@ -1 +1,9 @@ |
||||
# Template Syntax |
||||
|
||||
In Angular, a *template* is a chunk of HTML. Use special syntax within a template to build on many of Angular's features. Extend the HTML vocabulary of your applications with special Angular syntax in your templates. For example, Angular helps you get and set DOM (Document Object Model) values dynamically with features such as built-in template functions, variables, event listening, and data binding. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Template Syntax](https://angular.dev/guide/templates) |
||||
- [@article@An Introduction to Angular Template Syntax](https://angularstart.com/modules/basic-angular-concepts/3/) |
||||
- [@video@Craft Dynamic Templates with Angular's Template Syntax](https://www.youtube.com/watch?v=uSnUTcf8adI) |
||||
@ -1 +1,9 @@ |
||||
# Testing Requests |
||||
|
||||
As for any external dependency, you must mock the HTTP backend so your tests can simulate interaction with a remote server. The `@angular/common/http/testing` library provides tools to capture requests made by the application, make assertions about them, and mock the responses to emulate your backend's behavior. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Testing Requests](https://angular.dev/guide/http/testing) |
||||
- [@video@Import Http Client Testing Module and make Test call with the HttpClient](https://www.youtube.com/watch?v=Sgy_RRXC9As) |
||||
- [@video@HTTP | Angular Unit Testing Made Easy: Comprehensive Guide to HTTP Testing](https://www.youtube.com/watch?v=7rlwryYhGzs) |
||||
@ -1 +1,8 @@ |
||||
# Testing Services |
||||
|
||||
To ensure your services function as expected, you can write dedicated tests for them. Services are typically the easiest files to unit test. You can instantiate the service within a `beforeEach` block, invoke its methods, and assert the results. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Testing Services](https://angular.dev/guide/testing/services) |
||||
- [@video@Step by Step implementation of the Calculator Service with Jasmine Specification](https://www.youtube.com/watch?v=yoJDYEq8vSs) |
||||
@ -1 +1,10 @@ |
||||
# Zone Pollution |
||||
|
||||
`Zone.js` is a signaling mechanism that Angular uses to detect when an application state might have changed. In some cases, scheduled tasks or microtasks don’t make any changes in the data model, which makes running change detection unnecessary. Common examples are `requestAnimationFrame`, `setTimeout` and `setInterval`. You can identify change detection with Angular DevTools, and you can run code outside the Angular zone to avoid unnecessary change detection calls. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@Angular Official Docs - Zone Pollution](https://angular.dev/best-practices/zone-pollution) |
||||
- [@official@Angular Official Docs - DevTools](https://angular.dev/tools/devtools) |
||||
- [@video@NgZone in Angular - Improve Performance by Running Code Outside Angular](https://www.youtube.com/watch?v=7duYY9IFIuw) |
||||
- [@video@4 Runtime Performance Optimizations](https://www.youtube.com/watch?v=f8sA-i6gkGQ) |
||||
@ -0,0 +1,9 @@ |
||||
# Buffer Overflow |
||||
|
||||
A Buffer Overflow is a type of vulnerability that occurs when a program or process attempts to write more data to a buffer—a temporary storage area in memory—than it can hold. This overflow can cause the extra data to overwrite adjacent memory locations, potentially leading to unintended behavior, crashes, or security breaches. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@What Is Buffer Overflow?](https://www.fortinet.com/resources/cyberglossary/buffer-overflow) |
||||
|
||||
- [@article@Buffer Overflow Attack](https://www.imperva.com/learn/application-security/buffer-overflow/) |
||||
@ -0,0 +1,8 @@ |
||||
# Deauth Attack |
||||
|
||||
A Deauthentication (Deauth) Attack is a type of denial-of-service (DoS) attack specific to wireless networks. It involves sending fake deauthentication frames to a Wi-Fi client or access point, forcing the client to disconnect from the network. The attacker uses this technique to disrupt the communication between the client and the access point, often with the intention of capturing data, launching further attacks, or simply causing disruption. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Wi-Fi Deauthentication Attack](https://medium.com/@balaramapunna123/wi-fi-deauthentication-attack-76cdd91d5fc) |
||||
- [@article@Deauthentication Attacks](https://www.baeldung.com/cs/deauthentication-attacks) |
||||
@ -0,0 +1,13 @@ |
||||
# Directory Traversal |
||||
|
||||
Directory Traversal, also known as Path Traversal, is a vulnerability that allows attackers to read files on a system without proper authorization. These attacks typically exploit unsecured paths using "../" (dot-dot-slash) sequences and their variations, or absolute file paths. The attack is also referred to as "dot-dot-slash," "directory climbing," or "backtracking." |
||||
|
||||
While Directory Traversal is sometimes combined with other vulnerabilities like Local File Inclusion (LFI) or Remote File Inclusion (RFI), the key difference is that Directory Traversal doesn't execute code, whereas LFI and RFI usually do. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Portswigger's guide on File Path Traversal](https://portswigger.net/web-security/file-path-traversal) |
||||
- [@official@OWASP's article on Path Traversal](https://owasp.org/www-community/attacks/Path_Traversal) |
||||
- [@course@TryHackMe's room on Path Traversal & File Inclusion](https://tryhackme.com/r/room/filepathtraversal) |
||||
- [@article@Acunetix's article on directory traversal](https://www.acunetix.com/websitesecurity/directory-traversal/) |
||||
- [@course@HackTheBox Academy's module on File Inclusion & Path Traversal](https://academy.hackthebox.com/course/preview/file-inclusion) |
||||
@ -0,0 +1,8 @@ |
||||
# Replay Attack |
||||
|
||||
A Replay Attack is a type of network attack where an attacker intercepts and retransmits legitimate communication data, often with the aim of gaining unauthorized access to a system or performing unauthorized actions. In this attack, the attacker captures a valid data transmission and then "replays" it later, without needing to decrypt or alter the data, to trick the recipient into thinking it's a legitimate request. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@What Is a Replay Attack?](https://usa.kaspersky.com/resource-center/definitions/replay-attack) |
||||
|
||||
@ -0,0 +1,8 @@ |
||||
# Rogue Access Point |
||||
|
||||
A Rogue Access Point (Rogue AP) is an unauthorized wireless access point installed on a secure network without the network administrator's knowledge or consent. These devices can be set up by malicious actors to intercept, steal, or manipulate network traffic, or by employees who unintentionally compromise network security by setting up their own wireless access points. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@Rogue access points](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:online-data-security/xcae6f4a7ff015e7d:cyber-attacks/a/rogue-access-points-mitm-attacks) |
||||
|
||||
@ -0,0 +1,16 @@ |
||||
# VirusTotal |
||||
|
||||
VirusTotal's main feature is multi-scanning using over 70 antivirus scanners to generate a cumulative report on whether a file is malicious. It also stores file hashes, eliminating the need to rescan previously uploaded files. Researchers can comment in the community, sharing their analysis and insights into malware for others to benefit from. |
||||
|
||||
VirusTotal's aggregated data comes from various antivirus engines, website scanners, file and URL analysis tools, and user contributions. These tools serve diverse purposes, including heuristic engines, known-bad signatures, metadata extraction, and identification of malicious signals. |
||||
|
||||
Additionally, VirusTotal offers services to search by file hash, IP address, and URL, which are also scanned. For more comprehensive features, VirusTotal provides Premium services such as Intelligence & Hunting. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@article@VirusTotal Explained](https://isecjobs.com/insights/virustotal-explained/) |
||||
|
||||
- [@official@VirusTotal's Docs on how VirusTotal Works](https://docs.virustotal.com/docs/how-it-works) |
||||
- [@official@VirusTotal's website](https://www.virustotal.com) |
||||
- [@article@Wikipedia Page on VirusTotal](https://en.wikipedia.org/wiki/VirusTotal) |
||||
- [@official@CISA's definition of VirusTotal](https://www.cisa.gov/resources-tools/services/virustotal) |
||||
@ -1,3 +1,3 @@ |
||||
# Selection Sort |
||||
|
||||
Selection Sort is a simple and intuitive sorting algorithm. It works by dividing the array into two parts - sorted and unsorted. Initially, the sorted part is empty and the unsorted part contains all the elements. The algorithm repeatedly selects the smallest (or largest, if sorting in descending order) element from the unsorted part and moves that to the end of the sorted part. The process continues until the unsorted part becomes empty and the sorted part contains all the elements. Selection sort is not efficient on large lists, as its time complexity is O(n²) where n is the number of items. |
||||
Selection Sort is a simple and intuitive sorting algorithm. It works by dividing the array into two parts - sorted and unsorted. Initially, the sorted part is empty and the unsorted part contains all the elements. The algorithm repeatedly selects the smallest (or largest, if sorting in descending order) element from the unsorted part and moves that to the end of the sorted part. The process continues until the unsorted part becomes empty and the sorted part contains all the elements. Selection sort is not efficient on large lists, as its time complexity is $O(n²)$ where $n$ is the number of items. |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Binary Trees |
||||
|
||||
A **Binary Tree** is a type of tree data structure in which each node has at most two children, referred to as the left child and the right child. This distinguishes it from trees in which nodes can have any number of children. A binary tree is further classified as a strictly binary tree if every non-leaf node in the tree has non-empty left and right child nodes. A binary tree is complete if all levels of the tree, except possibly the last, are fully filled, and all nodes are as left-justified as possible. Multiple algorithms and functions employ binary trees due to their suitable properties for mathematical operations and data organization. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [@video@Binary Tree](https://youtu.be/4r_XR9fUPhQ?si=PBsRjix_Z9kVHgMM) |
||||
- [@article@Binary Tree](https://www.w3schools.com/dsa/dsa_data_binarytrees.php) |
||||
|
||||
@ -1,3 +1,8 @@ |
||||
# Binary Search Trees |
||||
|
||||
A **Binary Search Tree** (BST) is a type of binary tree data structure where each node carries a unique key (a value), and each key/node has up to two referenced sub-trees, the left and right child. The key feature of a BST is that every node on the right subtree must have a value greater than its parent node, while every node on the left subtree must have a value less than its parent node. This property must be true for all the nodes, not just the root. Due to this property, searching, insertion, and removal of a node in a BST perform quite fast, and the operations can be done in O(log n) time complexity, making it suitable for data-intensive operations. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [@video@Binary Search Tree Part-1](https://youtu.be/lFq5mYUWEBk?si=GKRm1O278NCetnry) |
||||
- [@video@Binary Search Tree Part-2](https://youtu.be/JnrbMQyGLiU?si=1pfKn2akKXWLshY6) |
||||
|
||||
@ -1,3 +1,7 @@ |
||||
# Tree Traversal |
||||
|
||||
Tree Traversal is a method of visiting all the nodes in a tree data structure. There are three main types of tree traversal, these include Preorder, Inorder, and Postorder. Preorder traversal visits the current node before its child nodes, Inorder traversal visits the left child, then the parent and right child, and Postorder traversal visits the children before their respective parents. There's also a level order traversal which visits nodes level by level. Depth First Search (DFS) and Breadth First Search (BFS) are two popular algorithms used for tree traversal. DFS involves exhaustive searches of nodes by going forward if possible and if it is not possible then by going back. BFS starts traversal from the root node and visits nodes in a level by level manner. |
||||
|
||||
Learn more from the following links: |
||||
|
||||
- [@video@Tree Traversal pre-order, in-order, post-order](https://youtu.be/lFq5mYUWEBk?si=GKRm1O278NCetnry) |
||||
|
||||
@ -1,3 +1,7 @@ |
||||
# Decision Tree Learning |
||||
|
||||
`Decision Tree Learning` is an important concept in game development, particularly in the development of artificial intelligence for game characters. It is a kind of machine learning method that is based on using decision tree models to predict or classify information. A decision tree is a flowchart-like model, where each internal node denotes a test on an attribute, each branch represents an outcome of that test, and each leaf node holds a class label (decision made after testing all attributes). By applying decision tree learning models, computer-controlled characters can make decisions based on different conditions or states. They play a key role in creating complex and interactive gameplay experiences, by enabling game characters to adapt to the player's actions and the ever-changing game environment. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@video@Decision trees - A friendly introduction](https://www.youtube.com/watch?v=HkyWAhr9v8g) |
||||
@ -1,3 +1,7 @@ |
||||
# Microsurface Scattering |
||||
|
||||
Microsurface scattering, also known as sub-surface scattering, is an important phenomenon in Physically Based Rendering (PBR). This process involves the penetration of light into the surface of a material, where it is scattered by interacting with the material. In other words, when light strikes an object, rather than simply bouncing off the surface, some of it goes into the object and gets scattered around inside before getting re-emitted. It is key to achieving more realistic rendering of translucent materials like skin, marble, milk, and more. Consider it essential for replicating how light interacts with real-world materials in a convincing manner in your game. |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@video@The 4 main types of subsurface scattering](https://www.youtube.com/watch?v=GkjvYSbGHg4) |
||||
@ -1 +1,7 @@ |
||||
# apply |
||||
|
||||
The apply() method of Function instances calls this function with a given this value, and arguments provided as an array (or an array-like object). |
||||
|
||||
Visit the following resources to learn more: |
||||
|
||||
- [@official@apply() - MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) |
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue