diff --git a/files/en-us/learn_web_development/extensions/testing/testing_strategies/index.md b/files/en-us/learn_web_development/extensions/testing/testing_strategies/index.md
index fb143a3b2d9c307..9f15a0d49d96913 100644
--- a/files/en-us/learn_web_development/extensions/testing/testing_strategies/index.md
+++ b/files/en-us/learn_web_development/extensions/testing/testing_strategies/index.md
@@ -192,7 +192,7 @@ An emulator might be as simple as testing a device condition. For example, if yo
More often than not though, you'll have to install some kind of emulator. The most common devices/browsers you'll want to test are as follows:
- The official [Android Studio IDE](https://developer.android.com/studio/) for developing Android apps is a bit heavy weight for just testing websites on Google Chrome or the old Stock Android browser, but it does come with a Robust [emulator](https://developer.android.com/studio/run/emulator.html). If you want something a bit more lightweight, [Andy](https://www.andyroid.net/) is a reasonable option that runs on both Windows and Mac.
-- Apple provides an app called [Simulator](https://help.apple.com/simulator/mac/current/) that runs on top of the [XCode](https://developer.apple.com/xcode/) development environment, and emulates iPad/iPhone/Apple Watch/Apple TV. This includes the native iOS Safari browser. This unfortunately only runs on a Mac.
+- Apple provides an app called [Simulator](https://help.apple.com/simulator/mac/current/) that runs on top of the [Xcode](https://developer.apple.com/xcode/) development environment, and emulates iPad/iPhone/Apple Watch/Apple TV. This includes the native iOS Safari browser. This unfortunately only runs on a Mac.
You can often find simulators for other mobile device environments too, for example:
diff --git a/files/en-us/learn_web_development/getting_started/soft_skills/finding_a_job/index.md b/files/en-us/learn_web_development/getting_started/soft_skills/finding_a_job/index.md
index d30eb3ac25633d9..96ca4d5b2493a11 100644
--- a/files/en-us/learn_web_development/getting_started/soft_skills/finding_a_job/index.md
+++ b/files/en-us/learn_web_development/getting_started/soft_skills/finding_a_job/index.md
@@ -25,7 +25,7 @@ Technical job interviews can be very demanding, and some have quite specific req
Deciding what kind of job you want.
- Searching for jobs
+ Searching for jobs.
Developing qualities for that employers look for.
Selling yourself to would-be employers.
Applying for jobs.
@@ -46,7 +46,7 @@ If you are reading this site, you are probably interested in some kind of web de
- Web designer: Use HTML, CSS, and graphics packages to design user interfaces.
- JS developer: Implement functionality using JavaScript and frameworks.
- Developer relations or sales engineer: Talk to customers, get them excited about technology, help them solve problems and develop solutions.
- - Technical writer: Write documentation to explain how technology works and how to use it.
+ - Technical writer: Write documentation to explain how the technology works and how to use it.
- More of an all-round developer.
- Something else?
- Kind of employer: Do you want to work for:
@@ -62,12 +62,12 @@ If you are reading this site, you are probably interested in some kind of web de
- Music industry.
- etc.
- Work location: Do you want to work
- - From home full time.
+ - From home full-time.
- In an office.
- In some kind of hybrid setup.
- In the same location all the time, or move around between different areas or countries?
-If you are not sure of the answers to these questions, that's OK. Ask your peers, friends, teachers, or mentor what they are interested in, to get some inspiration, and look around the industry to see what's available. Realistically, many of you will probably start by seeing an interesting job ad or company, then working out how it fits in to the above categories and how to "sell yourself" to that company.
+If you are not sure of the answers to these questions, that's okay. Ask your peers, friends, teachers, or mentor what they are interested in, to get some inspiration, and look around the industry to see what's available. Realistically, many of you will probably start by seeing an interesting job ad or company, then working out how it fits in to the above categories and how to "sell yourself" to that company.
## Sell yourself
@@ -75,7 +75,7 @@ To get a job, you have to learn how to **sell yourself**, which means making you
### Develop qualities for that employers look for
-As a general point, you should be aware of the attributes that hiring managers look for in a candidate and prepare accordingly. Obviously, you'll need technical skills and other abilities that help you to directly do the task at hand. However, companies also look for "soft skills" that indirectly help you do the job, and also make their employees lives easier and happier while they are at work. We already touched on some of these in our [Collaboration and teamwork](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) article.
+As a general point, you should be aware of the attributes that hiring managers look for in a candidate and prepare accordingly. Obviously, you'll need technical skills and other abilities that help you to directly do the task at hand. However, companies also look for "soft skills" that indirectly help you do the job; they also make their employees' lives easier and happier while they are at work. We already touched on some of these in our [Collaboration and teamwork](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork) article.
To summarize, hiring managers will look for:
@@ -86,11 +86,11 @@ To summarize, hiring managers will look for:
- A good communicator and relationship builder.
- A tenacious, focused individual with good problem solving skills.
-Think about whether these statements describe you, or not. This could be a useful way to identify some of your weaknesses, meaning that you can take steps to improve them. For example, if you are not good at communication or problem solving, look up some guides or classes to help you improve those skills. Even something informal such as talking to your friends about your work and describing your projects will help you become better at communicating.
+Think about whether these statements describe you or not. This could be a useful way to identify some of your weaknesses, meaning that you can take steps to improve them. For example, if you are not good at communication or problem solving, look up some guides or classes to help you improve those skills. Even something informal such as talking to your friends about your work and describing your projects will help you become better at communicating.
### Create a CV/résumé
-You should create a CV/résumé, which communicates your worth to an employer. There are lots of guides on how to write one on the web, but in brief, they should generally contain the following:
+You should create a CV/résumé, which communicates your worth to an employer. There are lots of guides on the web that will teach you how to write one, but in brief, they should generally contain the following:
- Your contact details: Include your name, postal address, phone number, email, and any maybe one more contact method that is important to you and suitable for professional communication. A [LinkedIn profile](#create_a_linkedin_profile) is recommended.
- A summary/personal statement, which describes you in a single sentence. This can be really hard to write — it needs to sound confident but not arrogant, positive but realistic. A good strategy here is to keep it really short and focus on some facts, what you believe in, and what kind of level you are at. For example, a good personal statement for a junior web developer might read some something like this: "Bob Smith is a web developer with 2 years' experience and a great passion for semantics, accessibility, and inclusive design".
@@ -98,7 +98,7 @@ You should create a CV/résumé, which communicates your worth to an employer. T
- A date range specifying when you worked there — for example 06/2023–10/2024, or 06/2023–present if you still work there.
- Company and job title.
- A short paragraph or bulleted list describing what you did in that job/internship/etc. Don't describe _everything_, just what you think are useful experiences for selling yourself.
-- An education summary, which lists the different qualifications you have, the school you did them at, and the grade you achieved. Include degrees and other higher education, certificates and achievements that are directly relevant to your field (for example, a web development certification or summer school), and perhaps also regular school qualifications that employers often look for (such as English, other languages, and Math).
+- An education summary, which lists the different qualifications you have, the school you attained them at, and the grade you achieved. Include degrees and other higher education, certificates and achievements that are directly relevant to your field (for example, a web development certification or summer school), and perhaps also regular school qualifications that employers often look for (such as English, other languages, and Math).
- A section containing supporting information, such as:
- Links to your [portfolio](#create_a_portfolio).
- Descriptions of any other relevant experience that doesn't fit into the above sections.
@@ -119,10 +119,10 @@ Here are some general tips for CV/résumé writing:
### Get some experience
-When you start searching for jobs, you will find yourself in a vicious circle — _you need experience to get a job, but you also need to get a job to get experience._ Don't despair — there are other ways to get experience. Here are some ideas:
+When you start searching for jobs, you will find yourself in a vicious circle — _you need experience to get a job, but you also need to get a job to get experience._ Don't despair, though — there are other ways to get experience. Here are some ideas:
-- Contact local business, charities, churches, schools, etc., to see if they want a website, or help updating their existing website. If you are just starting out, you could offer to do it for free, just to get the experience.
-- Following on from the previous item, move on to doing some small bits of freelance work, once you feel that you are experienced enough to start charging for your work. You could ask around at local businesses, or find work through dedicated services such as [UpWork](https://www.upwork.com/).
+- Contact local business, charities, churches, schools, etc., to see if they want a website or help updating their existing website. If you are just starting out, you could offer to do it for free, just to get the experience.
+- Following on from the previous item, move on to doing some small bits of freelance work once you feel that you are experienced enough to start charging for your work. You could ask around at local businesses or find work through dedicated services such as [UpWork](https://www.upwork.com/).
- Build your own hobby projects, for example, your own website to showcase your work, some fun demos and games, or a web app related to a company that you want to work at.
- You could even identify an existing issue on a company's website, fix it, and send them a link to a deployed version of the fix.
- Hang around on forums and help others with their coding problems. (See [Help others, ask questions](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork#help_others_ask_questions).)
@@ -130,27 +130,27 @@ When you start searching for jobs, you will find yourself in a vicious circle
### Create a portfolio
-Once you've got some relevant experience worth talking about, the next step is to put together a portfolio that you can include on your CV/résumé, and show to employers. The whole idea here is _don't tell me what you can do — show me what you can do_.
+Once you've got some relevant experience worth talking about, the next step is to put together a portfolio that you can include on your CV/résumé and show to employers. The whole idea here is _don't tell me what you can do — show me what you can do_.
This should include:
-- A nicely-presented landing page to summarize everything.
+- A nicely presented landing page to summarize everything.
- A list of websites, apps, and other relevant products that you've worked on. For each one, include a title, thumbnail image, and a description of the project and what you did on it. If you want to say quite a lot about the projects, create a separate page about each one! Include a list of the technologies used to build the project and a link to the source code if you are able to (not all source is open).
- Links to the source code and live demos of your own personal projects and experiments. Each project should include a description of what it does and the technologies used to build it.
- Links to blog posts, writing samples, conference talks, and any other assets you think might help show off your skills.
-- A list of contributions you've made to open source projects, stating what the contribution was, how it improved the project, and what technologies were involved. You should include links to the actual changes you made (source code, published documentation, etc.), and a link to the changelog (for example, the GitHub pull request) that proves you did the work.
+- A list of contributions you've made to open source projects, stating what the contribution was, how it improved the project, and what technologies were involved. You should include links to the actual changes you made (e.g., source code, published documentation), and a link to the changelog (for example, the GitHub pull request) that proves you did the work.
-Keep your portfolio as highlights of your best work. You want it to be easy to access and look through. Include a few significant items in each section, rather than hundreds of items, otherwise the hiring manager will get bored and move on. A nice clean design will help with the experience, but a complex design might reduce legibility.
+Your portfolio should contain highlights of your best work. You want it to be easy to access and look through. Include only a few significant items in each section; otherwise, the hiring manager will get bored and move on. A nice, clean design will help with the experience, whereas a complex design might reduce legibility.
In terms of how to actually publish your portfolio:
-- You should [publish your work](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork#publish_your_work) in publicly-viewable places, such as a GitHub organization for source code, and a blogging platform such as medium (or your own website) for blog posts.
-- For source code that is demos or snippets rather than full websites, publish live versions of the code, so that people can easily check out the live result. See [Publishing your website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) for tips on how to do this.
-- In terms of the actual portfolio landing page, you could create a GitHub repo and provide your list of links in a `README.md` file, but this doesn't look particularly great. Much better would be to create a dedicated website to contain your portfolio, with a dedicated [domain name](/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name). If you are not great at design work, ask a colleague or friend for some help, perhaps in exchange for doing some coding work for them.
+- You should [publish your work](/en-US/docs/Learn_web_development/Getting_started/Soft_skills/Collaboration_and_teamwork#publish_your_work) in publicly viewable places, such as a GitHub organization for source code, and a blogging platform such as [Medium](https://medium.com/) (or your own website) for blog posts.
+- For source code that consists of just demos or snippets (rather than full websites, for example), publish live versions of the code, so that people can easily check out the live result. See [Publishing your website](/en-US/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website) for tips on how to do this.
+- In terms of the actual portfolio landing page, you could create a GitHub repo and provide your list of links in a `README.md` file. But this doesn't look particularly great. It would be much better to create a dedicated website to contain your portfolio, with a dedicated [domain name](/en-US/docs/Learn_web_development/Howto/Web_mechanics/What_is_a_domain_name). If you are not great at design work, ask a colleague or friend for some help, perhaps in exchange for doing some coding work for them.
### Create a LinkedIn profile
-[LinkedIn](https://www.linkedin.com/) is one of the most popular sites in the world for people to find jobs, and for employers to find employees. It is a great place to host an online account of your work experience and skills, which is similar to your CV/résumé, but also different.
+[LinkedIn](https://www.linkedin.com/) is one of the most popular sites in the world for people to find jobs and for employers to find employees. It is a great place to host an online account of your work experience and skills; it's similar to your CV/résumé.
LinkedIn has many useful advantages that allow your profile to work well alongside your CV/résumé. You can:
@@ -183,27 +183,27 @@ The ["Decide what kind of job you want" criteria](#decide_what_kind_of_job_you_w
Before you start applying for a job, there are some useful steps you can take to prepare:
-- Check the job description to make sure it is suitable for you to apply for. For example, you don't want to waste your time applying for a job that specifies working from an office in California full-time if you live in the UK and don't want to relocate. And you won't have the experience to do a senior web developer job if you have only been learning JavaScript for 3 months.
+- Check the job description to make sure it is suitable for you to apply for. For example, you don't want to waste your time applying for a job that entails working from an office in California full-time if you live in the UK and don't want to relocate. And you won't have the experience to do a senior web developer job if you have only been learning JavaScript for 3 months.
> [!NOTE]
> If you are not sure if you should apply for a job, or want to know if that company has any more suitable jobs available, find the recruiter's contact details and ask them. They may be a useful contact in the future, if not now.
-- Try to find some contacts that already work at the company, for example in your community network, or on LinkedIn, and start a conversation with them. Ask them what it is like working for the company, if there is anything specific you need to do the job, and if they have any other jobs coming up in the near future that might be more suitable. Avoid contacting too many people that work at the same company, but instead choose one or two people you think are the closest to the role you're applying for.
-- Do some other research on the company — read their websites/blogs, find out about their history and what their goals are. Spend some time using their products and becoming familiar with how they work — for example install their software and use it to build a demo app, or write a website that uses their APIs to do something.
+- Try to find some contacts that already work at the company, for example, in your community network, or on LinkedIn, and start a conversation with them. Ask them what it is like working for the company and if there is anything specific you need to do the job. If you are not suitable for that job, ask if they have any other more suitable jobs coming up in the near future. Avoid contacting too many people who work at the same company, but instead choose one or two people you think are the closest to the role you're applying for.
+- Do some other research on the company — read their websites/blogs, find out about their history and what their goals are. Spend some time using their products and becoming familiar with how they work — for example, install their software and use it to build a demo app, or write a website that uses their APIs to do something.
> [!NOTE]
> For bonus points, try to identify a problem they are currently trying to solve or a bug in their product, and suggest a fix for it along with a demo or code snippets.
-- Customize your CV/résumé to suit this particular job. Look at the job description and make sure to amplify your most relevant skills and work experience, while minimizing or even removing items that don't seem relevant. Also make sure the demos/examples most relevant to this job are highlighted on your portfolio in some way, for example put at the top of the list.
+- Customize your CV/résumé to suit this particular job. Look at the job description and amplify your most relevant skills and work experience, while minimizing or even removing items that seem less relevant. Also, highlight the demos/examples most relevant to this job on your portfolio in some way. You could, for example, put such code at the top of your portfolio.
### Applying for the job
-When you apply for the job, make sure you follow the process exactly as they want you to. Each job advert will have instructions on how to apply. If the job ad was more of a conversation with a network contact, ask them exactly how to apply.
+When you apply for the job, follow the process exactly as instructed. Each job advert will have instructions on how to apply. If the job ad was more of a conversation with a network contact, ask them exactly how to apply.
Above all:
-- Make sure your application is professional and well-written, and doesn't include any typos. If it is poorly-written, you are unlikely to succeed. Check it over using a tool like Grammarly.
-- Don't be late applying — make sure you submit your application by the deadline date!
+- Make sure your application is professional and well-written, and doesn't include any typos. If it is poorly written, you are unlikely to succeed. Check it over using a tool like Grammarly.
+- Don't be late applying — you must submit your application by the deadline date!
Not all job applications require the same things; you'll probably have to:
-- Fill out some details on an online form. Make sure you type out your answers locally (for example, in VSCode) or in an online document (for example, a Google doc) before entering them into the form fields, in case something (for example, a browser crash) causes you to lose your work. This can save hours of frustration, and text is also easier to review and get feedback on if you put it somewhere else first.
+- Fill out some details on an online form. Type out your answers locally (for example, in VSCode) or in an online document (for example, a Google Docs file) before entering them into the form fields, in case something (for example, a browser crash) causes you to lose your work. This can save you hours of frustration; text is also easier to review and get feedback on if you put it somewhere else first.
- Upload your CV/résumé.
- Write and upload a covering letter. There are many guides to writing effective covering letters elsewhere online, but in general, such a letter should provide a description of why you:
- Want to work for the company.
@@ -215,11 +215,11 @@ Not all job applications require the same things; you'll probably have to:
A key point is that your job search should be a constant process where you do a little bit each day, and constantly keep working towards your goal. Don't just fire off a whole load of applications and then sit around waiting for a response.
-You should follow up with any promising leads you meet, for example on community networks or LinkedIn. Also, keep an inventory of the people you meet and the companies you apply to, along with contact details and descriptions of each. Periodically follow up with companies you'd like to work for to see what jobs they have available. If you get rejected for one job, they might have something else more suitable for you, either now or in the future.
+You should follow up with any promising leads you meet, for example, on community networks or LinkedIn. Also, keep an inventory of the people you meet and the companies you apply to, along with contact details and descriptions of each. Periodically follow up with companies you'd like to work for to see what jobs they have available. If you get rejected for one job, they might have something else more suitable for you, either now or in the future.
-If you haven't had a response from a company after applying for one of their jobs, wait a little while and then followup with their recruiter to see if they have any feedback for you, or any other jobs coming up. Even if a company you want to work for doesn't have any suitable full-time jobs advertised at the moment, contact them any way and see if they are looking for someone with your skill set. It might lead to some useful experience, such as a freelance contract.
+If you haven't gotten a response from a company after applying for one of their jobs, wait a little while and then follow-up with their recruiter to see if they have any feedback for you, or if they have any other jobs coming up. Even if a company you want to work for doesn't have any suitable full-time jobs advertised at the moment, contact them anyway and see if they are looking for someone with your skill set. They may give you some useful experience, perhaps in the form of a volunteer position or freelance contract.
-Keep looking for more jobs via your chosen job sites or community networks, and chat to people about what is available. New opportunities will come up all the time.
+Keep looking for more jobs via your chosen job sites or community networks. Chat to people about what is available. New opportunities will come up all the time.
If you are struggling to find anything permanent that you really want, there might be some intermediate steps to take:
@@ -232,38 +232,38 @@ If the recruiter and hiring manager like your application, they will invite you
There are some general things you should do to prepare for _any_ interview:
-- Make sure you have a tidy, quiet place for conducting the interviews in. You want to make sure that you are not distracted by noise and commotion during the interview, and you want to make sure that your surroundings look tidy during the interview. If you are having a video call with the interviewer(s) and your space is a complete mess, it won't give them a good impression.
-- Think about what you are going to wear when you do your interviews. Most developer jobs don't require you to wear a suit (check the job ad to see if it has anything about a dress code), but you should choose something fairly neutral and smart-_ish_. Don't wear a t-shirt with an offensive slogan on it, and don't turn up in your pyjamas.
+- Find a tidy, quiet place to conduct the interview. Make sure that you are not distracted by noise and commotion, and that your surroundings are tidy during the interview. If you are having a video call with the interviewer(s) and your space is a complete mess, it won't give them a good impression.
+- Think about what you are going to wear when you attend your interview. Most developer jobs don't require you to wear a suit (check the job ad to see if it mentions a dress code), but you should choose something fairly neutral and smart-_ish_. Don't wear a T-shirt with an offensive slogan on it, and don't turn up in your pajamas.
- Do some [preparation for coding interviews](#coding_interviews).
- Build a collection of anecdotes to use for [experience-based interview questions](#experience-based_questions).
-- Think about what your strengths and weaknesses are, and be realistic with your answers. You will seem more plausible if you don't present yourself as perfect in every way, and interviewers will commonly ask you about your biggest strength and weakness.
-- Do some research into what the typical salary ranges and other benefits (such as health insurance or bonuses) are for the kind of job you are going for (level, geographical region, etc.) This will be useful when [deciding whether to accept a job offer](#accepting_the_offer).
+- Think about what your strengths and weaknesses are, and be realistic with your answers. You will seem more plausible if you don't present yourself as perfect in every way when interviewers invariably ask you about your biggest strengths and weaknesses.
+- Do some research into what the typical salary ranges and other benefits (such as health insurance or bonuses) are for the kind of job you are going for (e.g., level, geographical region). This will be useful when [deciding whether to accept a job offer](#accepting_the_offer).
-There is also some preparation to do specific to each company you apply to:
+You should also do some preparation specific to each company you apply to:
- As we mentioned earlier, you should do some research into the company's history, goals, and products.
- - Read about the company from a high level, and familiarize yourself with their recent news. One good reason to do this is to see if they have done anything that would raise red flags and make you reconsider working there.
+ - Read about the company from a high level, and familiarize yourself with its recent news. One good reason to do this is to see if they have done anything that would raise red flags and make you reconsider working there.
- Find out about the company's market position and what _their_ strengths and weaknesses are.
- Research who their main competitors are.
- - Become familiar with their products and how they work — for example, install their software and use it to build a demo app, or write a website that uses their APIs to do something. It will impress your interviewers if you can demonstrate some good insights around their situation and how you think it could be improved. Interviewers will often ask some specific questions to test your knowledge of the company and industry it exists in.
-- Related to the above point, think of some questions you would ask the interviewers about the company and their roles. Interviewers always ask if you have any questions for them at the end of the interview, and it reflects well on you and makes you sound thoughtful and inquisitive if you come out with some questions more meaningful than "what did you have for breakfast today?"
-- If you have contacts at the company (from your community networks, etc.), reach out to them and ask about the job. What do they think about it, is there anything specific you should focus on, say, or not say? It might also help, during the interview, to mention that you know "Bob from the e-commerce team" (or whatever).
+ - Become familiar with their products and how they work — for example, install their software and use it to build a demo app, or write a website that uses their APIs to do something. It will impress your interviewers if you can demonstrate some good insights around their situation and how you think it could be improved. Interviewers will often ask some specific questions to test your knowledge of the company and the industry it exists in.
+- Related to the above point, think of some questions you would ask the interviewers about the company and their roles. Interviewers always ask if you have any questions for them at the end of the interview, and it reflects well on you and makes you sound thoughtful and inquisitive if you come out with questions more meaningful than "what did you have for breakfast today?"
+- If you have contacts at the company (e.g., from your community networks), reach out to them and ask about the job. What do they think about it? Is there anything specific you should focus on? Is there anything you should say or not say? It might also help during the interview to mention that you know "Bob from the e-commerce team" (or whatever).
### Initial screening
-Once the company have looked at your application and decided you sound like a "potential", they will probably start off by inviting you to an initial phone interview, just with the recruiter or hiring manager. This is usually a short interview to assess "culture fit" (are you going to get on well with them?), make sure they don't pick up any immediate red flags that suggest you won't be a good employee, and tell you about what to expect from the rest of the interview process.
+Once the company have looked at your application and decided you sound like a "potential", they will probably start off by inviting you to an initial phone interview, just with the recruiter or hiring manager. This is usually a short interview to assess "culture fit" (i.e., if you're going to get on well with them), make sure they don't pick up on any immediate red flags that suggest you won't be a good employee, and tell you about what to expect from the rest of the interview process.
-At this stage, you should be friendly and talkative, but don't talk too much, act naturally, and see where the interviewer steers the conversation. Make sure to let them know what days and times will be suitable for you to attend further interviews. Try to be as flexible as you can, and be prepared to move your schedule around to accommodate them.
+At this stage, you should be friendly and talkative. But don't talk too much; act naturally, and see where the interviewer steers the conversation. Make sure to let them know what days and times will be suitable for you to attend further interviews. Try to be as flexible as you can, and be prepared to move your schedule around to accommodate them.
-Don't be complacent however — you don't know for definite what questions they will throw at you at this early stage, and you should treat it just as seriously as all the other stages.
+Don't be complacent, however — you don't know for definite what questions they will throw at you at this early stage. You should treat the initial screening just as seriously as all the other stages.
### The main interview
-Usually, the bulk of the interview process is one or more main interviews. These can vary greatly between different companies in function and frequency.
+Usually, the bulk of the interview process consists of one or more main interviews. These can vary greatly between different companies in both function and frequency.
- You might have one main interview, but you are more likely to have multiple interviews that test you on different aspects of the job (for example, the actual coding work, teamwork, working processes, documentation/communication, conflict resolution).
-- They may be with a single interviewer, or multiple interviewers asking you questions about different aspects (aka a panel interview).
-- Some interviews may be high level or more exploratory (for example, "describe the process you'd use to deliver x", or "what do you think the main problems are with this solution?") and some may be lower level and more intensive (for example "write a JavaScript program that solves this problem").
+- They may be with a single interviewer or multiple interviewers asking you questions about different aspects (i.e., a panel interview).
+- Some interviews may be high-level or more exploratory (for example, "describe the process you'd use to deliver x", or "what do you think the main problems are with this solution?") and some may be lower level and more intensive (for example, "write a JavaScript program that solves this problem").
#### Experience-based questions
@@ -280,9 +280,9 @@ You should build up a set of anecdotes that you can use when answering such ques
Some interviews will be coding interviews, designed to test your ability at solving coding problems. These might be something like:
- "Write a JavaScript function that takes inputs x and y, and returns z."
-- "A colleague has written the following React component, but it has some bugs. Can you identify what's wrong with it, and rewrite it to fix the problems?"
+- "A colleague has written the following React component, but it has some bugs. Can you identify what's wrong with it and rewrite it to fix the problems?"
- "Look at the following code, and describe to me what it is doing."
-- "Write an algorithm that generates the first n entries in the fibonacci sequence."
+- "Write an algorithm that generates the first `n` entries in the Fibonacci sequence, where `n` is a positive number."
Often employers are looking at how you approach the problem rather than the end result — how you commented your code, how you dealt with error handling, and what you might have done if you'd had more time.
@@ -295,23 +295,23 @@ Some companies will set homework for an interview candidate to do, as an alterna
While this is a reasonable way to test candidates if done right, many people dislike the practice of setting homework questions:
- Sometimes they can feel a little too much like "real work", almost like the employer is asking you to do work for free.
-- They can be poorly scoped, or expect an unreasonable time commitment. A specific scope that time-boxes the project to four hours and will handle follow-up questions in an separate interview is reasonable, but an expectation to spend an entire weekend on a project is not, especially for people who have families and busy lives.
+- They can be poorly scoped or expect an unreasonable time commitment. A specific scope that time-boxes the project to four hours and will handle follow-up questions in an separate interview is reasonable, but an expectation to spend an entire weekend on a project is not, especially for people who have families and busy lives.
- Their effectiveness is often disputed, as they are hard to evaluate conclusively.
-If you are asked to do a homework challenge, make sure the scope and timing of the work are clearly defined, to mitigate the risk of going in the wrong direction and wasting your time.
+If you are asked to do a homework challenge, make sure the scope and timing of the work are clearly defined to mitigate the risk of going in the wrong direction and wasting your time.
### Accepting the offer
-If you make it through the interview process and get offered the job, then well done! It is tempting to immediately accept the offer, but there are a few things to bear in mind before you do:
+If you make it through the interview process and get offered the job, then well done! Though it may be tempting to immediately accept the offer, there are a few things to bear in mind before you do:
- Make sure the salary you are being offered is reasonable compared to the typical market rate for similar jobs. If it is significantly less, you might want to negotiate.
- Check that leaving your current job (or other activity) is compatible with starting the new job. For example, check how much notice your current employer wants you to work, and make sure this works for the new job.
-- You should also let the employer know about preexisting commitments you have outside work, such as a booked vacation. Respectable employers will work around such commitments, and agree a start date that suits you.
+- You should also let the employer know about preexisting commitments you have outside work, such as a booked vacation. Respectable employers will work around such commitments and agree upon a start date that suits you.
- If you need to move house/relocate to take the new job, make sure that you've got everything in place for the move to work out. Starting a new job is stressful enough without the added stress of house moving difficulties.
## Try, try, and try again
-If you have applied for lots of jobs and not gotten anything yet, try not to become disheartened. Keep trying, stay passionate about the web, and keep talking to new people and learning new things.
+If you have applied for lots of jobs and not gotten anything yet, try not to become disheartened. Keep trying, stay passionate about the web, keep talking to new people, and keep learning new things.
If you got to the interview stage but got rejected, ask the recruiter for some feedback on why you weren't chosen, and use it to improve future applications.
diff --git a/files/en-us/mozilla/firefox/releases/18/index.md b/files/en-us/mozilla/firefox/releases/18/index.md
index ba057e208f94621..45f09b667e9ae5e 100644
--- a/files/en-us/mozilla/firefox/releases/18/index.md
+++ b/files/en-us/mozilla/firefox/releases/18/index.md
@@ -27,7 +27,7 @@ Firefox 18 was released on January 8, 2013. This article lists key changes that
- `navigator.mozPay` has been landed. ([Firefox bug 767818](https://bugzil.la/767818))
- `window.devicePixelRatio` has been landed. ([Firefox bug 564815](https://bugzil.la/564815))
-- The macOS X backend for `window.navigator.battery` has been implemented. ([Firefox bug 696045](https://bugzil.la/696045))
+- The OS X backend for `window.navigator.battery` has been implemented. ([Firefox bug 696045](https://bugzil.la/696045))
- `MozBlobBuilder` is removed. Developers need to use {{domxref("Blob")}} constructor for creating a `Blob` object. ([Firefox bug 744907](https://bugzil.la/744907))
- The {{domxref("document.visibilitychange_event", "visibilitychange")}} event and the [Page Visibility API](/en-US/docs/Web/API/Page_Visibility_API) has been unprefixed ([Firefox bug 812086](https://bugzil.la/812086)).
- {{domxref("TextDecoder")}} and {{domxref("TextEncoder")}} have been added. Note that the implementation and spec of these evolved and have been changed in Firefox 19 ([Firefox bug 764234](https://bugzil.la/764234)).
diff --git a/files/en-us/web/api/document/activeelement/index.md b/files/en-us/web/api/document/activeelement/index.md
index 260a79421c02f70..48f3ba942b35056 100644
--- a/files/en-us/web/api/document/activeelement/index.md
+++ b/files/en-us/web/api/document/activeelement/index.md
@@ -10,7 +10,7 @@ browser-compat: api.Document.activeElement
The **`activeElement`** read-only property of the {{domxref("Document")}} interface returns the {{domxref("Element")}} within the DOM that is receiving keyboard events such as {{domxref("Element/keydown_event", "keydown")}} and {{domxref("Element/keyup_event", "keyup")}}. This is usually analogous to the focused element.
-Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on Safari, following the behavior of macOS, elements that aren't text input elements are not focusable by default, unless the "Full Keyboard Access" setting is enabled in System Preferences.
+Which elements are focusable varies depending on the platform and the browser's current configuration. For example, on Safari, following the behavior of macOS, elements that aren't text input elements are not focusable by default, unless the "Full Keyboard Access" setting is enabled in System Settings.
Typically a user can press the Tab key to move the focus around the page among focusable elements, and use keyboard gestures such as Space or Enter to simulate clicks on the focused element.
diff --git a/files/en-us/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md b/files/en-us/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
index 457cd36ac19a86b..aadaada1421bb30 100644
--- a/files/en-us/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
+++ b/files/en-us/web/api/media_source_extensions_api/transcoding_assets_for_mse/index.md
@@ -24,7 +24,7 @@ If you're looking to follow the steps listed here, but don't have any media to e
When working with MSE, the following tools are a must have:
-1. [ffmpeg](https://ffmpeg.org/) — A command-line utility for transcoding your media into the required formats. You can download a version for your system at the [Download FFmpeg page](https://ffmpeg.org/download.html). Extract the executable from the archive file and add it's location to your PATH statement. OSX users can also use [homebrew](https://brew.sh/) to install ffmpeg.
+1. [ffmpeg](https://ffmpeg.org/) — A command-line utility for transcoding your media into the required formats. You can download a version for your system at the [Download FFmpeg page](https://ffmpeg.org/download.html). Extract the executable from the archive file and add it's location to your PATH statement. macOS users can also use [homebrew](https://brew.sh/) to install ffmpeg.
2. [Bento4](https://github.com/axiomatic-systems/Bento4) — A set of command-line utilities for getting asset metadata and creating content for DASH. To install, you'll need to build/compile the application yourself from the provided project files/source files, depending on your OS and preferences. See the [Building instructions](https://github.com/axiomatic-systems/Bento4#building) for more details, or download the [prebuilt file](https://www.bento4.com/downloads/). Put the contents of the `bin` directory in the same place as ffmpeg.
3. python2 — Bento4 uses it.
diff --git a/files/en-us/web/css/@media/prefers-reduced-motion/index.md b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
index 9244784630c4a50..d421fa5e04278eb 100644
--- a/files/en-us/web/css/@media/prefers-reduced-motion/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-motion/index.md
@@ -31,7 +31,7 @@ For Firefox, the `reduce` request is honoured if:
- In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
-- In macOS: System Preferences > Accessibility > Display > Reduce motion.
+- In macOS: System Settings > Accessibility > Display > Reduce motion.
- In iOS: Settings > Accessibility > Motion.
- In Android 9+: Settings > Accessibility > Remove animations.
- In Firefox `about:config`: Add a number preference called `ui.prefersReducedMotion` and set its value to either `0` for full animation or to `1` to indicate a preference for reduced motion. Changes to this preference take effect immediately.
diff --git a/files/en-us/web/css/@media/prefers-reduced-transparency/index.md b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md
index cd7a24d88161c1e..dca1b26e1696766 100644
--- a/files/en-us/web/css/@media/prefers-reduced-transparency/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-transparency/index.md
@@ -25,7 +25,7 @@ Various operating systems provide a preference for reducing transparency, and us
They may also rely on less explicit signals on platforms which don't offer a specific setting.
- In Windows 10/11: Settings > Personalization > Colors > Transparency effects.
-- In macOS: System Preferences > Accessibility > Display > Reduce transparency.
+- In macOS: System Settings > Accessibility > Display > Reduce transparency.
- In iOS: Settings > Accessibility > Display & Text Size > Reduce Transparency.
## Examples
diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md
index 29c1fc451b10a01..a558eb8cb4b9c4b 100644
--- a/files/en-us/web/css/basic-shape/index.md
+++ b/files/en-us/web/css/basic-shape/index.md
@@ -84,7 +84,13 @@ The parameters common across the syntax of some basic shape functions include:
> [!NOTE]
> `` is not supported in {{cssxref("offset-path")}} and using it invalidates the property.
-### Syntax for rectangles by container insets
+### Syntax for rectangles: ``
+
+The `` type, a subset of the `` type, represents the basic-shape functions limited to creating rectangles, including {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("basic-shape/rect","rect()")}}, and {{cssxref("basic-shape/xywh","xywh()")}}.
+
+The [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon), [`path()`](/en-US/docs/Web/CSS/basic-shape/path), and [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) functions can also be used to create rectangles, but are not limited to only four-sided, right-angled shapes.
+
+#### Syntax for rectangles by container insets
The {{cssxref("basic-shape/inset","inset()")}} function creates an inset rectangle, with its size defined by the offset distance of each of the four sides of its container and, optionally, rounded corners.
@@ -96,7 +102,7 @@ When all of the first four arguments are supplied, they represent the top, right
If a pair of insets for a dimension adds up to more than 100% of that dimension, both values are proportionally reduced so their sum equals 100%. For example, the value `inset(90% 10% 60% 10%)` has a top inset of `90%` and a bottom inset of `60%`. These values are reduced proportionally to `inset(60% 10% 40% 10%)`. Shapes such as this, that enclose no area and have no {{cssxref("shape-margin")}}, do not affect wrapping.
-### Syntax for rectangles by distance
+#### Syntax for rectangles by distance
The {{cssxref("basic-shape/rect","rect()")}} function defines a rectangle using the specified distances from the top and left edges of the reference box, with optional rounded corners.
@@ -106,7 +112,7 @@ rect( [ | auto ]{4} [ round <'border-radius'> ]? )
When using the `rect()` function, you do not define the width and height of the rectangle. Instead, you specify four values to create the rectangle, with its dimensions determined by the size of the reference box and the four offset values. Each value can be either a {{cssxref("length")}}, a {{cssxref("percentage")}}, or the keyword `auto`. The `auto` keyword is interpreted as `0%` for the top and left values and as `100%` for the bottom and right values.
-### Syntax for rectangles with dimensions
+#### Syntax for rectangles with dimensions
The {{cssxref("basic-shape/xywh","xywh()")}} function defines a rectangle located at the specified distances from the left (`x`) and top (`y`) edges of the reference box and sized by the specified width (`w`) and height (`h`) of the rectangle, in that order, with optional rounded corners.
diff --git a/files/en-us/web/css/color_value/color-mix/index.md b/files/en-us/web/css/color_value/color-mix/index.md
index 5bc60dde4da8935..d805ba497f96c0a 100644
--- a/files/en-us/web/css/color_value/color-mix/index.md
+++ b/files/en-us/web/css/color_value/color-mix/index.md
@@ -8,68 +8,83 @@ sidebar: cssref
The **`color-mix()`** functional notation takes two {{cssxref("<color>")}} values and returns the result of mixing them in a given colorspace by a given amount.
-Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case.
-
-- If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
-- If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab) are appropriate, because they are designed to be perceptually uniform.
-- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, OkLCh (and the older LCH) work well.
-- Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes.
-
## Syntax
```css
/* Polar color space */
-color-mix(in hsl, hsl(200 50 80), coral 80%)
+color-mix(in hsl, hsl(200 50 80), coral)
+color-mix(in hsl, hsl(200 50 80) 20%, coral 80%)
/* Rectangular color space */
color-mix(in srgb, plum, #123456)
color-mix(in lab, plum 60%, #123456 50%)
-/* Custom color space */
-color-mix(in --swop5c, red, blue)
-
/* With hue interpolation method */
-color-mix(in lch longer hue, hsl(200deg 50% 80%), coral)
+color-mix(in lch increasing hue, hsl(200deg 50% 80%), coral)
+color-mix(in lch longer hue, hsl(200deg 50% 80%) 44%, coral 16%)
```
-### Values
+### Parameters
-Functional notation: `color-mix(, [], [])`
+The `color-mix( , [], [] )` accepts the following parameters:
- {{CSSXref("<color-interpolation-method>")}}
- - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} name. The following three types are available:
- - ``: [`srgb`](/en-US/docs/Glossary/Color_space#srgb), [`srgb-linear`](/en-US/docs/Glossary/Color_space#srgb-linear), [`display-p3`](/en-US/docs/Glossary/Color_space#display-p3), [`a98-rgb`](/en-US/docs/Glossary/Color_space#a98-rgb), [`prophoto-rgb`](/en-US/docs/Glossary/Color_space#prophoto-rgb), [`rec2020`](/en-US/docs/Glossary/Color_space#rec2020), [`lab`](/en-US/docs/Glossary/Color_space#cielab_color_spaces), [`oklab`](/en-US/docs/Glossary/Color_space#oklab), [`xyz`](/en-US/docs/Glossary/Color_space#xyz_color_spaces), [`xyz-d50`](/en-US/docs/Glossary/Color_space#xyz), and [`xyz-d65`](/en-US/docs/Glossary/Color_space#xyz-d50).
- - ``: [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch).
- - custom-color-space: [``](/en-US/docs/Web/CSS/dashed-ident#using_with_color-profile) referring to a custom [@color profile](/en-US/docs/Web/CSS/@color-profile)
+ - : Specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword followed by a {{glossary("color space")}} (one of the color spaces listed in the [formal syntax](#formal_syntax)), and, optionally, a {{CSSXref("<hue-interpolation-method>")}}.
- > [!NOTE]
- > When browsers support {{cssxref("@color-profile")}}, custom color spaces may be supported. Currently, the color space must be one of the available color spaces listed in the [formal_syntax](#formal_syntax).
+- {{CSSXref("<color>")}}
+ - : A color to mix; can be any valid `` value.
-- ``
- - : A {{CSSXref("<color>")}} value to mix.
+- {{CSSXref("<percentage>")}} {{optional_inline}}
+ - : A percentage value specifying the amount of the corresponding color to mix; can be any `` value between `0%` and `100%`, inclusive.
-- `` {{optional_inline}}
- - : A {{CSSXref("<percentage>")}} value between `0%` and `100%`, specifying the amount of the corresponding color to mix.
+### Return value
- The two color percentages (we'll refer to them as `p1` and `p2`) are normalized as follows:
- - If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`.
- - If `p1` is omitted, then `p1 = 100% - p2`.
- - If `p2` is omitted, then `p2 = 100% - p1`.
- - If `p1 = p2 = 0%`, the function is invalid.
- - If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results.
- - If `p1 + p2 < 100%`, then an alpha multiplier of `p1 + p2` is applied to the resulting color. This is similar to mixing in [`transparent`](/en-US/docs/Web/CSS/named-color#transparent), with percentage `pt = 100% - p1 - p2`.
+A ``; the result of mixing the colors, in the given ``, in the specified amounts and hue direction.
-## Formal syntax
+## Description
-{{CSSSyntax}}
+The `color-mix()` function enables mixing two {{cssxref("<color>")}} values of any type, in a specific ratio, in a given colorspace, using either a shorter or longer hue interpolation method. Browsers support a plethora of color spaces; the `color-mix()` function enables a wide range of colors to be mixed, not limited to the sRGB color space.
-## Examples
+{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}}
-### Color mixer
+This demo allows you to select two colors, `color-one` and `color-two`, and mix them, optionally setting each color's percentage, the color space in which the colors are mixed, and the interpolation method. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. Change the percentage values of each color using the sliders. Change the color space via the drop-down menu.
-The following live demo mixes two colors, `color-one` and `color-two`, using the `color-mix()` function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu.
+### Choosing a color space
-{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}}
+Choosing the correct color space is important for producing desired results. Given the same colors to mix, different color spaces may be more appropriate depending on the interpolation use case.
+
+- If the result of physically mixing two colored lights is desired, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
+- If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab (and older Lab) color spaces are appropriate, because they are designed to be perceptually uniform.
+- If avoiding graying out in color mixing is desired, i.e., maximizing chroma throughout the transition, the Oklch (and older LCH) color spaces work well.
+- Only use sRGB if you need to match the behavior of a specific device or software that uses sRGB. The sRGB color space is neither linear-light nor perceptually uniform, and produces poorer results such as overly dark or grayish mixes.
+
+### Color interpolation method
+
+The {{CSSXref("<color-interpolation-method>")}} specifies what interpolation method should be used to mix the colors. It consists of the `in` keyword and the color space the colors should be mixed in.
+The color space must be one of the available color spaces listed in the [formal syntax](#formal_syntax). Depending on the color space used, you can optionally direct the hue to be mixed along a longer or shorter path.
+
+The [``](/en-US/docs/Web/CSS/color-interpolation-method#rectangular-color-space) category includes [`srgb`](/en-US/docs/Glossary/Color_space#srgb), [`srgb-linear`](/en-US/docs/Glossary/Color_space#srgb-linear), [`display-p3`](/en-US/docs/Glossary/Color_space#display-p3), [`a98-rgb`](/en-US/docs/Glossary/Color_space#a98-rgb), [`prophoto-rgb`](/en-US/docs/Glossary/Color_space#prophoto-rgb), [`rec2020`](/en-US/docs/Glossary/Color_space#rec2020), [`lab`](/en-US/docs/Glossary/Color_space#cielab_color_spaces), [`oklab`](/en-US/docs/Glossary/Color_space#oklab), [`xyz`](/en-US/docs/Glossary/Color_space#xyz_color_spaces), [`xyz-d50`](/en-US/docs/Glossary/Color_space#xyz), and [`xyz-d65`](/en-US/docs/Glossary/Color_space#xyz-d50).
+
+The`` category includes [`hsl`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb`](/en-US/docs/Web/CSS/color_value/hwb), [`lch`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch`](/en-US/docs/Web/CSS/color_value/oklch). With these you can optionally follow the color space name with a {{CSSXref("<hue-interpolation-method>")}}. This value defaults to `shorter hue`, but can also be set to `longer hue`, `increasing hue`, or `decreasing hue`.
+
+### Color percentages
+
+Each of the two colors can be declared with a `` value between `0%` and `100%`, which specifies the amount of the corresponding color to mix. The percentages are normalized if the total value of the declared percentages does not equal `100%`.
+
+The two color percentages (we'll refer to them as `p1` and `p2`) are normalized as follows:
+
+- If both `p1` and `p2` are omitted, then `p1 = p2 = 50%`.
+- If `p1` is omitted, then `p1 = 100% - p2`.
+- If `p2` is omitted, then `p2 = 100% - p1`.
+- If `p1 = p2 = 0%`, the function is invalid.
+- If `p1 + p2 ≠ 100%`, then `p1' = p1 / (p1 + p2)` and `p2' = p2 / (p1 + p2)`, where `p1'` and `p2'` are the normalization results.
+ - If `p1 + p2 < 100%`, then an alpha multiplier of `p1 + p2` is applied to the resulting color. This is similar to mixing in [`transparent`](/en-US/docs/Web/CSS/named-color#transparent), with percentage `pt = 100% - p1 - p2`.
+
+## Formal syntax
+
+{{CSSSyntax}}
+
+## Examples
### Mixing two colors
diff --git a/files/en-us/web/css/css_images/index.md b/files/en-us/web/css/css_images/index.md
index 36bdc0cf3151639..f9d5ff6dfa5726d 100644
--- a/files/en-us/web/css/css_images/index.md
+++ b/files/en-us/web/css/css_images/index.md
@@ -5,6 +5,7 @@ page-type: css-module
spec-urls:
- https://drafts.csswg.org/css-images/
- https://drafts.csswg.org/css-images-4/
+ - https://drafts.csswg.org/css-images-5/
sidebar: cssref
---
@@ -18,6 +19,7 @@ The **CSS images** module defines the types of images that can be used (the {{CS
- {{CSSxRef("image-rendering")}}
- {{CSSxRef("object-fit")}}
- {{CSSxRef("object-position")}}
+- {{cssxref("object-view-box")}}
The CSS images module also defines the {{CSSxRef("image-resolution")}} property. Currently, no browsers support this feature.
@@ -54,10 +56,14 @@ The CSS images module also defines the {{CSSxRef("image/image", "image()")}} fun
- [Understanding aspect ratios](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
- : Learn about the `aspect-ratio` property, discuss aspect ratios for replaced and non-replaced elements, and examine some common aspect ratio use cases.
+- [Using the CSS `object-view-box` property](/en-US/docs/Web/CSS/CSS_images/Using_object-view-box)
+ - : Learn the CSS `object-view-box` property, including how to zoom in, zoom out, and pan across images.
+
## Related concepts
- {{cssxref("url_value", "<url>")}}
- {{cssxref("url_function", "url()")}}
+- [``](/en-US/docs/Web/CSS/basic-shape#basic-shape-rect)
## Specifications
diff --git a/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg b/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg
new file mode 100644
index 000000000000000..bd8ea6dea2e5120
Binary files /dev/null and b/files/en-us/web/css/css_images/using_object-view-box/extrinsic-intrinsic_sizes.jpg differ
diff --git a/files/en-us/web/css/css_images/using_object-view-box/index.md b/files/en-us/web/css/css_images/using_object-view-box/index.md
new file mode 100644
index 000000000000000..af522a5e6157471
--- /dev/null
+++ b/files/en-us/web/css/css_images/using_object-view-box/index.md
@@ -0,0 +1,191 @@
+---
+title: Using the CSS object-view-box property
+short-title: Using object-view-box
+slug: Web/CSS/CSS_images/Using_object-view-box
+page-type: guide
+sidebar: cssref
+---
+
+The {{cssxref("object-view-box")}} property can be used to define a viewbox within {{glossary("replaced elements")}}, enabling the display of just a section of the replaced content. The subsection of the element displayed can be presented as zoomed-in, zoomed-out, or at original size, while maintaining the content's intrinsic {{glossary("aspect ratio")}}. In this guide, we examine this property, comparing it to the similar {{cssxref("object-fit")}} property, and explore its functionality through zooming in and out, as well as panning across an element.
+
+## Intrinsic size, extrinsic size, and `object-fit`
+
+Every replaced elements has two sizes; an {{glossary("extrinsic size")}} and an {{glossary("intrinsic size")}}.
+
+The extrinsic size is the dimension of the HTML element in which the content is rendered based on the box and visual formatting models. The [box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) and [visual formatting model](/en-US/docs/Web/CSS/CSS_display/Visual_formatting_model) determine the size of rendered elements based on content, HTML attributes, CSS applied to the elements and their ancestors, and the viewport size.
+
+The intrinsic size is the actual size of the content itself; the size the element is when no styles are applied and without any layout constraints. While the intrinsic and extrinsic sizes don't have to be the same, it is generally important to maintain a replaced element's intrinsic {{glossary("aspect ratio")}}.
+
+## `object-view-box` versus `object-fit`
+
+CSS has many sizing properties. When it comes to sizing replaced elements, the [`object-fit`](/en-US/docs/Web/CSS/object-fit) property enables us to control, to some extent, how replaced elements are rendered within a defined box. For example, in the following screenshot, a 1200 x 400 image is displayed using an {{htmlelement("img")}} element. The `
+ Zoom-in:
+
+
+ Left offset:
+
+
+```
+
+```css hidden
+input {
+ width: 350px;
+}
+
+@supports not (object-view-box: none) {
+ body::before {
+ content: "Your browser does not support the 'object-view-box' property.";
+ color: black;
+ background-color: #ffcd33;
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+}
+output {
+ text-align: center;
+ background-color: #dedede;
+ font-family: monospace;
+ padding: 5px;
+ display: block;
+}
+
+img {
+ width: 350px;
+ height: 350px;
+
+ --x-position: 0;
+ object-view-box: xywh(var(--x-position) 30px 350px 350px);
+}
+```
+
+```js hidden
+const img = document.querySelector("img");
+const position = document.getElementById("position");
+const output = document.querySelector("output");
+
+function update() {
+ img.style.setProperty("--x-position", `${position.value}px`);
+ output.innerText = `xywh(${position.value}px 30px 350px 350px);`;
+}
+
+position.addEventListener("input", update);
+update();
+```
+
+{{ EmbedLiveSample("Panning effect", "", 450) }}
+
+Move the slider. Note how increasing and decreasing the `x` value of the `xywh()` function creates a panning effect.
+
+## See also
+
+- {{cssxref("object-view-box")}}
+- {{cssxref("object-fit")}}
+- {{cssxref("object-position")}}
+- {{cssxref("background-size")}}
+- [Understanding aspect ratio](/en-US/docs/Web/CSS/CSS_box_sizing/Understanding_aspect-ratio)
diff --git a/files/en-us/web/css/css_values_and_units/css_data_types/index.md b/files/en-us/web/css/css_values_and_units/css_data_types/index.md
index 2f14adc3814e3ce..432c1febeb4a8b8 100644
--- a/files/en-us/web/css/css_values_and_units/css_data_types/index.md
+++ b/files/en-us/web/css/css_values_and_units/css_data_types/index.md
@@ -48,13 +48,13 @@ These types include keywords and identifiers as well as strings, and URLs.
These data types are used to indicate quantities, indexes, and positions. The majority of these are defined in the CSS values and units module, however additional types are described in other modules where they are specific to that specification alone — for example the `fr` unit in the [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) module.
- {{cssxref("<integer>")}}
- - : One or more decimal units 0 through 9.
+ - : One or more decimal units 0 through 9, optionally preceded by `-` or `+`.
- {{cssxref("<number>")}}
- - : Real numbers which may also have a fractional component, for example 1 or 1.34.
+ - : Real numbers which may also have a fractional component, for example `1` or `1.34`.
- {{cssxref("<dimension>")}}
- - : A number with a unit attached to it, for example 23px or 15em.
+ - : A number with a unit attached to it, for example `90deg`, `50ms`, or `15em`. This type includes distances ({{cssxref("<length>")}}), durations ({{cssxref("<time>")}}), frequencies ({{cssxref("<frequency>")}}), resolutions ({{cssxref("<resolution>")}}), and other quantities.
- {{cssxref("<percentage>")}}
- - : A number with a percentage sign attached to it, for example 10%.
+ - : A number with a percentage sign attached to it, for example `10%`.
- {{cssxref("<ratio>")}}
- : A ratio, written with the syntax ` / `.
- {{cssxref("<flex>")}}
@@ -62,7 +62,7 @@ These data types are used to indicate quantities, indexes, and positions. The ma
## Quantities
-These types are used to specify distance and other quantities.
+These {{cssxref("<dimension>")}} types are used to specify distance and other quantities.
- {{cssxref("<length>")}}
- : Lengths are a `` and refer to distances.
@@ -77,7 +77,7 @@ These types are used to specify distance and other quantities.
## Combinations of types
-Some CSS properties can take a dimension or a percentage value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.
+Some CSS properties can take a {{cssxref("<dimension>")}} or a {{cssxref("<percentage>")}} value. In this case the percentage value will be resolved to a quantity that matches the allowable dimension. Properties which can accept a percentage in addition to a dimension will use one of the types listed below.
- {{cssxref("<length-percentage>")}}
- : A type that can accept a length or a percentage as a value.
diff --git a/files/en-us/web/css/object-view-box/index.md b/files/en-us/web/css/object-view-box/index.md
new file mode 100644
index 000000000000000..433070986ef4217
--- /dev/null
+++ b/files/en-us/web/css/object-view-box/index.md
@@ -0,0 +1,368 @@
+---
+title: object-view-box
+slug: Web/CSS/object-view-box
+page-type: css-property
+browser-compat: css.properties.object-view-box
+---
+
+{{CSSRef}}
+
+The **`object-view-box`** [CSS](/en-US/docs/Web/CSS) property defines a rectangle as a viewable area (viewbox) within a {{glossary("replaced elements", "replaced element")}}, enabling the content of the replaced element to be zoomed or panned. It works similarly to the SVG {{SVGAttr("viewBox")}} attribute.
+
+{{InteractiveExample("CSS Demo: object-view-box")}}
+
+```css interactive-example-choice
+object-view-box: inset(0 0);
+```
+
+```css interactive-example-choice
+object-view-box: inset(20%);
+```
+
+```css interactive-example-choice
+object-view-box: xywh(95px 20px 60px 60px);
+```
+
+```css interactive-example-choice
+object-view-box: rect(110px 120px 200px 45px);
+```
+
+```css interactive-example-choice
+object-view-box: none;
+```
+
+```html interactive-example
+
+
+```
+
+```css interactive-example
+#example-element {
+ height: 100%;
+ width: 100%;
+ border: 2px dotted #888;
+}
+
+@supports not (object-view-box: none) {
+ body::before {
+ content: "Your browser does not support the 'object-view-box' property.";
+ color: black;
+ background-color: #ffcd33;
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+}
+```
+
+## Syntax
+
+```css
+/* keywords */
+object-view-box: none;
+
+/* functions */
+object-view-box: inset(20%);
+object-view-box: inset(20% 30%);
+object-view-box: inset(10px 0 25px 33px);
+object-view-box: xywh(95px 20px 60px 60px);
+object-view-box: rect(10px 30px 30px 10px);
+
+/* Global values */
+object-view-box: inherit;
+object-view-box: initial;
+object-view-box: revert;
+object-view-box: revert-layer;
+object-view-box: unset;
+```
+
+### Values
+
+- `none`
+ - : The element does not have a view box. This is the default.
+
+- [``](/en-US/docs/Web/CSS/basic-shape#basic-shape-rect)
+ - : A {{cssxref("basic-shape/inset","inset()")}}, {{cssxref("basic-shape/xywh","xywh()")}}, or {{cssxref("basic-shape/rect","rect()")}} function specifying a view box for an element with natural dimensions (replaced elements). Resolves to `none` otherwise.
+
+## Description
+
+The `object-view-box` property can be used to crop or resize {{glossary("replaced elements")}}, including images and videos. It works by showing a section of the content of the replaced element in the available space reserved for that element. The section of the replaced element that is displayed is defined by the value of the property. The available reserved space is determined by the element's default {{glossary("extrinsic size")}}. The subsection of the content displayed can be presented zoomed-in, panned-out, or at its original size, while maintaining the content's intrinsic {{glossary("aspect ratio")}}.
+
+The property value is a ``, one of the {{cssxref("basic-shape")}} functions limited to defining a rectangular shape. For example, the value can be a {{cssxref("basic-shape/xywh","xywh()")}} function:
+
+```css
+img {
+ object-view-box: xywh(410px 0 400px 150px);
+}
+```
+
+In this case, the top left corner of the section of the image that will be displayed is `410px` from the left edge and `0` from the top, as defined by x and y coordinate parameters. The size of the section of the original image that will be displayed is `400px` wide by `150px` tall; the `w` and `h` components of the function. This 400x150 section of the image will be displayed in the space that was reserved for the image itself when the page was laid out. Whether the content section displayed is its original intrinsic size, zoomed in, or zoomed out depends on whether the viewbox is 400px x 150px, smaller, or larger than the image element's size, respectively.
+
+
+
+In this case, as the rectangular viewbox defined by the `object-view-box` property and the rectangular area of the `` functions.
+
+#### HTML
+
+We have three almost identical {{htmlelement("img")}} elements wrapped in {{htmlelement("figure")}} elements; the only difference is their class names.
+
+```html
+
+ intrinsic
+
+
+ zoomed in
+
+
+ zoomed out
+
+```
+
+#### CSS
+
+We style all the images to have the same width and height, then set each class, and therefore each image, to have a different `object-view-box` value. The intrinsic size of the painted hand image is `298px` by `332px`. We set the {{cssxref("height")}} and {{cssxref("width")}}, setting the extrinsic size to `200px` by `200px`.
+
+```css
+img {
+ width: 200px;
+ height: 200px;
+ border: 1px solid red;
+}
+```
+
+We set three different `object-view-box` property values using three different shape functions. The `intrinsic` element's {{cssxref("basic-shape/xywh","xywh()")}} function value displays a `200px` square section of the image content, starting from the `70px` from the left and `90px` from the top. The `zoom-in` element's {{cssxref("basic-shape/rect","rect()")}} function displays a `160px` square section of the original element, going from `110px` to `270px` from the top edge and `90px` to `250px` from the left edge. The `zoom-out` replaced element's {{cssxref("basic-shape/inset","inset()")}} function displays a `298px` square section of the original element; showing the entire width of the image while cutting of a 17px from the top and bottom.
+
+```css
+.intrinsic {
+ object-view-box: xywh(70px 90px 200px 200px);
+}
+
+.zoom-in {
+ object-view-box: rect(110px 250px 270px 90px);
+}
+
+.zoom-out {
+ object-view-box: inset(17px 0 17px 0);
+}
+```
+
+```css hidden
+@supports not (object-view-box: none) {
+ body::before {
+ content: "Your browser does not support the 'object-view-box' property.";
+ color: black;
+ background-color: #ffcd33;
+ display: block;
+ width: 100%;
+ text-align: center;
+ }
+}
+
+figure {
+ display: inline-block;
+ margin: 0;
+}
+
+figcaption {
+ text-align: center;
+}
+```
+
+#### Results
+
+{{ EmbedLiveSample("Basic usage", "", "300") }}
+
+The `intrinsic` version is showing an unscaled section of the image. The `zoom-in` version is showing a smaller section (`160px` square) of the image, scaled up to fit `200px` square viewbox. As the section is stretched, it looks zoomed in. The `zoom-out` version is showing a larger (`298px` square) section of the image, scaled down to fit `200px` square viewbox. As the section is shrunk, it looks zoomed out.
+
+### Live zoom-in using object-view-box property
+
+This example demonstrates using the `object-view-box` property to zoom a section of a replaced element in and out, within a statically sized HTML element. In this case, the eye of the leopard, within a very large image, serves as the focal point of the zoom effect.
+
+#### HTML
+
+We include an {{htmlelement("img")}} element and a [`range`](Web/HTML/Reference/Elements/input/range) {{htmlelement("input")}} element, with an associated {{htmlelement("label")}}. The natural dimensions, or intrinsic size, of the original leopard image are `1244px` wide by `416px` tall, with an {{glossary("aspect ratio")}} of `3:1`.
+
+```html
+
+ Zoom-in:
+
+ 
+ 
+ 
+ 
+