Angielski dla programistów, Angielski w IT
Angielski w IT czy Angielski dla programistów to również dziedzina w której się specjalizujemy. Zauważ, że w ComfEnglish tworzymy również praktyczne witryny internetowe. Ten artykuł będzie na temat front-endu czyli zajmiemy się terminologią dotyczącą tworzenia prostej aplikacji bez wysyłania żadnych danych na serwer. Jeśli zapisywalibyśmy lub podpinalibyśmy jakąś bazę danych i aplikacja wysyłałaby dane wtedy użylibyśmy słowa back-end.
Programowanie to nic innego tylko właśnie język angielski, kawałki językowe i specyficzne terminy, funkcje i możliwości, których używamy, żeby osiągnąć jakiś pożądany efekt, cel. Wystarczy zerknąć na zbiór terminów, słowniczek Javascript, że to co tam widzimy to nic tylko angielski, wszystko jest po angielsku. Programowanie i angielski to dwa nieodłączne bieguny, które zawsze będa ze sobą współpracować. Angielski w IT jest więc tutaj niezbędny.
Warto wziąć również pod uwage to, że angielski dla IT czy angielski w IT to nie tylko specyficzna terminologia w danych bibliotekach i języku programowania. Angielski dla IT to uczestnictwo w spotkaniach online oraz rozmowy na temat projektów. Jest to również język biznesowy i general English, nie tylko ten techniczny. Praca w dużych firmach może wiązać się z koniecznością płynnej i poprawnej komunikacji w języku angielskim. Co więcej warto zaznajomić się z Scrum bądź metodami zarządzania projektów IT.
Angielski w IT to tak ogromna dziedzina, że warto ograniczyć się na początek do tego co potrzebujemy w danym momencie i co wymaga od nas specyfika branży w której obecnie funkcjonujemy. Angielski dla IT jest czymś rzadkim pod względem fachowej terminologii. Bardziej skupiamy się na zwykłej komunikacji i to jest prawidłowe podejście. Wielu programistów doskonale zna terminologię w swojej branży po angielsku, ale nie potrafi komunikować się w sposób płynny, profesjonalny i poprawny.
Wiem, że wielu programistów świetnie radzi sobie z daną w ich branży terminologią, jednak jeśli chcesz zwiększysć pewność siebie, płynność i poprawność w codziennej komunikacji zapraszam Cię do kontaktu na stronę główną. Jednak, ze względu na rzadkość podejmowanych tematów słownictwa technicznego pozwoliłem sobie napisać ciekawy artykuł, który może Ci się spodobać.
W tym artykule podam Ci niesamowitą listę interesujących terminów dla poniższego małego projektu wykonanego w bibliotece Fabric.js. Jest to biblioteka JavaScript do manipulowania obiektami na płótnie HTML5 Canvas. Umożliwia tworzenie interaktywnych aplikacji graficznych, takich jak edytory obrazów czy narzędzia do rysowania. Angielski w IT wymaga znajomości technicznych i zaawansowanych terminów, więc ten artykuł może być dla Ciebie interesujący.
Możesz podejrzeć projekt, który będziemy tutaj rozpatrywać a w którym mianowicie skupimy się na terminologii – angielski w IT, angielski dla programistów. Jest to prosty projekt napisany w HTML5 Canvas, CSS, Javascript. Po prawej górnej stronie ekranu widzisz małą ikonkę (dwie nałożone na siebie strony), to jest właśnie ten projekt. Zauważ, że jak przesuwamy stronę w dół to ikonka pozostaje na tym samym miejscu czyli schodzi w dół razem z nami, dzieje się to dlatego, że został przypisany mu atrybut position: fixed.
Angielski dla programistów to klucz do sukcesu. Jeśli dobrze rozumiesz fachowe terminy związane z danym językiem i technologią w której operujesz wtedy łatwiej jest Ci uczyć się nowych języków i terminów potrzebnych w nowych technologiach. Angielski w IT raczej niewiele się różni w codziennej komunikacji jednak specyficzna terminologia może zaskoczyć w zależności od bibliotek na których oparty jest dany projekt jak i języka w którym jest on wykonywany.
Angielski dla programistów – zacznijmy od HTML5 Canvas.
<button onclick=”showBoard()”>Open Board</button>
<div id=”board-container” style=”display:none”>
<div id=”toolbar”>
<div id=”pencil” class=”tool”>
<span class=”icon-pencil”></span>
<span class=”tool-label”>Pencil</span>
</div>
<div id=”eraser” class=”tool”>
<span class=”icon-eraser”></span>
<span class=”tool-label”>Eraser</span>
</div>
<div id=”text” class=”tool”>
<span class=”icon-text”></span>
<span class=”tool-label”>Text</span>
</div>
</div>
<div id=”canvas-container”>
<canvas id=”canvas” width=”800″ height=”300″></canvas>
</div>
</div>
div: Jest to element HTML służący do tworzenia bloków na stronie internetowej. Divy są często używane do grupowania i stylowania innych elementów HTML za pomocą CSS.
id: Jest to atrybut HTML, który identyfikuje unikalny element na stronie. Każdy identyfikator (id) powinien być unikalny w obrębie całej strony.
toolbar: Identyfikator tego diva sugeruje, że zawiera on pasek narzędzi (ang. toolbar), który prawdopodobnie zawiera przyciski lub narzędzia do interakcji z płótnem Canvas.
pencil, eraser, text: Są to identyfikatory kolejnych divów, które prawdopodobnie reprezentują konkretne narzędzia dostępne w pasku narzędzi. Na przykład, “pencil” może być narzędziem do rysowania ołówkiem, “eraser” do gumowania, a “text” do dodawania tekstu na płótnie.
class: Jest to atrybut HTML, który służy do grupowania elementów i stosowania do nich wspólnych stylów za pomocą CSS. W tym przypadku, wszystkie divy mają klasę “tool”, co sugeruje, że są one stylowane w podobny sposób i mogą reprezentować różne narzędzia w pasku narzędzi.
span: Element HTML służący do grupowania i stylowania fragmentów tekstu lub innych elementów bez zmiany struktury dokumentu. W tym przypadku, spanty zawierają ikony (np. “icon-pencil”, “icon-eraser”), które prawdopodobnie są wyświetlane obok etykiet narzędzi.
canvas-container: Identyfikator tego diva sugeruje, że zawiera on kontener dla płótna Canvas, który jest używany do rysowania grafiki i interakcji z narzędziami zdefiniowanymi w pasku narzędzi.
canvas: Element HTML5 Canvas, który umożliwia rysowanie grafiki, animacji i interaktywnych aplikacji na stronie internetowej. Jest to element, na którym będą renderowane obrazy za pomocą narzędzi zdefiniowanych w pasku narzędzi.
Angielski dla programistów – nadajmy teraz wygląd czyli CSS (stylesheet).
Poniżej podaje ciekawą terminologię, dotyczącą CSS czyli wyglądu elementów podanych wyżej. Istnieje spora ilość atrybutów, które możemy przypisać danym elementom div, żeby kontenery czy przyciski, cokolwiek wyglądały tak jak my tego chcemy.
Media Queries: Jest to technika używana w CSS, która umożliwia dostosowanie stylów CSS do różnych mediów, takich jak ekran komputera, tabletu czy telefonu. W tym przypadku, media query zostało użyte do ukrycia przycisku na ekranach o szerokości mniejszej niż 768 pikseli.
Position: fixed: Właściwość CSS, która ustawia pozycję elementu na stronie internetowej względem okna przeglądarki. Elementy z ustawioną pozycją fixed pozostają na swoim miejscu, nawet podczas przewijania strony.
Z-index: Właściwość CSS, która kontroluje stosunek warstw elementów na stronie. Im wyższa wartość z-index, tym element znajduje się wyżej na stosie warstw i jest wyświetlany nad innymi elementami z niższym z-index.
Keyframes: Jest to mechanizm w CSS, który umożliwia tworzenie animacji poprzez definiowanie zmian w różnych klatkach czasowych. W tym przypadku, animacja fadeIn jest definiowana przy użyciu keyframes, aby płynnie wyświetlić efekt pojawienia się elementu.
Inline-flex: Właściwość CSS, która ustawia elementy w jednym wierszu, ale zachowuje elastyczność w ich rozłożeniu. Elementy flex są rozmieszczane w jednym wierszu i dostosowują swoją szerokość do zawartości.
Icon-pencil, icon-eraser, icon-text: Te klasy są używane do stylizowania ikon przy użyciu fontów ikonowych lub tzw. ligatur ikonowych. Każda ikona jest zdefiniowana jako znak specjalny, który jest wyświetlany za pomocą pseudoelementu :before i określonej czcionki.
Before: Pseudoelement CSS, który umożliwia dodanie zawartości przed zawartością wybranego elementu. W tym przypadku, używany jest do wstawienia ikon przed etykietami narzędzi.
Angielski dla programistów – funkcjonalność czyli javascript.
Angielski w IT. Zajmijmy się teraz najważniejszym elementem naszej małej aplikacji czyli funkcjonalnością. Mamy już szkielet czyli kanwę w HTML5, kontenery oraz przyciski więc trzeba nadać im po prostu życie, żeby coś robiły a nie po prostu widniały na ekranie. Poniżej przedstawiam interesującą terminologię, która została użyta w stworzeniu tego małego projektu.
Function Declaration: Deklaracja funkcji w JavaScript, która określa zestaw instrukcji do wykonania w określonym momencie. Na przykład, showBoard() jest funkcją, która wyświetla obszar rysowania i narzędzia.
DOM Manipulation: Manipulacja Drzewem Obiektów Dokumentu (Document Object Model) za pomocą JavaScript. W tym kontekście, używane są metody takie jak getElementById() do dostępu do elementów HTML na stronie.
Event Handling: Obsługa zdarzeń w JavaScript, takich jak kliknięcia myszką czy zmiany rozmiaru okna przeglądarki. W kodzie, zdarzenia takie jak kliknięcia na narzędzia są przechwytywane i obsługiwane przez funkcje.
Conditional Statements: Instrukcje warunkowe w JavaScript, takie jak if i else, które pozwalają na wykonanie różnych działań w zależności od warunków. W kodzie, używane są do sprawdzania stanu narzędzi i odpowiedniego reagowania na te stany.
Looping Constructs: Pętle w JavaScript, takie jak for i while, które pozwalają na powtarzanie określonych instrukcji. W kodzie, mogą być używane do iteracji przez elementy i wykonywania operacji na nich.
Variable Declaration: Deklaracja zmiennych w JavaScript za pomocą słów kluczowych var, let, lub const. W kodzie, zmienne są używane do przechowywania stanu narzędzi i innych informacji.
Anonymous Functions: Funkcje bez nazwy w JavaScript, które są definiowane bez użycia słowa kluczowego function. W kodzie, są one używane jako callbacki do obsługi zdarzeń, takich jak kliknięcia na narzędzia.
Manipulating element attributes: Zmiana i odczytanie atrybutów elementów HTML za pomocą JavaScript. Na przykład, zmiana stylów CSS elementów za pomocą JavaScript, jak w przypadku zmiany koloru tła przycisków narzędzi.
