PROJEKTOprogramowanie i automatyzacja

Wizerunek firmy przemysłowej, zbudowany od zera

Strona i broszura A4 firmy doradztwa inżynierskiego dla przemysłu ciężkiego, zbudowane na nowo z jej własnej listy referencyjnej: liczby policzone zamiast zaokrąglonych, rysowane schematy zamiast zdjęć ze stocku, jeden drukowany dokument z tych samych treści.

343

zleceń, policzonych zamiast zaokrąglonych

37

stron A4 z tych samych treści

0

zewnętrznych zapytań o czcionki i CDN

ROK
2026
ZESPÓŁ
Aashwin Shrivastava
TECH-STACK
Astro 5, TypeScript, Canvas 2D, SVG, Zod, Playwright
LOKALIZACJA
Indie
OPUBLIKOWANO
19 sie 2026

Siedemnaście lat pracy, i ani śladu tego w sieci

Strona główna nowej witryny: nagłówek, obracany globus i cztery policzone wskaźniki

Dawna strona była motywem WordPressa z kreatorem stron na wierzchu. Nagłówki stały w kroju domyślnym, tytuł w karcie przeglądarki przekręcał nazwę firmy, a pod rubryką Our Customer Stories nie było zupełnie nic. Żadnego projektu, ani jednej linijki. Nawigacja miała pozycję Projects, a kto ją kliknął, lądował w formularzu kontaktowym.

Całość ilustrowały kupione zdjęcia, które pasowałyby do dowolnej firmy: ludzie przy laptopach, spotkania przy jasnych stołach. Dla doradztwa, które dobiera piece obrotowe, pisze przetarg i zostaje na budowie, aż linia ruszy, to nie tylko dowolne, to sprzeczne z przedmiotem.

A liczby, które miały to wszystko unieść, były okrągłe: 12+ lat, 50+ klientów, 200+ projektów, 14 krajów. Na stronie referencyjnej liczby okrągłe są najsłabszą formą dowodu, bo nic w nich nie da się sprawdzić i dlatego nic nie kosztują.

Zrealizowane dla Colleagues Consultants Private Limited.

Rysowany schemat linii cementowej od kamieniołomu po załadunekDiagram procesu: sześć filarów usług na jednej osiWykaz usług filarów Implementation i Support, wypisany w całościMapa świata policzona z danych granic, z krajami z listy referencyjnejPrzeglądarka projektów z filtrami sektora, usługi, kraju, statusu i rokuPiętnaście stron broszury A4 ułożonych obok siebieOtwarte menu główne nad stroną startowąStrona sektorów w schemacie ciemnym, z izometrycznym rysunkiem cementowni

Dowody były od dawna, tylko nie w sieci

Klient od roku założenia prowadzi własną listę referencyjną: każde zlecenie, z klientem, miejscem, dziedziną i rokiem obrotowym. Istniała jako plik prezentacji i nigdy nie została opublikowana. Pytanie przestało więc brzmieć, jak sprawić, by strona brzmiała wiarygodnie, a zaczęło brzmieć znacznie skromniej: jak wprowadzić ten plik na stronę bez przepisywania go.

Skrypt czyta plik bezpośrednio, własnym małym czytnikiem archiwów napisanym na bibliotece standardowej i bez pakietu zewnętrznego, i zapisuje z niego kolekcję, z której buduje się strona. Lista klientów i lista krajów są następnie liczone z tej kolekcji, a nie utrzymywane obok. Nowa wersja listy referencyjnej to jedno polecenie, a nie projekt redakcyjny.

To, co stoi potem na stronie, jest policzone: 343 zlecenia, 55 wymienionych z nazwy klientów, 16 krajów, 18 nieprzerwanych lat obrotowych. Okrągłe liczby dawnej strony zostały usunięte bez zastąpienia.

Powód wykraczał poza zamiłowanie do porządku. Przy uzgadnianiu okazało się, że części dawnej listy krajów nie da się udokumentować. Błędne wpisy przetrwały pięć rund korekty, bo lista, która wygląda wiarygodnie, nie zdradza korektorowi niczego. Właśnie dlatego klienci i kraje są dziś wyprowadzane, a nie pisane: dana policzona z rejestru nie może się od niego różnić.

Żadnego obrazu, który nie pokazuje instalacji

Zdjęć ze stocku nie zastąpiono lepszymi zdjęciami ze stocku, lecz dziesięcioma rysowanymi ręcznie schematami: linią cementową od kamieniołomu po załadunek, przepływem materiałów sypkich, drogą stali, cyklem życia projektu i czterema izometrycznymi planszami sektorowymi. To język rysunku technicznego, a nie banku zdjęć, i każdy z nich mówi coś o przedmiocie.

Reguły trzymane są wąsko, żeby zbiór czytał się jako jedna ręka: dokładnie dwie grubości kreski, opisy w warstwie o stałej szerokości znaku, z liniami odniesienia, i czerwień wyłącznie tam, gdzie coś znaczy, czyli na strzałkach przepływu, strefach gorących i węzłach aktywnych. Koloru nie maluje się w rysunku, pochodzi ze zmiennych, dlatego ten sam plik jest poprawny w schemacie jasnym i ciemnym, nie istniejąc dwa razy.

Opisy na rysunku są miejscem, w którym taki zbiór się rozpada: jeden zjeżdża za krawędź, dwa nachodzą na siebie, i nikt tego nie zauważa, bo nikt nie ogląda wszystkich dziesięciu plików obok siebie. Dlatego kontrola mierzy przy każdej kompilacji każdy opis wobec sąsiadów i wobec ramki. Dziś jest to 106 opisów, wszystkie wolne.

Mapa świata w ogóle nie jest rysowana. Liczy się ją z otwartych danych granic: pierścienie rozpakowane, złożone w poprzek antypołudnika, uproszczone i rzutowane płasko. Ten sam skrypt zapisuje z tych samych stałych przeliczenie, którym stawiane są znaczniki. Mapa i znaczniki nie mogą się rozejść, bo obie rzeczy pochodzą z jednego źródła.

Strona sektorów w schemacie jasnym, z izometrycznym rysunkiem cementowni

Globus, który przestaje liczyć

Strona główna nie niesie obrazka otwierającego, lecz sam rejestr: kulę, na której każdy kraj jest punktem, ważonym liczbą wykonanych tam zleceń. Obraca się ją, wyciąga kraj i czyta liczbę obok. Dowodem nie jest zdanie o dowodzie, tylko sam element sterujący.

Pod spodem jest maszyna rysująca, nie framework. Linia brzegowa jest wstępnie policzona, zakodowana różnicowo i waży około 56 KB po spakowaniu; ładuje się dopiero po pierwszym wyrysowaniu, dlatego zbudowana strona główna zostaje przy około 42 KB po spakowaniu, a największym elementem przy ładowaniu jest nagłówek, nie płótno. Pod spodem, jako obraz wyjściowy, leży statyczny rysunek tej samej kuli, więc nic nie mruga i nic nie skacze, zanim dane dojdą.

Pętla zatrzymuje się, gdy nie ma już nic do roboty. Jeśli nic się nie obraca, nic nie jest wybrane, kula wyszła poza kadr albo karta jest w tle, pętla nie biegnie dalej: staje i rusza przy następnym zdarzeniu. Strona główna, która godzinami rysuje sześćdziesiąt klatek na sekundę w nieoglądane okno, to błąd, który poznaje się po wentylatorze.

Ta sama maszyna obsługuje dwóch odbiorców, stronę główną i samodzielny plik demonstracyjny, a kontrola upiera się, żeby pozostał jeden plik z jednym eksportem. Inaczej szybko powstałaby druga kula, po cichu przecząca pierwszej.

Globus z bliska: wybrany kraj i liczba zleceń obok

Dwa schematy, dwa atrybuty

Jasny jest ustawieniem domyślnym, ciemny jest decyzją. Strona świadomie nie idzie za ustawieniem systemu, dopóki odwiedzający niczego nie wybrał: doradztwo inżynierskie czyta się najpierw na papierowej bieli, a kto chce inaczej, mówi to raz.

Niosą to dwa osobne atrybuty. Jeden trzyma wybór, drugi wyprowadzony z niego schemat, a każdy komponent pyta wyłącznie o schemat. Brzmi to jak atrybut za dużo i jest powodem, dla którego trzeci zestaw kolorów byłby tu dopisaniem w jednym miejscu, a nie zmianą w osiemnastu komponentach. Oba ustawia ten sam skrypt przed pierwszym wyrysowaniem. Napisz je osobno, a dostaniesz stronę, która przez jedną klatkę maluje ciemne pismo na ciemnym tle.

Jedna powierzchnia zachowuje się inaczej niż wszystkie pozostałe, ta odwrócona: jej tło przeskakuje razem ze schematem, więc przeskakuje też czytelność akcentu na niej. Dlatego niesie własną wartość akcentu, braną dla każdego schematu z właściwego końca rampy czerwieni. Bez tego firmowa czerwień stałaby tam nieco powyżej 2:1 i byłaby niewidoczna na laptopie w pociągu.

Zmierzone, nie oszacowane: tablica kontrastów schematu jasnego jest policzona, wszystkie 28 sprawdzonych par spełnia AA, a najsłabsza wynosi 4,90:1.

Jedna szerokość strony i błąd, którego nie pokaże żaden zrzut

Strona działała przez pewien czas na dwóch szerokościach: wąskiej dla nagłówka i otwarć oraz szerokiej dla pasów zdjęciowych. To stawia dwie pionowe krawędzie na tej samej stronie i, kiedy się to raz zobaczy, widać to wszędzie. Dziś jest dokładnie jedna szerokość strony, z nagłówkiem włącznie.

Margines jest związany z tą szerokością, a nie wybrany: jego pułap to tempo, w jakim rośnie, razy szerokość maksymalna. Ustaw jedną z tych liczb dowolnie, a zbudujesz sobie błąd, który nie wygląda na nic. Margines mieści się bowiem wewnątrz szerokości maksymalnej. Jeśli rośnie dalej, gdy szerokość już jest ograniczona, treść staje się węższa, im szersze okno. Dokładnie to zdarzyło się tu raz, z maksimum tuż przed limitem i spadkiem za nim.

Zrzut ekranu nigdy tego nie pokaże, bo każdy obraz z osobna jest wiarygodny. Kontrola pokazuje to natychmiast: mierzy szerokość treści na stronę i na rozmiar okna, drukuje to jako wiersz, a wgłębienie gdziekolwiek w wierszu jest dowodem. Ten sam przebieg obchodzi każdy element na trzech szerokościach telefonu i nazywa wszystko, co wychodzi poza krawędź dokumentu.

Dwa znaleziska są dość ogólne, by je zabrać ze sobą. Wyśrodkowany element siatki jest wymiarowany do swojej maksymalnej treści, więc długi podpis rozsadza siatkę, dopóki się jej wprost nie ograniczy. A przepełnienie nie działa na pudełku tabeli, dlatego klasa pomocnicza ukrywająca treść dla czytników ekranu nie przycina gołej tabeli, tylko zostawia ją widoczną.

Te same treści, wydrukowane

Obok strony stoi broszura na 37 arkuszach A4 i nie jest kopią. To jeden plik HTML z osadzonymi krojami i obrazami, czytany w przeglądarce i z niej drukowany. To, co na nim stoi, pochodzi z plików treści strony. Zmień jedną linijkę opisu usługi, a zmienią się obie edycje.

Łamanie jest policzone, nie złożone ręcznie. Krok budowania wycenia każdy wiersz w jednostkach druku i wypełnia arkusze, aż będą pełne. Potrzebne do tego stałe nie są szacowane, lecz zmierzone: kontrola renderuje gotowy dokument i odczytuje pudełka z powrotem. Pierwsze podejście je zgadywało i dwanaście arkuszy z rzędu przelało się.

Dlatego na końcu stoi bramka, którą trzeba przejść. Przelany arkusz A4 wygląda na ekranie niepozornie, a przy druku traci dolny brzeg, i nigdzie nie pojawia się żaden komunikat. Błąd, który widać dopiero na papierze, widać za późno. Obok jest eksport do dokumentu edytowalnego, sprawdzony wobec składu oryginału, z pozostałym odchyleniem dwóch setnych piksela.

Nic z tego nie wymusza synchronizacji samo z siebie. Treści są przenoszone do broszury świadomie, a nie pobierane w czasie działania, żeby zmiana na stronie nie zmieniała wstecz dokumentu już wydrukowanego.

Redakcja zostaje w domu

Opisy projektów to ta część strony, która ma rosnąć dalej, i jedyna, która wymaga interfejsu. Jest, siedzi pod własnym adresem i działa tylko na komputerze osoby redagującej: lista istniejących rekordów, formularz na każde pole i obok podgląd karty oraz gotowej strony.

Edytuje te same pliki, z których buduje się strona, bez bazy danych i bez konta. Każde pole jest przy zapisie sprawdzane wobec tego samego schematu, wobec którego sprawdza kompilacja. Rekord, który przejdzie tutaj, nie łamie kompilacji: o to w całym ćwiczeniu chodzi, a przebieg jest przećwiczony w ponad trzydziestu sprawdzeniach.

Tam, gdzie za opisem nie stoi podpisany dokument, jest on oznaczony jako reprezentatywny, widocznie na indeksie i przy każdym wpisie. To, co udokumentowane, stoi w rejestrze; to, co stoi obok, nie podaje się za akta umowne. Ten rozdział jest warunkiem, pod którym ta połowa strony jest cokolwiek warta.

Wydanie jest statyczne z kontenera: zbudowane pliki za lekkim serwerem, wypchnięcie na główną gałąź przebudowuje. Stopka wymienia nas jako autora, najcichszym stopniem pisma na stronie.

Lokalny interfejs redakcyjny: lista rekordów, formularz i podgląd obok siebie
Strona tytułowa broszury A4Strona broszury z diagramem sześciu filarów usługStrona broszury o sektorze cementu, ze schematem instalacji i legendąStrona broszury z opisem projektu oznaczonym jako reprezentatywnyStrona główna na telefonie, w jednej kolumnieWykaz usług na telefonieStrona sektorów na telefoniePrzeglądarka projektów z filtrami na telefonie

Dowiedz się więcej

MAJĄ PAŃSTWO ZŁOŻONY POMYSŁ, KTÓRY CHCIELIBYŚMY DLA PAŃSTWA WDROŻYĆ?
ZACZNIJMY OD PILOTAŻU DESIGN THINKING LUB ROZMOWY KONSULTACYJNEJ.

Skontaktuj się z nami

Alan Kay

“Najlepszym sposobem przewidzenia przyszłości jest jej wynalezienie.”