Wygraj książki o JavaScript i HTML5

Muszę stwierdzić, że w blogosferze dzieje się coraz lepiej. Duże firmy wreszcie zaczynają dostrzegać, że to w blogach tkwi o wiele większa siła niż w tradycyjnych mediach. Tą drogą poszła agencja interaktywna Autentika.pl, która zgłosiła się do mnie z pomysłem zorganizowania konkursu.

Sprawa jest prosta, chłopaki z Autentiki szukają front-endowca do ich teamu, jednak uzgodniliśmy, że najlepiej stanie się, jeśli towarzyszyć będzie temu konkurs dla Czytelników, ponieważ z definicji nie wstawiam na tym blogu ogłoszeń o pracę, które nie dotyczą moich projektów. Tak więc wilk syty i owca cała. Co do pracy jeszcze, poznałem kilku ludzi z Autentiki podczas paru eventów i mogę tylko powiedzieć, że znają się na front-endzie, jak mało kto. Poza tym jestem dużym fanem designów przygotowanych przez tę agencję, więc rozmowa była o wiele łatwiejsza.

Co jest do wygrania? JavaScript Patterns Stoyana Stefanova oraz Introducing HTML 5 Remy’ego Sharpa i Bruce’a Lawsona. Myślę, że jest o co walczyć, tym bardziej, że sam polowałem na te książki.

Mamy więc dwa zadania, ułożone przeze mnie razem z Kamilem Trebunią (konkurs dotyczy również Czytelników JSNews.pl). JS Patterns jest nagrodą za pierwsze zadanie, HTML5 za drugie. Udział można wziąć rozwiązując tylko jedno z nich, tak więc musicie dokonać wyboru. Na konkurs mamy dwa tygodnie, na rozwiązania czekam pod damian@jsnews.pl.

Zadanie pierwsze – algorytmiczno-JavaScriptowe.

Wejście:
Jednowymiarowa, posortowana rosnąco tablica unikalnych liczb całkowitych.

Wyjście:
Tablica z niepowtarzającymi się liczbami dodatnimi, których wartość absolutna pojawiła się w tablicy dwa razy.

Przykład:

wejście: [-4, -3, -1, 1, 2, 4, 67]
wyjście: [1, 4]

Opis programu:
Program powinien udostępniać funkcję o nazwie „solve”, dostępną w globalnym scope przeglądarki-środowiska, czyli np.

window.solve = function (input) { [...] return output; };

która powinna przyjmować jeden argument – wejściową tablicę, a na wyjściu powinna zwracać tablicę wynikową. Pozostałe szczegóły implementacji programu są mniej znaczące. Liczy się przede wszystkim dobry styl kodowania (good practices vs bad practices), złożoność czasowa algorytmu oraz szybkość jej JavaScriptowej implementacji. Skrypt sprawdzać będziemy pod Firefox 3.6.14.

W zadaniu drugim zmagać się będziemy z CSS-em.

Należy napisać kod HTML oraz CSS, który wyświetli stronę w układzie 3-kolumnowym. Oznaczmy kolumny literami A, B oraz C.

Kolumna A powinna mieć stałą szerokość „200px”. Kolumny B oraz C powinny być elastyczne, o szerokości zależnej od wielkości ekranu i pozostawać w proporcji 1:2 (kolumna C powinna być dwa razy szersza od kolumny B).

Suma szerokości kolmun A, B oraz C powinna być równa szerokości ekranu – razem, powinny wypełniać całą przestrzeń.

Dodatkowo premiowane będą:

Do Twojej dyspozycji pozostają wszystkie możliwe nowinki, które przynosi nam specyfikacja CSS3 (oraz HTML Living Standard), a które zostały zaimplementowane przynajmniej w Firefox 4 beta lub najnowszych stabilnych buildach przeglądarek Chrome i Safari (pod Windows oraz Mac OS X).

Komentarze

1

[…] interaktywna Autentika.pl organizuje wraz z Ferrante.pl i JSNews.pl konkurs dla front-endowców, gdzie do wygrania są dwie książki – JavaScript Patterns oraz Introducing […]

2

