Hang
3 days ago
committed by
GitHub
commit
3e562d1ac7
1017 changed files with 12606 additions and 3675 deletions
Binary file not shown.
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 593 KiB |
@ -0,0 +1,74 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import { ChevronDown } from 'lucide-react'; |
||||||
|
|
||||||
|
type RelatedGuidesProps = { |
||||||
|
relatedTitle?: string; |
||||||
|
relatedGuides: Record<string, string>; |
||||||
|
}; |
||||||
|
|
||||||
|
export function RelatedGuides(props: RelatedGuidesProps) { |
||||||
|
const { relatedTitle = 'Other Guides', relatedGuides } = props; |
||||||
|
|
||||||
|
const [isOpen, setIsOpen] = useState(false); |
||||||
|
|
||||||
|
const relatedGuidesArray = Object.entries(relatedGuides).map( |
||||||
|
([title, url]) => ({ |
||||||
|
title, |
||||||
|
url, |
||||||
|
}), |
||||||
|
); |
||||||
|
|
||||||
|
if (relatedGuidesArray.length === 0) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className={cn( |
||||||
|
'relative min-w-[250px] px-5 pt-0 max-lg:hidden lg:pt-10', |
||||||
|
)} |
||||||
|
> |
||||||
|
<h4 className="text-lg font-medium max-lg:hidden">{relatedTitle}</h4> |
||||||
|
<button |
||||||
|
className="flex w-full items-center justify-between gap-2 bg-gray-300 px-3 py-2 text-sm font-medium lg:hidden" |
||||||
|
onClick={() => setIsOpen(!isOpen)} |
||||||
|
> |
||||||
|
{relatedTitle} |
||||||
|
<ChevronDown |
||||||
|
size={16} |
||||||
|
className={cn( |
||||||
|
'transform transition-transform', |
||||||
|
isOpen && 'rotate-180', |
||||||
|
)} |
||||||
|
/> |
||||||
|
</button> |
||||||
|
|
||||||
|
<ol |
||||||
|
className={cn( |
||||||
|
'mt-0.5 space-y-0 max-lg:absolute max-lg:top-full max-lg:z-10 max-lg:mt-0 max-lg:w-full max-lg:bg-white max-lg:shadow', |
||||||
|
!isOpen && 'hidden lg:block', |
||||||
|
isOpen && 'block', |
||||||
|
)} |
||||||
|
> |
||||||
|
{relatedGuidesArray.map((relatedGuide) => ( |
||||||
|
<li key={relatedGuide.url}> |
||||||
|
<a |
||||||
|
href={relatedGuide.url} |
||||||
|
className="text-sm text-gray-500 no-underline hover:text-black max-lg:block max-lg:border-b max-lg:px-3 max-lg:py-1" |
||||||
|
onClick={() => { |
||||||
|
if (!isOpen) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsOpen(false); |
||||||
|
}} |
||||||
|
> |
||||||
|
{relatedGuide.title} |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
))} |
||||||
|
</ol> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,104 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpGet, httpPatch, httpPost } from '../../lib/http'; |
||||||
|
import { sponsorHidden } from '../../stores/page'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { X } from 'lucide-react'; |
||||||
|
import { setViewSponsorCookie } from '../../lib/jwt'; |
||||||
|
import { isMobile } from '../../lib/is-mobile'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { getUrlUtmParams } from '../../lib/browser.ts'; |
||||||
|
|
||||||
|
export type BottomRightSponsorType = { |
||||||
|
id: string; |
||||||
|
company: string; |
||||||
|
description: string; |
||||||
|
gaLabel: string; |
||||||
|
imageUrl: string; |
||||||
|
pageUrl: string; |
||||||
|
title: string; |
||||||
|
url: string; |
||||||
|
}; |
||||||
|
|
||||||
|
type V1GetSponsorResponse = { |
||||||
|
id?: string; |
||||||
|
href?: string; |
||||||
|
sponsor?: BottomRightSponsorType; |
||||||
|
}; |
||||||
|
|
||||||
|
type BottomRightSponsorProps = { |
||||||
|
sponsor: BottomRightSponsorType; |
||||||
|
|
||||||
|
onSponsorClick: () => void; |
||||||
|
onSponsorImpression: () => void; |
||||||
|
onSponsorHidden: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function BottomRightSponsor(props: BottomRightSponsorProps) { |
||||||
|
const { sponsor, onSponsorImpression, onSponsorClick, onSponsorHidden } = |
||||||
|
props; |
||||||
|
|
||||||
|
const [isHidden, setIsHidden] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!sponsor) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
onSponsorImpression(); |
||||||
|
}, []); |
||||||
|
|
||||||
|
const { url, title, imageUrl, description, company, gaLabel } = sponsor; |
||||||
|
|
||||||
|
const isRoadmapAd = title.toLowerCase() === 'advertise with us!'; |
||||||
|
|
||||||
|
if (isHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
href={url} |
||||||
|
target="_blank" |
||||||
|
rel="noopener sponsored nofollow" |
||||||
|
className="fixed bottom-0 left-0 right-0 z-50 flex bg-white shadow-lg outline-0 outline-transparent sm:bottom-[15px] sm:left-auto sm:right-[15px] sm:max-w-[350px]" |
||||||
|
onClick={onSponsorClick} |
||||||
|
> |
||||||
|
<span |
||||||
|
className="absolute right-1 top-1 text-gray-400 hover:text-gray-800 sm:right-1.5 sm:top-1.5 sm:text-gray-300" |
||||||
|
aria-label="Close" |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
setIsHidden(true); |
||||||
|
onSponsorHidden(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<X className="h-5 w-5 sm:h-4 sm:w-4" /> |
||||||
|
</span> |
||||||
|
<span> |
||||||
|
<img |
||||||
|
src={imageUrl} |
||||||
|
className="block h-[106px] object-cover sm:h-[153px] sm:w-[118.18px]" |
||||||
|
alt="Sponsor Banner" |
||||||
|
/> |
||||||
|
</span> |
||||||
|
<span className="flex flex-1 flex-col justify-between text-xs sm:text-sm"> |
||||||
|
<span className="p-[10px]"> |
||||||
|
<span className="mb-0.5 block font-semibold">{title}</span> |
||||||
|
<span className="block text-gray-500">{description}</span> |
||||||
|
</span> |
||||||
|
{!isRoadmapAd && ( |
||||||
|
<> |
||||||
|
<span className="sponsor-footer hidden sm:block"> |
||||||
|
Partner Content |
||||||
|
</span> |
||||||
|
<span className="block pb-1 text-center text-[10px] uppercase text-gray-400 sm:hidden"> |
||||||
|
Partner Content |
||||||
|
</span> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</span> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,195 @@ |
|||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { httpGet, httpPatch } from '../../lib/http'; |
||||||
|
import { sponsorHidden } from '../../stores/page'; |
||||||
|
import { useStore } from '@nanostores/react'; |
||||||
|
import { setViewSponsorCookie } from '../../lib/jwt'; |
||||||
|
import { isMobile } from '../../lib/is-mobile'; |
||||||
|
import Cookies from 'js-cookie'; |
||||||
|
import { getUrlUtmParams } from '../../lib/browser.ts'; |
||||||
|
import { StickyTopSponsor } from './StickyTopSponsor.tsx'; |
||||||
|
import { BottomRightSponsor } from './BottomRightSponsor.tsx'; |
||||||
|
|
||||||
|
type PageSponsorType = { |
||||||
|
company: string; |
||||||
|
description: string; |
||||||
|
gaLabel: string; |
||||||
|
imageUrl: string; |
||||||
|
pageUrl: string; |
||||||
|
title: string; |
||||||
|
url: string; |
||||||
|
id: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export type StickyTopSponsorType = PageSponsorType & { |
||||||
|
buttonText: string; |
||||||
|
style?: { |
||||||
|
fromColor?: string; |
||||||
|
toColor?: string; |
||||||
|
textColor?: string; |
||||||
|
buttonBackgroundColor?: string; |
||||||
|
buttonTextColor?: string; |
||||||
|
}; |
||||||
|
}; |
||||||
|
export type BottomRightSponsorType = PageSponsorType; |
||||||
|
|
||||||
|
type V1GetSponsorResponse = { |
||||||
|
bottomRightAd?: BottomRightSponsorType; |
||||||
|
stickyTopAd?: StickyTopSponsorType; |
||||||
|
}; |
||||||
|
|
||||||
|
type PageSponsorsProps = { |
||||||
|
gaPageIdentifier?: string; |
||||||
|
}; |
||||||
|
|
||||||
|
const CLOSE_SPONSOR_KEY = 'sponsorClosed'; |
||||||
|
|
||||||
|
function markSponsorHidden(sponsorId: string) { |
||||||
|
Cookies.set(`${CLOSE_SPONSOR_KEY}-${sponsorId}`, '1', { |
||||||
|
path: '/', |
||||||
|
expires: 1, |
||||||
|
sameSite: 'lax', |
||||||
|
secure: true, |
||||||
|
domain: import.meta.env.DEV ? 'localhost' : '.roadmap.sh', |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
function isSponsorMarkedHidden(sponsorId: string) { |
||||||
|
return Cookies.get(`${CLOSE_SPONSOR_KEY}-${sponsorId}`) === '1'; |
||||||
|
} |
||||||
|
|
||||||
|
export function PageSponsors(props: PageSponsorsProps) { |
||||||
|
const { gaPageIdentifier } = props; |
||||||
|
|
||||||
|
const $isSponsorHidden = useStore(sponsorHidden); |
||||||
|
|
||||||
|
const [stickyTopSponsor, setStickyTopSponsor] = |
||||||
|
useState<StickyTopSponsorType | null>(); |
||||||
|
const [bottomRightSponsor, setBottomRightSponsor] = |
||||||
|
useState<BottomRightSponsorType | null>(); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const foundUtmParams = getUrlUtmParams(); |
||||||
|
|
||||||
|
if (!foundUtmParams.utmSource) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
localStorage.setItem('utm_params', JSON.stringify(foundUtmParams)); |
||||||
|
}, []); |
||||||
|
|
||||||
|
async function loadSponsor() { |
||||||
|
const currentPath = window.location.pathname; |
||||||
|
if ( |
||||||
|
currentPath === '/' || |
||||||
|
currentPath === '/best-practices' || |
||||||
|
currentPath === '/roadmaps' || |
||||||
|
currentPath.startsWith('/guides') || |
||||||
|
currentPath.startsWith('/videos') || |
||||||
|
currentPath.startsWith('/account') || |
||||||
|
currentPath.startsWith('/team/') |
||||||
|
) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
const { response, error } = await httpGet<V1GetSponsorResponse>( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-get-sponsor`, |
||||||
|
{ |
||||||
|
href: window.location.pathname, |
||||||
|
mobile: isMobile() ? 'true' : 'false', |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error) { |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setStickyTopSponsor(response?.stickyTopAd); |
||||||
|
setBottomRightSponsor(response?.bottomRightAd); |
||||||
|
} |
||||||
|
|
||||||
|
async function logSponsorImpression( |
||||||
|
sponsor: BottomRightSponsorType | StickyTopSponsorType, |
||||||
|
) { |
||||||
|
window.fireEvent({ |
||||||
|
category: 'SponsorImpression', |
||||||
|
action: `${sponsor?.company} Impression`, |
||||||
|
label: |
||||||
|
sponsor?.gaLabel || `${gaPageIdentifier} / ${sponsor?.company} Link`, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
async function clickSponsor( |
||||||
|
sponsor: BottomRightSponsorType | StickyTopSponsorType, |
||||||
|
) { |
||||||
|
const { id: sponsorId, company, gaLabel } = sponsor; |
||||||
|
|
||||||
|
const labelValue = gaLabel || `${gaPageIdentifier} / ${company} Link`; |
||||||
|
|
||||||
|
window.fireEvent({ |
||||||
|
category: 'SponsorClick', |
||||||
|
action: `${company} Redirect`, |
||||||
|
label: labelValue, |
||||||
|
value: labelValue, |
||||||
|
}); |
||||||
|
|
||||||
|
const clickUrl = new URL( |
||||||
|
`${import.meta.env.PUBLIC_API_URL}/v1-view-sponsor/${sponsorId}`, |
||||||
|
); |
||||||
|
|
||||||
|
const { response, error } = await httpPatch<{ status: 'ok' }>( |
||||||
|
clickUrl.toString(), |
||||||
|
{ |
||||||
|
mobile: isMobile(), |
||||||
|
}, |
||||||
|
); |
||||||
|
|
||||||
|
if (error || !response) { |
||||||
|
console.error(error); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setViewSponsorCookie(sponsorId); |
||||||
|
} |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
window.setTimeout(loadSponsor); |
||||||
|
}, []); |
||||||
|
|
||||||
|
if ($isSponsorHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{stickyTopSponsor && !isSponsorMarkedHidden(stickyTopSponsor.id) && ( |
||||||
|
<StickyTopSponsor |
||||||
|
sponsor={stickyTopSponsor} |
||||||
|
onSponsorImpression={() => { |
||||||
|
logSponsorImpression(stickyTopSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorClick={() => { |
||||||
|
clickSponsor(stickyTopSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorHidden={() => { |
||||||
|
markSponsorHidden(stickyTopSponsor.id); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{bottomRightSponsor && !isSponsorMarkedHidden(bottomRightSponsor.id) && ( |
||||||
|
<BottomRightSponsor |
||||||
|
sponsor={bottomRightSponsor} |
||||||
|
onSponsorClick={() => { |
||||||
|
clickSponsor(bottomRightSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
onSponsorHidden={() => { |
||||||
|
markSponsorHidden(bottomRightSponsor.id); |
||||||
|
}} |
||||||
|
onSponsorImpression={() => { |
||||||
|
logSponsorImpression(bottomRightSponsor).catch(console.error); |
||||||
|
}} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,91 @@ |
|||||||
|
import { cn } from '../../lib/classname.ts'; |
||||||
|
import { useScrollPosition } from '../../hooks/use-scroll-position.ts'; |
||||||
|
import { X } from 'lucide-react'; |
||||||
|
import type { StickyTopSponsorType } from './PageSponsors.tsx'; |
||||||
|
import { useEffect, useState } from 'react'; |
||||||
|
import { isOnboardingStripHidden } from '../../stores/page.ts'; |
||||||
|
|
||||||
|
type StickyTopSponsorProps = { |
||||||
|
sponsor: StickyTopSponsorType; |
||||||
|
|
||||||
|
onSponsorImpression: () => void; |
||||||
|
onSponsorClick: () => void; |
||||||
|
onSponsorHidden: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
const SCROLL_DISTANCE = 100; |
||||||
|
|
||||||
|
export function StickyTopSponsor(props: StickyTopSponsorProps) { |
||||||
|
const { sponsor, onSponsorHidden, onSponsorImpression, onSponsorClick } = |
||||||
|
props; |
||||||
|
|
||||||
|
const { y: scrollY } = useScrollPosition(); |
||||||
|
const [isImpressionLogged, setIsImpressionLogged] = useState(false); |
||||||
|
const [isHidden, setIsHidden] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (!sponsor) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
// preload the image so that we don't see a flicker
|
||||||
|
const img = new Image(); |
||||||
|
img.src = sponsor.imageUrl; |
||||||
|
|
||||||
|
// hide the onboarding strip when the sponsor is visible
|
||||||
|
isOnboardingStripHidden.set(true); |
||||||
|
}, [sponsor]); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
if (scrollY < SCROLL_DISTANCE || isImpressionLogged) { |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
setIsImpressionLogged(true); |
||||||
|
onSponsorImpression(); |
||||||
|
}, [scrollY]); |
||||||
|
|
||||||
|
if (scrollY < SCROLL_DISTANCE || isHidden) { |
||||||
|
return null; |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<a |
||||||
|
target="_blank" |
||||||
|
href={sponsor.url} |
||||||
|
onClick={onSponsorClick} |
||||||
|
className={cn( |
||||||
|
'fixed left-0 right-0 top-0 z-[91] flex min-h-[45px] w-full flex-row items-center justify-center px-14 pb-2 pt-1.5 text-base font-medium text-yellow-950', |
||||||
|
)} |
||||||
|
style={{ |
||||||
|
backgroundImage: `linear-gradient(to bottom, ${sponsor.style?.fromColor}, ${sponsor.style?.toColor})`, |
||||||
|
color: sponsor.style?.textColor, |
||||||
|
}} |
||||||
|
> |
||||||
|
<img className="h-[23px]" src={sponsor.imageUrl} alt={'ad'} /> |
||||||
|
<span className="mx-3 truncate">{sponsor.description}</span> |
||||||
|
<button |
||||||
|
className="flex-truncate rounded-md px-3 py-1 text-sm transition-colors" |
||||||
|
style={{ |
||||||
|
backgroundColor: sponsor.style?.buttonBackgroundColor, |
||||||
|
color: sponsor.style?.buttonTextColor, |
||||||
|
}} |
||||||
|
> |
||||||
|
{sponsor.buttonText} |
||||||
|
</button> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className="absolute right-5 top-1/2 ml-1 -translate-y-1/2 px-1 py-1 opacity-70 hover:opacity-100" |
||||||
|
onClick={(e) => { |
||||||
|
e.preventDefault(); |
||||||
|
e.stopPropagation(); |
||||||
|
|
||||||
|
setIsHidden(true); |
||||||
|
onSponsorHidden(); |
||||||
|
}} |
||||||
|
> |
||||||
|
<X className="h-4 w-4" strokeWidth={3} /> |
||||||
|
</button> |
||||||
|
</a> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
import type { SVGProps } from 'react'; |
||||||
|
|
||||||
|
export function AppleCalendarIcon(props: SVGProps<SVGSVGElement>) { |
||||||
|
return ( |
||||||
|
<svg |
||||||
|
width="1736" |
||||||
|
height="1693" |
||||||
|
viewBox="0 0 1736 1693" |
||||||
|
fill="none" |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<rect width="1736" height="1693" fill="#ECEFF1" /> |
||||||
|
<rect x="1" width="1734" height="526" fill="#FF3D00" /> |
||||||
|
<path |
||||||
|
d="M724.689 300.13L750.665 128H805.4L756.691 401.947H701.224L669.269 240.501L637.587 401.947H581.892L533 128H588.101L613.894 299.947L646.032 128H692.505L724.689 300.13Z" |
||||||
|
fill="white" |
||||||
|
/> |
||||||
|
<path |
||||||
|
d="M976.776 283.419H890.632V356.061H992.617V401.947H835.303V128H992.206V174.069H890.632V238.812H976.776V283.419Z" |
||||||
|
fill="white" |
||||||
|
/> |
||||||
|
<path |
||||||
|
d="M1024.39 401.947V128H1096.84C1128.79 128 1154.31 138.182 1173.3 158.454C1192.29 178.771 1201.97 206.623 1202.34 242.008V286.433C1202.34 322.411 1192.84 350.673 1173.8 371.219C1154.86 391.674 1128.66 401.947 1095.28 401.947H1024.39ZM1079.72 174.069V356.015H1096.29C1114.73 356.015 1127.7 351.175 1135.23 341.45C1142.76 331.725 1146.73 314.969 1147.1 291.135V243.514C1147.1 217.946 1143.49 200.094 1136.37 189.958C1129.2 179.867 1117.06 174.571 1099.85 174.069H1079.72Z" |
||||||
|
fill="white" |
||||||
|
/> |
||||||
|
<path |
||||||
|
d="M831.353 1451.15H380.138V1345.95L587.348 1082.46C613.643 1045.98 632.999 1013.97 645.462 986.442C657.925 958.91 664.133 932.52 664.133 907.271C664.133 873.256 658.29 846.592 646.512 827.324C634.78 808.056 617.843 798.423 595.748 798.423C571.553 798.423 552.379 809.654 538.182 832.072C523.984 854.536 516.863 886.086 516.863 926.767H367.492C367.492 879.785 377.216 836.821 396.663 797.875C416.111 758.929 443.456 728.703 478.698 707.153C513.941 685.556 553.84 674.781 598.35 674.781C666.735 674.781 719.736 693.638 757.444 731.351C795.152 769.065 814.006 822.621 814.006 892.067C814.006 935.168 803.552 978.954 782.735 1023.29C761.872 1067.67 724.073 1122.27 669.383 1187.11L571.051 1327.55H831.353V1451.15Z" |
||||||
|
fill="#424242" |
||||||
|
/> |
||||||
|
<path |
||||||
|
d="M1354.1 888.871C1354.1 926.036 1346.21 959.001 1330.41 987.766C1314.62 1016.53 1292.89 1039.5 1265.22 1056.66C1296.77 1074.56 1321.69 1099.17 1339.91 1130.58C1358.12 1161.95 1367.25 1198.89 1367.25 1241.3C1367.25 1309.33 1347.62 1363.07 1308.36 1402.52C1269.1 1441.97 1215.6 1461.69 1147.94 1461.69C1080.29 1461.69 1026.47 1441.97 986.475 1402.52C946.53 1363.07 926.535 1309.33 926.535 1241.3C926.535 1198.89 935.62 1161.9 953.88 1130.35C972.095 1098.81 997.203 1074.24 1029.11 1056.71C1001.04 1039.54 979.171 1016.58 963.376 987.811C947.58 959.047 939.683 926.128 939.683 888.916C939.683 821.936 958.445 769.521 995.971 731.625C1033.45 693.729 1083.8 674.781 1146.89 674.781C1210.71 674.781 1261.2 693.912 1298.36 732.127C1335.52 770.343 1354.1 822.576 1354.1 888.871ZM1147.94 1338.05C1170.36 1338.05 1187.66 1328.46 1199.76 1309.38C1211.85 1290.29 1217.88 1263.72 1217.88 1229.71C1217.88 1195.69 1211.58 1169.07 1198.94 1149.76C1186.29 1130.45 1168.94 1120.81 1146.89 1120.81C1124.8 1120.81 1107.36 1130.45 1094.58 1149.76C1081.79 1169.07 1075.36 1195.69 1075.36 1229.71C1075.36 1263.72 1081.75 1290.29 1094.58 1309.38C1107.36 1328.51 1125.16 1338.05 1147.94 1338.05ZM1205.78 896.724C1205.78 866.909 1200.94 843.076 1191.31 825.224C1181.68 807.326 1166.89 798.377 1146.89 798.377C1127.95 798.377 1113.57 807.052 1103.8 824.402C1093.98 841.752 1089.05 865.859 1089.05 896.724C1089.05 926.904 1093.98 951.148 1103.8 969.594C1113.61 987.994 1128.31 997.217 1147.94 997.217C1167.57 997.217 1182.14 987.994 1191.59 969.594C1201.04 951.194 1205.78 926.904 1205.78 896.724Z" |
||||||
|
fill="#424242" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
import type { SVGProps } from 'react'; |
||||||
|
|
||||||
|
export function FileIcon(props: SVGProps<SVGSVGElement>) { |
||||||
|
return ( |
||||||
|
<svg |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
x="0px" |
||||||
|
y="0px" |
||||||
|
width={100} |
||||||
|
height={100} |
||||||
|
viewBox="0 0 48 48" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z" /> |
||||||
|
<path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z" /> |
||||||
|
<path |
||||||
|
fill="#1976D2" |
||||||
|
d="M16 21H33V23H16zM16 25H29V27H16zM16 29H33V31H16zM16 33H29V35H16z" |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import type { SVGProps } from 'react'; |
||||||
|
|
||||||
|
export function GoogleCalendarIcon(props: SVGProps<SVGSVGElement>) { |
||||||
|
return ( |
||||||
|
<svg |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
x="0px" |
||||||
|
y="0px" |
||||||
|
width="100" |
||||||
|
height="100" |
||||||
|
viewBox="0 0 48 48" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<rect width="22" height="22" x="13" y="13" fill="#fff"></rect> |
||||||
|
<polygon |
||||||
|
fill="#1e88e5" |
||||||
|
points="25.68,20.92 26.688,22.36 28.272,21.208 28.272,29.56 30,29.56 30,18.616 28.56,18.616" |
||||||
|
></polygon> |
||||||
|
<path |
||||||
|
fill="#1e88e5" |
||||||
|
d="M22.943,23.745c0.625-0.574,1.013-1.37,1.013-2.249c0-1.747-1.533-3.168-3.417-3.168 c-1.602,0-2.972,1.009-3.33,2.453l1.657,0.421c0.165-0.664,0.868-1.146,1.673-1.146c0.942,0,1.709,0.646,1.709,1.44 c0,0.794-0.767,1.44-1.709,1.44h-0.997v1.728h0.997c1.081,0,1.993,0.751,1.993,1.64c0,0.904-0.866,1.64-1.931,1.64 c-0.962,0-1.784-0.61-1.914-1.418L17,26.802c0.262,1.636,1.81,2.87,3.6,2.87c2.007,0,3.64-1.511,3.64-3.368 C24.24,25.281,23.736,24.363,22.943,23.745z" |
||||||
|
></path> |
||||||
|
<polygon |
||||||
|
fill="#fbc02d" |
||||||
|
points="34,42 14,42 13,38 14,34 34,34 35,38" |
||||||
|
></polygon> |
||||||
|
<polygon |
||||||
|
fill="#4caf50" |
||||||
|
points="38,35 42,34 42,14 38,13 34,14 34,34" |
||||||
|
></polygon> |
||||||
|
<path |
||||||
|
fill="#1e88e5" |
||||||
|
d="M34,14l1-4l-1-4H9C7.343,6,6,7.343,6,9v25l4,1l4-1V14H34z" |
||||||
|
></path> |
||||||
|
<polygon fill="#e53935" points="34,34 34,42 42,34"></polygon> |
||||||
|
<path fill="#1565c0" d="M39,6h-5v8h8V9C42,7.343,40.657,6,39,6z"></path> |
||||||
|
<path fill="#1565c0" d="M9,42h5v-8H6v5C6,40.657,7.343,42,9,42z"></path> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import type { SVGProps } from 'react'; |
||||||
|
|
||||||
|
export function OutlookCalendarIcon(props: SVGProps<SVGSVGElement>) { |
||||||
|
return ( |
||||||
|
<svg |
||||||
|
xmlns="http://www.w3.org/2000/svg" |
||||||
|
x="0px" |
||||||
|
y="0px" |
||||||
|
width={100} |
||||||
|
height={100} |
||||||
|
viewBox="0 0 48 48" |
||||||
|
{...props} |
||||||
|
> |
||||||
|
<path |
||||||
|
fill="#1976d2" |
||||||
|
d="M28,13h14.533C43.343,13,44,13.657,44,14.467v19.066C44,34.343,43.343,35,42.533,35H28V13z" |
||||||
|
/> |
||||||
|
<rect width={14} height="15.542" x={28} y="17.958" fill="#fff" /> |
||||||
|
<polygon fill="#1976d2" points="27,44 4,39.5 4,8.5 27,4" /> |
||||||
|
<path |
||||||
|
fill="#fff" |
||||||
|
d="M15.25,16.5c-3.176,0-5.75,3.358-5.75,7.5s2.574,7.5,5.75,7.5S21,28.142,21,24 S18.426,16.5,15.25,16.5z M15,28.5c-1.657,0-3-2.015-3-4.5s1.343-4.5,3-4.5s3,2.015,3,4.5S16.657,28.5,15,28.5z" |
||||||
|
/> |
||||||
|
<rect width="2.7" height="2.9" x="28.047" y="29.737" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="31.448" y="29.737" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="34.849" y="29.737" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="28.047" y="26.159" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="31.448" y="26.159" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="34.849" y="26.159" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="38.25" y="26.159" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="28.047" y="22.706" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="31.448" y="22.706" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="34.849" y="22.706" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="38.25" y="22.706" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="31.448" y="19.112" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="34.849" y="19.112" fill="#1976d2" /> |
||||||
|
<rect width="2.7" height="2.9" x="38.25" y="19.112" fill="#1976d2" /> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,40 @@ |
|||||||
|
import { Calendar } from 'lucide-react'; |
||||||
|
import { cn } from '../../lib/classname'; |
||||||
|
import type { ResourceType } from '../../lib/resource-progress'; |
||||||
|
import { ScheduleEventModal } from './ScheduleEventModal'; |
||||||
|
import { useState } from 'react'; |
||||||
|
|
||||||
|
type ScheduleButtonProps = { |
||||||
|
resourceId: string; |
||||||
|
resourceType: ResourceType; |
||||||
|
resourceTitle: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ScheduleButton(props: ScheduleButtonProps) { |
||||||
|
const { resourceId, resourceType, resourceTitle } = props; |
||||||
|
|
||||||
|
const [isModalOpen, setIsModalOpen] = useState(false); |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
{isModalOpen && ( |
||||||
|
<ScheduleEventModal |
||||||
|
onClose={() => { |
||||||
|
setIsModalOpen(false); |
||||||
|
}} |
||||||
|
roadmapId={resourceId} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
<button |
||||||
|
className="inline-flex items-center justify-center gap-2 rounded-md bg-gray-200 px-3 py-1.5 text-xs font-medium hover:bg-gray-300 sm:text-sm" |
||||||
|
onClick={() => { |
||||||
|
setIsModalOpen(true); |
||||||
|
}} |
||||||
|
> |
||||||
|
<Calendar className="h-4 w-4 flex-shrink-0" /> |
||||||
|
<span className="hidden sm:inline">Schedule Learning Time</span> |
||||||
|
</button> |
||||||
|
</> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,342 @@ |
|||||||
|
import { DateTime } from 'luxon'; |
||||||
|
import { Modal } from '../Modal'; |
||||||
|
import { ChevronRight, type LucideIcon, X } from 'lucide-react'; |
||||||
|
import { useState, type ReactNode, type SVGProps } from 'react'; |
||||||
|
import { GoogleCalendarIcon } from '../ReactIcons/GoogleCalendarIcon'; |
||||||
|
import { OutlookCalendarIcon } from '../ReactIcons/OutlookCalendarIcon'; |
||||||
|
import { AppleCalendarIcon } from '../ReactIcons/AppleCalendarIcon'; |
||||||
|
import { FileIcon } from '../ReactIcons/FileIcon'; |
||||||
|
|
||||||
|
function generateRoadmapIcsFile( |
||||||
|
title: string, |
||||||
|
details: string, |
||||||
|
location: string, |
||||||
|
startDate: Date, |
||||||
|
endDate: Date, |
||||||
|
) { |
||||||
|
const ics = ` |
||||||
|
BEGIN:VCALENDAR |
||||||
|
VERSION:2.0 |
||||||
|
BEGIN:VEVENT |
||||||
|
SUMMARY:${title} |
||||||
|
DESCRIPTION:${details} |
||||||
|
LOCATION:${location} |
||||||
|
DTSTART:${startDate.toISOString().replace(/-|:|\.\d+/g, '')} |
||||||
|
DTEND:${endDate.toISOString().replace(/-|:|\.\d+/g, '')} |
||||||
|
RRULE:FREQ=DAILY |
||||||
|
|
||||||
|
BEGIN:VALARM |
||||||
|
TRIGGER:-PT30M |
||||||
|
ACTION:DISPLAY |
||||||
|
DESCRIPTION:Reminder: ${title} starts in 30 minutes |
||||||
|
END:VALARM |
||||||
|
|
||||||
|
BEGIN:VALARM |
||||||
|
TRIGGER:-PT15M |
||||||
|
ACTION:DISPLAY |
||||||
|
DESCRIPTION:Reminder: ${title} starts in 15 minutes |
||||||
|
END:VALARM |
||||||
|
|
||||||
|
END:VEVENT |
||||||
|
END:VCALENDAR |
||||||
|
`.trim();
|
||||||
|
|
||||||
|
return new Blob([ics], { type: 'text/calendar' }); |
||||||
|
} |
||||||
|
|
||||||
|
type ScheduleEventModalProps = { |
||||||
|
roadmapId: string; |
||||||
|
onClose: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function ScheduleEventModal(props: ScheduleEventModalProps) { |
||||||
|
const { onClose, roadmapId } = props; |
||||||
|
|
||||||
|
let roadmapTitle = ''; |
||||||
|
|
||||||
|
if (roadmapId === 'devops') { |
||||||
|
roadmapTitle = 'DevOps'; |
||||||
|
} else if (roadmapId === 'ios') { |
||||||
|
roadmapTitle = 'iOS'; |
||||||
|
} else if (roadmapId === 'postgresql-dba') { |
||||||
|
roadmapTitle = 'PostgreSQL'; |
||||||
|
} else if (roadmapId === 'devrel') { |
||||||
|
roadmapTitle = 'DevRel'; |
||||||
|
} else if (roadmapId === 'qa') { |
||||||
|
roadmapTitle = 'QA'; |
||||||
|
} else if (roadmapId === 'api-design') { |
||||||
|
roadmapTitle = 'API Design'; |
||||||
|
} else if (roadmapId === 'ai-data-scientist') { |
||||||
|
roadmapTitle = 'AI/Data Scientist'; |
||||||
|
} else if (roadmapId === 'technical-writer') { |
||||||
|
} else if (roadmapId === 'software-architect') { |
||||||
|
roadmapTitle = 'Software Architecture'; |
||||||
|
} else if (roadmapId === 'ai-engineer') { |
||||||
|
roadmapTitle = 'AI Engineer'; |
||||||
|
} else { |
||||||
|
roadmapTitle = roadmapId |
||||||
|
.split('-') |
||||||
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1)) |
||||||
|
.join(' '); |
||||||
|
} |
||||||
|
|
||||||
|
const [selectedCalendar, setSelectedCalendar] = useState< |
||||||
|
'apple' | 'outlook' | null |
||||||
|
>(null); |
||||||
|
const [isLoading, setIsLoading] = useState(false); |
||||||
|
|
||||||
|
const location = `https://roadmap.sh/${roadmapId}`; |
||||||
|
const title = `Learn from ${roadmapTitle} Roadmap - roadmap.sh`; |
||||||
|
const details = ` |
||||||
|
Learn from the ${roadmapTitle} roadmap on roadmap.sh |
||||||
|
|
||||||
|
Visit the roadmap at https://roadmap.sh/${roadmapId}
|
||||||
|
`.trim();
|
||||||
|
|
||||||
|
const handleDownloadICS = () => { |
||||||
|
setIsLoading(true); |
||||||
|
|
||||||
|
const calendarTitle = selectedCalendar || 'ICS'; |
||||||
|
|
||||||
|
triggerScheduleEvent( |
||||||
|
`${calendarTitle.charAt(0).toUpperCase()}${calendarTitle.slice(1)}`, |
||||||
|
); |
||||||
|
|
||||||
|
const startDate = DateTime.now().minus({ |
||||||
|
minutes: DateTime.now().minute % 30, |
||||||
|
}); |
||||||
|
const endDate = startDate.plus({ hours: 1 }); |
||||||
|
const blob = generateRoadmapIcsFile( |
||||||
|
title, |
||||||
|
details, |
||||||
|
location, |
||||||
|
startDate.toJSDate(), |
||||||
|
endDate.toJSDate(), |
||||||
|
); |
||||||
|
|
||||||
|
const url = URL.createObjectURL(blob); |
||||||
|
|
||||||
|
const a = document.createElement('a'); |
||||||
|
a.href = url; |
||||||
|
a.download = `${roadmapTitle}.ics`; |
||||||
|
a.click(); |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
URL.revokeObjectURL(url); |
||||||
|
}; |
||||||
|
|
||||||
|
const triggerScheduleEvent = function (type: string) { |
||||||
|
window.fireEvent({ |
||||||
|
category: 'ScheduleTimeClick', |
||||||
|
action: `Schedule Learning Time`, |
||||||
|
label: `Schedule Learning Time / ${type}`, |
||||||
|
value: `Schedule Learning Time / ${type}`, |
||||||
|
}); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleGoogleCalendar = () => { |
||||||
|
setIsLoading(true); |
||||||
|
triggerScheduleEvent('Google'); |
||||||
|
|
||||||
|
const baseURL = |
||||||
|
'https://calendar.google.com/calendar/render?action=TEMPLATE'; |
||||||
|
|
||||||
|
const startDate = DateTime.now().minus({ |
||||||
|
minutes: DateTime.now().minute % 30, |
||||||
|
}); |
||||||
|
const endDate = startDate.plus({ hours: 1 }); |
||||||
|
|
||||||
|
const eventDetails = new URLSearchParams({ |
||||||
|
text: title, |
||||||
|
dates: `${startDate.toISO().replace(/-|:|\.\d+/g, '')}/${endDate.toISO().replace(/-|:|\.\d+/g, '')}`, |
||||||
|
details, |
||||||
|
location, |
||||||
|
recur: 'RRULE:FREQ=DAILY', |
||||||
|
}).toString(); |
||||||
|
|
||||||
|
setIsLoading(false); |
||||||
|
window.open(`${baseURL}&${eventDetails}`, '_blank'); |
||||||
|
}; |
||||||
|
|
||||||
|
const stepDetails = { |
||||||
|
apple: { |
||||||
|
title: 'Add to Apple Calendar', |
||||||
|
steps: [ |
||||||
|
'Download the iCS File', |
||||||
|
'Open the downloaded file, and it will automatically open your default calendar app.', |
||||||
|
<> |
||||||
|
If Apple Calendar is not your default calendar app, open Apple |
||||||
|
Calendar, go to <strong>File > Import</strong>, and choose the |
||||||
|
downloaded file. |
||||||
|
</>, |
||||||
|
], |
||||||
|
}, |
||||||
|
outlook: { |
||||||
|
title: 'Add to Outlook Calendar', |
||||||
|
steps: [ |
||||||
|
'Download the iCS File', |
||||||
|
<> |
||||||
|
Open Outlook and go to{' '} |
||||||
|
<strong>File > Open & Export > Import/Export</strong>. |
||||||
|
</>, |
||||||
|
<> |
||||||
|
In the Import and Export Wizard select{' '} |
||||||
|
<strong>Import an iCalendar (.ics) or vCalendar file (.vcs)</strong>. |
||||||
|
You can then choose to keep it a separate calendar or make it a new |
||||||
|
calendar. |
||||||
|
</>, |
||||||
|
], |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Modal |
||||||
|
onClose={onClose} |
||||||
|
bodyClassName="bg-transparent shadow-none" |
||||||
|
wrapperClassName="h-auto max-w-lg" |
||||||
|
overlayClassName="items-start md:items-center" |
||||||
|
> |
||||||
|
<div className="rounded-xl bg-white px-3"> |
||||||
|
<button |
||||||
|
className="absolute right-4 top-4 text-gray-400 hover:text-black" |
||||||
|
onClick={onClose} |
||||||
|
> |
||||||
|
<X className="h-4 w-4 stroke-[2.5]" /> |
||||||
|
</button> |
||||||
|
|
||||||
|
<div className="flex flex-col items-center p-4 py-6 text-center"> |
||||||
|
{selectedCalendar && ( |
||||||
|
<CalendarSteps |
||||||
|
title={stepDetails[selectedCalendar].title} |
||||||
|
steps={stepDetails[selectedCalendar].steps} |
||||||
|
onDownloadICS={handleDownloadICS} |
||||||
|
onCancel={() => { |
||||||
|
setSelectedCalendar(null); |
||||||
|
}} |
||||||
|
isLoading={isLoading} |
||||||
|
/> |
||||||
|
)} |
||||||
|
|
||||||
|
{!selectedCalendar && ( |
||||||
|
<> |
||||||
|
<h2 className="text-3xl font-semibold">Schedule Learning Time</h2> |
||||||
|
<p className="mt-1.5 text-balance text-base text-gray-600"> |
||||||
|
Block some time on your calendar to stay consistent |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="mt-6 flex w-full flex-col gap-1"> |
||||||
|
<CalendarButton |
||||||
|
icon={GoogleCalendarIcon} |
||||||
|
label="Google Calendar" |
||||||
|
onClick={handleGoogleCalendar} |
||||||
|
isLoading={isLoading} |
||||||
|
/> |
||||||
|
<CalendarButton |
||||||
|
icon={AppleCalendarIcon} |
||||||
|
label="Apple Calendar" |
||||||
|
onClick={() => { |
||||||
|
setSelectedCalendar('apple'); |
||||||
|
}} |
||||||
|
/> |
||||||
|
<CalendarButton |
||||||
|
icon={OutlookCalendarIcon} |
||||||
|
label="Outlook Calendar" |
||||||
|
onClick={() => { |
||||||
|
setSelectedCalendar('outlook'); |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<div className="mx-auto my-4 text-base text-gray-600"> |
||||||
|
or download the iCS file and import it to your calendar app |
||||||
|
</div> |
||||||
|
|
||||||
|
<CalendarButton |
||||||
|
icon={FileIcon} |
||||||
|
label="Download File (.ics)" |
||||||
|
onClick={handleDownloadICS} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</Modal> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type SVGIcon = (props: SVGProps<SVGSVGElement>) => ReactNode; |
||||||
|
|
||||||
|
type CalendarButtonProps = { |
||||||
|
icon: LucideIcon | SVGIcon; |
||||||
|
label: string; |
||||||
|
isLoading?: boolean; |
||||||
|
onClick: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
function CalendarButton(props: CalendarButtonProps) { |
||||||
|
const { icon: Icon, label, isLoading, onClick } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<button |
||||||
|
className="flex w-full items-center justify-between gap-2 rounded-lg border px-3 py-3 leading-none hover:bg-gray-100 disabled:opacity-60 data-[loading='true']:cursor-progress" |
||||||
|
data-loading={isLoading} |
||||||
|
disabled={isLoading} |
||||||
|
onClick={onClick} |
||||||
|
> |
||||||
|
<div className="flex items-center gap-2"> |
||||||
|
<Icon className="h-5 w-5 shrink-0 stroke-[2.5]" /> |
||||||
|
{label} |
||||||
|
</div> |
||||||
|
<ChevronRight className="h-4 w-4 stroke-[2.5]" /> |
||||||
|
</button> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
type CalendarStepsProps = { |
||||||
|
title: string; |
||||||
|
steps: (string | ReactNode)[]; |
||||||
|
onDownloadICS: () => void; |
||||||
|
isLoading?: boolean; |
||||||
|
onCancel: () => void; |
||||||
|
}; |
||||||
|
|
||||||
|
export function CalendarSteps(props: CalendarStepsProps) { |
||||||
|
const { steps, onDownloadICS, onCancel, title, isLoading } = props; |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="flex flex-col"> |
||||||
|
<h2 className="text-3xl font-semibold">{title}</h2> |
||||||
|
|
||||||
|
<div className="mt-6 flex flex-col gap-2"> |
||||||
|
{steps.map((step, index) => ( |
||||||
|
<div key={index} className="flex items-baseline gap-3"> |
||||||
|
<div className="relative top-px flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-200 text-sm text-gray-600"> |
||||||
|
{index + 1} |
||||||
|
</div> |
||||||
|
<div className="flex flex-col gap-1"> |
||||||
|
<p className="text-left text-base text-gray-800">{step}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="mt-6 flex gap-2"> |
||||||
|
<button |
||||||
|
className="flex-1 rounded-md border border-gray-300 py-2 text-sm text-gray-600 hover:bg-gray-100 disabled:opacity-60 data-[loading='true']:cursor-progress" |
||||||
|
onClick={onCancel} |
||||||
|
disabled={isLoading} |
||||||
|
> |
||||||
|
Go back |
||||||
|
</button> |
||||||
|
<button |
||||||
|
className="flex-1 rounded-md bg-black py-2 text-sm text-white hover:bg-blue-700 disabled:opacity-60 data-[loading='true']:cursor-progress" |
||||||
|
onClick={onDownloadICS} |
||||||
|
disabled={isLoading} |
||||||
|
data-loading={isLoading} |
||||||
|
> |
||||||
|
Download |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
--- |
||||||
|
title: 'AI Roadmaps Improved, Schedule Learning Time' |
||||||
|
description: 'AI Roadmaps are now deeper and we have added a new feature to schedule learning time' |
||||||
|
images: |
||||||
|
"AI Roadmaps Depth": "https://assets.roadmap.sh/guest/3-level-roadmaps-lotx1.png" |
||||||
|
"Schedule Learning Time": "https://assets.roadmap.sh/guest/schedule-learning-time.png" |
||||||
|
"Schedule Learning Time Modal": "https://assets.roadmap.sh/guest/schedule-learning-time-2.png" |
||||||
|
seo: |
||||||
|
title: 'AI Roadmaps Improved, Schedule Learning Time' |
||||||
|
description: '' |
||||||
|
date: 2024-11-18 |
||||||
|
--- |
||||||
|
|
||||||
|
We have improved our AI roadmaps, added a way to schedule learning time, and made some site wide bug fixes and improvements. Here are the details: |
||||||
|
|
||||||
|
- [AI generated roadmaps](https://roadmap.sh/ai) are now 3 levels deep giving you more detailed information. We have also improved the quality of the generated roadmaps. |
||||||
|
- Schedule learning time on your calendar for any roadmap. Just click on the "Schedule Learning Time" button and select the time slot you want to block. |
||||||
|
- You can now dismiss the sticky roadmap progress indicator at the bottom of any roadmap. |
||||||
|
- We have added some new Project Ideas to our [Frontend Roadmap](/frontend/projects). |
||||||
|
- Bug fixes and performance improvements |
||||||
|
|
||||||
|
We have a new Engineering Manager Roadmap coming this week. Stay tuned! |
||||||
@ -0,0 +1,22 @@ |
|||||||
|
--- |
||||||
|
title: 'DevOps Project Ideas, Team Dashboard, Redis Content' |
||||||
|
description: 'New Project Ideas for DevOps, Team Dashboard, Redis Content' |
||||||
|
images: |
||||||
|
"DevOps Project Ideas": "https://assets.roadmap.sh/guest/devops-project-ideas.png" |
||||||
|
"Redis Resources": "https://assets.roadmap.sh/guest/redis-resources.png" |
||||||
|
"Team Dashboard": "https://assets.roadmap.sh/guest/team-dashboard.png" |
||||||
|
seo: |
||||||
|
title: 'DevOps Project Ideas, Team Dashboard, Redis Content' |
||||||
|
description: '' |
||||||
|
date: 2024-10-16 |
||||||
|
--- |
||||||
|
|
||||||
|
We have added 21 new project ideas to our DevOps roadmap, added content to Redis roadmap and introduced a new team dashboard for teams |
||||||
|
|
||||||
|
- Practice your skills with [21 newly added DevOps Project Ideas](https://roadmap.sh/devops) |
||||||
|
- We have a new [Dashboard for teams](https://roadmap.sh/teams) to track their team activity. |
||||||
|
- [Redis roadmap](https://roadmap.sh/redis) now comes with learning resources. |
||||||
|
- Watch us [interview Bruno Simon](https://www.youtube.com/watch?v=IQK9T05BsOw) about his journey as a creative developer. |
||||||
|
- Bug fixes and performance improvements |
||||||
|
|
||||||
|
ML Engineer roadmap and team dashboards are coming up next. Stay tuned! |
||||||
@ -0,0 +1,281 @@ |
|||||||
|
--- |
||||||
|
title: "Backend Developer Job Description [2024 Template]" |
||||||
|
description: 'Learn how to write the perfect backend developer job description and get my best tips on how to recruit backend dev talent effectively.' |
||||||
|
authorId: ekene |
||||||
|
excludedBySlug: '/backend/job-description' |
||||||
|
seo: |
||||||
|
title: "Backend Developer Job Description [2024 Template]" |
||||||
|
description: '' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/backend-job-description-nn3ja.png' |
||||||
|
relatedTitle: "Other Guides" |
||||||
|
relatedGuides: |
||||||
|
"The 5 Best Backend Development Languages to Master (2024)": "/backend/languages" |
||||||
|
"Top 7 Backend Frameworks to Use in 2024: Pro Advice": "/backend/frameworks" |
||||||
|
"Top 10+ Backend Technologies to Use in 2024: Expert Advice": "/backend/technologies" |
||||||
|
"8 In-Demand Backend Developer Skills to Master": "/backend/developer-skills" |
||||||
|
"50 Popular Backend Developer Interview Questions and Answers": "/questions/backend" |
||||||
|
"25 Essential Backend Development Tools for 2024": "/backend/developer-tools" |
||||||
|
"20 Backend Project Ideas to take you from Beginner to Pro": "/backend/project-ideas" |
||||||
|
isNew: true |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-12 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Hiring the right candidate for a [backend engineering](https://roadmap.sh/backend) role requires identifying individuals who possess the necessary technical and soft skills and align with your organization's values. Selecting the right candidate can be challenging with a high volume of applications. |
||||||
|
|
||||||
|
Knowing what to prioritize when evaluating candidates is necessary for choosing the best fit for this role. In this guide, I’ll outline the key skills and qualities I focus on as a hiring manager when hiring a backend engineer. |
||||||
|
|
||||||
|
Here is a summary of the backend developer job description: |
||||||
|
|
||||||
|
- Design, develop, and maintain highly performant, reliable, scalable, and secure backend systems and server side logic. |
||||||
|
- Oversee projects from conception to deployment, ensuring smooth execution and delivery to create a great and on-brand user experience. |
||||||
|
- Maintain and optimize the backend infrastructure to meet evolving project needs. |
||||||
|
- Collaborate with front-end developers to integrate user-facing elements with server-side logic. |
||||||
|
- Write clean, standardized, maintainable, testable, and reusable backend code to solve business and technical problems. |
||||||
|
|
||||||
|
Let’s look at the backend engineer role in more detail. |
||||||
|
|
||||||
|
## Backend engineer job description template |
||||||
|
|
||||||
|
The job description of a backend developer differs depending on the team, project, or organization. Based on my experience as a backend engineer recruiter, here is a sample job description template that outlines the key skills and qualifications hiring managers look for in potential candidates: |
||||||
|
|
||||||
|
**Job title: Backend Engineer** |
||||||
|
|
||||||
|
**Company:** [Company Name] |
||||||
|
|
||||||
|
**Location:** [Location, region, hybrid, or remote] |
||||||
|
|
||||||
|
**Job Type:** [Full-time, Part-time, or Contract]. |
||||||
|
|
||||||
|
**About us** |
||||||
|
[Give a brief introduction of your company and what you do]. |
||||||
|
|
||||||
|
**Job Description** |
||||||
|
**[Company Name]** is looking for experienced backend engineers who are passionate about building scalable, efficient, and reliable server-side applications. This role requires strong proficiency in server-side languages (such as Python, Java, or Node.js), databases (SQL, NoSQL), and API development. The ideal candidate will have a solid understanding of backend architecture, security best practices, and cloud technologies to support modern applications. |
||||||
|
|
||||||
|
Collaboration with frontend developers, designers, product managers, and other teams is key to this role, so strong communication skills are important. We are looking for strong problem solvers who can apply their engineering skills across different platforms and environments to deliver the best possible experience for customers and internal users. |
||||||
|
|
||||||
|
**Responsibilities** |
||||||
|
|
||||||
|
- Take ownership of the design, architecture, development, deployment and operations of microservices you will develop, using DevOps practices, pair programming and other cutting-edge methodologies. |
||||||
|
- Promote a highly collaborative environment with other product team members. |
||||||
|
- Participate in regular technical forums to share knowledge with other engineers. |
||||||
|
- Be an active member of cross-functional agile teams collaborating with product owners, frontend developers, designers, and business intelligence teams. |
||||||
|
- Build the server side logic of our web application. |
||||||
|
|
||||||
|
**Requirements** |
||||||
|
|
||||||
|
- Solid backend experience with microservice and distributed event-driven architectural patterns |
||||||
|
- Degree in computer science or any related discipline. |
||||||
|
- Professional experience with one backend programming language, e.g., Python, C#, Java |
||||||
|
- Experience working with docker and containerization technologies such as Kubernetes. |
||||||
|
- A deep understanding of continuous integration and continuous delivery. |
||||||
|
- Practical experience in applying advanced design concepts such as Domain Driven Design (DDD), Object Oriented Programming (OOP). |
||||||
|
- Strong communication and collaboration skills. |
||||||
|
|
||||||
|
**What we offer** |
||||||
|
[Itemize the different perks you offer, for example, training allowance, competitive salary, home office setup, etc.]. |
||||||
|
|
||||||
|
**How to apply** |
||||||
|
If this role excites you, please submit your resume and cover letter to **[contact email or link to** **job** **portal]**. |
||||||
|
|
||||||
|
You have seen what a sample backend engineer job advert looks like; now, let’s have a detailed look at a backend developer’s responsibilities. |
||||||
|
|
||||||
|
## Key backend developer responsibilities |
||||||
|
|
||||||
|
The roles and responsibilities of a backend engineer could vary depending on the project requirements, company size, or team structure. However, there are typical roles and responsibilities that cut across board. They include: |
||||||
|
|
||||||
|
- Server-side development |
||||||
|
- Application Programming Interface (API) development |
||||||
|
- Database administration and management |
||||||
|
- Performance optimization |
||||||
|
- Integration of third-party services |
||||||
|
- Testing |
||||||
|
- Documentation |
||||||
|
- Collaboration |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Typical projects that backend developers work on include: |
||||||
|
|
||||||
|
- RESTful APIs that perform CRUD operations. |
||||||
|
- Building web scraping and data processing services. |
||||||
|
- Building image processing services. |
||||||
|
- Designing and implementing content delivery networks (CDNs). |
||||||
|
- Modeling and designing database systems. |
||||||
|
|
||||||
|
Let’s look at their individual responsibilities in detail: |
||||||
|
|
||||||
|
### Server-side development |
||||||
|
|
||||||
|
This is one of the core responsibilities of a backend developer. It involves writing server-side web application logic to handle requests from the frontend, communicate with database systems, and handle an application’s business and backend logic. |
||||||
|
|
||||||
|
### API development |
||||||
|
|
||||||
|
A backend developer designs, implements, and maintains APIs for communicating between different services or parts of an application and with external systems. This involves creating endpoints, responding to requests, and ensuring API security. [Swagger](https://swagger.io/) is a standard tool used by backend engineers to design and document APIs. |
||||||
|
|
||||||
|
### Database administration and management |
||||||
|
|
||||||
|
Data plays a central role in software and application development. A backend developer decides how and where to store these data. Databases are one of the most used data storage solutions, and a backend developer designs and maintains them for efficient data management. The tasks here include deciding which databases to use, either [SQL](https://roadmap.sh/sql) or NoSQL databases, also known as document databases, choosing the right Object Relation Mapper (ORM) for mapping objects to a database, writing efficient queries, optimizing database performance, and ensuring data security. |
||||||
|
|
||||||
|
### Performance optimization |
||||||
|
|
||||||
|
Backend engineers continually look for ways to optimize performance. They identify performance bottlenecks such as slow database queries, poor code quality, and high application latency and work towards resolving them. This involves refactoring to ensure high-quality reusable code, updating dependencies, redesigning the database schema, etc. |
||||||
|
|
||||||
|
### Integration of third-party services |
||||||
|
|
||||||
|
Some applications integrate with third-party web services or APIs to perform specific tasks. Some of these third-party services include payment gateways, cloud services such as Google Cloud and [Amazon Web Services](https://roadmap.sh/aws), and user authentication services, such as Auth0. Backend engineers integrate these external services into an application. |
||||||
|
|
||||||
|
### Testing and bug fixing |
||||||
|
|
||||||
|
Backend engineers write unit, integration, and end-to-end tests to ensure system reliability. These tests help to keep the system *up* and bug-free during continuous development. Troubleshooting and fixing are also part of a backend engineer’s primary responsibility. |
||||||
|
|
||||||
|
### Documentation |
||||||
|
|
||||||
|
A backend developer writes and maintains technical specifications, API documentation, and guides for existing and new team members. These documents are forms of knowledge transfer and can be referenced when needed. |
||||||
|
|
||||||
|
### Collaboration |
||||||
|
|
||||||
|
Backend engineers collaborate with other team members, including frontend developers, UI/UX designers, project managers, product managers, etc., to achieve a common goal. |
||||||
|
|
||||||
|
## Skills and qualifications needed to excel as a backend engineer |
||||||
|
|
||||||
|
A backend engineer needs a combination of soft and technical skills to excel. Some of the skills you should look out for when hiring a backend engineer include: |
||||||
|
|
||||||
|
- Knowledge of at least one backend programming language |
||||||
|
- In-depth understanding of databases and caching |
||||||
|
- Knowledge of Application Programming Interfaces (APIs) |
||||||
|
- Basic knowledge of web servers |
||||||
|
- Knowledge of design patterns |
||||||
|
- Familiarity with version control systems |
||||||
|
- Understanding of security best practices |
||||||
|
- Collaboration and communication skills |
||||||
|
|
||||||
|
### Knowledge of at least one backend programming language |
||||||
|
|
||||||
|
A [backend developer](https://roadmap.sh/backend/developer-skills) should have an in-depth knowledge of at least one backend programming language, such as [Java](https://roadmap.sh/java), C#, [Python](https://roadmap.sh/python), [JavaScript (Node.js)](https://roadmap.sh/nodejs), etc. It is also beneficial for a backend engineer to be familiar with some backend frameworks such as Django, [ASP.NET](https://roadmap.sh/aspnet-core), Ruby on Rails, [Sprint Boot](https://roadmap.sh/spring-boot), etc. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### In-depth understanding of databases and caching |
||||||
|
|
||||||
|
A backend developer should know how databases and caching work in robust web applications. Many types of databases are used in backend systems, including relational and document databases. Examples of Database Management Systems used in backend systems include Microsoft SQL Server, PostgreSQL, MySQL, MongoDB, etc. |
||||||
|
|
||||||
|
[Caching](https://roadmap.sh/guides/http-caching) is a process of temporarily storing data that is requested regularly. It helps avoid recurrent unnecessary database queries. Redis is an example of an in-memory data store used for caching. |
||||||
|
|
||||||
|
### Knowledge of APIs |
||||||
|
|
||||||
|
APIs are used to communicate between different systems. These systems could be microservices, frontend and backend systems, or third-party systems. A backend developer is expected to know how to [design APIs](https://roadmap.sh/api-design) and make them available to consumers. |
||||||
|
|
||||||
|
### Basic knowledge of web servers |
||||||
|
|
||||||
|
A backend engineer should have a basic understanding of web server technologies. Web servers respond to client requests. An example of a web server is Nginx. During the interview process, you should ensure that the candidate understands how web servers work and also know how to configure them. |
||||||
|
|
||||||
|
### Knowledge of design patterns |
||||||
|
|
||||||
|
[Design patterns](https://roadmap.sh/guides/design-patterns-for-humans) are reusable code libraries or solutions to common problems in designing and structuring software components. A backend developer should know some of these design patterns. The common types of design patterns are: |
||||||
|
|
||||||
|
- Creational patterns |
||||||
|
- Structural patterns |
||||||
|
- Behavioral patterns |
||||||
|
- Architectural patterns |
||||||
|
|
||||||
|
### Familiarity with version control systems |
||||||
|
|
||||||
|
Version control systems help track and maintain a history of code changes made to an application. With a proper version control system, multiple developers can work on a codebase simultaneously. Through version control, they collaborate on a code repository. |
||||||
|
|
||||||
|
A backend engineer is expected to have proficient knowledge of version control. Git is one of the most common version control systems today. There are many code repositories, including Bitbucket, GitHub, and GitLab. |
||||||
|
|
||||||
|
### Understanding of security best practices |
||||||
|
|
||||||
|
A backend developer should have a basic understanding of standard security practices and implement robust security measures to protect sensitive data and prevent unauthorized access to data. Common vulnerabilities include SQL injection, cross-site scripting, and cross-site request forgery. About every large cloud provider has features that provide security measures, including AWS IAM, Azure Active Directory, and Google Cloud Identity. |
||||||
|
|
||||||
|
### Collaboration and communication skills |
||||||
|
|
||||||
|
A backend developer typically collaborates with other engineers, managers, and testers across multiple teams to ensure consistency and improve user experience. During the interview process, you should pay close attention to the candidate's communication skills because a backend developer should be able to clearly communicate problems and their approach to a solution. Ask the candidate questions that border on collaboration and see how they respond. |
||||||
|
|
||||||
|
## Additional skills that will make a candidate stand out as a backend developer |
||||||
|
|
||||||
|
The role of a backend developer is very competitive. However, there are some skills that a backend developer should possess to make them stand out. Some of these skills include: |
||||||
|
|
||||||
|
- Continuous learning |
||||||
|
- Problem-solving skills |
||||||
|
- Time management skills |
||||||
|
- DevOps skills |
||||||
|
|
||||||
|
### Continuous learning |
||||||
|
|
||||||
|
The field of [backend engineering](https://roadmap.sh/backend) is continually expanding, so be sure to look out for candidates who enjoy learning. Find out if they stay up to date with the latest technologies and industry trends and how often they try out new things. In addition to acquiring new skills, you should also find out if they are willing to share knowledge and help in team development. |
||||||
|
|
||||||
|
### Problem-solving skills |
||||||
|
|
||||||
|
While it’s essential to use problem-solving tools, intrinsic problem-solving skills are equally important for a backend developer. Your potential hire should have an analytical mindset and be able to break complex problems into smaller chunks that can be solved incrementally. |
||||||
|
|
||||||
|
### Time management skills |
||||||
|
|
||||||
|
Engineers sometimes have chaotic workloads, which often lead to burnout and affect their performance. During the interview, ask the candidate about their time management practices and how they manage heavy workloads. Effective time management and prioritizing can make a candidate stand out as an engineer and avoid burnout. |
||||||
|
|
||||||
|
### DevOps skills |
||||||
|
|
||||||
|
Knowledge of [docker](https://roadmap.sh/docker) and container orchestration technologies, such as [Kubernetes,](https://roadmap.sh/kubernetes) is another skill that makes a backend developer stand out. A firm understanding of continuous integration and continuous deployment (CI/CD) setups is a plus. Consider a candidate with this basic DevOps skill for the role. |
||||||
|
|
||||||
|
## Common backend engineer job interview questions |
||||||
|
|
||||||
|
This curated list of the common backend developer job interview questions should help your search: |
||||||
|
|
||||||
|
**What are the different HTTP methods?** |
||||||
|
Here, the candidate should be able to explain the different HTTP methods, which are GET, POST, PUT, and DELETE. |
||||||
|
|
||||||
|
**Describe what you understand** **about continuous integration and continuous delivery** |
||||||
|
The candidate is expected to explain what CI/CD means in clear terms. |
||||||
|
|
||||||
|
**What are databases****,** **and what are the different types of databases?** |
||||||
|
The candidate should know what a database is and what relational and document databases are, along with examples. |
||||||
|
|
||||||
|
**What is object****-****oriented programming?** |
||||||
|
The candidate should be able to explain OOP, a process of designing software around objects. |
||||||
|
|
||||||
|
**Explain the difference between synchronous and asynchronous programming** |
||||||
|
Here, you should look for the candidate’s understanding of sync and async processes. Synchronous programming executes tasks sequentially, and each task must be completed before the next start. Asynchronous programming allows tasks to run independently without waiting for each other to complete. It uses promises or async/await to handle task completion. |
||||||
|
|
||||||
|
**What is the purpose of caching in a backend system****,** **and what caching strategies have you used?** |
||||||
|
The candidate should be able to explain what caching means and also the different caching strategies, which include: |
||||||
|
|
||||||
|
- Full-page caching |
||||||
|
- Data caching |
||||||
|
- Result caching |
||||||
|
|
||||||
|
**What are some common security vulnerabilities in web applications****,** **and how will you mitigate them?** |
||||||
|
The candidate should be able to explain common security vulnerabilities, such as cross-site scripting, SQL injection, cross-site request forgery (CSRF), and so on. You can mitigate them by performing proper input validation and secure session management. |
||||||
|
|
||||||
|
## Effective interview strategies and assessments |
||||||
|
|
||||||
|
Evaluating backend engineers requires targeted assessments that reveal technical skills and problem-solving abilities. Here are practical techniques to help you identify qualified candidates: |
||||||
|
|
||||||
|
- **Code review exercises:** Provide a sample code snippet on any backend programming languages with issues or inefficiencies. Ask candidates to identify problems, propose improvements, and explain their reasoning. This exercise tests attention to detail and understanding of best practices. |
||||||
|
- **Live coding tasks:** Use short coding challenges focused on common backend development tasks like database queries or API calls. Live coding reveals how candidates approach problems under pressure and handle real-time debugging. |
||||||
|
- **System design discussions:** Present a simple system design prompt, like designing a scalable file storage system. Listen for clarity in explaining their thought process, handling of trade-offs, and understanding of backend fundamentals. |
||||||
|
- **Behavioral questions on past projects:** Ask about specific backend challenges they’ve faced and how they solved them. Look for evidence of adaptability, collaboration, and knowledge depth, such as experiences with database optimization or API integration. |
||||||
|
- **Assess communication skills:** Observe how they explain technical concepts. Strong candidates communicate clearly and adapt explanations for both technical and non-technical audiences. |
||||||
|
|
||||||
|
These methods offer a well-rounded view of a candidate’s backend development skills and experience. |
||||||
|
|
||||||
|
## What’s next? |
||||||
|
|
||||||
|
Backend engineers play a vital role in software engineering, and great ones are in high demand. Now that you have a clear understanding of what to look for, it’s time to build a hiring process that identifies candidates with the right technical skills and collaborative mindset. |
||||||
|
|
||||||
|
The foundation of your tech stack depends on a strong backend. You can find potential hires in the roadmap.sh [community](https://roadmap.sh/discord) of beginner and experienced backend developers. |
||||||
|
|
||||||
|
roadmap.sh also offers valuable resources to help you and your team stay ahead by helping you to: |
||||||
|
|
||||||
|
- Create a personalized or [team-based roadmap](https://roadmap.sh/teams). |
||||||
|
- Become part of a supportive community by [signing up on](https://roadmap.sh/signup) [roadmap.sh](http://roadmap.sh) [platform](https://roadmap.sh/signup). |
||||||
@ -0,0 +1,210 @@ |
|||||||
|
--- |
||||||
|
title: 'What is DevOps Automation? 8 Best Practices & Advice' |
||||||
|
description: 'Streamline your DevOps pipeline! Explore what DevOps automation is and the 8 best practices for seamless delivery.' |
||||||
|
authorId: fernando |
||||||
|
excludedBySlug: '/devops/automation' |
||||||
|
seo: |
||||||
|
title: 'What is DevOps Automation? 8 Best Practices & Advice' |
||||||
|
description: 'Streamline your DevOps pipeline! Explore what DevOps automation is and the 8 best practices for seamless delivery.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/what-is-devops-automation-03k11.jpg' |
||||||
|
relatedGuidesTitle: 'Other Guides' |
||||||
|
relatedGuides: |
||||||
|
'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer' |
||||||
|
'Is DevOps engineering a good career path in 2024?': '/devops/career-path' |
||||||
|
'10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills' |
||||||
|
'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack' |
||||||
|
'11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles' |
||||||
|
'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle' |
||||||
|
'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing' |
||||||
|
isNew: true |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-05 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
DevOps Automation is all about using technology to streamline and enhance the processes involved in software development and IT operations. By automating repetitive tasks, teams can focus more on innovation and less on manual work, in other words, making the job fun and interesting while delivering the boring parts at the same time. |
||||||
|
|
||||||
|
In this article, we'll explore what DevOps Automation really is, its key components, the benefits it offers, and the best [DevOps](https://roadmap.sh/devops) practices you should follow to get the most out of it. |
||||||
|
|
||||||
|
## What is DevOps Automation? |
||||||
|
|
||||||
|
DevOps Automation refers to the use of tools and scripts to automate the different stages of the DevOps lifecycle and many aspects of the software development life cycle. This includes everything from code integration and application deployment to infrastructure management and monitoring. |
||||||
|
|
||||||
|
Automation is one of the key methodologies that help you ensure that these processes are, in the end, efficient, consistent, and reliable. |
||||||
|
|
||||||
|
## Key DevOps Processes to Automate |
||||||
|
|
||||||
|
The following key DevOps processes are the core of what automation in the DevOps space is: |
||||||
|
|
||||||
|
* **Continuous Integration/Continuous Deployment (CI/CD):** Automates the process of integrating code changes and deploying them to production. |
||||||
|
* **Infrastructure Management:** Uses code to manage and provision infrastructure, ensuring consistency across environments. |
||||||
|
* **Monitoring:** Automatically tracks system performance and alerts DevOps teams to any issues. |
||||||
|
|
||||||
|
## Components of DevOps Automation |
||||||
|
|
||||||
|
DevOps Automation isn't just a single tool or process—it's a collection of various components that work together to streamline and enhance your development and operations workflows. Let's dive deeper into these key components to understand how they contribute to a robust DevOps strategy. |
||||||
|
|
||||||
|
### 1. Continuous Integration (CI) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Continuous Integration (CI) is all about integrating code changes into a shared repository frequently, often multiple times a day. This practice helps detect issues early in the development cycle, making it easier to address them before they become bigger problems. |
||||||
|
|
||||||
|
* **How It Works:** Developers commit their code changes to a central repository. Automated tools then build the application and run a suite of tests (like unit tests and integration tests) to ensure that the new code doesn't break existing functionality. |
||||||
|
* **Benefits:** |
||||||
|
* **Early Detection of Bugs:** By integrating and testing code regularly, teams can identify and fix bugs quickly. |
||||||
|
* **Reduced Integration Problems:** Frequent integrations minimize the complexity and effort required to merge changes from different developers. |
||||||
|
* **Improved Code Quality:** Automated testing ensures that code meets quality standards before it's merged. |
||||||
|
|
||||||
|
### 2. Continuous Deployment (CD) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Continuous Deployment (CD) takes CI a step further by automatically deploying code changes to production once they pass all the necessary tests. |
||||||
|
|
||||||
|
* **How It Works:** After the CI process successfully builds and tests the code, the CD pipeline automatically deploys the changes to the live environment without manual intervention. |
||||||
|
* **Benefits:** |
||||||
|
* **Faster Time-to-Market:** With the automation in place, you significantly reduce the time it takes to deploy changes into production, thus keeping your product competitive. |
||||||
|
* **Reduced Risk of Deployments:** Automated deployments minimize human errors, ensuring that deployments are consistent and reliable. |
||||||
|
* **Continuous Feedback:** Rapid deployments allow for quicker feedback from users, enabling faster iterations and improvements. |
||||||
|
|
||||||
|
### 3. Infrastructure as Code (IaC) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Infrastructure as Code (IaC) is the practice of managing and provisioning your IT infrastructure through machine-readable code rather than manual processes. |
||||||
|
|
||||||
|
* **How It Works:** Automation tools like Terraform, Ansible, or AWS CloudFormation allow you to define your infrastructure (servers, databases, networks, etc.) in code. This code can be stored in version control systems, reviewed, and reused across different environments. |
||||||
|
* **Benefits:** |
||||||
|
* **Consistency Across Environments:** Ensures that development, testing, and production environments are identical, reducing the so-called "it works on my machine" syndrome. |
||||||
|
* **Versioning your infrastructure:** Changes to infrastructure can be tracked, reviewed, and rolled back if necessary, just like application code. |
||||||
|
* **Scalability:** Easily scale your infrastructure up or down by modifying the code, making it adaptable to changing needs. |
||||||
|
|
||||||
|
### 4. Automated Testing |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Automated testing involves using software tools to run tests on your code automatically. This ensures that your application behaves as expected and maintains high quality as it evolves. |
||||||
|
|
||||||
|
* **How It Works:** Automated tests (such as unit tests, integration tests, and end-to-end tests) are written alongside your code. These tests are executed automatically during the CI/CD pipeline to verify that new changes don't introduce bugs or regressions. |
||||||
|
* **Benefits:** |
||||||
|
* **Enhanced Code Quality:** Regular automated testing catches bugs early, ensuring that only reliable code reaches production. |
||||||
|
* **Faster Feedback:** Developers receive immediate feedback on their code changes, allowing for quicker iterations and improvements. |
||||||
|
* **Efficiency:** Automating repetitive testing tasks saves time and allows teams to focus on more complex testing scenarios and feature development. |
||||||
|
|
||||||
|
### 5. Monitoring and Logging |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Monitoring and logging are essential for maintaining the health and performance of your applications and infrastructure. They provide real-time insights and historical data that help you troubleshoot issues and optimize performance. |
||||||
|
|
||||||
|
* **How It Works:** Monitoring tools continuously track various metrics (like CPU usage, memory consumption, and response times) and logs from your applications and infrastructure. These tools can alert teams to potential issues and even trigger automated responses to certain conditions. |
||||||
|
* **Benefits:** |
||||||
|
* **Proactive Issue Detection:** Real-time monitoring helps identify and address problems before they impact users. |
||||||
|
* **Automated Responses:** Triggering automated actions (like scaling resources during traffic spikes or restarting services after a crash) ensures that your systems remain resilient and performant without manual intervention. |
||||||
|
|
||||||
|
### Benefits of DevOps Automation |
||||||
|
|
||||||
|
DevOps automation provides many benefits, including as already mentioned, the side effect of removing humans from almost the entire DevOps workflow, thus reducing the chances of human error and granting DevOps operators more time to focus on more interesting activities. |
||||||
|
|
||||||
|
However, there are more benefits than just reduced chance of errors. In fact, the following list covers some of the most relevant ones: |
||||||
|
|
||||||
|
* **Increased Speed and Efficiency:** Automated processes run faster and on time, every time, allowing for faster development and deployment cycles. |
||||||
|
* **Enhanced Collaboration Between Teams:** Streamlines workflows, making it easier for development and operations teams to work together. This is, in fact, one of the core [principles of the DevOps practice](https://roadmap.sh/devops/principles). |
||||||
|
* **Faster Time-to-Market:** Everything covered so far helps accelerate the delivery of features and updates, keeping your products competitive. |
||||||
|
|
||||||
|
## Best Practices for DevOps Automation |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Start with Clear Objectives |
||||||
|
|
||||||
|
Automation for the sake of automation makes no sense. Before diving into automation, it's essential that you define your goals. |
||||||
|
|
||||||
|
What are you looking to achieve? Whether it's reducing deployment times, improving code quality, or enhancing collaboration, having clear objectives will guide the rest of your automation strategies and ensure they align with your business goals. |
||||||
|
|
||||||
|
### Automate Repetitive and Time-Consuming Tasks |
||||||
|
|
||||||
|
Identifying the repetitive and manual tasks (especially the ones that take a long time to complete) is a crucial next step to understanding what can and should be automated. In fact, these tasks should be the first set of candidates to be automated, as they are directly consuming the time of your teammates with activities that can obviously be done by a machine. |
||||||
|
|
||||||
|
By automating these tasks, you are effectively freeing up your team to focus on more strategic and creative work, enhancing overall productivity. |
||||||
|
|
||||||
|
### Implement Continuous Integration and Deployment |
||||||
|
|
||||||
|
Whenever possible, code changes and the corresponding production deployment should be something that happens automatically with the least amount of human intervention possible. |
||||||
|
|
||||||
|
This is because it’s such a critical task for any product, that it needs to be 100% reliable and efficient. In other words, it should always work, whether you do it once a week or 5 times on the same day, and it should always be performed as fast as possible. |
||||||
|
|
||||||
|
This not only speeds up the development process but also ensures that any issues are detected and addressed promptly. CI tools usually offer the option of a rollback, in case something goes wrong. This is another key best practice, as errors will undoubtedly reach production, no matter how much we plan to avoid it, so it’s better to be prepared than to ignore the possibility and then have to manually perform rollbacks, or even worse, apply fixes directly in production. |
||||||
|
|
||||||
|
### Use Infrastructure as Code (IaC) |
||||||
|
|
||||||
|
Managing your infrastructure can be a daunting task for projects that have a complex architecture. |
||||||
|
|
||||||
|
With IaC DevOps operators can manage the infra through code ensuring consistency across all environments. |
||||||
|
|
||||||
|
Thanks to the “code” part of IaC, you can version control your infrastructure, making it easier to reproduce environments and roll back changes if needed. |
||||||
|
|
||||||
|
### Ensure Proper Monitoring and Logging |
||||||
|
|
||||||
|
Implement comprehensive monitoring solutions to keep an eye on your applications and infrastructure is a key DevOps automation practice. |
||||||
|
|
||||||
|
After all, if you plan to improve, you need to measure, right? |
||||||
|
|
||||||
|
In the same train of thought, effective logging helps you gain valuable insights and troubleshoot issues in your platform, ensuring your systems run smoothly for as long as possible. |
||||||
|
|
||||||
|
### Foster a Culture of Collaboration and Continuous Improvement |
||||||
|
|
||||||
|
Break with the idea that developers and operations should not work together side-by-side, and instead encourage open communication between both teams. |
||||||
|
|
||||||
|
Promote a culture of continuous learning and adaptation, where teams regularly review and improve their processes based on feedback and new insights. |
||||||
|
|
||||||
|
### Integrate Security into the Automation Process (DevSecOps) |
||||||
|
|
||||||
|
Security should be an integral part of your DevOps pipeline and adding automation tools into the mix should not affect that. |
||||||
|
|
||||||
|
Make sure to embed security practices within your DevOps automation processes and automate security testing and compliance checks to ensure that your applications are secure from the ground up. |
||||||
|
|
||||||
|
### Address and Eliminate Toil |
||||||
|
|
||||||
|
Toil refers to repetitive, manual tasks that do not provide lasting value, for instance: performing manual deployments after each sprint. |
||||||
|
|
||||||
|
Imagine your development team needs to deploy a new version of your web application every week. Each deployment involves several repetitive steps, like logging into the server, copying the files, configuring the server, restarting all services and checking if everything went right. |
||||||
|
|
||||||
|
While you might consider production deployments to be very valuable, the truth is that if you have to do it every week, then the **lasting** value is non-existent. |
||||||
|
|
||||||
|
Try to identify sources of toil in your workflows and continuously work to reduce or eliminate them through automation. |
||||||
|
|
||||||
|
## Choose your DevOps automation tools |
||||||
|
|
||||||
|
Once you’ve incorporated these best practices into your DevOps activities, the next immediate action is to decide what your top automation tools will be. |
||||||
|
These tools should allow you to: |
||||||
|
|
||||||
|
* Comply with the best practices already covered. |
||||||
|
* Empower your team to accomplish their tasks without getting in their way. |
||||||
|
* Actually provide the automation level you require. |
||||||
|
|
||||||
|
Regardless of the automation tools you decide to go with, some of the recommended categories that you should tackle are: |
||||||
|
|
||||||
|
* **Continuous Integration/Continuous Deployment** (CI/CD): these will help you reduce your time-to-market and increase the confidence on every new deployment. |
||||||
|
* **Configuration Management tools**: incredibly useful when you have to manage large infrastructures. |
||||||
|
* **Infrastructure as Code** (IaC): they allow you to version your infrastructure and collaborate on it through simple text files, speeding up resource deployment & environment setups. |
||||||
|
* **Test automation tools**: they will help you ensure quality by automating the testing of many aspects of your application (i.e automatically running UI tests as part of your deployment process). |
||||||
|
|
||||||
|
## Conclusion |
||||||
|
|
||||||
|
DevOps automation is a powerful approach to streamline your software development and IT operations interactions. |
||||||
|
|
||||||
|
By automating key portions of your software development process like CI/CD, infrastructure management, and monitoring, you can achieve better speed, consistency, and overall improvement in collaboration within your teams. |
||||||
|
|
||||||
|
Implementing best practices will ensure your automation efforts are successful and aligned with your business goals. |
||||||
|
|
||||||
|
If you’re looking for more details on how to get started as a DevOps or you’d like to learn more about this practice, check out the [full DevOps roadmap here](https://roadmap.sh/devops). |
||||||
@ -0,0 +1,268 @@ |
|||||||
|
--- |
||||||
|
title: 'What Are the 7 Key Phases of the DevOps Lifecycle?' |
||||||
|
description: 'Master the DevOps lifecycle by exploring its 7 phases, designed to enhance collaboration, streamline processes, and deliver software with agility.' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/devops/lifecycle' |
||||||
|
seo: |
||||||
|
title: 'What Are the 7 Key Phases of the DevOps Lifecycle?' |
||||||
|
description: 'Master the DevOps lifecycle by exploring its 7 phases, designed to enhance collaboration, streamline processes, and deliver software with agility.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/key-phases-of-devops-lifecycle-788fa.jpg' |
||||||
|
relatedGuidesTitle: 'Other Guides' |
||||||
|
relatedGuides: |
||||||
|
'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer' |
||||||
|
'Is DevOps engineering a good career path in 2024?': '/devops/career-path' |
||||||
|
'10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills' |
||||||
|
'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack' |
||||||
|
'11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles' |
||||||
|
'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing' |
||||||
|
'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation' |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-01 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Whether you’re an experienced DevOps engineer or trying to expand your expertise, you’ll likely adopt (or are already using) parts of the **7 key phases of the DevOps lifecycle** as a core **process** for developing, testing, and deploying software projects. |
||||||
|
|
||||||
|
But what are these phases, and do they really need to be followed in a specific order to truly matter? |
||||||
|
|
||||||
|
As a [DevOps engineer](https://roadmap.sh/devops), your primary role is to help the development and operations teams operate better. You’ll do this by collaborating closely with software engineers, quality assurance teams, and other stakeholders to set up **processes**, implement tools, and create standards to achieve the overall goal of the project. |
||||||
|
|
||||||
|
In this guide, you’ll learn about these phases, how they're implemented, and the sequence in which they are applied in software development. |
||||||
|
|
||||||
|
**TL;DR:** 7 key phases of the DevOps lifecycle are: |
||||||
|
|
||||||
|
- Continuous development |
||||||
|
- Continuous integration (CI) |
||||||
|
- Continuous testing |
||||||
|
- Continuous deployment (CD) |
||||||
|
- Continuous monitoring |
||||||
|
- Continuous feedback |
||||||
|
- Continuous operations |
||||||
|
|
||||||
|
Let’s look at the DevOps lifecycle in detail. |
||||||
|
|
||||||
|
## What is the DevOps lifecycle? |
||||||
|
|
||||||
|
DevOps lifecycle is a set of stages that software development (Dev) and IT operations (Ops) teams use to deliver software applications in an efficient and reliable manner. It is a continuous and iterative process that facilitates integration and collaboration between these teams. |
||||||
|
|
||||||
|
In traditional software development, developers don’t just build and deploy applications. They must also accommodate changes, fix bugs, consider feature requests, and handle various administrative tasks. The same approach to continuous improvement applies in DevOps, which has led to industries adopting DevOps to factor in the lifecycle processes into their operations. |
||||||
|
|
||||||
|
The primary goal of the DevOps lifecycle is to streamline your development and delivery process and ensure applications are reliable and efficiently deployed. |
||||||
|
|
||||||
|
It follows a range of continuous development, integration, testing, monitoring, and feedback gathering, with each section using sets of best practices and tools to ensure the overall project goal. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## 7 key phases of the DevOps lifecycle |
||||||
|
|
||||||
|
The 7 key phases of the DevOps lifecycle, also known as the 7 C’s of DevOps, are sets of interconnected stages that work together in a continuous loop to help you develop, test, and deploy applications quickly. Below are the key phases of the DevOps lifecycle: |
||||||
|
|
||||||
|
### 1. Continuous development |
||||||
|
|
||||||
|
This phase is about planning and coding the software application. Developers plan the software and break the entire development process into smaller cycles that add value to the overall software development goal. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
By following this process, DevOps teams can easily map out the **software development lifecycle (SLDC)** to other stakeholders regarding expectations, responsibilities, and timelines. Additionally, because the development teams, testers, and other stakeholders build software piece-by-piece, the development process is fast, large-scale risk is minimal, and the process can easily adapt to changing requirements and business needs. |
||||||
|
|
||||||
|
**Tools used for continuous development** |
||||||
|
|
||||||
|
1. **Planning:** DevOps teams use project management tools like Jira, Linear, and ClickUp to help teams plan, track, and release software. |
||||||
|
|
||||||
|
2. **Coding**: DevOps teams can use version control systems like Git, editors like Visual Studio Code, and pair programming tools like Tuple to effectively collaborate with other development teams when building software. |
||||||
|
|
||||||
|
### 2. Continuous integration (CI) |
||||||
|
|
||||||
|
After writing the code and storing it in a shared repository, DevOps teams can set up a CI pipeline on the repository so that when developers commit changes to the source code, they can do the following: |
||||||
|
|
||||||
|
- Detect changes to existing code and initiate actions like unit testing, integration testing, and the build process. |
||||||
|
- Perform code quality analysis. |
||||||
|
- Generate deployment artifacts. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
This is particularly important because the development team will continue to push updates into the source code to build new features, fix bugs, perform code improvement, and refactoring. |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
Jenkins, CircleCI, Travis CI, and GitHub Actions are some automation tools DevOps teams use to build, test, and deploy code changes. |
||||||
|
|
||||||
|
### 3. Continuous testing |
||||||
|
|
||||||
|
Continuous testing involves automating tests on the developed code to ensure that changes are validated at each step of the development cycle, catch defects, and provide feedback without the need for human intervention. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
If an error or bug occurs, the code is returned to the previous phase (integration) for correction and possible fixes. Automated testing improves the overall workflow by saving time and resources. |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
Selenium, JUnit, TestNG, and Cucumber are some automation testing tools that DevOps teams use to automate testing at scale. |
||||||
|
|
||||||
|
### 4. Continuous deployment (CD) |
||||||
|
|
||||||
|
This is the phase when the codes that have passed all tests are automatically deployed to the staging or production environment. Continuous deployment's overall goals are: |
||||||
|
|
||||||
|
- Reduce the time between development and deployment. |
||||||
|
- Facilitate the deployment of finished code to production servers. |
||||||
|
- Ensure consistency across development, testing, staging, and production environments. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
1. **Configuration tools**: The DevOps team uses configuration management tools like Ansible, Puppet, Chef, and SaltStack to automate the provisioning, configuration, management, and continuous delivery of IT infrastructure. These tools help the DevOps team increase efficiency, maintain consistency across environments, and reduce errors. |
||||||
|
|
||||||
|
2. **Containerization and orchestration tools**: The DevOps team uses tools like [Docker](https://roadmap.sh/docker), Vagrant, and [Kubernetes](https://roadmap.sh/kubernetes) to build and test applications. These tools help applications respond to demand (scaling up and scaling down) and maintain consistency across environments. |
||||||
|
|
||||||
|
### 5. Continuous monitoring |
||||||
|
|
||||||
|
This is the phase where you keep an eye on the deployed application to monitor performance, security, and other helpful data. It involves the collection of metrics and other application usage-related data to detect issues such as system errors, server downtime, application errors, and security vulnerabilities. Additionally, it involves collaboration with the operation teams to monitor bugs and identify improper system behavior. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Continuous monitoring improves the productivity and reliability of the system while reducing IT support costs. Any issues detected during this phase can be promptly reported and addressed in the continuous development phase, creating a more efficient feedback loop. |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
Prometheus, Grafana, ELK Stack (Elasticsearch, Logstash, Kibana), and Datadog are some tools DevOps teams use to continuously monitor the application and infrastructure to identify and resolve issues. |
||||||
|
|
||||||
|
### 6. Continuous feedback |
||||||
|
|
||||||
|
Continuous feedback is about gathering information from users and stakeholders to understand how the software performs in real-life scenarios. The feedback is then continuously analyzed and used to make informed decisions and improve the overall development process. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
DevOps teams use tools like Datadog and LogRocket to gather and gain insights into how users interact with their products. |
||||||
|
|
||||||
|
### 7. Continuous operations |
||||||
|
|
||||||
|
In the traditional software development process, developers might need to pull down the server when they want to update and maintain applications. This approach disrupts the development process, potentially increases organizational costs, and can lead to user service interruptions. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Continuous operations address these challenges, among others. It ensures the software remains available and operational with minimal downtime. This phase involves tasks such as: |
||||||
|
|
||||||
|
- Performing zero-downtime deployments. |
||||||
|
- Automating backups and recovery. |
||||||
|
- Using infrastructure management to provision and scale resources. |
||||||
|
- Distributing traffic across multiple servers to maintain performance during updates or high-traffic periods. |
||||||
|
- Implementing strategies like database replication and rolling updates to maintain data availability. |
||||||
|
|
||||||
|
**Tools used** |
||||||
|
|
||||||
|
Puppet, Terraform, and Chef are some tools DevOps teams use to automate resource provisioning and ensure system reliability. |
||||||
|
|
||||||
|
The DevOps lifecycle is a continuous process that involves development, integration, testing, deployment, monitoring, feedback, and operations. Beyond the improvement it brings, you’ll also notice that organizations are extending DevOps and further advancing its capability. |
||||||
|
|
||||||
|
Let’s explore some of these extensions and how they’re changing the development process. |
||||||
|
|
||||||
|
## Key DevOps extensions to watch in 2024 |
||||||
|
|
||||||
|
Below are some extensions that build on the core principles of DevOps, like automation, collaboration, and continuous improvement: |
||||||
|
|
||||||
|
- DevSecOps |
||||||
|
- GitOps |
||||||
|
- DataOps |
||||||
|
- FinOps |
||||||
|
- MLOps |
||||||
|
- AIOps |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### DevSecOps |
||||||
|
|
||||||
|
DevSecOps stands for **Development**, **Security**, and **Operations**. It’s an extension of DevOps that continuously integrates security practices into every phase of the software development lifecycle rather than treating them as an afterthought. |
||||||
|
|
||||||
|
With the increase in cybersecurity threats and regulatory requirements, it has become more important to use DevSecOps to embed security into the pipeline so that organizations can deliver secure software faster. |
||||||
|
|
||||||
|
DevSecOps uses tools like HashiCorp Vault, Snyk, OWASP ZAP, and Aqua Security to: |
||||||
|
|
||||||
|
- Automate security testing. |
||||||
|
- Perform continuous compliance. |
||||||
|
- Enforce secure coding practices |
||||||
|
- Perform vulnerability assessment. |
||||||
|
|
||||||
|
### GitOps |
||||||
|
|
||||||
|
GitOps stands for **Git Operations**. It’s an extension of DevOps that uses Git as a source of truth for managing infrastructure and application development. This means the DevOps teams can make changes to infrastructure through Git pull requests, which are then automatically applied via the CI/CD pipelines. |
||||||
|
|
||||||
|
By adopting GitOps, organizations can improve the reliability of their systems, enforce standards for the team, and accelerate software delivery. |
||||||
|
|
||||||
|
GitOps involves using tools like Jenkins X, Flux, and ArgoCD to automate the delivery and deployment of applications. |
||||||
|
|
||||||
|
### DataOps |
||||||
|
|
||||||
|
DataOps stands for **Data Operations**. It’s an extension of DevOps methodology designed to improve data pipeline communication, integration, and automation across the data and IT operations teams. DataOps aims to ensure that the data pipeline is fast, scalable, and reliable. |
||||||
|
|
||||||
|
DataOps uses tools like Apache NiFi, data build tool (dbt), and Prefect to: |
||||||
|
|
||||||
|
- Perform data versioning. |
||||||
|
- Automate data testing. |
||||||
|
- Automate the delivery of data pipelines. |
||||||
|
|
||||||
|
### FinOps |
||||||
|
|
||||||
|
FinOps stands for **Financial Operations**. It’s an extension of DevOps that enables organizations that use cloud services to efficiently manage their cloud costs and financial operations. The goal of FinOps is to optimize cloud-related costs by encouraging close collaboration between finance, operations, and engineering teams. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
FinOps also uses a lifecycle approach to optimize organization costs. It involves: |
||||||
|
|
||||||
|
1. **Inform**: This phase involves gaining visibility into cloud spending by tracking cloud costs, setting budgets, and leveraging discounts or other freebies offered by cloud providers. Basically, it provides the team insights into where the money is being spent. |
||||||
|
2. **Optimize**: This phase is all about optimizing cloud costs. It involves sizing resources, identifying areas of inefficiency, and other cost-improvement tasks that will help make cost-effective decisions without compromising performance. |
||||||
|
3. **Operate:** This phase is about monitoring cloud spending, enforcing policies, and making needed adjustments to ensure the budget is not exceeded. |
||||||
|
|
||||||
|
FinOps leverage tools like Azure Cost Management, AWS Cost Explorer, Cloudability, and CloudHealth to achieve the organization's cloud-related financial goals. |
||||||
|
|
||||||
|
### MLOps |
||||||
|
|
||||||
|
MLOps stands for **Machine Learning Operations**. It’s an extension of DevOps workflow that streamlines and automates the deployment, monitoring, and management of ML models in a production environment. It promotes collaboration between the data science and IT operations teams so that models can be versioned, continuously delivered, and retrained when needed. |
||||||
|
|
||||||
|
Tools used include TensorFlow Extended (TFX), Kubeflow, KitOps, and MLflow. |
||||||
|
|
||||||
|
### AIOps |
||||||
|
|
||||||
|
AIOps stands for **Artificial Intelligence for IT Operations**. It’s an extension of DevOps that promotes using artificial intelligence, machine learning, and data analytics to automate and improve IT operations processes. When AIOps is integrated into DevOps processes, the organization benefits from enhanced efficiency, faster issue resolution, and proactive system monitoring. |
||||||
|
|
||||||
|
Tools used include IBM Watson AIOps and Dynatrace. |
||||||
|
|
||||||
|
The extension of DevOps workflow is a response to modern software challenges, driven by the ongoing shift in the DevOps ecosystem and the need for specialized practices across different software engineering fields. |
||||||
|
|
||||||
|
## Essential DevOps lifecycle best practices |
||||||
|
|
||||||
|
An essential part of DevOps culture is the lifecycle phases. While the lifecycle phases streamline the operational process and help you build reliable software, there are still some gotchas that you need to consider when integrating this process into your SDLC. Below are some best practices you should consider: |
||||||
|
|
||||||
|
1. **Promote collaboration**: As a DevOps engineer, you need to encourage cross-functional collaboration and shared responsibilities among direct teams and other stakeholders. This will help you and your team avoid the traditional siloed approach, break communication barriers, and promote DevOps culture. |
||||||
|
|
||||||
|
2. **Show empathy and support**: Implementing DevOps lifecycle into your development process may take time and require some adjustment for you and your team members. You need to support the team with resources and any helpful training material to help facilitate the process. Most importantly, allow time for everyone to adapt to the new process. |
||||||
|
|
||||||
|
3. **Set metrics or milestones**: As the popular saying goes, **“You can’t manage what you can’t measure****.****”** You must set clear objectives and define performance metrics at the beginning or during the adoption of a new process. This will help you and your team know what success looks like. |
||||||
|
|
||||||
|
4. **Invest in tools**: At the heart of DevOps are the toolchains that automate toils and enable easy collaboration between development and operations teams. You should invest in DevOps tools that your team needs to automate their DevOps workflow. Below are some DevOps tools that can help you automate processes: |
||||||
|
- **CI/CD tools**: Tools like Jenkins, GitLab CI/CD, CircleCI, Azure Pipeline, and GitHub Actions help automate the integration and deployment of code changes. |
||||||
|
- **Infrastructure as Code (IaC) tools**: Tools like Terraform, Ansible, Pulumi, Chef, AWS CloudFormation, and Vagrant help automate the provisioning and management of infrastructure. |
||||||
|
- **Containerization and orchestration tools**: Tools like Docker, Kubernetes, OpenShift, Docker Swarm, and Amazon ECS (Elastic Container Service) help manage and orchestrate containers at scale. |
||||||
|
- **Monitoring and logging tools**: Tools like Prometheus, ELK Stack (Elasticsearch, Logstash, and Kibana), Datadog, Splunk, and Grafana help track system performance, logging, and alerting. |
||||||
|
- **Configuration management tools**: Tools like Chef, Puppet, CFEngine, SaltStack, and Ansible help ensure that system configurations remain consistent across environments. |
||||||
|
- **Security and compliance tools**: Tools like HashiCorp Vault, OWASP ZAP, Snyk, SonarQube, and Aqua Security help enforce security policies, scanning, and compliance checks. |
||||||
|
- **Collaboration and communication tools**: Tools like Slack, Microsoft Teams, Trello, Jira, and Confluence help facilitate communication and collaboration between teams. |
||||||
|
|
||||||
|
5. **Continuous improvement**: Encourage your teams to share knowledge across teams, conduct service failure postmortem, and experiment with new ideas and potential solutions. |
||||||
|
|
||||||
|
## Key takeaways |
||||||
|
|
||||||
|
At the core of the DevOps lifecycle is continuity. By following these key phases in an iterative pattern, you’ll be able to take advantage of the lifecycle process to build applications that are maintainable, scalable, and reliable. |
||||||
|
|
||||||
|
Use the [DevOps roadmap](https://roadmap.sh/devops) to stay up to date with the latest developments and extensions in the DevOps ecosystem. Additionally, you can create a [custom roadmap](https://roadmap.sh/teams) for your team to plan, track, and document the team's skills and growth. |
||||||
@ -0,0 +1,156 @@ |
|||||||
|
--- |
||||||
|
title: 'Why Does DevOps Recommend Shift-Left Testing Principles?' |
||||||
|
description: 'Understand why DevOps emphasizes shift-left testing to boost early bug detection, reduce costs, and improve release cycles.' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/devops/shift-left-testing' |
||||||
|
seo: |
||||||
|
title: 'Why Does DevOps Recommend Shift-Left Testing Principles?' |
||||||
|
description: 'Understand why DevOps emphasizes shift-left testing to boost early bug detection, reduce costs, and improve release cycles.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-shift-left-testing-16zah.jpg' |
||||||
|
relatedGuidesTitle: 'Other Guides' |
||||||
|
relatedGuides: |
||||||
|
'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer' |
||||||
|
'Is DevOps engineering a good career path in 2024?': '/devops/career-path' |
||||||
|
'10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills' |
||||||
|
'DevOps engineer vs Full stack developer: Which is best?': '/devops/vs-full-stack' |
||||||
|
'11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles' |
||||||
|
'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle' |
||||||
|
'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation' |
||||||
|
isNew: true |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-04 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Why is there so much debate about testing methodologies if DevOps is about streamlining software delivery? Why do we still encounter approaches like shift-left, shift-right, and even shift-down testing? Shouldn’t there be one universally accepted strategy? |
||||||
|
|
||||||
|
[DevOps](https://roadmap.sh/devops) emphasizes rapid development cycles, continuous integration, and delivery, but your projects or teams may have different needs, goals, or challenges. Factors like the **type of application, infrastructure, team size, legacy systems**, and **release schedules** can lead you to choose different testing strategies. |
||||||
|
|
||||||
|
Despite these varying needs and challenges, DevOps recommends shift-left testing principles because it addresses the core problem of catching issues early. By integrating tests early, issues are resolved quickly before they become more costly and complex to fix. |
||||||
|
|
||||||
|
In this guide, you’ll learn what Shift-Left testing is, its benefits, things to consider, and best practices when implementing it. |
||||||
|
|
||||||
|
## What is Shift-Left testing? |
||||||
|
|
||||||
|
Shift-Left testing is a principle in DevOps that involves incorporating quality assurance and other testing activities **earlier** in the software development lifecycle (SDLC). |
||||||
|
|
||||||
|
Over the years, testing has been somewhat considered an afterthought of the development process. The traditional approach waits for the development cycle to end or at least waits until 50% of the development process is done before testing the application. This approach can be slow, costly, and does not maximize resources because bugs found during the tests can’t be easily fixed during the development cycle. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The main idea is to move testing to the **left side** of the development process so that it can happen earlier and more often during the design and development phase. |
||||||
|
|
||||||
|
Shift-Left testing aligns with the DevOps principle of continuous integration and continuous delivery (CI/CD) because automated tests can be written alongside the code and executed as part of the development pipeline. This approach ensures that issues are caught early, developers receive immediate feedback, and overall software quality is improved. |
||||||
|
|
||||||
|
To implement Shift-Left testing, organizations often rely on a variety of automated testing tools. While the choice of tools may vary based on team preference and specific projects, below are some popular tools for performing Shift-Left testing: |
||||||
|
|
||||||
|
- Jenkins |
||||||
|
- Selenium |
||||||
|
- Cucumber |
||||||
|
- SonarCube |
||||||
|
- JMeter |
||||||
|
|
||||||
|
## Benefits of Shift-Left testing in DevOps |
||||||
|
|
||||||
|
Let’s explore some of the reasons why Shift-Left is important in your DevOps processes: |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
1. **Reduced cost**: A goal of every organization is to reduce its *operating expenses* and maximize profit. When Shift-Left testing is factored into your development process, bugs are identified and fixed early, which is far less expensive than when you address them after deployment. This approach saves you both time and resources as reworks are minimal. |
||||||
|
2. **Faster feedback and early detection**: Shift-Left testing provides faster feedback on the quality of your code because you’re testing early in the development process. This means you and your team can catch bugs and detect issues before they escalate. Additionally, it reduces the likelihood of finding and fixing defects later in development or in production. |
||||||
|
3. **Improved quality**: The overall experience of your application becomes more reliable and stable because you'll likely find and fix bugs earlier before they impact your users' experience. |
||||||
|
4. **Faster time to market:** Because defects are reduced and the development process is optimized, you can iterate faster and continuously release software. |
||||||
|
5. **Improved collaboration and continuous learning:** Shift-Left testing follows the DevOps principle of collaboration between developers, testers, and other stakeholders. This means the team has a sense of responsibility and ownership, and they’ll learn more from one another. |
||||||
|
|
||||||
|
Shift-Left testing advocates for testing earlier, moving the focus to the **left side** of the development process. You might wonder if this means testing ends after the design and development stages or if there's something like **right-side** testing as you prepare to go live. |
||||||
|
|
||||||
|
Well, you guessed right, there's indeed Shift-Right testing. Let’s explore that next. |
||||||
|
|
||||||
|
## What is Shift-Right testing? |
||||||
|
|
||||||
|
Shift-Right testing is a principle in DevOps that involves incorporating quality assurance and other testing activities **later** in the software development lifecycle (SDLC). This is usually done when software has been released or is being used in production. |
||||||
|
|
||||||
|
Unlike Shift-Left testing, which occurs at the beginning of the development process, Shift-Right testing occurs after the application has been deployed into production. It involves: |
||||||
|
|
||||||
|
- Closely monitoring the application’s performance in the production environment to identify bugs and issues. |
||||||
|
- Gradually releasing new features to selected users to test their impact first before doing a full rollout. |
||||||
|
- Collecting feedback from users to understand the overall users’ experience and identify areas of continuous improvement. |
||||||
|
- Conducting A/B testing to compare different versions of the software or features to determine users’ behavior and outcomes. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The main idea is to move system testing to the **right side** of the development process, ensure that the application performs well in real-world scenarios, and catch issues that may not be apparent during Shift-Left testing. |
||||||
|
|
||||||
|
While Shift-Right testing comes with its own benefits when dealing with production-specific issues, it can be risky. The approach of fixing bugs in production can lead to downtime, cause a negative user experience, and damage your organization’s reputation. |
||||||
|
|
||||||
|
## Challenges in adopting Shift-Left testing |
||||||
|
|
||||||
|
It’s important to understand that Shift-Left testing is not a “magic wand” that solves all your testing problems. It also comes with its own challenges. Below are some challenges you might encounter when adopting it: |
||||||
|
|
||||||
|
1. **Required skills**: Developers, testers, and other stakeholders may need to acquire new skills like test automation, continuous integration, and more. Training can be challenging for teams with limited resources. |
||||||
|
2. **Cultural shift**: Adopting continuous testing on the left side of the development process requires a cultural change for all the stakeholders. Developers may need to take on additional testing responsibilities, while testers may need to acquire new skills. This can lead to resistance, adding to their workload and responsibilities. |
||||||
|
3. **Cost implication**: The implementation process requires new toolsets and automation frameworks, which can be time-consuming and costly to set up. Additionally, teams must overcome the learning curve associated with these tools. |
||||||
|
4. **Integration complexity**: Integrating testing in the early stage of SDLC can be complex, particularly in legacy and large systems. This is because it requires that all team members are aligned and willing to adjust their roles and responsibilities to accommodate the new testing approach. |
||||||
|
5. **Risk management**: Testing early means teams must develop strategies to mitigate the risks associated with early testing and find a balance between early testing and potential risks. |
||||||
|
|
||||||
|
## Overcoming challenges and implementing shift-left testing |
||||||
|
|
||||||
|
Adopting Shift-Left testing in your development process comes with several challenges, particularly related to resources and cultural resistance, which may overshadow the advantages it offers. To successfully implement Shift-Left testing, consider the following strategies: |
||||||
|
|
||||||
|
- **Promote a testing-first mindset** and encourage cross-functional collaboration between your teams with an emphasis on shared ownership of the product. |
||||||
|
- **Invest in training and skill development** focused on test automation, CI/CD, and other DevOps practices. |
||||||
|
- **Choose tools that align with your organization’s needs** and integrate seamlessly within your budget. |
||||||
|
- **Start small** with a feature or pilot project, then gradually scale across the entire product chain. This approach will give your team the flexibility and the time to learn and refine strategies. |
||||||
|
- **Regularly conduct risk assessments** to identify areas for improvement and implement corresponding mitigation strategies. |
||||||
|
|
||||||
|
## Best practices for implementing Shift-Left testing principles |
||||||
|
|
||||||
|
Below are some best practices to consider: |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
1. **Adopt early test plans**: Create a plan that clearly outlines the testing goals and scope of the project. Also, ensure that testing is integrated into the early stages of your SDLC. |
||||||
|
2. **Test automation**: Use test automation tools to automate unit tests, integration tests, functional tests, and other necessary test cases. Additionally, regularly update and maintain test scripts to keep them relevant and accurate when running CI/CD pipeline. |
||||||
|
3. **Collaboration and communication**: Use project management tools like Jira and Linear, along with traditional methods such as meetings, check-ins, and stand-ups, to facilitate communication and collaboration between developers, testers, and other stakeholders. |
||||||
|
4. **Continuous learning**: Encourage your team to keep up-to-date with the latest testing techniques and tools, participate in industry events to learn from experts, and share knowledge and best practices within the team. |
||||||
|
|
||||||
|
## Shift-Left testing in the real world |
||||||
|
|
||||||
|
To gain a better understanding of how teams are using Shift-Left testing to build better applications, let’s explore two real-world examples: Microsoft and Uber. |
||||||
|
|
||||||
|
### Microsoft |
||||||
|
|
||||||
|
Over two and a half years, a Microsoft team successfully replaced 27,000 legacy tests with modern DevOps unit tests and a shift-left process. This approach allowed them to enhance software quality and performance goals. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Additionally, the Azure DevOps platform integrates various Shift-Left testing practices, which the team leverages to deliver reliable cloud services and tools to its customers. At the core of Shift-Left testing in Microsoft are: |
||||||
|
|
||||||
|
- Writing tests at the lowest possible level. |
||||||
|
- Writing functional tests that can run anywhere. |
||||||
|
- Treating test code as product code. |
||||||
|
|
||||||
|
### Uber |
||||||
|
|
||||||
|
Uber’s adoption of the Shift-Left testing principle of putting the test at the forefront of its software development process has helped it minimize risk and ensure the reliability and safety of its ride-sharing platform. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
One major change Uber made was to ensure they could test without deploying to production. This process requires launching a backend integration testing strategy **(BITS)** that enables on-demand continuous deployment and routing to test sandboxes. At the core of BITS are: |
||||||
|
|
||||||
|
- Isolating data between production and test environment. |
||||||
|
- Using [Cadence](https://cadenceworkflow.io/?uclick_id=b36cfaa6-c7d0-4da0-a756-64e7e4c3466e), an open-source workflow engine, to define workflow state, retries, and timers for resource teardown. |
||||||
|
|
||||||
|
## Key takeaways |
||||||
|
|
||||||
|
As businesses evolve, they will bring new challenges and use cases that need to be solved. This means as a DevOps engineer, you need to factor in tests early into the development process to maintain a balance between product quality and speed. Additionally, you need to stay up to date with the latest DevOps trends and toolchains that will help you build reliable applications. |
||||||
|
|
||||||
|
Use the [DevOps roadmap](https://roadmap.sh/devops) to stay up to date with the latest developments and extensions in the DevOps ecosystem. |
||||||
@ -0,0 +1,224 @@ |
|||||||
|
--- |
||||||
|
title: 'DevOps engineer vs Full stack developer: Which is best?' |
||||||
|
description: 'DevOps engineer vs Full stack developer: Compare the roles, required skills, and future prospects to make an informed career choice.' |
||||||
|
authorId: ekene |
||||||
|
excludedBySlug: '/devops/vs-full-stack' |
||||||
|
seo: |
||||||
|
title: 'DevOps engineer vs Full stack developer: Which is best?' |
||||||
|
description: 'DevOps engineer vs Full stack developer: Compare the roles, required skills, and future prospects to make an informed career choice.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/devops-engineer-vs-full-stack-developer-jccsq.jpg' |
||||||
|
relatedGuidesTitle: 'Other Guides' |
||||||
|
relatedGuides: |
||||||
|
'How to become a DevOps Engineer in 2024': '/devops/how-to-become-devops-engineer' |
||||||
|
'Is DevOps engineering a good career path in 2024?': '/devops/career-path' |
||||||
|
'10+ In-Demand DevOps Engineer Skills to Master': '/devops/skills' |
||||||
|
'11 DevOps Principles and Practices to Master: Pro Advice': '/devops/principles' |
||||||
|
'What Are the 7 Key Phases of the DevOps Lifecycle?': '/devops/lifecycle' |
||||||
|
'Why Does DevOps Recommend Shift-Left Testing Principles?': '/devops/shift-left-testing' |
||||||
|
'What is DevOps Automation? 8 Best Practices & Advice': '/devops/automation' |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-10-17 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
There are several roles in tech, two common ones being DevOps engineers and full stack developers. The software development industry relies heavily on full stack and DevOps development. |
||||||
|
|
||||||
|
DevOps aims at bridging the gap between developers and operation teams. This leads to an efficient and improved software delivery process. |
||||||
|
|
||||||
|
A [DevOps engineer's](https://roadmap.sh/devops) primary responsibility is creating automated processes to develop, test, deploy, and maintain software systems, while a full stack developer specializes in writing application code that covers both the user-facing side (frontend) and behind-the-scenes logic (backend). |
||||||
|
|
||||||
|
This guide explains what each role entails, addresses the motivations behind choosing either path, guides developers on choosing either path, and gives helpful tips for those who want to transition to DevOps engineering. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The key differences between DevOps engineers and full stack developers are summarized in the table below. |
||||||
|
|
||||||
|
| DevOps engineer | Full stack developer | |
||||||
|
|-----------------|----------------------| |
||||||
|
| Responsible for the smooth flow of code changes from development to production. | Focuses on end-to-end application development (both frontend and backend) | |
||||||
|
| Uses monitoring tools to track the performance of deployed software and also identify issues and bottlenecks in the deployment process. | Writes unit, integration, and end-to-end tests for the application code and fixes bugs related to the code. | |
||||||
|
| Focuses on automating processes and ensuring a software application runs reliably and flawlessly. | Handles the development of web applications or a software program (frontend and backend) | |
||||||
|
| Familiar with tools that aid task automation, code testing and deployments. | Has expertise in various frontend and backend programming languages | |
||||||
|
| Focuses more on the infrastructure management side of the whole development life-cycle, which includes managing networks and servers. | Could either focus on the frontend and backend web architectures. | |
||||||
|
| Has an in-depth understanding of operations to ensure optimal software delivery. | Possess a basic knowledge of operations. | |
||||||
|
|
||||||
|
## DevOps engineer or full stack developer |
||||||
|
|
||||||
|
Full stack developers specialize in web development, while DevOps engineers **focus** on the smooth integration and delivery of software components. |
||||||
|
|
||||||
|
Both roles offer great career opportunities. DevOps engineers can work in different sectors and organizations occupying different capacities. |
||||||
|
|
||||||
|
Some DevOps specializations include code release manager, automation architect, DevSecOps engineer, etc. The same applies to a full stack engineer. As a full stack developer, you can work as a [frontend](https://roadmap.sh/frontend?r=frontend-beginner) or [backend](https://roadmap.sh/frontend?r=frontend-beginner) developer. |
||||||
|
|
||||||
|
DevOps developers and full stack developers are also in high demand. According to [Statista](https://www.statista.com/statistics/1367003/in-demand-it-roles/), full stack developers and DevOps developers are among the top technical positions demanded by recruiters worldwide in 2023. Indeed reported that the average salary of a [DevOps engineer](https://www.indeed.com/career/development-operations-engineer/salaries?from=top_sb) in the USA is $124,392, and that of a [full](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) [](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb)[stack software developer](https://www.indeed.com/career/full-stack-developer/salaries?from=top_sb) is $124,120. |
||||||
|
|
||||||
|
Before deciding which path to follow, some introspection is encouraged, and some factors are to be considered. Some of the things to consider include: |
||||||
|
|
||||||
|
- Interest |
||||||
|
- Strengths |
||||||
|
- Willingness to continously learn new skills and technology |
||||||
|
|
||||||
|
### Interest |
||||||
|
|
||||||
|
Considering your interests before choosing which path to follow is helpful. Building a career takes time and hard work, and it is advisable to do that in something you are interested in. |
||||||
|
|
||||||
|
DevOps is probably the right choice if you are interested in automating repetitive tasks, servers and cloud management, containerization, monitoring, logging etc. |
||||||
|
|
||||||
|
On the other hand, if you are interested in writing application and domain code and enjoy seeing what you build and how users interact with applications directly and indirectly, then it is advisable to choose full stack development. |
||||||
|
|
||||||
|
### Strengths |
||||||
|
|
||||||
|
In addition to your interests, it is also helpful to consider what your strengths are. This would help you to decide what you can work on effortlessly and with less struggle. |
||||||
|
|
||||||
|
Do you find scripting easy? Are you able to grasp the complexities behind containerization and container orchestration? Do you spend more time writing infrastructure code than writing application and domain code? If your answer to these questions is yes, you should consider DevOps. |
||||||
|
|
||||||
|
Can you easily convert mock-ups to actual user interfaces? Do you find it fascinating to translate customer requirements into code? Are you able to interact with databases using SQL without much hassle? If yes, then it might be worth going for full stack development. |
||||||
|
|
||||||
|
### Willingness to continuously learn new skills and technology |
||||||
|
|
||||||
|
The DevOps and full stack fields continually evolve, and there is always something new. To be up to date, you have to be willing and open to learning constantly. This involves taking courses, reading articles, and getting updates on things happening in the tech field. |
||||||
|
|
||||||
|
Here is each role in detail to help you make a deeper consideration. |
||||||
|
|
||||||
|
## Who is a DevOps engineer? |
||||||
|
|
||||||
|
A [DevOps](https://roadmap.sh/devops) engineer who can also be referred to as a DevOps developer is an IT professional with knowledge of development and operations. The development part involves writing codes and scripts, while the operations part includes managing on-premises and/or cloud infrastructure and system infrastructure. |
||||||
|
|
||||||
|
In traditional software development, there is the challenge of having different teams working in silos. This siloed team structure makes it challenging to collaborate amongst teams, and the priorities and timelines of each team don't align with other teams. |
||||||
|
|
||||||
|
DevOps helps to bridge the gap between development teams and operations teams. DevOps experts often work in a collaborative surrounding where they can collaborate with software engineers and IT teams. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
DevOps has some core principles that influence the effectiveness of development and operations. Some of these DevOps principles include: |
||||||
|
|
||||||
|
- Automation of the software development lifecycle |
||||||
|
- Collaboration |
||||||
|
|
||||||
|
### Automation of the software development lifecycle |
||||||
|
|
||||||
|
This involves automating tests, builds, and releases of software versions, as well as tasks that can slow down the software delivery process. |
||||||
|
|
||||||
|
### Collaboration |
||||||
|
|
||||||
|
It breaks the silos across teams and enables collaboration and communication. This creates horizontal slices and enhances productivity across teams. |
||||||
|
|
||||||
|
A DevOps developer can use several programming languages for development. Some of them are [Python](https://roadmap.sh/python), Ruby, [Go](https://roadmap.sh/golang), and [Rust](https://roadmap.sh/rust). Also, bash scripts help to automate processes. |
||||||
|
|
||||||
|
Some organizations manage their own server infrastructure on-premise and deploy their applications on these servers. DevOps engineers are responsible for ensuring the servers run reliably and applications deploy successfully. |
||||||
|
|
||||||
|
Cloud computing has gained popularity, and many software applications are deployed on various cloud computing platforms. There are cloud solution providers like [Microsoft Azure](https://azure.microsoft.com/), [Amazon Web Services](https://roadmap.sh/aws), and [Google Cloud Platform](https://cloud.google.com/) who take care of the server infrastructure and are mostly more reliable than the on-premise solution. One significant benefit of the cloud solution is that it is on a pay-as-you-go basis, i.e., you pay for only the cloud resources you use. |
||||||
|
|
||||||
|
## Skills required to be a DevOps engineer |
||||||
|
|
||||||
|
DevOps engineers require soft and technical skills to succeed in their career path. The skills required include: |
||||||
|
|
||||||
|
- Knowledge of coding and scripting |
||||||
|
- Knowledge of operating systems |
||||||
|
- In-depth knowledge of containerization and orchestration |
||||||
|
- Basic understanding of version control |
||||||
|
- Understanding of monitoring, logging, and alerting systems |
||||||
|
- Knowledge of cloud computing |
||||||
|
|
||||||
|
### Knowledge of coding and scripting |
||||||
|
|
||||||
|
Coding and scripting are essential skills every DevOps engineer should have. These skills are typically employed to automate repetitive tasks. Some of the recommended programming/scripting languages used in DevOps include [Python](https://roadmap.sh/python), [Go](https://roadmap.sh/golang), Ruby, [Rust](https://roadmap.sh/rust), and Bash. |
||||||
|
|
||||||
|
### Knowledge of operating systems |
||||||
|
|
||||||
|
DevOps engineers should have knowledge of operating systems. One common operating system used in DevOps is [Linux](https://roadmap.sh/linux). Having the fundamental knowledge of Linux is required, as many servers are Linux based. |
||||||
|
|
||||||
|
### In-depth knowledge of containerization and orchestration |
||||||
|
|
||||||
|
DevOps engineers should know how to use containerization tools to do their jobs effectively. Some common examples of containerization and orchestration tools include [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes). |
||||||
|
|
||||||
|
**Basic understanding of version control and continuous integration and deployment** |
||||||
|
A DevOps engineer should be able to manage and track code changes. This is done with the use of version control systems. Git is a common version control system |
||||||
|
|
||||||
|
Also, DevOps engineers should be familiar with continuous integration and deployment (CI/CD) tools that enable the automatic integration of code changes. Some common CI/CD tools are CirceCl and GitLab. |
||||||
|
|
||||||
|
### Understanding of monitoring, logging, and alerting systems |
||||||
|
|
||||||
|
Monitoring and logging are key aspects of the DevOps process, and it is expected that as a DevOps engineer, you have a good understanding of them. DevOps engineers use logging and monitoring systems to gather, analyze, and understand the system performance, and they set up alerts to be notified if the system state changes and needs to be attended to. |
||||||
|
|
||||||
|
### Knowledge of cloud computing |
||||||
|
|
||||||
|
DevOps engineers should have solid cloud computing skills. Recently, many applications have been deployed on the cloud. Third-party cloud providers mostly manage the cloud infrastructure. Some of the common cloud providers include [AWS](https://roadmap.sh/aws), Microsoft Azure, and Google Cloud Platform. |
||||||
|
|
||||||
|
## Who is a full stack developer? |
||||||
|
|
||||||
|
[Full stack developers](https://roadmap.sh/full-stack) are software developers with extensive frontend and backend development knowledge. Their role is to handle the complete web development process, from designing the user interface to building the server-side logic. |
||||||
|
|
||||||
|
The frontend of an application includes everything the user can see and interact with, i.e., the user interface. The backend consists of the things the user doesn’t see. These include the server-side and systems supporting the business logic. |
||||||
|
|
||||||
|
Full stack coders also use DevOps tools. Depending on the project, a full stack developer may use DevOps technologies like GitHub and mongoDB to create software applications. |
||||||
|
|
||||||
|
Let's take a look at frontend and backend development in greater detail. |
||||||
|
|
||||||
|
### Frontend development |
||||||
|
|
||||||
|
It is concerned primarily with the user interface (UI) and user experience (UX). The common languages used in frontend development include HTML, CSS, and JavaScript. HTML defines the markup of the web page. CSS builds upon HTML and represents the style and format of the webpage. JavaScript is a programming language often used for frontend development and adds logic to your web page. You'll find an excellent guide and roadmap to learning [JavaScript](https://roadmap.sh/javascript) on roadmap.sh. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
There are quite a few frontend frameworks out there. Some of the common ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular). For a more detailed guide, look at the [frontend beginners roadmap](https://roadmap.sh/frontend?r=frontend-beginner) or the [advanced frontend roadmap](https://roadmap.sh/frontend?r=frontend). |
||||||
|
|
||||||
|
### Backend development |
||||||
|
|
||||||
|
It focuses on the application's functionality and *business logic*. Examples of backend components include data storage, security, and handling of business logic. |
||||||
|
|
||||||
|
Backend development mainly involves creating API endpoints consumed by the application's front end. Some common backend programming languages include C#, [Java](https://roadmap.sh/java), [Rust](https://roadmap.sh/rust), [Golang](https://roadmap.sh/golang), and [Python](https://roadmap.sh/python). Check out the [backend developer](https://roadmap.sh/backend) roadmap. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Skills required by full stack developers. |
||||||
|
|
||||||
|
The necessary technical skills to required by full stack engineers include: |
||||||
|
|
||||||
|
- Knowledge of HTML, CSS, and [JavaScript](https://roadmap.sh/javascript)/[TypeScript](https://roadmap.sh/typescript). |
||||||
|
- Knowledge of at least one JavaScript framework, e.g., [React](https://roadmap.sh/react), [Vue js](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular). |
||||||
|
- Knowledge of at least one backend language. You can transfer your knowledge of JavaScript to backend development with [Node JS](https://roadmap.sh/nodejs). |
||||||
|
- In-depth understanding of server-side rendering and web security. |
||||||
|
- Knowledge of APIs. |
||||||
|
- Understanding of database management systems and database architecture. |
||||||
|
|
||||||
|
## How to transition to DevOps |
||||||
|
|
||||||
|
Some fundamental knowledge and skills are required for DevOps that will certainly be helpful in the transition. Here is a step-by-step guide for you: |
||||||
|
|
||||||
|
- If you do not already know a programming language, learn one. Some languages used in DevOps include [Python](https://roadmap.sh/python) and [Golang](https://roadmap.sh/golang). [Bash](https://www.gnu.org/software/bash/) is commonly used for scripting. |
||||||
|
- Learn about file systems and how to use bash to navigate through files. Also, learn to use Command-Line Interfaces (CLIs). |
||||||
|
- Learn about [Docker](https://roadmap.sh/docker) and [Kubernetes](https://roadmap.sh/kubernetes). |
||||||
|
- Learn about servers and cloud infrastructures. Some of the common cloud service providers include [AWS](https://roadmap.sh/aws), [Azure](https://azure.microsoft.com/), and [GCP](https://cloud.google.com/). |
||||||
|
|
||||||
|
For more detailed guidance, refer to roadmap.sh's DevOps [beginner](https://roadmap.sh/devops) and [advanced](https://roadmap.sh/devops?r=devops) roadmaps. |
||||||
|
|
||||||
|
## How to transition to full stack development |
||||||
|
|
||||||
|
Are you looking to transition into full stack development? Here is a handy guide: |
||||||
|
|
||||||
|
- Learn HTML, CSS, and JavaScript. |
||||||
|
- Learn a JavaScript framework, e.g., [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular). |
||||||
|
- Learn a backend programming language of your choice, e.g., C#, [Python](https://roadmap.sh/python), [Java](https://roadmap.sh/java) |
||||||
|
- Learn a backend framework of your choice, e.g., Node.js, [ASP.NET Core,](https://roadmap.sh/aspnet-core) [Spring boot](https://roadmap.sh/spring-boot). |
||||||
|
- Learn database systems i.e SQL and NoSQL databases, e.g., [PostgreSQL](https://roadmap.sh/postgresql-dba), MongoDB |
||||||
|
|
||||||
|
You can refer to roadmap.sh's [full stack development roadmap](https://roadmap.sh/full-stack) for a more detailed guideline. |
||||||
|
|
||||||
|
As you've seen, becoming a DevOps engineer and full stack web developer requires several skill sets. Full stack developers and DevOps engineers have important roles in software development but have different areas of expertise and responsibilities. |
||||||
|
|
||||||
|
Ultimately, the right choice depends on the specific needs and goals of the **software development project**. roadmap.sh offers step-by-step guidance on how to become a [DevOps engineer](https://roadmap.sh/devops?r=devops) and a [full stack developer](https://roadmap.sh/full-stack), and by signing up, you will be able to: |
||||||
|
|
||||||
|
- Keep track of your progress and also share it on your roadmap.sh profile. |
||||||
|
- Collaborate on other official roadmaps. |
||||||
|
- Draw your roadmap, either as an individual learner or for [Dev](https://roadmap.sh/teams) [t](https://roadmap.sh/teams)[eams](https://roadmap.sh/teams). |
||||||
|
- [Generate new roadmaps](https://roadmap.sh/ai) with AI. |
||||||
@ -0,0 +1,415 @@ |
|||||||
|
--- |
||||||
|
title: "Frontend Developer Job Description [2024 Template]" |
||||||
|
description: 'Learn how to write the perfect frontend developer job description and get my best tips on how to recruit frontend dev talent effectively.' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/frontend/job-description' |
||||||
|
seo: |
||||||
|
title: "Frontend Developer Job Description [2024 Template]" |
||||||
|
description: 'Learn how to write the perfect frontend developer job description and get my best tips on how to recruit frontend dev talent effectively.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-developer-job-description-5fwzy.jpg' |
||||||
|
relatedTitle: "Other Guides" |
||||||
|
relatedGuides: |
||||||
|
"How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer" |
||||||
|
"What Front End Programming Languages Should You Learn?": "/frontend/languages" |
||||||
|
"Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks" |
||||||
|
"12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills" |
||||||
|
"Top 30 Popular Front End Developer Interview Questions": "/questions/frontend" |
||||||
|
"Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio" |
||||||
|
"Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai" |
||||||
|
isNew: true |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-04 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developers create the interface and experience that people interact with. They develop visually appealing and functional website components, such as buttons. Their work shapes how users see and interact with a company's online presence. However, as a hiring manager, finding the right frontend developer for your team can be tough. It requires a thorough evaluation of a broad range of skills and know-how. |
||||||
|
|
||||||
|
A well-written developer job description is key to finding the right developer. The challenge, however, is writing a developer job description that attracts top talent. A poorly written job description can attract unqualified applicants and overlook top talent. If you want to hire top frontend developers, you must understand what skills and duties come with the job. |
||||||
|
|
||||||
|
In this guide, I will show you how to create a good [front-end developer](https://roadmap.sh/frontend) job description template based on my experience hiring front-end developers. In the following sections, you'll learn about the responsibilities, skills, and what to look for when hiring candidates. |
||||||
|
|
||||||
|
## Frontend developer job description template |
||||||
|
|
||||||
|
Front-end developer job descriptions may differ depending on a company's requirements and needs. Based on my experience as a front-end developer recruiter and an analysis of front-end developer job descriptions on LinkedIn, Indeed, and ZipRecruiter, here is a developer job description template that covers the essential skills and qualifications that hiring managers look for in potential hires: |
||||||
|
|
||||||
|
**Job Title: Frontend Developer.** |
||||||
|
|
||||||
|
**Company**: [Company Name]. |
||||||
|
|
||||||
|
**Location**: [Location]. |
||||||
|
|
||||||
|
**Job Type**: Full-time. |
||||||
|
|
||||||
|
**About Us**: **[Company Name]** is [give a brief description of the company's history and goals]. |
||||||
|
|
||||||
|
**Job Description** |
||||||
|
|
||||||
|
**[Company Name]** seeks experienced frontend developers who are passionate about developing user-friendly designs. This role requires expertise in HTML, CSS, JavaScript, and modern frontend frameworks (React). The ideal candidate will have a strong eye for design and a deep understanding of frontend technologies. |
||||||
|
|
||||||
|
**Responsibilities** |
||||||
|
|
||||||
|
- Translate web design mockups and feature requirements into functional, mobile-friendly websites using HTML, CSS, and JavaScript frameworks such as React, Angular, or Vue.js. |
||||||
|
- Work closely with UI/UX designers to translate design wireframes into reusable code and collaborate with back-end developers to integrate APIs and services. |
||||||
|
- Ensure cross-browser compatibility and optimize applications for maximum speed and scalability. |
||||||
|
- Write clean, maintainable, and reusable code and conduct code reviews to ensure adherence to coding standards and [best practices](https://roadmap.sh/best-practices/frontend-performance). |
||||||
|
|
||||||
|
**Requirements** |
||||||
|
|
||||||
|
- Professional experience building dynamic frontend web applications and websites. |
||||||
|
- Hands-on experience in HTML, CSS, JavaScript, and modern frontend frameworks. |
||||||
|
- Solid understanding of responsive and adaptive design. |
||||||
|
- Ability to collaborate with product managers, back-end developers, designers, and other team members during project development. |
||||||
|
- Experience optimizing frontend performance for maximum speed and ensuring the technical feasibility of UI/UX designs. |
||||||
|
- Hands-on experience with version control systems such as Git. |
||||||
|
- Experience with tools for debugging and development automation like Chrome DevTools and Webpack. |
||||||
|
- Relevant soft skills like customer service, communication, and problem-solving skills. |
||||||
|
- Practical experience and a strong portfolio that shows a broad range of abilities. |
||||||
|
- Bachelor’s degree in computer science or relevant industry experience. |
||||||
|
|
||||||
|
**Nice to Have** |
||||||
|
|
||||||
|
- Experience with web accessibility and SEO best practices. |
||||||
|
- In-depth understanding of UI/UX design principles. |
||||||
|
|
||||||
|
**What We Offer** |
||||||
|
[Insert company's offers, for example, competitive salary and benefits package, etc.]. |
||||||
|
|
||||||
|
**How to Apply** |
||||||
|
If this role excites you, please submit your resume and cover letter to **[contact email or link to application portal]**. |
||||||
|
|
||||||
|
**Note**: From my experience hiring frontend developers, I have seen that a bachelor's degree in computer science is often preferred, but it is not always necessary. A lot of frontend developers are self-taught or go through coding boot camps. Therefore, hands-on experience and a solid portfolio can be as valuable as a formal degree. |
||||||
|
|
||||||
|
## Key frontend developer responsibilities |
||||||
|
|
||||||
|
Frontend developers are essential in the development process of web applications and websites. They ensure that the final product meets the users' and business needs from start to finish. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Below are frontend developer responsibilities a hiring manager should look for when hiring: |
||||||
|
|
||||||
|
- Understanding the requirements of the project. |
||||||
|
- Develop a responsive and seamless user experience. |
||||||
|
- Maintain and optimize existing web applications. |
||||||
|
- Collaborate with backend web developers and other teams. |
||||||
|
|
||||||
|
### Understanding the requirements of the project |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Hiring frontend developers who understand project requirements is crucial for a hiring manager. The ideal candidate should be able to: |
||||||
|
|
||||||
|
- Communicate effectively with development teams to get a complete understanding of project requirements. |
||||||
|
- Collaborate with designers, QA testers, and product managers to get project feedback. |
||||||
|
|
||||||
|
This process involves the frontend developer: |
||||||
|
|
||||||
|
- Attending project meetings to understand the project goals and objectives. These meetings can be in person or online with the design team to get all the details needed for the design. |
||||||
|
- Collaborating with teams to clearly define requirements and gather feedback. |
||||||
|
- Creating quality mockups to design and improve UI components like buttons and forms. |
||||||
|
- Writing high-quality code **(HTML, CSS, JavaScript, etc)** that meets industry standards. |
||||||
|
- Translating project requirements into functional user interfaces that incorporate new user-facing features. Examples of these new user-facing features include buttons, menus, and other navigation elements. |
||||||
|
|
||||||
|
Hiring frontend developers who can easily understand project requirements is very important. They help increase a development team's performance and guarantee your project's success. |
||||||
|
|
||||||
|
### Develop a responsive and seamless user experience. |
||||||
|
A website thrives on a responsive and seamless user experience. Are users finding what they are searching for fast enough? Is moving around the website accessible for them? Hiring a frontend developer who understands and can answer these questions is essential. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developer duties go far beyond designing a website's appearance. They prioritize the experience of every user and ensure a website is: |
||||||
|
|
||||||
|
- **Responsive.** Website content must be viewable on mobile applications, desktops, and several devices. |
||||||
|
- **Easy to use and understand.** |
||||||
|
- **Ensuring cross-browser compatibility.** Users access websites via popular browsers like Chrome. A frontend developer must ensure a website looks and works the same on all browsers. It involves following web standards and debugging compatibility issues with browser developer tools. |
||||||
|
|
||||||
|
### Maintain and optimize existing web applications. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developers aren't just individual who make cool web applications or websites. They also play a critical role in maintaining existing web applications. It is crucial to hire a frontend developer who can: |
||||||
|
|
||||||
|
- **Fix bugs:** Frontend developers help resolve website issues like browser compatibility issues, unclickable buttons, etc. |
||||||
|
|
||||||
|
- **Optimize applications:** Frontend web developers ensure a website works well and loads fast. They are responsible for optimizing website performance, improving load times, and troubleshooting frontend issues. Frontend developers must stay up-to-date with [industry trends](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards#web_best_practices) and [](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards)best practices. This ensures that the websites they work on are accessible, follow web standards, and provide a great user experience. |
||||||
|
|
||||||
|
### Collaborate with backend web developers and other teams |
||||||
|
|
||||||
|
Completing a web development project isn't something one can do alone–it takes a team effort to get it done right. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
It is important to hire a frontend developer who can collaborate with various teams, like: |
||||||
|
|
||||||
|
- **Backend web developers**: [Backend developers](https://roadmap.sh/backend) handle a website's server-side logic and data management. They code the website's core functionality, such as user authentication and data processing. Frontend and backend web developers collaborate to make the website functional and secure. |
||||||
|
|
||||||
|
- **UI designers**: UI designers are like the artists who create a website's visual elements. They design the website's layout and appearance, such as the colors, buttons, and images. Frontend developers convert the design into a working website using their technical skills. They also collaborate with the UI designer to understand feature requirements related to the project. |
||||||
|
|
||||||
|
- **Quality assurance testers (QA testers):** QA testers play a critical role in web development. They participate in the application development process from start to finish. Their early involvement helps them spot possible issues as the application develops. The QA tester creates testing plans at each stage, like functional and unit testing. They improve user experience by working with the frontend to identify and fix bugs. |
||||||
|
|
||||||
|
## Essential skills for a frontend developer |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Creating easy-to-use websites and applications requires a broad range of technical skills. When evaluating candidates, look for proficiency in these must-have frontend developer skills: |
||||||
|
|
||||||
|
- Strong foundation in core web development technologies, like HTML, CSS, and JavaScript. |
||||||
|
- Strong grasp of version control systems, such as Git. |
||||||
|
- Good knowledge of frontend frameworks and libraries, for example, React JS and TailwindCSS. |
||||||
|
- Experience with CSS preprocessors for modular and maintainable styling, such as Sass. |
||||||
|
- Experience with browser testing and debugging tools, like Chrome DevTools. |
||||||
|
- Proficient understanding of web performance optimization techniques, like lazy loading. |
||||||
|
- Experience identifying and fixing performance bottlenecks using tools such as Google PageSpeed Insights. |
||||||
|
- Attention to detail to ensure visually consistent and error-free web applications. |
||||||
|
- Ability to stay up-to-date with emerging technologies like progressive web apps. |
||||||
|
|
||||||
|
## Desirable skills for a frontend developer |
||||||
|
|
||||||
|
Desirable skills set exceptional frontend web developers apart from the rest. They demonstrate a developer's ability to excel and deliver high-quality results. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Hire a frontend web developer who can do more than just the basics by checking for the following skills: |
||||||
|
|
||||||
|
- Excellent knowledge of accessibility. |
||||||
|
- Basic understanding of UI/UX design principles. |
||||||
|
- Proficient in optimization techniques. |
||||||
|
|
||||||
|
### Excellent knowledge of accessibility |
||||||
|
|
||||||
|
[A good understanding of accessibility](https://code.pieces.app/blog/ada-compliance-made-easy-ada-testing-for-websites-and-applications) is a skill that frontend developers should have. It involves creating websites that everyone uses, including users with disabilities. |
||||||
|
|
||||||
|
It is essential to hire a frontend web developer who has an understanding of the following: |
||||||
|
|
||||||
|
- Accessibility guidelines and regulations, such as [WCAG 2.1](https://www.w3.org/TR/WCAG21/). |
||||||
|
- [Semantic HTML and ARIA attributes](https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/). |
||||||
|
- [Screen readers](https://blog.hubspot.com/website/screen-reader-accessibility) and other assistive technologies. |
||||||
|
|
||||||
|
### Basic understanding of UX and UI design principles |
||||||
|
|
||||||
|
Front-end developers must have a foundational knowledge of UI and UX design principles. This ability allows them to create easy-to-use designs, websites, and applications. Some essential elements of UI/UX design principles are: |
||||||
|
|
||||||
|
- **Visual design principles:** Understanding this principle is vital for frontend developers. It involves understanding basic design principles like color theory and typography. These principles provide visual consistency and help developers create functional code. |
||||||
|
|
||||||
|
- **User-centered design:** User-centred design **(UCD)** is a more thorough approach to design. This approach prioritizes the user's needs in all design and development decisions. It involves many stages, including user research and testing, design iterations, and more. |
||||||
|
|
||||||
|
### Proficient in optimization techniques |
||||||
|
|
||||||
|
Hiring a frontend web developer who possesses excellent performance optimization skills is important. This skill consists of: |
||||||
|
|
||||||
|
- Code optimization techniques (code minification, compression, etc) |
||||||
|
- Resource optimization (image compression, lazy loading, caching, etc.) |
||||||
|
- Rendering optimization (browser, server-side rendering, etc.) |
||||||
|
- Browser optimization (browser caching, HTTP/2, etc.) |
||||||
|
- Tooling optimization (Webpack, code splitting, etc.) |
||||||
|
|
||||||
|
A frontend web developer who is proficient at performance optimization techniques will: |
||||||
|
|
||||||
|
- Use popular tools like Lighthouse and WebPageTest to analyze performance metrics. |
||||||
|
- Identify bottlenecks using performance-enhancing techniques like network requests and DOM manipulation. |
||||||
|
- Implement optimization strategies using techniques like lazy loading. |
||||||
|
- Monitor performance regressions like page load times and response times. |
||||||
|
|
||||||
|
Hiring Frontend developers who know optimization techniques is important for the following reasons: |
||||||
|
|
||||||
|
- They help improve search engine rankings |
||||||
|
- Improve user experience and engage users more with the web content. |
||||||
|
- Increase conversation rates. |
||||||
|
- Reduce bounce rates and user frustration. |
||||||
|
|
||||||
|
## Tools used in frontend development |
||||||
|
|
||||||
|
Frontend web developers need tools to implement new features and build interactive websites. These tools help them bring their creative vision to life and ensure a good user experience. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
When hiring a frontend developer, prioritize their proficiency in using tools like: |
||||||
|
|
||||||
|
- **Web building blocks**: Examples of web building blocks are HTML, CSS, and [JavaScript](https://roadmap.sh/javascript). |
||||||
|
- **Build tools**: Examples of these tools are Grunt, Gulp, or Webpack. |
||||||
|
- **CSS preprocessors**: Examples of CSS preprocessors are Sass, Less, and Stylus. |
||||||
|
- **Web frameworks**: Examples of popular frameworks are TailwindCSS, [Angular](https://roadmap.sh/angular), and [Vue.js](https://roadmap.sh/vue). |
||||||
|
- **Web libraries**: Examples of libraries are [React](https://roadmap.sh/react), Anime.js, and Chart.js. |
||||||
|
- **Debugging tools**: Examples of debugging tools are Chrome DevTools |
||||||
|
- **Version control systems (VCS):** Git **(e.g., GitHub, GitLab, Bitbucket)** is an example of a VCS. |
||||||
|
|
||||||
|
## Evaluating candidates for a frontend developer job |
||||||
|
|
||||||
|
Hiring a frontend developer is not just about evaluating their technical abilities. There's more to it than that! It's about checking their fit with the company culture, soft skills, and more. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The evaluation process for a frontend developer job involves the following steps: |
||||||
|
|
||||||
|
- Technical interviews |
||||||
|
- Behavioral interviews |
||||||
|
- Practical assessment |
||||||
|
- Reference checks |
||||||
|
|
||||||
|
### Technical interviews |
||||||
|
|
||||||
|
Technical interviews help ensure qualified candidates have the essential skills for the job. You can conduct technical interviews via online platforms like [HackerRank](https://www.hackerrank.com/) or in-person interviews. It enables you to test their knowledge of frontend tools, ability to explain code, and more. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Some examples of technical interview questions for a frontend developer job include: |
||||||
|
|
||||||
|
- Explain the difference between the undefined and null values in JavaScript |
||||||
|
- Explain the principle of responsive web design and how you implement it. |
||||||
|
- Explain CSS specificity and how it works. |
||||||
|
|
||||||
|
### Behavioral interviews |
||||||
|
|
||||||
|
Behavioral interviews test a candidate's communication, problem-solving, teamwork, and adaptability skills. They give you an understanding of how well the candidate will fit with the team and company culture. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Some examples of behavioral interview questions for a frontend developer job include: |
||||||
|
|
||||||
|
- Can you describe a time when you had to collaborate with a designer to implement a complex UI feature? |
||||||
|
- How do you approach debugging coding issues? |
||||||
|
- How do you handle tight deadlines when they all seem important and urgent? |
||||||
|
|
||||||
|
### Practical assessment |
||||||
|
|
||||||
|
A practical assessment is a hands-on test asking the candidates to complete a task or build a project. They include take-home projects, live coding sessions, pair programming, and code review exercises. It gives you a better idea of what the candidates can do beyond what you see on their resumes. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Some examples of practical assessments for a frontend web developer job include: |
||||||
|
|
||||||
|
- Build a basic web application using React or Angular. |
||||||
|
- Debug and fix a broken webpage or web application. |
||||||
|
|
||||||
|
Conduct the practical assessment based on the tools mentioned in the job description. This way, you ensure you're testing if the candidates are good at the skills and tools needed for the job. |
||||||
|
|
||||||
|
### Reference checks |
||||||
|
|
||||||
|
Reference checks help double-check a candidate's past job history and skills. Types of reference checks include professional, peer, character references, and more. They ensure the candidate fits the company culture and matches the job description. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Some examples of reference check questions for a frontend web developer job include: |
||||||
|
|
||||||
|
- What do you think about the candidate's work ethic and teamwork skills? |
||||||
|
- Would you hire the candidate again if you had the opportunity? |
||||||
|
|
||||||
|
Ask the above reference questions to people who know the candidate inside and out. People like ex-coworkers who can vouch for their skills and personal qualities. Use phone or video calls, email or online surveys, or in-person meetings to ask these questions. |
||||||
|
|
||||||
|
## Frequently asked questions about frontend web development |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The process of getting into frontend development is often unclear to many people. The following are some answers to common questions to help you get started. |
||||||
|
|
||||||
|
### How long does it take to be a frontend developer? |
||||||
|
|
||||||
|
The time required to become a frontend developer can vary from person to person. It depends mostly on how fast you learn and how much time you put into learning and practicing. But if you keep at it, you can pick up frontend development skills in just a few months to a year. |
||||||
|
|
||||||
|
### How can I stay up-to-date with the latest front-end technologies and trends? |
||||||
|
|
||||||
|
[Visit roadmap.sh](https://roadmap.sh/frontend) to stay up-to-date with the latest front-end technologies and trends. It provides the latest resources to help you build web applications and stay ahead as a front-end developer. Also, you can connect with other developers by [joining online communities](https://discord.com/invite/cJpEt5Qbwa) and attending tech events. |
||||||
|
|
||||||
|
## What is the typical career path for a frontend developer? |
||||||
|
|
||||||
|
Frontend development offers a cool career path with vast opportunities for professional development. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The following is a typical career path for a frontend developer: |
||||||
|
|
||||||
|
- **Entry-level frontend developer**: This is the beginning of your career in frontend development. At this stage, you are learning web basics and the skills needed to become a frontend developer, building projects with HTML, CSS, JavaScript, and libraries like React. This role is also known as a junior frontend developer. |
||||||
|
|
||||||
|
- **Mid-level frontend developer**: At this stage, you have a strong understanding of how the development process of web applications works. You have the skillset to take on complex projects and mentor junior developers. |
||||||
|
|
||||||
|
- **Senior-level frontend developer:** Senior-level frontend developers are experts in the frontend field. At this stage, you are responsible for mentoring junior developers, leading development teams, and much more. |
||||||
|
|
||||||
|
- **Lead frontend developer**: As a senior-level frontend developer, you can switch to either a lead frontend engineer or a product designer role. Lead frontend engineer role requires you to provide technical vision, manage teams, and collaborate with product and design teams. Also, as a product designer, you focus on user experience, interaction design, visual design, and design systems. Both paths need sound technical, leadership, communication, and strategic thinking skills. |
||||||
|
|
||||||
|
### What are the flexible work arrangements available to frontend developers? |
||||||
|
|
||||||
|
There are many options for frontend developers when it comes to flexible work schedules. It helps boost productivity, which can lead to many career growth opportunities. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Some of the flexible work arrangements include: |
||||||
|
|
||||||
|
- **Remote work**: Several companies offer remote work options for frontend developers. Remote work allows you to work from anywhere, anytime, as long as you meet deadlines. |
||||||
|
|
||||||
|
- **Hybrid work:** Hybrid Work combines working from the office with remote work. So you can choose specific days to work from the office and others from home. It allows you to maintain in-person collaboration with your work colleagues. |
||||||
|
|
||||||
|
- **Freelance work**: A freelance frontend developer benefits greatly from the flexibility of freelancing. As a freelance frontend developer, you can choose when you work and which projects you want to take on. This is one of the main advantages of working as a freelance frontend developer. But being a freelance frontend developer doesn't always come with the stability and perks of a regular job. |
||||||
|
|
||||||
|
### Who gets paid more backend or frontend web developer? |
||||||
|
|
||||||
|
A backend and a frontend web developer both earn competitive salaries. The difference in pay depends on factors like location, industry, and experience level. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
According to Indeed, here are some average salary ranges for both positions: |
||||||
|
|
||||||
|
- **Backend developer**: $154,657 per year. |
||||||
|
- **Frontend web developer**: $113,894 per year. |
||||||
|
- **Full stack developer (combination of frontend and backend)**: $126,376 per year. |
||||||
|
|
||||||
|
### Is frontend development and software development the same? |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
No, frontend development is not the same as software development. Frontend development is like a niche within software development. It focuses on building the user interface and user experience of web applications. |
||||||
|
|
||||||
|
Software development is more like an umbrella term that includes many specializations, such as: |
||||||
|
|
||||||
|
- Frontend development |
||||||
|
- Backend development |
||||||
|
- Full stack development |
||||||
|
- Mobile app development. |
||||||
|
|
||||||
|
So, you can call a frontend or backend developer a software developer. |
||||||
|
|
||||||
|
### What is the difference between frontend developers and backend web developers? |
||||||
|
|
||||||
|
The development process of websites and applications requires frontend and backend web developers. However, their areas of expertise and responsibilities are different. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developers do the following: |
||||||
|
|
||||||
|
- Build a website or application's user interface (UI) and user experience (UX). They create the visual elements you interact with on a website, like navigation menus. |
||||||
|
- Work with HTML, CSS, JavaScript, frontend frameworks, and libraries like React. |
||||||
|
|
||||||
|
Back-end web developers do the following: |
||||||
|
|
||||||
|
- Work with Java and Python programming languages and frameworks like Node.js. |
||||||
|
- Work on the server side of the web development process. They focus on the parts of the website users cannot interact with. Examples of this include API connectivity and data storage and retrieval. |
||||||
|
|
||||||
|
### What are the programming languages and frameworks used in frontend development? |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developers often use a combination of programming languages, frameworks, and libraries like: |
||||||
|
|
||||||
|
- **HyperText Markup Language (HTML)**: HTML is a standard markup language for creating web pages. It is the foundation of a website, providing its structure and content for the web browser to display. |
||||||
|
- **Cascading Style Sheet (CSS):** CSS is vital in controlling a website's visual presentation. It is a styling language that controls the layout and appearance of HTML and XHTML web pages. CSS transforms HTML elements like `<input>` into visual UI components like styled form fields. It allows frontend developers to add colors, fonts, icons, and more to websites. |
||||||
|
- **JavaScript**: Javascript is a fundamental tool for creating user-friendly websites in web development. It is a versatile scripting language that adds interactivity to a web page. Developers can use it to create dynamic elements that respond to user interaction. It makes static websites created with HTML and CSS to be functional. |
||||||
|
- **JavaScript frameworks**: Examples of popular JavaScript frameworks are Angular and Vue.js. |
||||||
|
- **JavaScript libraries**: Examples of libraries are React, Anime.js, and Chart.js. |
||||||
|
- **CSS frameworks**: Examples of popular CSS frameworks are Bootstrap and TailwindCSS. |
||||||
|
- **CSS libraries**: Examples of CSS libraries are Animate.css and Font Awesome. |
||||||
|
|
||||||
|
## What next? |
||||||
|
|
||||||
|
Hiring a frontend developer requires a grasp of the skills and duties that come with the job. By adhering to the tips in this article, you can pick the perfect candidate for your team. Now that you know what it takes to succeed in this role, it's time to take the next step. |
||||||
|
|
||||||
|
Follow the [frontend developer roadmap](https://roadmap.sh/frontend) to learn and adapt to new technologies nonstop. Roadmap has resources to help newbies and pros improve and keep up with frontend trends. It also allows you to: |
||||||
|
|
||||||
|
- Create your own personal or [team roadmap](https://roadmap.sh/teams) or generate one using AI. |
||||||
|
- Keep track of your frontend web developer learning journey. |
||||||
|
- Become part of a supportive community by [signing up on](https://roadmap.sh/signup) [roadmap.sh](http://roadmap.sh) [platform](https://roadmap.sh/signup). |
||||||
@ -0,0 +1,202 @@ |
|||||||
|
--- |
||||||
|
title: 'Frontend vs. Backend in AI Development' |
||||||
|
description: 'Learn the key differences between frontend and backend in AI development, from roles to tools, and how they impact project success.' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/frontend/vs-backend-ai' |
||||||
|
seo: |
||||||
|
title: 'Frontend vs. Backend in AI Development' |
||||||
|
description: 'Learn the key differences between frontend and backend in AI development, from roles to tools, and how they impact project success.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/frontend-vs-backend-in-ai-43wtm.jpg' |
||||||
|
relatedTitle: "Other Guides" |
||||||
|
relatedGuides: |
||||||
|
"How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer" |
||||||
|
"What Front End Programming Languages Should You Learn?": "/frontend/languages" |
||||||
|
"Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks" |
||||||
|
"12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills" |
||||||
|
"Top 30 Popular Front End Developer Interview Questions": "/questions/frontend" |
||||||
|
"Top 10 Web Developer Portfolio Templates - A Pro’s Pick": "/frontend/web-developer-portfolio" |
||||||
|
"Frontend Developer Job Description [2024 Template]": "/frontend/job-description" |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-10-17 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Many software developers begin their careers by choosing an area of focus: backend or front end development. If you're an aspiring software developer, understanding the differences between frontend and backend can help you choose a focus for your career path. This guide focuses on the [front-end](https://roadmap.sh/frontend) and [back-end](https://roadmap.sh/backend) development for AI. |
||||||
|
|
||||||
|
Frontend vs Backend is a common topic in software engineering and understanding both frontend and backend development is crucial for creating effective and efficient websites. Both are essential for a well-rounded web development process. Both career paths are in high demand. |
||||||
|
|
||||||
|
Front-end development refers to the visual elements that users can directly interact with. It is the user facing side of an application also known as the client side of an application. Back-end development includes everything the user cannot see. It focuses on the application’s overall functionality and business logic. |
||||||
|
|
||||||
|
Despite frontend and backend developers in AI having specific roles in the overall software development life cycle, they work together to design, program, test, and deploy AI applications. They collaborate to ensure AI applications meet quality and security standards. In addition to front-end and back-end developers, there are also full stack developers. Full stack developers work and specialize in both frontend and backend of web development. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
The table below presents a comparison of frontend vs backend development AI specializations. |
||||||
|
|
||||||
|
| Frontend AI development | Backend AI development | |
||||||
|
| ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | |
||||||
|
| Focuses on the visual aspects of an AI application which is the UI and users directly interact with. | Focuses on the server-side development of an application which has data storage and the user does not directly interact with. | |
||||||
|
| Specializes in the client side of the application. | Not concerned with the client side of web applications. | |
||||||
|
| The front end is about user interface (UI) and user experience (UX). | Focuses on the application’s functionality and business logic. | |
||||||
|
| Uses HTML, CSS and JavaScript as part of the toolbox. | Uses back-end programming languages like Java, C#, Python and so on. | |
||||||
|
|
||||||
|
Let’s look at frontend vs backend in detail. |
||||||
|
|
||||||
|
## What is frontend development for AI? |
||||||
|
|
||||||
|
Frontend development for AI involves the design and implementation of the visual elements of an AI application. Several AI applications are being used on a daily basis, such as Chatbots, Virtual assistants, face recognition systems, etc. A user interface (UI) enables you to interact with these applications. |
||||||
|
|
||||||
|
An AI frontend developer designs and builds the parts of an AI application that users can directly interact with. For larger projects, front-end developers will work with a digital and web designer who is responsible for creating a graphic design for the web page of the application. Frontend developers are also referred to as web developers. |
||||||
|
|
||||||
|
Frontends are also built on other platforms asides the web, such as mobile apps for Android and iOS, or desktop apps. |
||||||
|
|
||||||
|
The next section presents who a front-end developer is and the tools they use for building applications for the web. |
||||||
|
|
||||||
|
## Who is a frontend developer? |
||||||
|
|
||||||
|
A [frontend developer](https://roadmap.sh/frontend) builds the visual part of an application, which includes the parts users see and directly interact with, such as the graphical user interface (GUI) and the command line, including the design, navigation menus, texts, images, videos, etc. A page or screen a user sees with several UI components is called a document object model (DOM). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Frontend developers build these visual parts using front end programming languages such as: |
||||||
|
|
||||||
|
- HTML (Hypertext Markup Language) |
||||||
|
- CSS |
||||||
|
- JavaScript |
||||||
|
|
||||||
|
### HTML (Hypertext Markup Language): |
||||||
|
|
||||||
|
The basic building block of an application. It defines the markup of the language. |
||||||
|
|
||||||
|
### CSS (Cascading Style Sheets) |
||||||
|
|
||||||
|
Builds upon HTML and defines the layout and style of an application. |
||||||
|
|
||||||
|
### JavaScript |
||||||
|
|
||||||
|
The front-end programming language that adds logic to an application. It can be used for both the frontend and backend (NodeJs, ExpressJs, NestJS). |
||||||
|
|
||||||
|
HTML, CSS, and [JavaScript](https://roadmap.sh/javascript) are fundamental tools in a frontend developer’s toolkit and are used to determine the look and functionality of the client side of an application. |
||||||
|
|
||||||
|
In addition to these languages, there are frontend frameworks, libraries, and CSS preprocessors that help to create websites and applications efficiently. Some of the popular ones are [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), and SASS. |
||||||
|
|
||||||
|
## Front end developers responsibilities for AI |
||||||
|
|
||||||
|
The core responsibilities of AI front end developers include: |
||||||
|
|
||||||
|
- Designing and developing dashboards |
||||||
|
- Developing graphs and charts for data visualization |
||||||
|
- Integrating with AI services |
||||||
|
- Testing and validating the integrated AI services |
||||||
|
- Optimizing the user experience of AI applications |
||||||
|
|
||||||
|
### Designing and developing dashboards |
||||||
|
|
||||||
|
A dashboard conveys different but related information in an understandable format. Frontend developers are responsible for designing and developing dashboards that convey different AI data and metrics. They use design programs to lay out a dashboard prototype and ensure that the dashboards are implemented according to specifications. |
||||||
|
|
||||||
|
### Developing graphs and charts for data visualization |
||||||
|
|
||||||
|
Data visualization is an important process in AI that presents data in visual formats such as graphs and charts. Frontend AI developers use libraries such as Chart.js, Plotly, and D3.js to create graphs and charts to visualize and interpret data. |
||||||
|
|
||||||
|
### Integrating with AI services |
||||||
|
|
||||||
|
AI front end developers connect frontend applications to AI services via Application Programming Interfaces (APIs) to fetch data and predict or perform certain actions. For example, a weather application’s frontend connects to weather prediction services through API endpoints or other means of communication and displays the information users interact with. |
||||||
|
|
||||||
|
### Testing and validating integrated AI services |
||||||
|
|
||||||
|
After integrating AI services into an application, frontend AI developers also test and validate that these services function properly and provide accurate and efficient data. Testing and validation are important for identifying and resolving technical issues that might come up and for addressing optimization requirements. |
||||||
|
|
||||||
|
### Optimizing the user experience of AI applications |
||||||
|
|
||||||
|
Frontend AI developers focus on improving the user experience of software and other mobile applications by optimizing UI elements and adding features like hovering effects or tooltips, navigation flows, and application interactions. They also iterate on designs and features with UI/UX experts based on user feedback to enhance user satisfaction and produce a responsive web design. |
||||||
|
|
||||||
|
## Frontend developer skills for AI |
||||||
|
|
||||||
|
To be a frontend AI developer, you need a combination of soft and technical skills. Some of the skills you require to be a frontend AI developer include: |
||||||
|
|
||||||
|
- Deep understanding of HTML, CSS, and JavaScript/TypeScript. |
||||||
|
- Knowledge of at least one web application framework or library, e.g., React, Vue, and Angular. |
||||||
|
- Knowledge of data visualization libraries. e.g., Chart.js, Plotly. |
||||||
|
- Basic understanding of machine learning and machine learning models. e.g., linear regression, random forest, etc. |
||||||
|
- Collaboration and communication skills. |
||||||
|
- Problem-solving skills. |
||||||
|
|
||||||
|
## What is back end development for AI? |
||||||
|
|
||||||
|
Back end development for AI is the design and implementation of the server side of an AI application. As opposed to frontend development, which involves the visual and interactive elements of an application, backend development involves the part of an application a user cannot directly interact with. The next section goes into detail about who a back-end developer is and their role in the software development process and lifecycle. |
||||||
|
|
||||||
|
## Who is a back-end developer? |
||||||
|
|
||||||
|
A [back-end developer](https://roadmap.sh/backend) specializes in the server-side development of an AI application that users cannot see and directly interact with. A back-end developer manages the behind-the-scenes part of an application, such as the servers, databases, and machine learning models that power AI applications. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
AI back end developers use server-side programming languages such as C#, [Java](https://roadmap.sh/java), [Python](https://roadmap.sh/python), and [Rust](https://roadmap.sh/rust) and frameworks such as [Spring Boot](https://roadmap.sh/spring-boot), [ASP.NET core](https://roadmap.sh/aspnet-core), Django, and Ruby on Rails to develop the backend of AI applications. |
||||||
|
|
||||||
|
## Back end developers responsibilities for AI |
||||||
|
|
||||||
|
The responsibilities of AI back end developers include: |
||||||
|
|
||||||
|
- Database design and management |
||||||
|
- AI model development |
||||||
|
- Application Programming Interface design and development |
||||||
|
- Performance optimization |
||||||
|
|
||||||
|
### Database design and management |
||||||
|
|
||||||
|
Data is stored and retrieved from databases. AI deals with a large amount of data, which can be structured or unstructured. Back end developers are responsible for setting up these databases to save AI data. Two common types of databases are: |
||||||
|
|
||||||
|
- [Relational databases](https://roadmap.sh/sql) /Structured Query Language (SQL) e.g., PostgreSQL, Microsoft SQL Server |
||||||
|
- NoSQL databases, e.g., [MongoDB](https://roadmap.sh/mongodb). |
||||||
|
|
||||||
|
### AI model development |
||||||
|
|
||||||
|
AI models are computer programs that recognize patterns in data and make predictions. They rely heavily on trained and untrained data, and each model is suitable for different cases. Examples of AI models include: |
||||||
|
|
||||||
|
- Classification models, e.g., random forest, K-nearest neighbor, naive bayes |
||||||
|
- Regression models, e.g., linear regression, decision trees |
||||||
|
|
||||||
|
Backend AI developers use tools and frameworks such as Pandas, Numpy, Scikit-Learn, PyTorch, and so on to develop AI these AI models. |
||||||
|
|
||||||
|
### API design and development |
||||||
|
|
||||||
|
A backend AI developer designs and develops APIs that are consumed by the frontend of an AI application or other services. API development involves creating endpoints that provide data that users can visualize and interact with. Backend AI developers use different tools to design and document APIs; a common one is [Swagger](https://swagger.io/). |
||||||
|
|
||||||
|
### Performance optimization |
||||||
|
|
||||||
|
Backend AI developers are constantly optimizing the performance of AI applications. They do this by scaling applications to ensure the backend can handle large volumes of requests. The performance optimization involves code refactoring, optimizing database queries, adding caching, and load balancing. |
||||||
|
|
||||||
|
## Backend developer skills for AI |
||||||
|
|
||||||
|
Some of the job-ready skills needed to excel as a backend AI developer include: |
||||||
|
|
||||||
|
- In-depth knowledge of at least one back-end programming language. |
||||||
|
- Knowledge of database systems. |
||||||
|
- Basic knowledge of web servers. |
||||||
|
- Basic knowledge of how to deploy applications on cloud services or on-premise. |
||||||
|
- Knowledge of machine learning models. |
||||||
|
- Knowledge of data structures and algorithm |
||||||
|
- Knowledge of web application frameworks |
||||||
|
- Problem-solving and logical reasoning skills. |
||||||
|
- Collaboration and communication skills. |
||||||
|
|
||||||
|
## Which should I go for - frontend vs backend? |
||||||
|
|
||||||
|
As you’ve seen in the frontend vs backend comparison, frontend and backend developers who specialize in AI perform different responsibilities and require various skill sets. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
If you like user interfaces, keen on sound design, and like the visual aspects of creating apps, then perhaps you would be most interested in becoming a front end software developer. If you are more interested in servers, databases, and how systems work behind the scenes, then you should consider backend development. |
||||||
|
|
||||||
|
You can begin your frontend or backend engineering career by obtaining a bachelor’s degree in computer science degree from a college. |
||||||
|
|
||||||
|
roadmap.sh provides you with step-by-step guidance on how to become a [frontend developer](https://roadmap.sh/frontend) and [backend developer](https://roadmap.sh/backend). You can also explore the [full stack developer roadmap](https://roadmap.sh/full-stack) if you are interested in learning full stack development, which is a combination of frontend and backend development. Signing up on roadmap.sh makes it easy to track your progress and also share it on your profile. You can also draw up your personalized roadmap or work with AI to [generate new roadmaps](https://roadmap.sh/ai). |
||||||
@ -0,0 +1,307 @@ |
|||||||
|
--- |
||||||
|
title: "Top 10 Web Developer Portfolio Templates - A Pro’s Pick" |
||||||
|
description: 'Build an impressive online presence with these 10 handpicked web developer portfolio templates.' |
||||||
|
authorId: ekene |
||||||
|
excludedBySlug: '/frontend/web-developer-portfolio' |
||||||
|
seo: |
||||||
|
title: "Top 10 Web Developer Portfolio Templates - A Pro’s Pick" |
||||||
|
description: 'Build an impressive online presence with these 10 handpicked web developer portfolio templates.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/roammap-18-xvyn0.jpg' |
||||||
|
relatedTitle: "Other Guides" |
||||||
|
relatedGuides: |
||||||
|
"How to Become a Front-End Developer in 7 Steps": "/frontend/how-to-become-frontend-developer" |
||||||
|
"What Front End Programming Languages Should You Learn?": "/frontend/languages" |
||||||
|
"Top 7 Frontend Frameworks to Use in 2024: Pro Advice": "/frontend/frameworks" |
||||||
|
"12 In-Demand Front End Developer Skills to Master": "/frontend/developer-skills" |
||||||
|
"Top 30 Popular Front End Developer Interview Questions": "/questions/frontend" |
||||||
|
"Frontend vs. Backend in AI Development": "/frontend/vs-backend-ai" |
||||||
|
"Frontend Developer Job Description [2024 Template]": "/frontend/job-description" |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-10-18 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
As the popular saying goes, “There aren’t too many chances to make a second first impression." This is particularly important for web developers, as hiring managers and potential employers form an initial opinion of you when they see your portfolio. |
||||||
|
|
||||||
|
Given the competitive job market, web developer portfolios are even more crucial now. Beyond possessing the necessary technical and soft skills, web developers need every tool to build a strong brand perception and leave a lasting impression on recruiters. |
||||||
|
|
||||||
|
I’ll focus on some unique web developer portfolio templates and discuss what made them distinctive and a great choice for your next inspiration. This will equip you with the knowledge needed to make informed decisions about the importance of a portfolio, the features to include, and ultimately, how to choose the right template. |
||||||
|
|
||||||
|
## Top web developer portfolio examples to inspire you |
||||||
|
|
||||||
|
To save time and get started quickly, below are some carefully curated web developer portfolio examples you can adopt and customize to suit your personal brand: |
||||||
|
|
||||||
|
- Minimau |
||||||
|
- Stimulus |
||||||
|
- Lendex |
||||||
|
- Nichol |
||||||
|
- Mikon |
||||||
|
- Noah |
||||||
|
- Zyan |
||||||
|
- iPortfolio |
||||||
|
- Ethereal |
||||||
|
- Steve |
||||||
|
|
||||||
|
### Minimau (Premium) |
||||||
|
|
||||||
|
Minimau is a [React](https://roadmap.sh/react)-based portfolio template that is extensible, customizable, and well-documented. It is compatible with the latest version of React and Bootstrap, ensuring that your portfolio remains up-to-date with current web development practices. |
||||||
|
|
||||||
|
Here’s why you should consider Minimau as a template for your portfolio: |
||||||
|
|
||||||
|
- A grid layout with Google font and FontAwesome icon integrated. |
||||||
|
- Support for social media profiles. |
||||||
|
- **World Wide Web Consortium (W3c)**-validated with clean code and cross-browser compatibility. |
||||||
|
- Support for theme-switching (light theme and dark theme). |
||||||
|
|
||||||
|
[Live demo link](https://preview.themeforest.net/item/minimau-react-minimal-portfolio-template/full_screen_preview/26303041). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Stimulus (Free) |
||||||
|
|
||||||
|
Stimulus is a great example of a well-designed HTML resume template with a metro-style block of content. Its mixture of gold, orange, and red colors is extensible and customizable. Additionally, its design is both extensible and customizable, which makes it easy for you to tailor the template to fit your personal branding and unique style. |
||||||
|
|
||||||
|
Here's why Stimulus is a great template for your portfolio: |
||||||
|
|
||||||
|
- A grid layout with unique blocks of content that you can easily use to showcase your work. |
||||||
|
- Fast and lightweight because of minimal dependencies. |
||||||
|
- Support for social media integration. |
||||||
|
|
||||||
|
[Live demo link](https://templatemo.com/tm-498-stimulus). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Lendex (Premium) |
||||||
|
|
||||||
|
Lendex is a unique design portfolio template with an elegant and creative design. It uses the latest version of BootStrap, which is responsive and cross-browser compatible. |
||||||
|
|
||||||
|
The structure and in-build features make it a compatible portfolio template for a front end developer, visual artist, freelance web designer, content creator, and other creatives. |
||||||
|
|
||||||
|
Here’s why you should consider Lendex as a template for your portfolio: |
||||||
|
|
||||||
|
- Support for Google Fonts and Icofont. |
||||||
|
- W3c-validated HTML files and cross-browser compatibility. |
||||||
|
- Out-of-the-box support for blogging functionality. |
||||||
|
- Support for embedded video player. |
||||||
|
|
||||||
|
[Live demo link](https://preview.themeforest.net/item/lendex-personal-portfolio-bootstrap-5-template/full_screen_preview/31542002). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Nichol (Premium) |
||||||
|
|
||||||
|
Nichol is a well-documented portfolio built with [Vue](https://roadmap.sh/vue), TailwindCSS, and [JavaScript](https://roadmap.sh/javascript). The design is clean, modern, and fully responsive and includes NPM support to integrate desired packages. |
||||||
|
|
||||||
|
Here's why Nichol could be the ideal template for your portfolio: |
||||||
|
|
||||||
|
- Fully customizable in terms of page layout and theme switching. |
||||||
|
- Support for Google font, Fonts, Icofont. |
||||||
|
- W3c-validated HTML files and cross-browser compatibility. |
||||||
|
- Support for animations to enhance user experience. |
||||||
|
- Timeline view of education and experience. |
||||||
|
|
||||||
|
[Live demo link](https://nichol-vuejs.vercel.app/). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Mikon (Premium) |
||||||
|
|
||||||
|
Mikon is a creative, modern, and responsive portfolio template built with [Angular](https://roadmap.sh/angular), CSS, SCSS, and BootStrap. It is minimal, single-paged, and distinctly sectioned to show essential details at each glance. |
||||||
|
|
||||||
|
Here's why Mikon makes a great template for your portfolio: |
||||||
|
|
||||||
|
- Fully customizable with scroll spy enabled (updates navigation link based on current scroll position). |
||||||
|
- Support for Google font, Fonts, and Icofont. |
||||||
|
- W3c-validated HTML files and cross-browser compatibility. |
||||||
|
- Support for animations to enhance user experience. |
||||||
|
|
||||||
|
[Live demo link](https://preview.themeforest.net/item/mikon-angular-personal-portfolio-template/full_screen_preview/47436527). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Noah (Free) |
||||||
|
|
||||||
|
Noah is a unique and elegant template suitable for personal web developer portfolios, personal blogs, and personal resume websites. It has an artistic look and a simple, minimal design. |
||||||
|
|
||||||
|
Here’s why you should consider Noah as a template for your portfolio: |
||||||
|
|
||||||
|
- Support for multi-page template and image slideshow. |
||||||
|
- Load on scroll animation. |
||||||
|
- Off-canvas side navigation. |
||||||
|
- Newsletter subscription form UI. |
||||||
|
|
||||||
|
[Live demo link](https://themewagon.com/themes/free-html5-personal-landing-page-template-noah/). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Zyan (Premium) |
||||||
|
|
||||||
|
Zyan is a template specifically suited for creative developers looking to showcase their web development skills. It has a sleek, modern design and is fully responsive on all screens. |
||||||
|
|
||||||
|
Here’s why Zyan is worth considering as a template for your portfolio: |
||||||
|
|
||||||
|
- Custom cursor to enhance experience. |
||||||
|
- Load on scroll animation for an enhanced experience. |
||||||
|
- Support for embedded video player. |
||||||
|
- Uses modern tools like GSAP, Slick Slider, FontAwesome, etc. |
||||||
|
|
||||||
|
[Live demo link](https://codeefly.net/wp/zyan/) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### iPortfolio (Free) |
||||||
|
|
||||||
|
iPortfolio is a unique template that took a different approach of using a dashboard-like layout to structure the menu. Instead of the traditional approach of having the navigation menu at the top, iPortfolio puts the menu on the left side of the screen. This sidebar navigation provides a modern, streamlined look and enhances the user experience by making it easy to access different sections of your portfolio. |
||||||
|
|
||||||
|
Here’s why iPortfolio is worth considering as a template for your portfolio: |
||||||
|
|
||||||
|
- The unique sidebar layout makes the portfolio stand out. |
||||||
|
- Support for animation and micro-interaction to enhance the user experience. |
||||||
|
- Cross-browser compatibility and responsive to various screen sizes. |
||||||
|
|
||||||
|
[Live demo link](https://bootstrapmade.com/demo/iPortfolio/) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Ethereal (Free) |
||||||
|
|
||||||
|
Ethereal is a portfolio template crafted with creative developers in mind. It features a distinctive horizontal layout you can use to present your projects, case studies, and personal stories in a visually engaging and unconventional way. This layout is perfect for showcasing your work with a narrative flow. |
||||||
|
|
||||||
|
Here’s why you should consider Ethereal as a template for your portfolio: |
||||||
|
|
||||||
|
- The horizontal layout makes the portfolio stand out. |
||||||
|
- Dedicated sections to showcase various projects, case studies, personal stories, and other [front end development skills](https://roadmap.sh/frontend/developer-skills). |
||||||
|
- Designed to be easily customized and extended. |
||||||
|
|
||||||
|
[Live demo link](https://html5up.net/ethereal) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Steve (Free) |
||||||
|
|
||||||
|
Steve is a portfolio template with a neat and clean design that is ideal for web designers, web developers, graphics designers, or similar professions. This portfolio showcases a minimalist approach that ensures that your work and skills take center stage, which provides you with a polished and professional platform to showcase your projects, experience, and personal brand. |
||||||
|
|
||||||
|
Here’s why you should consider Steve as a template for your portfolio: |
||||||
|
|
||||||
|
- A distinct call to action to capture potential employers' attention. |
||||||
|
- Contact form with custom validation. |
||||||
|
- Testimonial carousel to showcase proof of work. |
||||||
|
- Dedicated blog section. |
||||||
|
|
||||||
|
[Live demo link](https://technext.github.io/steve/index.html) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Bonus: Astro themes |
||||||
|
|
||||||
|
Astro themes offer a collection of free and premium templates that you can use for your next portfolio website. They provide a wide range of options to help you build **portfolios**, landing pages, e-commerce sites, and more. |
||||||
|
|
||||||
|
Here’s why you should consider Astro themes when choosing a template for your portfolio: |
||||||
|
|
||||||
|
- Flexible option to select a template based on your preferred styling libraries or frameworks (such as TailwindCSS, PostCC, and UnoCSS) |
||||||
|
- A wide selection of free and premium templates to help you get started quickly |
||||||
|
- The ability to choose templates based on your favorite development technologies (like React, Vue, or Svelte) |
||||||
|
|
||||||
|
[Live demo link](https://astro.build/themes/?search=&categories%5B%5D=portfolio) |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Now that you have seen some of the best templates you can adopt for your portfolio, let's take a look at some of the reasons why the selected templates stood out among thousands of options. |
||||||
|
|
||||||
|
## What do top web development portfolios have in common |
||||||
|
|
||||||
|
Having a well-structured web development portfolio is crucial for showcasing your technical and web design skills to potential employers. While the template you choose may depend on factors like your intended role and work experience, all portfolios share some common elements to showcase: |
||||||
|
|
||||||
|
- Personal brand |
||||||
|
- Showcase skills and expertise |
||||||
|
- Highlight live projects and contribution |
||||||
|
- Build credibility |
||||||
|
- Networking and opportunities |
||||||
|
|
||||||
|
1. **Personal brand**: The portfolio should have a personal bio or summary that gives a clear representation of who the developer is. |
||||||
|
|
||||||
|
2. **Showcase skills and expertise**: The portfolio should highlight the owner's competencies. Demonstrates proficiency in various technologies, frameworks, libraries, and tools used in [frontend](https://roadmap.sh/frontend) or [backend](https://roadmap.sh/backend) development. In addition, consider showcasing your professional certifications, companies worked for, and years of experience. |
||||||
|
|
||||||
|
3. **Highlight project and contribution**: The portfolio should contain work or project sections to demonstrate real-world impact. It can also include community engagement, like open source projects, technical writing, and public speaking. |
||||||
|
|
||||||
|
4. **Build credibility**: Web developer portfolios are one of the best ways to build brand and credibility. They allow you to showcase your professional image, provide proof of your work, and share testimonials from colleagues or previous clients. |
||||||
|
|
||||||
|
5. **Networking and opportunities**: Portfolios are a great marketing tool for crafting a unique online presence and increasing visibility. They are useful during your job applications because they help you stand out to potential employers and are also ideal for showcasing the latest personal projects on professional networks like LinkedIn. |
||||||
|
|
||||||
|
With the opportunities offered by a portfolio, it can sometimes become overwhelming to decide what to add and how to structure it, especially if you have extensive experience in frontend development, backend, and other web development areas. Let’s look at these aspects in detail. |
||||||
|
|
||||||
|
## What makes a developer’s portfolio stand out from the rest? |
||||||
|
|
||||||
|
A well-crafted developer’s portfolio is important for showcasing your technical skills and experience. We can narrow it down to essential features that every portfolio must have, and optional features that can help you stand out when applying for jobs or bidding on projects. |
||||||
|
|
||||||
|
### Essential features |
||||||
|
|
||||||
|
- **Introductory and About Me section**: This section should include a brief introduction about yourself, your background, and your expertise. It’s also a great place to include your name, location, and any other interesting details about yourself. |
||||||
|
|
||||||
|
- **Skills and technologies section**: This section shows the different skills and proficiencies, such as crafting responsive designs, enhancing user experience, building APIs, and managing databases. It can also include [front end programming languages](https://roadmap.sh/frontend/languages), [frameworks](https://roadmap.sh/frontend/frameworks), databases, and other specialized skills. |
||||||
|
|
||||||
|
- **Project section**: This section highlights your best work and can include demo links, GitHub links, screenshots, project overview, technologies used, and any other essential details. |
||||||
|
|
||||||
|
- **Experience section**: This section shows your work history and highlights what you have done, including the timeline. |
||||||
|
|
||||||
|
- **Contact section:** One of the main goals of having a portfolio is to attract potential clients or employers. It is crucial for anyone looking at your portfolio to easily contact you using any of the mediums like contact forms, email addresses, or social media links (like GitHub profiles, LinkedIn, or any other relevant links). |
||||||
|
|
||||||
|
### Optional features |
||||||
|
|
||||||
|
- **Theming**: Your portfolio can contain a theme switcher (dark and light modes) and color schemes to further personalize the visitors' experience. |
||||||
|
|
||||||
|
- **Engaging animations** and engaging design can further enhance the visitor's experience, making your own portfolio stand out. |
||||||
|
|
||||||
|
- **Testimonials**: References and appraisals from clients, colleagues, or managers that validate your skills and work ethic might be a valuable addition to your portfolio. |
||||||
|
|
||||||
|
- **Blog**: Including guides, articles, blog posts, and other written content can help establish you as a thought leader and demonstrate your expertise and passion for the field, which can then boost your portfolio. |
||||||
|
|
||||||
|
## What are the criteria for choosing a web developer portfolio template? |
||||||
|
|
||||||
|
The number of templates available can be overwhelming, especially considering that more developers are open-sourcing their work. Questions like "**Should I clone a template and modify it?"**, **"Is accessibility and Search Engine Optimization (SEO) support available?"** **"Should I use a website builder?"** and many more may arise. |
||||||
|
|
||||||
|
In this section, we will look at best practices and tips that will help you make the right decision. Here are the points to consider: |
||||||
|
|
||||||
|
- Design and aesthetics |
||||||
|
- Content layout |
||||||
|
- Technical features |
||||||
|
- Compatibility |
||||||
|
- Cost and licensing |
||||||
|
- User experience |
||||||
|
|
||||||
|
### Design and aesthetics |
||||||
|
|
||||||
|
The template should have a clean, modern, and professional design that captures your brand with consistent elements across all pages. Additionally, visual elements, such as colors, fonts, layouts, images, etc., should be customizable. |
||||||
|
|
||||||
|
### Content layout |
||||||
|
|
||||||
|
The portfolio template should have a dedicated section to easily access contact information, learn more about you, and showcase your work experience. |
||||||
|
|
||||||
|
### Technical features |
||||||
|
|
||||||
|
The template should have good SEO support, follow accessibility guidelines, be compatible with all major browsers, and support Open Graph tags (information previews) when shared on social media. |
||||||
|
|
||||||
|
### Compatibility |
||||||
|
|
||||||
|
If you intend to manage your portfolio content with a **Content Management System (CMS)**, leverage web development-specific libraries, or use cloud-based media storage to optimize media, choosing a template compatible with and supports desired tools and technologies is important. |
||||||
|
|
||||||
|
### Cost and licensing |
||||||
|
|
||||||
|
Ensure that the template you intend to use allows you to use it freely as you wish. Additionally, consider your budget, as templates range from free to premium. |
||||||
|
|
||||||
|
### User experience |
||||||
|
|
||||||
|
The template should be well-structured with a good sitemap, excellent information architecture, and intuitive navigation. It should also be responsive (like mobile devices) and have good loading speed. |
||||||
|
|
||||||
|
Your personal portfolio usually crafts the first impression for potential employers and clients. Investing time in creating a well-designed, structured, and user-friendly portfolio that captures your experience is important. |
||||||
|
|
||||||
|
Additionally, web developer portfolios are not a one-time effort. They require constant updates on your latest projects. The [roadmap.sh](https://roadmap.sh)’s [frontend development roadmap](https://roadmap.sh/frontend) is a valuable resource to keep your skills up to date, and our [frontend developer questions](https://roadmap.sh/questions/frontend) guide can help you to ace your next interview. Additionally, you can track your learning paths and connect with a vibrant community by [signing up](https://roadmap.sh/signup) on the roadmap.sh platform. |
||||||
@ -0,0 +1,191 @@ |
|||||||
|
--- |
||||||
|
title: 'Full Stack Developer Job Description [2024 Template]' |
||||||
|
description: 'Looking to hire a Fullstack Engineer? Get the complete job description, skills, and responsibilities right here!' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/full-stack/job-description' |
||||||
|
seo: |
||||||
|
title: 'Full Stack Developer Job Description [2024 Template]' |
||||||
|
description: 'Looking to hire a Fullstack Engineer? Get the complete job description, skills, and responsibilities right here!' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/fullstack-job-h15x6.jpg' |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-11-01 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
One of the main challenges I face as a hiring manager looking for a full stack engineer is assessing the versatility of potential candidates. With tons of applications to review, I need to make decisions about potential hires and ascertain that they are knowledgeable in both front-end and back-end languages, frameworks, and tools. |
||||||
|
|
||||||
|
This guide will discuss who a [full stack engineer](https://roadmap.sh/full-stack) is, their job description, roles, and objectives. It will also cover the essential skills and qualifications I look out for when hiring candidates for a full stack developer role. |
||||||
|
|
||||||
|
Here is a summary of the full stack developer job description: |
||||||
|
|
||||||
|
- Design and develop the user interface of the application using technologies such as HTML, CSS, and JavaScript. |
||||||
|
|
||||||
|
- Build and manage server-side logic, databases, and application programming interfaces (APIs) using technologies such as JavaScript, Python, Java, Go, and Rust. |
||||||
|
|
||||||
|
- Connect the frontend application to the backend services and ensure a seamless data flow from the client to the server. |
||||||
|
|
||||||
|
- Solve business problems by writing clean, maintainable, and reusable code. |
||||||
|
|
||||||
|
- Collaborate with other stakeholders in the project to ensure the go-live of the project. |
||||||
|
|
||||||
|
## Full stack engineer job description template |
||||||
|
|
||||||
|
The complexity of a project, the technology adopted, and the domain knowledge are some factors that might influence the job description of a full stack engineer. Based on my experience as a full stack engineer recruiter and an analysis of full stack engineer job descriptions on popular platforms like LinkedIn and Indeed, here is a template of a full stack developer job description you can adopt during your hiring process: |
||||||
|
|
||||||
|
**Job title: Full stack engineer.** |
||||||
|
|
||||||
|
**Company**: [Company Name]. |
||||||
|
|
||||||
|
**Location**: [Supported location, region, hybrid, or remote]. |
||||||
|
|
||||||
|
**Job Type**: [Full-time, Part-time, or Contract]. |
||||||
|
|
||||||
|
**About Us**: [Company Name] is [give a brief description of the company’s history and goals]. |
||||||
|
|
||||||
|
**Job Description** |
||||||
|
|
||||||
|
[**Company Name**] is looking for an experienced full stack engineer. As a full stack engineer, you will develop and manage [**company products and features**] and collaborate closely with [**company teams**]. The ideal candidate will have a solid understanding of frontend and backend technologies. |
||||||
|
|
||||||
|
**Responsibilities** |
||||||
|
|
||||||
|
- Development of new business applications based on detailed specifications. |
||||||
|
- Working with project stakeholders to shape project scope, approach, and structure. |
||||||
|
- Identify and fix bugs on both frontend and backend codebases. |
||||||
|
- Designing project specifications and translating them into implementation details. |
||||||
|
- Write clean, maintainable, and reusable code based on [best practices](https://roadmap.sh/best-practices/backend-performance). |
||||||
|
- Performing code reviews and mentoring junior frontend, backend, and full stack developers to support the organization's growth. |
||||||
|
|
||||||
|
**Requirements** |
||||||
|
|
||||||
|
- Professional experience in full stack engineering. |
||||||
|
- Built APIs and microservices with Python. |
||||||
|
- Strong proficiency in frontend technologies like HTML, CSS, JavaScript, and modern frameworks like React. |
||||||
|
- Good understanding of databases and data management systems. |
||||||
|
- Basic knowledge of CI/CD pipelines. |
||||||
|
- Experience with debugging and automation tools like Jenkins and Ansible. |
||||||
|
- Bachelor’s degree in computer science, computer engineering, or a related field (or equivalent experience). |
||||||
|
|
||||||
|
**Nice to have** |
||||||
|
|
||||||
|
- Experience with Docker. |
||||||
|
- Familiarity with server-side events and streaming services. |
||||||
|
- Prior experience in a similar role within a distributed team. |
||||||
|
|
||||||
|
**What we offer**: [Company’s offer like workspace setup allowance, training, and other pecks]. |
||||||
|
|
||||||
|
**How to apply**: [Mode of application (email or job portal), resumes, cover letters, and any other required information]. |
||||||
|
|
||||||
|
|
||||||
|
## What skills should I look for in a full stack engineer? |
||||||
|
|
||||||
|
A full stack engineer requires a diverse set of skills spanning across technical knowledge and other complementary skills. These are some required skills I look out for when hiring: |
||||||
|
|
||||||
|
- Frontend development skills. |
||||||
|
- Backend development skills. |
||||||
|
- Basic DevOps skills. |
||||||
|
- Testing and caching skills. |
||||||
|
- Soft skills. |
||||||
|
|
||||||
|
### Frontend development skills |
||||||
|
|
||||||
|
Full stack engineers must have a good understanding of [frontend development skills](https://roadmap.sh/frontend/developer-skills). These include proficiency in languages like HTML, CSS, and [JavaScript](https://roadmap.sh/javascript), which are essential for creating structure, responsive design, and implementing interactive web functionalities. Additionally, they should be skilled in leading JavaScript libraries and frameworks like [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), and [Angular](https://roadmap.sh/angular), which can be used to develop medium to large applications. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Backend development skills |
||||||
|
|
||||||
|
A full stack engineer must possess strong [backend developer skills](https://roadmap.sh/backend/developer-skills). These include a deep understanding of [API design and development](https://roadmap.sh/api-design), database management, and [security best practices](https://roadmap.sh/best-practices/api-security). Additionally, proficiency in server-side programming languages such as [JavaScript](https://roadmap.sh/javascript), [Java](https://roadmap.sh/java), [Python](https://roadmap.sh/python), C#, [Go](https://roadmap.sh/golang), and [Rust](https://roadmap.sh/rust) is important. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### DevOps skills |
||||||
|
|
||||||
|
In full stack development, [**DevOps skills**] are highly valuable. A basic understanding of how to package software using Docker or Kubernetes, deploy and automate software delivery, and familiarity with cloud providers such as [AWS](https://roadmap.sh/aws), Google Cloud Platform, and Azure will come in handy. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Testing and performance improvement skills |
||||||
|
|
||||||
|
In full stack development, proficiency in automated testing and debugging is essential for identifying and resolving bugs in both frontend and backend code. Moreover, a strong grasp of caching techniques and technologies such as Redis can significantly enhance application performance and improve the overall user experience. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
### Soft skills |
||||||
|
|
||||||
|
While technical skills are essential, full stack engineers must also possess a strong soft skill set. Full stack developers must have good communication skills (written and spoken), organization skills, and the ability to collaborate effectively with other team members to ensure the project's success. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Additional skills to consider when hiring full stack engineers |
||||||
|
|
||||||
|
As a hiring manager in the current job market, you will get to review multiple CVs and profiles when hiring a full stack engineer. It is important to identify additional skills to help narrow the search and pick the right candidate for the role. Below are some additional skills to look for: |
||||||
|
|
||||||
|
- Problem-solving |
||||||
|
- Stakeholder communication |
||||||
|
- Adaptability |
||||||
|
- Project management |
||||||
|
- Community and networking |
||||||
|
|
||||||
|
### Problem-solving |
||||||
|
|
||||||
|
A full stack engineer should be able to tackle complex problems spanning both the client and server sides of applications. They must demonstrate a solid problem-solving mindset and creative solutions through projects, open-source contributions, and other endeavors. |
||||||
|
|
||||||
|
### Stakeholder communication |
||||||
|
|
||||||
|
Beyond collaborating with other teams to ensure a smooth software development process, it is even more important for full stack engineer to articulate technical concepts to non-technical stakeholders, as the success or failure of the project depends on them. |
||||||
|
|
||||||
|
### Adaptability |
||||||
|
|
||||||
|
Frameworks, libraries, design principles, and so on will continue to evolve. Full stack engineer candidates must demonstrate a track record of quickly acquiring new skills and technologies. |
||||||
|
|
||||||
|
### Project management skills |
||||||
|
|
||||||
|
Working on multiple projects simultaneously is inevitable. Full stack engineer candidates should have a basic understanding of project management principles and methodologies like Agile and Scrum. Additionally, they should be able to manage their time, prioritize tasks, and meet deadlines. |
||||||
|
|
||||||
|
|
||||||
|
## Community and networking |
||||||
|
|
||||||
|
As a hiring manager looking for a full stack developer, you should seek candidates who actively participate in developer communities, attend meetups, contribute to open-source projects, and join hackathons. This shows that they have a growth mindset, can easily unblock themselves by leveraging community engagement, and can increase their skills. |
||||||
|
|
||||||
|
## Common interview questions when hiring for full stack engineer role |
||||||
|
|
||||||
|
While CVs, resumes, and portfolios give you an idea of what a potential candidate is capable of, you still need to conduct interviews to determine if the candidate fits the role. Check out these interview questions that can help you check if they're a good fit: |
||||||
|
|
||||||
|
### What programming languages and frameworks are you most comfortable with? |
||||||
|
|
||||||
|
Look for proficiency in languages and frameworks related to your company’s current tech stack. |
||||||
|
|
||||||
|
### What types of databases have you worked with? |
||||||
|
|
||||||
|
Assess the candidate's understanding of SQL and NoSQL databases, ability to explain pros and cons, and what influences their decision to use a particular database. |
||||||
|
|
||||||
|
### What's your approach to ensuring responsive design across different devices? |
||||||
|
|
||||||
|
Look for knowledge of design principles, mobile-first approach, and familiarity with CSS frameworks. |
||||||
|
|
||||||
|
### How do you handle API security and authentication in your projects? |
||||||
|
|
||||||
|
Look for proficiency in authentication methods (like JWT and OAuth) and security best practices. |
||||||
|
|
||||||
|
### How do you collaborate with non-technical team members? |
||||||
|
|
||||||
|
Look for strong communication skills, ability to explain technical concepts in simple terms, and empathy. |
||||||
|
|
||||||
|
### Ask scenario-based questions like “If our main application went down, what steps would you take to diagnose and resolve the issue?” |
||||||
|
|
||||||
|
Look for their approach to troubleshooting, ability to remain calm under pressure, and knowledge of debugging. |
||||||
|
|
||||||
|
## Wrapping up |
||||||
|
|
||||||
|
The possibilities offered by the web will continue to evolve, and the role of software engineers building for it will also change. While the internet is filled with resources such as courses, articles, and blogs on front-end, back-end, and full stack engineering skills and job descriptions, these often become outdated quickly. Therefore, a reliable source of truth is needed. [The full stack developer roadmap](https://roadmap.sh/full-stack) is a source of truth for hiring managers looking for full stack engineers. |
||||||
|
|
||||||
|
Additionally, roadmap.sh has a [supportive community](https://roadmap.sh/discord), a goldmine for connecting with full stack engineers and spotting potential employees. |
||||||
@ -0,0 +1,183 @@ |
|||||||
|
--- |
||||||
|
title: 'Full stack vs Back end: What are the differences?' |
||||||
|
description: 'Full-stack vs Back-end: Learn the key differences in skills, roles, and technologies and find the right development path for you.' |
||||||
|
authorId: william |
||||||
|
excludedBySlug: '/full-stack/vs-backend' |
||||||
|
seo: |
||||||
|
title: 'Full stack vs Back end: What are the differences?' |
||||||
|
description: 'Full-stack vs Back-end: Learn the key differences in skills, roles, and technologies and find the right development path for you.' |
||||||
|
ogImageUrl: 'https://assets.roadmap.sh/guest/full-stack-vs-backend-y0i1g.jpg' |
||||||
|
isNew: false |
||||||
|
type: 'textual' |
||||||
|
date: 2024-10-17 |
||||||
|
sitemap: |
||||||
|
priority: 0.7 |
||||||
|
changefreq: 'weekly' |
||||||
|
tags: |
||||||
|
- 'guide' |
||||||
|
- 'textual-guide' |
||||||
|
- 'guide-sitemap' |
||||||
|
--- |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
Thinking about getting into web development? You've probably heard job titles like full stack developer, backend developer, frontend developer, design engineer, and many more. |
||||||
|
|
||||||
|
Let's focus on two great options: **full stack** and **backend development**. Both are rewarding paths if you want to build websites and apps. These roles work together to create the websites and apps you use every day on the internet. |
||||||
|
|
||||||
|
While each role works towards the common goal of creating an application that users can access from anywhere via the Internet, they differ in their responsibilities. Understanding these differences is important, whether your goal is to pick up a new skill, change career path, or secure a job. |
||||||
|
|
||||||
|
This guide provides an in-depth discussion of the key differences between [full stack](https://roadmap.sh/full-stack) and [backend](https://roadmap.sh/backend) development, what they entail, their similarities, and the web ecosystem changes. Finally, it offers roadmaps for your full stack or backend journey. |
||||||
|
|
||||||
|
The table below summarizes the major differences: |
||||||
|
|
||||||
|
| Full stack Development | Back end Development | |
||||||
|
|------------------------|----------------------| |
||||||
|
| Build both the client-side (frontend) and server-side (backend) of the application. | Specializes only on the server-side of the application. | |
||||||
|
| Uses frontend and backend languages such as HTML, CSS, JavaScript, Java, PHP, etc. | Proficient only in backend programming languages like Python, C++, Java, etc. | |
||||||
|
| Responsible for frontend web development tasks such as crafting responsive web design, enhancing user experience, and ensuring accessibility, as well as backend development tasks like managing databases, implementing security measures, caching, and writing APIs. | Responsible for only the server-side logic like managing database, security, caching, and writing APIs. | |
||||||
|
| Have the highest earning potential. | Lower earning potential as compared to full stack development. | |
||||||
|
| Uses libraries and frameworks that work on the client or server, or both. | Uses libraries and frameworks that work only on the server. | |
||||||
|
| Most challenging to learn as it involves combining frontend and backend development | Relatively easier to learn as compared to Full stack as it focuses only on the backend development | |
||||||
|
| Highest number of jobs available | Lower number of jobs as compared to full stack development | |
||||||
|
|
||||||
|
Let's look at the differences in detail. |
||||||
|
|
||||||
|
## Differences between Full stack and Backend development |
||||||
|
|
||||||
|
These are the key differences between full stack and backend discussed under the following criteria: |
||||||
|
|
||||||
|
- Focus |
||||||
|
- Roles and ownership |
||||||
|
- Technologies |
||||||
|
- Skill sets |
||||||
|
- Salary and job opening |
||||||
|
- Learning curve |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Focus |
||||||
|
|
||||||
|
The primary focus of a full stack developer is to develop both the client-side and the server side of a web application, while backend development focuses solely on the server side. |
||||||
|
|
||||||
|
## Roles and ownership |
||||||
|
|
||||||
|
Full stack development entails broader ownership and responsibility, covering both frontend and backend technological aspects of the application. In contrast, backend development's ownership and responsibilities are confined to the server side. |
||||||
|
|
||||||
|
## Technologies |
||||||
|
|
||||||
|
A Full stack web developer has a broader skill set covering both frontend and backend technologies. This includes markup languages like HTML and CSS, and scripting languages such as JavaScript, Python, and Java, and frameworks like React, Vue, Django, [Spring Boot](https://roadmap.sh/spring-boot), and Laravel. |
||||||
|
|
||||||
|
Similarly, backend development utilizes server-side programming languages like Python, Ruby, Java, JavaScript (Node.js), and Go, along with frameworks such as Django, Ruby on Rails, Express.js, and Gin-gonic. |
||||||
|
|
||||||
|
## Skill sets |
||||||
|
|
||||||
|
A full stack developer has a wide range of skills that encompass both frontend and backend principles. They can work on user interface design, human-computer interaction, and client-side security, caching, queues, and system design. While full stack developers can touch all elements of an application, backend developers typically have deeper expertise in backend principles due to their focused specialization. |
||||||
|
|
||||||
|
## Salary and job opening |
||||||
|
|
||||||
|
Based on reviews of popular job posting platforms like LinkedIn, Indeed, and Glassdoor, Full stack developers have more job openings and higher average salaries as compared to backend developers. |
||||||
|
|
||||||
|
## Learning curve |
||||||
|
|
||||||
|
Backend development is relatively easier to learn because its core focus is on backend languages, libraries, frameworks, and other server-side development. In contrast, full stack development combines both frontend and backend development, making it more challenging to learn. |
||||||
|
|
||||||
|
While the points above cover the fundamental differences between full stack and backend development, it's worth noting that their roles and responsibilities can also vary depending on factors such as the organization, industry, and project scope. |
||||||
|
|
||||||
|
Understanding each role and its responsibility is important. Let's look at those next. |
||||||
|
|
||||||
|
## What is Full stack development? |
||||||
|
|
||||||
|
The term "Full stack" refers to a developer who knows both the frontend and the backend of a web application. Full stack developers are versatile enough to handle all aspects of a web project, from constructing dynamic user interfaces that users can see and interact with to managing the server-side logic, database, and server management. |
||||||
|
|
||||||
|
The following are some of the key aspects of full stack development: |
||||||
|
|
||||||
|
- Frontend technologies |
||||||
|
- Backend technologies |
||||||
|
- Application Programming Interfaces (API) design |
||||||
|
- Database |
||||||
|
- Deployment |
||||||
|
- Security |
||||||
|
- Adaptability |
||||||
|
|
||||||
|
## Frontend technologies |
||||||
|
|
||||||
|
A deep understanding of frontend popular languages like HTML, CSS, and [JavaScript](https://roadmap.sh/javascript) is fundamental for building robust and scalable applications. Additionally, as a frontend developer, expertise in determining when and how to utilize frontend development frameworks and libraries like [React](https://roadmap.sh/react), [Vue](https://roadmap.sh/vue), [Angular](https://roadmap.sh/angular), and others is crucial for crafting dynamic applications that are responsive, accessible, and compatible across various browsers. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Backend technologies |
||||||
|
|
||||||
|
Proficiency in server-side languages such as [Java](https://roadmap.sh/java), [JavaScript (Node.js)](https://roadmap.sh/nodejs), [Python](https://roadmap.sh/python), C#, [Go](https://roadmap.sh/golang), [Rust](https://roadmap.sh/rust), and their respective frameworks and libraries is essential for constructing scalable and robust services. Backend developers work behind the scenes, building the software required for the website and application user interface to be fully functional. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Application Programming Interfaces (API) design |
||||||
|
|
||||||
|
A [solid understanding](https://roadmap.sh/api-design) of designing, building, and implementing APIs is essential in full stack development. Additionally, knowing when to adopt different API protocols like REST, [GraphQL](https://roadmap.sh/graphql), WebSocket, and gRPC ([Google Remote Procedure Call](https://grpc.io/)) is also important. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Database |
||||||
|
|
||||||
|
Determining whether to utilize a relational database management system like [PostgreSQL](https://roadmap.sh/postgresql-dba) or a non-relational database like [MongoDB](https://roadmap.sh/mongodb), opt for stored procedures, or an object-relational mapping (ORM) for data management are important decisions a full stack developer must address. Additionally, a good understanding of designing schemas and optimizing queries is also important. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Deployment |
||||||
|
|
||||||
|
The essence of building an application is to ensure that the target users can access it without restrictions and utilize it as intended. Full stack developers should understand deployment strategies and cloud platforms like [AWS](https://roadmap.sh/aws), Azure, and Google Cloud. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Security |
||||||
|
|
||||||
|
Exposing the application to the internet makes it susceptible to attacks. Therefore, familiarity with [security best practices](https://roadmap.sh/best-practices/api-security) and vulnerabilities is crucial to ensuring the integrity and safety of these applications. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Adaptability |
||||||
|
|
||||||
|
Open-source and research activities have constantly changed the web development ecosystem. Full stack developers must be willing to learn new technologies, know when to build from scratch or use third-party solutions, and adapt to changing project requirements. |
||||||
|
|
||||||
|
## What is Backend development? |
||||||
|
|
||||||
|
Unlike full stack development, which combines the roles of frontend developers and backend developers to build applications, backend web development focuses solely on the server side. Backend developers handle tasks that occur behind the scenes and are not directly visible to users, including managing data, executing complex logic, and managing databases. |
||||||
|
|
||||||
|
Backend development is divided into the presentation layer(which handles requests and responses), the business layer(which handles logic like calculation and data processing), and the data access layer (which handles database interactions). It uses server-side technologies similar to a full stack developer. |
||||||
|
|
||||||
|
## Similarities between Full stack and Backend development |
||||||
|
|
||||||
|
Full stack and backend development share several similarities as they both work on the server side of the application. Below are some key similarities in the web development process between full stack and backend: |
||||||
|
|
||||||
|
- Both work on server-side functionality, such as business logic, database interaction, and data processing. |
||||||
|
- Design and implement APIs to facilitate communication between software components. |
||||||
|
- Both ensure the security and integrity of user data. |
||||||
|
- Collaborate with other team members and business stakeholders to ensure project success. |
||||||
|
- Both handle errors, edge cases, and other difficult technical aspects of the application. |
||||||
|
- Both are involved in designing and architecting scalable systems. |
||||||
|
## Web development in the modern era: Full stack vs Backend |
||||||
|
|
||||||
|
While the web's possibilities are exciting and fascinating, they have also changed the roles and responsibilities of developers building applications for it. Let's consider the points below as a case study of how these changes might affect full stack and backend development: |
||||||
|
|
||||||
|
## Collaboration |
||||||
|
|
||||||
|
While full stack development's role and responsibilities are collaborative in nature compared to the specialized focus of backend development, the current innovative trend will further heighten the demand for collaboration. Full stack developers will increasingly collaborate with various stakeholders to build performant and dynamic applications. This may also require backend developers to expand their role beyond their traditional domain. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Versatility |
||||||
|
|
||||||
|
As the web offers more opportunities, organizations will migrate their core applications from native platforms to web-based solutions, necessitating developers to embrace versatility and acquire new skills. |
||||||
|
|
||||||
|
For full stack web developers who already navigate both frontend and backend development fields, they are well-positioned to adapt to changing demands by acquiring additional skills to meet business needs and project requirements. Similarly, backend developers may need to adjust their roles and embrace expanded responsibilities that extend beyond their domain-specific tasks to leverage the possibilities presented by this transition fully. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Job role |
||||||
|
|
||||||
|
The new possibilities offered by the web will undoubtedly reshape job descriptions and shift the required skills of developers building for the web. Full stack and backend developer in the tech industry may need to evaluate their career goals, upskill, and embrace these changes to remain competitive and build dynamic solutions. |
||||||
|
|
||||||
|
The possibilities offered by the web, coupled with evolving business requirements, require developers to upskill and stay updated continuously with the latest changes. A reliable source of truth is important for this journey. The [full](https://roadmap.sh/full-stack) [](https://roadmap.sh/full-stack)[stack development](https://roadmap.sh/full-stack) and [backend development](https://roadmap.sh/backend) roadmap are valuable resources for experienced and beginner developers looking to explore a career in web development. |
||||||
|
|
||||||
|
Additionally, these roadmaps allow you to track your progress, showcase your skills to potential employers, and become [part of a supportive communit](https://discord.com/invite/cJpEt5Qbwa)[y](https://discord.com/invite/cJpEt5Qbwa). |
||||||
@ -0,0 +1,42 @@ |
|||||||
|
--- |
||||||
|
title: Age Calculator |
||||||
|
description: Create an age calculator using HTML, CSS, and JavaScript. |
||||||
|
isNew: true |
||||||
|
sort: 19 |
||||||
|
difficulty: 'beginner' |
||||||
|
nature: 'Frontend' |
||||||
|
skills: |
||||||
|
- 'HTML' |
||||||
|
- 'CSS' |
||||||
|
- 'JavaScript' |
||||||
|
- 'DOM Manipulation' |
||||||
|
- 'Package Management' |
||||||
|
seo: |
||||||
|
title: Build an Age Calculator App with JavaScript |
||||||
|
description: Create an age calculator using HTML, CSS, and JavaScript. |
||||||
|
keywords: |
||||||
|
- 'age calculator' |
||||||
|
- 'frontend project idea' |
||||||
|
- 'luxon date manipulation' |
||||||
|
- 'javascript datepicker' |
||||||
|
roadmapIds: |
||||||
|
- 'frontend' |
||||||
|
--- |
||||||
|
|
||||||
|
The goal of this project is to help you learn about how to use external packages using [npm](https://www.npmjs.com/). The user inputs their birthdate via a [JavaScript Datepicker](https://www.npmjs.com/package/js-datepicker), and the app calculates and displays their exact age, including years, and months using [Luxon](https://www.npmjs.com/package/luxon). |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Requirements |
||||||
|
|
||||||
|
You are required to develop an age calculator with the following features: |
||||||
|
|
||||||
|
- A form that allows users to input their birthdate using a JavaScript datepicker (avoid the default HTML date picker) |
||||||
|
- Use the [Luxon](https://www.npmjs.com/package/luxon) library to calculate the exact age in years, months, and days |
||||||
|
- Display the result on the same page after the user submits the form |
||||||
|
- Implement basic validation to ensure the birthdate is valid |
||||||
|
- Use simple styling to make the calculator visually appealing and responsive |
||||||
|
|
||||||
|
<hr /> |
||||||
|
|
||||||
|
This project will help you understand how to manipulate dates and times in JavaScript using [Luxon](https://www.npmjs.com/package/luxon). You'll gain experience handling user input via a datepicker, performing date calculations, and designing a simple user interface. |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
--- |
||||||
|
title: Flash Cards |
||||||
|
description: Create a flash card app using JavaScript frameworks. |
||||||
|
isNew: true |
||||||
|
sort: 20 |
||||||
|
difficulty: 'beginner' |
||||||
|
nature: 'Frontend' |
||||||
|
skills: |
||||||
|
- 'HTML' |
||||||
|
- 'CSS' |
||||||
|
- 'JavaScript' |
||||||
|
- 'JavaScript Frameworks' |
||||||
|
seo: |
||||||
|
title: Build a Flash Cards App |
||||||
|
description: Create a flash card app using JavaScript frameworks |
||||||
|
keywords: |
||||||
|
- 'flash cards' |
||||||
|
- 'frontend project idea' |
||||||
|
- 'javascript frameworks' |
||||||
|
roadmapIds: |
||||||
|
- 'frontend' |
||||||
|
--- |
||||||
|
|
||||||
|
The goal of this project is to help you learn about how to use state management and component-based architecture using JavaScript frameworks. You will build a flash card app with pre-defined JavaScript questions and answers that users can flip through to test their knowledge. |
||||||
|
|
||||||
|
 |
||||||
|
|
||||||
|
## Requirements |
||||||
|
|
||||||
|
You are required to develop a flash cards app with the following features: |
||||||
|
|
||||||
|
- Pre-defined flashcards with questions and answers |
||||||
|
- Progress bar to show the user's progress |
||||||
|
- Ability to view flashcards one at a time and flip to reveal the answer |
||||||
|
- Simple navigation to cycle through the flashcards |
||||||
|
|
||||||
|
<hr /> |
||||||
|
|
||||||
|
This project will help you understand how to manage state and create reusable components. You can use any framework of your choice, such as React, Angular, or Vue.js, to build this project. |
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue