Angielski dla Frontend Developera — kod, PR i deploy po angielsku
Tech lead pyta o LCP score na daily standup, a Ty nie wiesz jak po angielsku powiedzieć, że masz merge conflict z branchem mainowym. Poznaj 28 terminów frontend developera i naucz się bronić decyzji technicznych w code review.
Tech lead pyta o Twój LCP score — musisz odpowiedzieć po angielsku
Daily standup, tech lead pyta o LCP score nowego landing page'a, a Ty nie wiesz jak po angielsku powiedzieć, że masz merge conflict z feature branchem i deploy czeka na approval z CI/CD pipeline — to codzienność w każdym polskim zespole pracującym z zagranicznym klientem lub w strukturze distributed team.
Angielski frontend developera to język precyzyjny: component to nie element, deploy wymawia się inaczej niż myślisz, a PR w kontekście deweloperskim to nie Public Relations. Z tego artykułu skorzystają: Frontend Developer, React Developer, Vue Developer, Angular Developer, Full Stack Developer oraz UX/UI Developer — wszyscy, którzy piszą kod interfejsu w międzynarodowych teamach.
Core Technologies — 7 terminów
| EN Term | PL | Przykład zdania |
|---|---|---|
| DOM (Document Object Model) | drzewo dokumentu HTML | "We're manipulating the DOM directly here — we should use React state instead." |
| state management | zarządzanie stanem | "The state management is getting complex — let's move it to a global store." |
| rendering | renderowanie | "This component re-renders on every keystroke — we need to memoize it." |
| hydration | hydracja (SSR) | "Hydration errors usually mean the server and client HTML don't match." |
| bundle | pakiet aplikacji | "The bundle size jumped from 180 to 340 kB — check if we imported the full lodash library." |
| breakpoint | punkt przełamania layoutu | "The layout breaks at the 768px breakpoint on tablets — let me check the media queries." |
| viewport | obszar widoczności | "The modal is taller than the viewport on mobile — it needs a scrollable container." |
Frameworks & Tools — 7 terminów
| EN Term | PL | Przykład zdania |
|---|---|---|
| component | komponent | "Can you build a reusable Button component with variants for primary and secondary?" |
| props | właściwości komponentu | "Pass the user data as props — don't fetch it inside the component." |
| hooks | hooki React | "Use the useEffect hook to run the fetch after the component mounts." |
| bundler (Webpack / Vite) | narzędzie pakujące | "We're switching from Webpack to Vite — build times should drop from 40 to 4 seconds." |
| TypeScript | TypeScript | "Add TypeScript types to the API response interface — the team is strict about no implicit any." |
| Storybook | biblioteka komponentów UI | "All new components need a Storybook story with all interactive states documented." |
| linter | analizator kodu | "The linter is throwing ESLint warnings on unused variables — clean those up before the PR." |
Development Workflow — 7 terminów
| EN Term | PL | Przykład zdania |
|---|---|---|
| pull request (PR) | żądanie scalenia kodu | "I'll open a PR this afternoon — can you review it before the end of day?" |
| code review | przegląd kodu | "Left two comments in the code review — nothing blocking, just suggestions." |
| branch | gałąź repozytorium | "Create a feature branch from main — don't commit directly to main." |
| merge | scalenie gałęzi | "The PR is approved — go ahead and merge it into the staging branch." |
| merge conflict | konflikt scalania | "I have a merge conflict in the styles file — someone else changed the same lines." |
| deploy | wdrożenie | "The feature is deployed to staging — please test it before we go to production." |
| pipeline | potok CI/CD | "The pipeline failed on the unit tests — check the logs in GitHub Actions." |
Performance & Quality — 7 terminów
| EN Term | PL | Przykład zdania |
|---|---|---|
| Core Web Vitals | wskaźniki wydajności Google | "Our Core Web Vitals dropped after the last release — LCP went above 3.5 seconds." |
| LCP (Largest Contentful Paint) | czas renderowania największego elementu | "The hero image is the LCP element — we need to preload it and serve it in WebP." |
| CLS (Cumulative Layout Shift) | skumulowane przesunięcie layoutu | "The CLS score is 0.24 — that's in the 'poor' range. Reserve space for the banner image." |
| lazy loading | ładowanie leniwe | "All images below the fold should use lazy loading — don't load what the user can't see." |
| lighthouse score | wynik audytu Lighthouse | "Run Lighthouse on the checkout page — the score is 58, we need it above 90." |
| accessibility audit | audyt dostępności | "The accessibility audit flagged 12 issues — most are missing ARIA labels on icon buttons." |
| technical debt | dług techniczny | "The animation module is 3 years old — it's technical debt that's slowing down every new feature." |
Scenariusze komunikacji
a) Code review — dawanie feedbacku — 8 zwrotów
- "This looks good overall — I have one blocking comment and two suggestions."
- "This function is doing too much — can we extract the validation logic into a separate helper?"
- "I'd prefer we use the existing useAuth hook here rather than accessing the token directly."
- "The prop drilling here is getting deep — this might be a candidate for React Context."
- "Nit: variable names like d and t make this hard to follow — more descriptive names would help."
- "The unit test coverage for this branch is zero — can you add at least a happy-path test?"
- "Approved with minor suggestions — feel free to merge once you've addressed the naming comment."
- "Great approach — this is much cleaner than how we handled it in the old module."
b) Sprint planning — estymowanie zadań — 6 zwrotów
- "I can pick up the carousel component — I'd estimate 3 story points, 2 days including Storybook stories."
- "This ticket has a dependency on the design system update — can we unblock that first?"
- "The backend API for this feature isn't ready yet — should we mock it or wait?"
- "I'd flag this as a risk: the third-party library hasn't been updated in 18 months."
- "I'll need access to the staging environment to test the payment flow properly."
- "Can we time-box the investigation to half a day? If it's not solved by then, let's escalate."
c) Eskalacja problemu technicznego — 6 zwrotów
- "We have a production bug — the checkout button is broken on iOS Safari 16. I'm on it."
- "I've identified the root cause: the CSS custom property isn't supported in that browser version."
- "The fix is ready and deployed to staging — can someone verify before we push to production?"
- "I'll raise a PR for the hotfix — it's a one-line change but I want a second pair of eyes."
- "ETA for the fix is 2 hours — I'll post an update in Slack once it's confirmed on staging."
- "This is a known browser bug — I'll document the workaround in the codebase."
Krótki dialog — Frontend Developer tłumaczy trade-off klientowi
Client: "The homepage feels slow. The marketing team wants more animations and a full-screen video background. Why is the page performance so poor?"
Frontend Developer: "Our current LCP score is 2.8 seconds — that's in the 'needs improvement' range. Adding a full-screen autoplay video would push it above 5 seconds, which would hurt SEO and bounce rates."
Client: "That's a significant concern. But our competitors have video backgrounds. Can't we just optimise it?"
Frontend Developer: "We can compromise. I'd suggest a compressed poster image that loads instantly, with the video loading only after the page is interactive. That preserves the visual richness while keeping Core Web Vitals in the green zone."
Client: "What about the animations the marketing team wants?"
Frontend Developer: "CSS animations have almost zero performance cost. I can add smooth scroll animations on the sections — the user won't notice the difference, but the Lighthouse score will stay above 90."
Słownictwo pull request — 6 zwrotów
- "I've opened a PR for review — the description has a summary of the changes and a link to the Jira ticket."
- "There are two failing checks in the pipeline — one is a flaky test, the other is a genuine type error I'm fixing."
- "I've addressed all the review comments — can you do a final approval?"
- "This PR touches the authentication flow — I'd recommend a thorough QA pass before we merge."
- "I'm going to squash the commits before merging — there are 12 WIP commits that'll clutter the history."
- "The PR has been open for 3 days — can someone prioritise the review? It's blocking the next sprint ticket."
Najczęstsze błędy Polaków
1. „front-end" — pisownia z myślnikiem jako przymiotnik. W kontekście technicznym jako przymiotnik: front-end developer, front-end architecture. Jako rzeczownik samodzielny często bez myślnika: I work in frontend. To samo dotyczy back-end. Unikaj pisowni z wielką literą — Frontend Developer to nie tytuł własny poza CV.
2. „make a component" → „build / create a component". ❌ "I made a new component." → ✅ "I built a new component." / "I created a reusable component." Czasownik build jest naturalny w kontekście wytwarzania oprogramowania.
3. „PR" — wymowa skrótu Pull Request. PR w deweloperskim angielskim wymawiamy jako dwie litery: /piː ˈɑːr/. Nigdy nie tłumacz jako Public Relations — w tym kontekście kolega pyta o Twój kod, nie o kampanię wizerunkową.
4. „deploy" — wymowa /dɪˈplɔɪ/. Polacy często wymawiają to jako „de-ploj" przez analogię z polskim. Poprawna wymowa to /dɪˈplɔɪ/ — akcent na drugą sylabę: „di-PLOY". ✅ "The feature is deployed to production."
5. „merge conflict" — nie „conflicts on merge". ❌ "I have a conflict on merge." → ✅ "I have a merge conflict." / "There's a merge conflict in the styles file." To ustalona fraza w git, nie opis zdarzenia.
Quick Reference Table — 28 terminów
| Termin angielski | Polskie tłumaczenie | Kategoria |
|---|---|---|
| DOM | drzewo dokumentu HTML | Core Technologies |
| state management | zarządzanie stanem | Core Technologies |
| rendering | renderowanie | Core Technologies |
| hydration | hydracja (SSR) | Core Technologies |
| bundle | pakiet aplikacji | Core Technologies |
| breakpoint | punkt przełamania layoutu | Core Technologies |
| viewport | obszar widoczności | Core Technologies |
| component | komponent | Frameworks & Tools |
| props | właściwości komponentu | Frameworks & Tools |
| hooks | hooki React | Frameworks & Tools |
| bundler | narzędzie pakujące | Frameworks & Tools |
| TypeScript | TypeScript | Frameworks & Tools |
| Storybook | biblioteka komponentów UI | Frameworks & Tools |
| linter | analizator kodu | Frameworks & Tools |
| pull request (PR) | żądanie scalenia kodu | Development Workflow |
| code review | przegląd kodu | Development Workflow |
| branch | gałąź repozytorium | Development Workflow |
| merge | scalenie gałęzi | Development Workflow |
| merge conflict | konflikt scalania | Development Workflow |
| deploy | wdrożenie | Development Workflow |
| pipeline | potok CI/CD | Development Workflow |
| Core Web Vitals | wskaźniki wydajności Google | Performance & Quality |
| LCP | czas renderowania największego elementu | Performance & Quality |
| CLS | skumulowane przesunięcie layoutu | Performance & Quality |
| lazy loading | ładowanie leniwe | Performance & Quality |
| lighthouse score | wynik audytu Lighthouse | Performance & Quality |
| accessibility audit | audyt dostępności | Performance & Quality |
| technical debt | dług techniczny | Performance & Quality |
Podsumowanie
Angielski frontend developera to język precyzyjny — merge conflict to nie problem z merge'em, deploy wymawia się z akcentem na drugą sylabę, a PR na standup oznacza Twój pull request, nie kampanię wizerunkową. Opanowanie tych 28 terminów pozwoli Ci pewnie uczestniczyć w code review, tłumaczyć trade-offy wydajnościowe klientom i eskalować bugi produkcyjne w sposób, który buduje Twoją wiarygodność w zespole.
Przećwicz te 28 terminów za pomocą fiszek z kategorii IT & Programowanie — ścieżka Frontend Developer. Powiązane artykuły: angielski dla Backend Developera, Business English dla programistów, angielski dla UX Designera.