Kolumna A powinna mieć stałą szerokość “200px”. Kolumny B oraz C powinny być elastyczne, o szerokości zależnej od wielkości ekranu i pozostawać w proporcji 1:2 (kolumna A powinna być dwa razy węższa od kolumny B).

Coś mi tutaj nie pasuje. Skoro A ma stałą szerokość 200px, to B nie może być elastyczne, bo musi mieć 400px, niezależnie od tego, jak bardzo rozciągnę okno przeglądarki. Nie powinno być przypadkiem: „kolumna C powinna być dwa razy większa od kolumny C” ?

singles
3

Racja, fixed.

4

Czy po wyłonieniu zwycięzców zamieścicie przygotowany przez nich kod (może nawet z krótkim komentarzem)? Byłoby bardzo fajnie zobaczyć coś zrobionego w porządny sposób.

5

Tak, zwycięskie kody zostaną opublikowane i omówione (plus inne, jeśli będą jeszcze lepsze/ciekawsze).

6

Mam pytanie co do wyników zwracanych w postaci tablicy, one też mają być posortowane? Bo to istotna kwestia.

manolo
7

Nie, nie muszą być posortowane.

8

Mam pytanie w sprawie zadania drugiego. To mniej istotne ale czy ta „strona”ma też zarąbiście wyglądać? Tzn. czy mają mieć backgroundy, gradienty itp. Czy to tez będzie oceniane :)

Goracyi
9

To chyba oczywiste, że nie.

10

Wrażenia estetyczne nie mają znaczenia :)

11

No pracodawcy też patrzą na to czy osoba potrafi ładnie przerobić stronę. Dlatego pytam bo to nie jest takie oczywiste. Ale dzięki za odp.

Goracyi
12

Posłałem swoje rozwiązanie pierwszego zadania… Obym się nie zbłaźnił :)

13

Ponad 15 zgłoszeń, zapraszamy wszystkich do zabawy :)

14

Na dniach podeślę swoje JS :)

15

Czy będzie można liczyć na ewentualny komentarz od sprawdzających co i jak należałoby poprawić? To oczywiście poza konkursem, profesjonalne wskazówki przydadzą się każdemu.

heban
16

Wejście należy parsować? Czy można ten element pominąć i skupić się wyłącznie na algorytmie?

rotflmao
17

mam pytanie odnośnie drugiego zadania ..czy proporcja 1:2 dla kolumn B i C musi się zgadzać co do piksela przy każdej szerokości okna? ..czy wystarczy 34 do 66% ?

18

@rotflmao – co znaczy parsować wyjście? Wyjście nie musi być posortowane ani nic w tym rodzaju, musi to być tablica z wynikami i tyle :).

@heban – Myślę, ze to dobry pomysł na notkę.

@Winston_Wolf – proporcja będzie wyliczona automatycznie przez browser, więc nie będę przecież mierzył linijką ;-)

19

@rotflmao: Nie, wystarczy skupić się na algorytmie. Wejście zawsze będzie tablicą która będzie zawierać wyłącznie liczby (żadne stringi itp.).

20

A ja mam z kolei pytanie innej natury,
chodzi mi o coś w rodzaju ‚zbioru zadań’ z takimi właśnie małymi algorytmicznymi problemami do rozwiązania. Ktoś słyszał, widział, posiada?
Fajnie by było czasem sobie dla rozruszania szarych komórek coś takiego poćwiczyć – ale jeszcze czegoś takiego nie znalazłem…

Kuba
21
22

Post your JSPerf!
FF 3.6.14 : 75,224 ops/sec

Darrell
23

Oj, chyba da się lepiej ;-)

24

155,635 ops/sec
FF 3.6.14

siemakuba
25

Może ktoś podać sposób jak Wy wyliczacie skuteczność (np. FF 3.6.14 : 75,224 ops/sec), ale tak dokładnie, albo link do jakiegoś tutoriala:) No i czy to zależy od maszyny? Czy testujecie na jakimś kompie online?

manolo
26

manolo: http://jsperf.com – srodowisko, w ktorym bedziemy m.in. testowac skrypty…

27

i tak, to zalezy od maszyny, os, przegladarki, zadan w tle… wiec wklejanie samego wyniku nie ma sensu ;)

28

@siemakuba: nieźle!

Darrell
29

251,660 ops/sec ;>
FF 3.6.14 @ Ubuntu

Ten sam kod, poprzedni test był z Visty.

siemakuba
30

Ale ja nie rozumiem (bo nie wiem – a nie chce mi się dowiadywać – jak działa jsperf) co może nam powiedzieć jsperf tutaj. Przecież wyniki się chyba będą różnić w zależności ile elementów będzie miała tablica wejściowa?

Czy liczy się tylko szybkość wykonania skyptu dla tablicy z 7 elementami? Mój algorytm dla 7 elementów nie będzie najszybszy. Ja to testuje przy tablicy z 5000, 10000 elementów.

Może mi ktoś naświetlić sprawę?

sauveur
31

Moja wina. Ja myślałem że jsperf jest mniej więcej uregulowany między komputerami.

My Polish isnt so great yet so … It would be awesome if (Kamil or Ferrante) could post a „leaderboard / current best performance” in a standard environment of the top algorithm or top 5 but I understand if it should just be a surprise at the end too. Thanks for the great contest!

Darrell
32

Sauveur właśnie sam się nad tym zastanawiam co te ops/sec opisują, ilość instrukcji, szybkość ich wykonania. Testując jsperf każde dodatkowe polecenie spowalnia całość, nawet opakowanie window.solve = function (input) { […] return output; };, już nie wspomne o uruchomienie samoczynnie czegoś w systemie, ops/sec lecą na łeb na szyję.

Ogólnie pierwszy raz stykam się z tym narzędziem i ciekawi mnie to, jak praktycznie je zastosować do testu. Jakaś notka by się przydała w tej sprawie:) – to tak dla autora bloga w wolnej chwili.

Sam testy robię klasycznie, tablica z elementami np. 100000 czy 200000, Firebug, no i czas od wywołania funkcji do zakończenia działania. Ale widać, że jestem trochę do tyłu w tych nowościach:).

manolo
33

Ja też pierwszy raz z jsperf skorzystałem.
Wynik traktuję jako ciekawostkę, bo jak wspomniano wyżej miarodajne to nie jest zupełnie.

Chociaż, jak sprawdziłem ten sam kod pod Chromium @ Ubuntu, to zobaczyłem wynik 1,041,704 ops/sec. Daje fajny pogląd na szybkość enginów JS w prazeglądarkach.

siemakuba
34

Jeszcze mam pytanie co do wejścia. Mam rozumieć, że każda liczba (wartość absolutna) może wystąpić na wejściu jako singielka lub para? Tzn, wszelkie tego typu dane wejściowe są błędne:

wejście: [-4,-4, -3, -1, 1, 2, 4, 67]

wejście: [-4,-3, -1, 1, 2,2,2, 4, 67]

wejście: [-4,-3, -1, 1, 2,4, 67,4,5]

?

Czyli sztywne ułożenie w kolejności od najmniejszej do największej bez możliwości powtórzenia tej samej liczby (uwzględniając znak) po sobie? Bo takie założenie wszystko upraszcza:)

manolo
35

Dzięki za podzielenie się linkiem do jsPerf – nieznałem go :)

36

Wejscie moze byc jakiekolwiek, byle spelnialo warunki tablicy posortowanej rosnaco.

37

Btw. przyszły już 23 odpowiedzi.

38

wejście: [-5,-5, -4,-3, -1, 1, 2,2,2, 4, 67]

To też jest posortowane rosnąco, ale czy spełnia warunki założenia, tzn. czy liczby po sobie (uwzględniając znak) mogą się powtarzać?

manolo
39

@manolo

Jednowymiarowa, posortowana rosnąco tablica unikalnych liczb całkowitych.

Unikalnych… Czyli nie mogą się powtarzać ;)

Można wysłać dwa rozwiązania do jednego zadania? Bo nie mogę się zdecydować, który sposób lepszy…

krystian
40

@krystian
Zrób test wydajności tych dwóch rozwiązań i zobaczysz które lepsze ;)

Kuba
41

245,388 na Core2Duo P8600 2.4GHz ;)

Who knows
42

Fx 3.6.15 (srry) + w7 x64

Who knows
43

To powyżej dla danych testowych [-4, -3, -1, 1, 2, 4, 67]

A teraz bonus:

>>> input.length
1099420
>>> console.time(‚alg’); window.solve(input); console.timeEnd(‚alg’);
alg: 201ms

O! :)

Who knows
44

I jeszcze bez firebuga, równo 1 000 000 unikalnych, posortowanych elementów. Średnia ze 100 prób w pętli: 53.74ms/test… Ciekawostka. Opera 11.10: 35.26ms/test, Chrome 9: 133ms (?!)

Who knows
45

Powiem Wam, że przyszło ponad 30 bardzo ciekawych rozwiązań, naprawdę będzie co omawiać :) Jest już nawet jeden zdecydowany lider prędkości.

Dość mało (w porównaniu do 1. zadania) jest zadań CSSowych, tak więc zapraszam :)

46

Może jakiś ranking top10, żeby podgrzać atmosferę? :)

Me
47

@pierwsze zadanie – funkcja będzie testowana dla różnych danych wejściowych? jak będziecie wyciągać średnia? różne algorytmy/podejścia lepiej/gorzej radzą sobie w zależności od danych wyjściowych.

aka
48

Prawie 50 zadań, nice :-)

49

Jak widać Damian, nie jest z nami źle :)

50

To jeszcze zadam pytanie odnośnie jspref.

Do testowania w pole Code mam wstawić:

a) całą funkcje z wywołaniem
b) tylko wywołanie funkcji
c) tylko wnętrze funkcji

manolo
51

Zamknięcie przyjmowania zgłoszeń w środę 16.03 ? :)

zapominalski
52

pytanko do drugiego zadania: czy kolumny zawsze powinny być równej wysokości? czy skoro ten feature nie jest ujęty w poleceniu – olać go, bo i tak nie będzie brany pod uwagę? :)

pw
53

Zapominalski – Ja wysłałem dopiero dzisiaj (wersja css). Artykuł opublikowany był 2 marca, więc plus dwa tygodnie. W sumie zgadzało by się, że 16 marca. Pisz kod i wysyłaj.

54

Miałem oba rozwiązane, ale … przeczytałem treść drugi raz treść :)

Wysłałem tylko pierwsze. Myślę, że wiele osób z tych co wysyłali pierwsze spokojnie podołałoby drugiemu.

frankie.the.coin
55

Też mam oba, ale wysłałem na drugie (żeby nie było, że nikt z css’a pracy nie wysłał).

56

Konkurs się zakończył – więc może jakieś małe info odn. tego ? Ani na maila ani na blogu ni widu ni slychu …

57

Wyniki w weekend bądź w przyszłym tygodniu. Bardzo dużo prac dostałem, muszę to przetestować ;-)

58

[…] zakończył się konkurs front-endowy przy współpracy z Autentika.pl. Przyszło 60 odpowiedzi z czego wiele bardzo […]

59

[…] Witam wszystkich czytelników ferrante.pl. W tym gościnnym wpisie omówię pokrótce zwycięskie rozwiązanie konkursu CSS’owego oraz wyjaśnię pewne wątpliwości. Treść zadania znajdziecie we wcześniejszym wpisie. […]

60

Poza konkursem:

window.solve = function(arr){
var used = [];
for( var i = 0; i < arr.length; ++i ){
if( arr[i] < 0 ){
used[-arr[i]] = 1;
}else{
if( used[arr[i]] ){
used[arr[i]] = 2;
}
}
}
var res = [];
for( var i in used ){
if( used[i] === 2 ){
res.push(i);
}
}
return res;
}

61

[…] Na blogu pojawiły się również konkursy. Brawa dla Autentiki, która przetarła szlak i zorganizowała dla Was pierwszy taki konkurs z nagrodami. […]

62

[…] konkurs w ramach kampanii rekrutacyjnej – Autentika szuka bowiem dobrego front-endowca, a poprzedni konkurs usatysfakcjonował obie strony. Michał i zespół mają dla Was do wygrania papierową książkę […]

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>