Kobieta w świecie IT

undefined vs null

2021-02-02T17:07:00.000+01:00

Ostatnio natknęłam się na artykuł stwierdzający, że typeof null zwraca "object" z powodu błędu w JavaScript. W ciągu ostatnich 20 lat pisania w różnych językach widziałam kilka błędów (np różna kolejność tych samych parametrów w funkcjach explode i implode w starym PHP) ale ta logika jest w JavaScript od początku i jakoś nie chce mi się wierzyć, że od ponad 20 lat nikt tego nie poprawił.

Tak więc wzięłam się (po raz któryś z kolei) za czytanie dokumentacji na mdn. A tam stoi: The value null represents the intentional absence of any object value. It is one of JavaScript's primitive values and is treated as falsy for boolean operations..

Co to oznacza w praktyce? A oznacza to, że jeśli nasz obiekt (lub cokolwiek co po nim dziedziczy) nie ma wartości i jest to zamierzone (np takiego użytkownika nie ma) to używamy null. A co jeśli pracujemy ze stringiem? Wtedy zazwyczaj używamy "", żeby oznaczyć, że nie ma wartości, dla liczb dajemy 0 a dla wartości logicznych false.

Ten null dla obiektów jest bardzo przydatny. Zapis {} zwraca istniejącą wartość (jest obiekt, choć pusty), tak samo z []. Więc żeby zachować konwencję używania !zmienna obiektom ustawiamy null, gdy celowo nie mają wartości.

Z undefined historia jest trochę inna. To jest domyślna wartość używana przez JS gdy wartość czegoś nie została ustawiona (jeszcze). Warto utrzymać to rozróżnienie dla zwiększenia czytelności kodu.

  typeof {} // "object"

  typeof [] // "object"

  typeof (() => {}) // "function"

  ({}) instanceof Object // true

  new Object() instanceof Object // true

  ([]) instanceof Object // true

  new Array() instanceof Object // true

  (() => {}) instanceof Object // true

  !!null === false // true

  !null === true // true

  !!"" === false // true

  !"" === true // true

  !!0 === false // true

  !0 === true // true

Dla zainteresowanych dodatkowy artykuł undefined vs. null revisited

react hooks - useState

2020-10-19T21:26:00.001+02:00

Hooki w react pojawiły się pod koniec 2018 roku. Umożliwjają one wygodne pisanie komponentów funkcyjnych, dzielenie odpowiedzialności w kodzie oraz tworzenie małych plików - łatwych w testowaniu, utrzymaniu i wygodnych, gdy trzeba znaleźć błąd.

Najbardziej podstawowym hookiem jest useState(). Umożliwia on zarządzanie wartością stanu pomiędzy kolejnymi wywołaniami funkcji komponentu.

useState() zwraca tablicę z dwiema wartościami: stanem i funkcją do jego aktualizacji. Zgodnie z konwencją nazwa funkcji do aktualizacji powinna zaczynać się od czasownika set, czyli ustawiać. Jeśli zmienną stanu nazwiemy user to funcja powinna nazywać się setUser.

  const [state, setState] = useState(); 

useState() przyjmuje jako parametr początkową wartość stanu

  const [state, setState] = useState(4);

  console.log(state); // 4

Funkcja setState przyjmuje jako parametr nową wartość stanu lub callback

  const [state, setState] = useState(4);

  console.log(state); // 4

  setState(24);

  console.log(state); // 24

Callback przyjmuje jako parametr aktualna wartość lub referencję stanu:

  const [state, setState] = useState(4);

  console.log(state); // 4

  setState(state => state + 1);

  console.log(state); // 5

Po co setState przyjmuje callback jako parametr? Po to, żeby w każdym przypadku, gdy nasz kod nie ma dostępu do aktualnego state móc jednak z niego korzystać. Dość toporny przykład pokazujący jak to działa jest z wykorzystaniem setInterval
.

import React from "react";

export default function App() {

  const [state, setState] = React.useState(0);

  function updateState() {

    setState((state || 0) + 1);

  }

  React.useEffect(() => {

    const interval = setInterval(updateState, 3000);

    return () => clearInterval(interval);

  }, []);

  return (

    <div className="App">

      {console.log("rerender", state)}

      <h3>{state}</h3>

    </div>

  );

}

Powyższy przykład pokazuje ustawianie nowej wartości stanu co 3 sekundy. Niestety, stan ustawia się na 1, cały czas co 3 sekundy, ponieważ funkcja updateState jest utworzona, gdy state wynosi 0. I tak zostaje przekazana do setInterval. Co 3 sekundy setInterval zwieksza state równy 0 o 1...
zobacz na Sandbox

Sposobem na naprawienie (poza zabawą scope i clojure) jest użycie callbacku jako parametru w setState, wtedy cała funkcja bedzie wygladać tak:
zobacz na Sandbox

  function updateState() {

    setState(state => (state || 0) + 1);

  }

state przekazywany do callbacku jest tym aktualnym, wiec co 3 sekundy rośnie jego wartośc o 1.

react i referencja

2020-10-19T21:20:00.001+02:00

Cykl życia komponentu reacta obejmuje update komponentu, gdy dane na których pracuje komp[onent się zmienią. Dotyczy to zarówno danych przychodzacych z zewnątrz (props) jak i tych tworzonych i uaktualnianych wewnątrz komponentu (state). Jeśli chodzi o dane prymitywne (liczby, ciągi tekstowe, typy logiczne, null, undefined i Symbol) to sprawa jest dość prosta. Wiadomo, że:

  console.log(1 === 1); // true

  console.log('a' === 'a'); // true

  console.log(true === true); // true

  console.log(undefined === undefined); // true

  console.log(Symbol('a').toString() === Symbol('a').toString()); // true

Czyli jeśli wartość props lub state zmieni się z 1 na 2 to komponent wie, że ma się zrerenderować. Proste.

A jednak, nie do końca. Wszystko co nie jest prymitywem w JS (jest to pewne uproszczenie, będzie osobny wpis na ten temat) jest obiektem. A obiekty nie są przekazywane przez wartość a przez referencję. Innymi słowy JS umieszcza utworzony obiekt gdzieś w pamięci i posługuje się adresem tego obiektu a nie nim samym. Każde utworzenie obiektu tworzy nową referencję.

  const a = { id: 1 };

  const b = { id: 1 };

  console.log(a === a); // true

  console.log(a === b); // false

  console.log(Object.is(a, a)); // true
  console.log(Object.is(a, b)); // false

Czyli nawet dwa identyczne obiekty mają dwie różne referencje, więc nie da się ich łatwo porównać. React do porównywania obiektów używa Object.is().

Dlatego, gdy zmieniamy jakąś wartość w obiekcie, powinniśmy stworzyć nową referencję, żeby react zauważył zmianę, na przykład tak:

  const [formData, setFormData] = useState({});

  function handleChange(evt) {

  const id = evt.target.id;

  const value = evt.target.value;

  const formCopy = { ...formData };

  formCopy[id] = value;

  setFormData(formCopy);

  }

Alternatywnym sposobem może być używanie biblioteki jak immutable.js aby każda zmiana w obiekcie zwracała nową referencję.

Function vs arrow function

2020-05-30T21:35:00.001+02:00

Arrow function came in 2015 together with new ECMAScript 5. It was a revolution! No more var that = this; to be able to use parent context in a callback.

I really enjoyed this time and like others was using arrow functions everywhere. But 5 years later I started to hate arrow functions used as normal functions.

Code with one-liner functions and other variables:

  const getData = dataKey => get(state, dataKey);

  const makePlainObj = () => ({});

  const doSth = ({ a, b }) => {console.log(b)};

  const abc = { get: someFn };

Code with normal functions:

  function getData(dataKey) {

  return get(state, dataKey);

}

  function makePlainObj() {

  return {};

}

  function doSth({ a, b }) {

  console.log(b);

}

  const abc = { get: someFn };

Yes, second code is longer but at the same time much more readable. On first look it is visible what is a variable and what is a function. Also functions are hoisted when created as variables arrow functions are not.

JavaScript built-in functionality - be careful and read docs

2019-06-30T08:36:00.000+02:00

JavaScript has a lot of very useful built-in functions, like isNaN(), parseInt(), isFinite() and so on. Those functions are simple and single purpose pieces of code used very often.

The isNaN() function takes only one argument - the value which should be checked and returns a boolean - true or false. The only purpose is to check if the value is NaN - not a number value which could be returned by functions parsing numbers or by arithmetical operators. There is no other way to check if the value is NaN, so this function is very important.

There is also other 'is' function - isFinite() which determines whether the passed value is a finite number. Also very important as some of the arithmetic operators can return Infinity as a result of the operation and then isNaN() returns false. It also takes only one argument - the value to be checked and returns boolean.

Another useful single purpose function is parseInt(). It checks provided string if it could be the number and returns the number or NaN.

As there are more than one numeral systems, this function accepts the radix as a second argument. There is NO DEFAULT value for radix. If radix is falsy then the value itself is taken in consideration. Because we can use Number(string) to determine whether the string is a number or not parseInt() works in a slighty different way. In general it checks if the string starts with the number and returns this number till first non-numerical value.

parseInt('1', 10); // 1

parseInt('1abc', 10); // 1

parseInt('1f0', 10); // 1

parseInt('1f0', 16); // 496

The parseFloat() built-in function works the same way, except it accepts only one argument - the value, as floats are decimals, so the numeral system is already known.

Both parseX functions are documented that the value should be a string but any value type works properly.

Array.prototype.map is a built-in Array method. It takes 2 arguments: a callback function and this. Returns the brand new array with the same number of elements as the array it was called upon with values produced by the callback function. Simple and beautiful.

It is very important to remember that callback function also accepts arguments. All of them are optional, as the logic for creating values for the new array could not depend on existing ones, but still the callback accepts arguments. The first one is a current value. For [1,7,11] it will be 1, then 7 and then 11. The second argument is index of the value - for 1 it will be 0, for 7 - 1 and for 11 - 2. The third argument is the array map was called upon.

[1,7,11].map(() => null); // [null, null, null]

[1,7,11].map((value) => value * 2); // [2, 14, 22]

[1,7,11].map((value, index) => value * index); // [0, 7, 22]

So what will happen if we want to use parseFloat() as a callback for map?

['1','7','11'].map(parseFloat); // [1, 7, 11]

['1.1','7.9876','11.444442'].map(parseFloat); // [1.1, 7.9876, 11.444442]

Works like a charm!

So why parseInt() doesn't work as expected?

['1','7','11'].map(parseInt); // [1, NaN, 3]

What is a problem here? Let's test the values:

parseInt('1'); // 1

parseInt('7'); // 7

parseInt('11'); // 11

It should work...

Everytime if something doesn't work as expected checking docs can save hours of tests. The second argument in parseInt() is radix and what passes map() as a second parameter to the callback? An index of the value...

So testing the values should look like that:

parseInt('1', 0); // 1

For index 0 value is '1'. The radix is falsy, so the value itself is taken in consideration. If value doesn't start with 0 decimal system is used.

parseInt('7', 1); // NaN

For index 1 value is '7'. Proper radix value is between 2 and 36. Any value parsed with 1 as a radix is NaN.

parseInt('11', 2); // 3

For index 2 value is '11'. Radix 2 means binary: 2^0 + 2^1 = 3.

So everything works just as it should. To make the callback work as expected a small change is required:

['1','7','11'].map((value) => parseInt(value, 10)); // [1, 7, 11]

It is not the newbie mistake. Such problems happen for seasoned developers, as they are not machines and don't store not used information like the order or all arguments for built-in functions. Using documentation during development process doesn't mean developer has no experience or knowledge. Using docs is a very good habit and the best possible practice which saves hours of bug fixing.

All recruitment processes which check the knowledge of docs are leading to such problems. General understanding of the language, what happens under the hood and problem solving skills and strategies (for example how to debug such bug) are more important than memorizing the documentation.

Good to read:
operacje arytmetyczne w JS [polish]
parseInt() - JavaScript | MDN
Array.prototype.map() - JavaScript | MDN

OOP - polimorfizm

2019-03-04T10:44:00.000+01:00

Na wielu rozmowach kwalifikacyjnych, poza pytaniami o sam JavaScript padają pytania z ogólnej wiedzy o programowaniu. Czasami o best practices, czasami twarda wiedza, którą, jakby nie było trzeba znać, choć niektóre jej aspekty w JS są zupełnie nieużyteczne.

W zależności od doświadczenia osób pytających, można natrafić na przykład o pytanie czym jest polimorfizm i jak się go implementuje w JS. Polimorfizm łączy się z nadpisywaniem (override) metod obiektu i ich przeładowaniem (overload).

Obecnie (bo w podręcznikach z których ja się uczyłam, tego podziału nie było) dzieli się polimorfizm, ze względu na implementację, na dynamiczny i statyczny. W JS można zaimplementować polimorfizm dymamiczny i dość często się go stosuje (choć mogę się założyć, że większość programistów nie ma pojęcia, że to co robią ma taką nazwę). Jednak nie do końca on wygląda jak w definicji, choćby dlatego, że JS nie implementuje metod i klas abstrakcyjnych ani interfejsów. Do tego nie ma w nim twardego typowania. I bardzo dobrze, bo JS to nie Java czy C++. Jak ktoś nie umie żyć bez tych wynalazków, to jest mnostwo języków kompilowanych, które je oferują.

Zgodnie z definicją - polimorfizm zakłada, że obiekty różnych klas korzystają z z jednej konkretnej metody. Załóżmy, że mamy samolot, pyłek, ptaka i muchę. Te 4 obiekty mają jedną wspólną właściwość - latają. Nieważne jak, ale latają. Załóżmy, że mamy funkcję, która oczekuje na "latające" obiekty i jedyne co robi, to wywołuje na nich metodę lataj. W Javie, zazwyczaj się to implementuje za pośrednictwem interfejsu. Interfejs wymusza implementację konkretnych metod. W JS w komentarzach do prototypu lub klasy musimy napisać, że dana metoda musi być implementowana. Można również zaimplementować daną metodę by default, żeby rzucała wyjątek i przy dziedziczeniu nadpisywać ją tak, żeby przy używaniu jej w obiekcie, który umie latać nie było błędu

.

świadome operacje arytmetyczne na zmiennych w JS

2019-02-22T11:07:00.000+01:00

NaN

Każdy szanujący się programista JS wie, że jeśli chce wykonać operację arytmetyczną na dwóch zmiennych i co najmniej jedna z nich jest undefined lub obiektem, to wynikiem takiego działania będzie NaN.

1 + undefined // NaN

undefined / 2 // NaN

3 * {} // NaN

Tak samo będzie, jeśli operacja nie jest dodawaniem i żadnej z liczb nie da się sparsować do liczby (parseInt lub parseFloat).

1 - 'jeden' // NaN

'dwa' / 1 // NaN

Infinity

dzielenie przez 0 lub przez null daje już inny wynik - Infinity.

/ null // Infinity

/ 0 // Infinity

Wartości logiczne

Wartości logiczne (true i false) są traktowane w operacjach arytmetycznych jak... 1 i 0...

/ false // Infinity

/ true // 3

* false // 0

* true // 8

Niebezpieczny string

Dodawanie, w którym jedną z wartości jest string jest zamieniane na łączenie stringów. Druga wartość, nieważne, jaką ma oryginalną wartość, też jest transformowana do stringa

1 + '1' // "11"

1 + 'dwa' // "1dwa"

null + 'undefined' // "nullundefined"

ale, każda inna operacja arytmetyczna już działa inaczej

3 * '4' // 12

Tablice

Jeśli operacja arytmetyczna jest dodawaniem, to wszystko co między nawiasami kwadratowymi jest traktowane, jak string. Literalnie wszystko.

+ [3] // "23"

+ [3, 4] // "23,4"

Zagnieżdżanie struktur nic nie daje:

2 + [3, [4, 'aaa', true, null, { a: 1}]] // "23,4,aaa,true,,[object Object]"

Jeśli chcemy wykonać operację arytmetyczną inną niż dodawanie i co najmniej jedna ze zmniennych będzie tablicą, to sprawa się komplikuje. Jeśli tablica ma tylko jeden element i jego wartość jest typem prostym, to ta wartość jest brana pod uwagę w operacji arytmetycznej.

* [3] // 6

* ['4'] // 8

/ [0] // Infinity

['cztery'] * 2 // NaN

Przy operacji arytmetycznej innej niż dodawanie, jeśli tablica ma więcej elementów, to wynik jest zawsze NaN.

wyjątki:

[true] - 1 zwraca NaN chociaż true - 1 daje 0.
3 / [] zwraca Infinity choć [][0] daje undefined

Jak się chronić przed błędami?

Jeśli operacje arytmetyczne mają dużą wagę i muszą być wykonywane w JS jedynym działającym sposobem jest sprawdzanie typu zmiennych na których dokonujemy operacji.

Funkcje typu isFinite lub isNaN są niestety ułomne.

isFinite(true) // true

isNaN('') // false

Jeśli czekamy na liczby, które nie są wynikiem innej operacji arytmetycznej operator typeof załatwia sprawę

typeof true === 'number' // false

typeof undefined === 'number' // false

typeof null === 'number' // false

typeof '1' === 'number' // false

Jeśli natomiast wchodzące dane są wynikiem innych operacji arytmetycznych (czyli ich wartość moze być NaN), to trzeba pamiętać, że:

typeof NaN === 'number' // true

więc należy sprawdzić, czy to co wchodzi nie jest NaN

isNaN(NaN) // true

Domknięcie (closure), co to jest i z czym to się je?

2017-11-13T16:42:00.001+01:00

Na stronie MDN jest taka definicja A closure is the combination of a function and the lexical environment within which that function was declared. Pamiętam, jak przeczytałam ją pierwszy raz. Jak to mawiała moja mama "mózg mi stanął w poprzek". Każde słowo z osobna wydawało mi się co najmniej znajome, nawet jeśli nie w 100% zrozumiałe. Ale wszystkie do kupy powodowały, że mi się odechciewało.

To było wiele lat temu. Wiele lat, w trakcie których wciąż od nowa odkrywałam definicję domknięcia. Wczoraj robiłam proste zadanko, podpięcie pod kolumnę z danymi numerycznymi sortowania po liczbach a nie alfabetycznie (żeby 70 było mniejsze niż 320). Metodę napisałam dość banalną:

function sort(a, b, order) {

  return order === 'desc' ?

    parseFloat(a.balance) - parseFloat(b.balance) :

    parseFloat(b.balance) - parseFloat(a.balance);

};

Zadowolona z wyniku wzięłam się za testowanie. Już po chwili odkryłam, że poza kolumną opisaną w zadaniu, w tabeli jest więcej sortowalnych kolumn z danymi numerycznymi. Moja metoda, która świetnie spełniała swoje zadanie, dla jednej konkretnej kolumny, nie będzie działać, dla dowolnej innej kolumny, ponieważ sortuję wartości ukryte we właściwości balance (a.balance i b.balance). Dla innych kolumn potrzebowałam bardziej elastycznego rozwiązania.

Najłatwiej byłoby dodać nazwę kolumny, do argumentów funkcji. Ale interface funkcji przewidywał 3 konkretne argumenty: pierwszą wartość do sortowania, drugą wartość do sortowania oraz kierunek sortowania. I tu właśnie na pomoc przyszło mi domknięcie.

Ponieważ nie mogę przekazać do mojej funkcji nazwy właściwości, która przechowuje wartość do sortowania, muszę sprawić, żeby moja funkcja została stworzona w środowisku, które już zna tę nazwę. Ten przykład jasno pokazuje o co mi chodzi:

var name = 'Ania';

function greeting() {

  console.log('hello ' + name);

}

Wewnątrz funkcji greeting użyta jest zmienna name utworzona na zewnątrz funkcji. Tego typu działanie nazywa się scope, wszystko to co jest stworzone na zewnątrz funkcji jest widoczne wewnątrz, ale jeśli coś zostało stworzone wewnątrz (z użyciem któregoś ze słów kluczowych var, let lub const) nie jest widoczne na zewnątrz.

Czyli potrzebuję stworzyć środowisko, w którym znana będzie nazwa właściwości która przechowuje wartość do sortowania. Do tego środowiska będę przekazywać tę nazwę (w każdej kolumnie będę korzystać z innej właściwości):

function sortByPropName(propName) {}

Środowisko już jest, wnętrze funkcji będzie znało wartość przekazanego tam argumentu propName, jednak ja do tabeli mam przekazać funkcję, która bedzie przyjmować 3 konkretne argumenty.

function sortByPropName(propName) {

  return function(a, b, order) {}

}

Coś zaczyna z tego wychodzić. Mam już funkcję z potrzebnymi danymi, która zwraca inną funkcję, która oczekuje argumenty wyspecyfikowane w interfejsie. Teraz wystarczy dodać samą logikę, która uwzględnia przekazaną nazwę właściwości przechowujacej wartość do sortowania:

function sortByPropName(propName) {

  return function(a, b, order) {

    return order === 'desc' ?

      parseFloat(a[propName]) - parseFloat(b[propName]) :

      parseFloat(b[propName]) - parseFloat(a[propName]);

  }

}

Wygląda nieźle, prawda? To teraz wystarczy przekazać wynik sortByPropName jako funkcję sortujacą dla kolumny (kod jsx):

<TableHeaderColumn dataField="balance" dataFormat={signedNumber} dataSort sortFunc={sortByPropName('balance')}>Balance</TableHeaderColumn>

<TableHeaderColumn dataField="total_amount" dataFormat={signedNumber} dataSort sortFunc={sortByNumericValue('total_amount')}>Total amount</TableHeaderColumn>

Powyższy kod używa HTML wewnątrz JS, ale nie jak ciągu tekstowego, a bardziej jak obiektów XML. To co jest najważniejsze, to sortFunc, do której przekazuję WYNIK działania sortByPropName. sortFunc oczekuje na funkcję sortującą, która będzie przyjmowała 3 argumenty, czyli dokładnie to, co zwraca sortByPropName.

A gdzie w tym wszystkim jest domknięcie?

Dokładnie w tym, co zwraca sortByPropName. Wartość argumentu propName jest znana tylko wewnątrz funkcji, gdzie jest tworzona kolejna funkcja, która z tej wartości korzysta. Tę funkcję zwracamy na zewnątrz, gdzie jest przypisana do nazwy sortFunc i wykorzystana wewnątrz komponentu TableHeaderColumn. Pomimo, że sortFunc jest używana w zupełnie innym środowisku, ma dostęp do zmiennych ze środowiska, w którym została stworzona. To jest właśnie domknięcie.

Oferty szybkiej nauki programowania - przestroga

2017-08-22T13:58:00.000+02:00

Przeglądając maile natrafiłam na reklamę "coders lab", szkoły programowania. Jako, ze mój syn w sposób dość intensywny pracuje nad swoimi umiejętnościami w zakresie programowania w JavaScript z dużym zainteresowaniem przejrzałam stronę. Marketing mają niezły, ofertę wpisującą się w moje potrzeby, ale... diabeł tkwi w szczegółach.

Na studiach psychologicznych każdy student wcześniej czy później styka się z teorią krzywej uczenia się. Otóż ta teoria zakłada, że uczenie się jest PROCESEM i, jak każdy proces, wzmaga CZASU. Procesem składającym się z kilku faz. Najważniejsze są dwie: faza zdobywania nowej wiedzy i faza utrwalania (tzw plateau), kiedy krzywa jest zupełnie płaska, bo podczas utrwalania nie jesteśmy w stanie realnie nauczyć się niczego nowego, bo zdobywamy doświadczenie w nowo zdobytej wiedzy. Realnie krzywa ma kształt najbardziej zbliżony do schodów.

Znając teorie uczenia się, posuwamy się z Młodym, w nauce, pozornie żółwim tempem. Na tę chwilę wciąż jesteśmy na etapie czystego JS. Żadnych bibliotek, same zasady kierujące językiem, który poznaje. Typy danych i wbudowane obiekty mamy omówione. W ramach utrwalania tej wiedzy (faza plateau) Młody przerabia metody należące do prototypu różnych obiektów. I tak wiem, ze więcej nie zrobi, więc niech zdobywa doświadczenie w zakresie nowo poznanej wiedzy. Na tę chwilę trwa to już kilka tygodni, ale Młody ma wiedzę utrwalona. Pytania o to, jak działa scope czy jak zmienić kontekst w jakim wykonywana jest funkcja nie stanowią już dla niego wyzwania. Wiedza utrwaliła się.

Coders lab niestety hołduje zasadzie im szybciej tym lepiej. Jednym z interesujących mnie kursów z ich oferty jest "JavaScript developer: React". Kurs trwa 30 dni, w opisie stoi: "Kurs od podstaw odpowiedni dla tych, którzy wcześniej nie mieli styczności z programowaniem. Spodoba się osobom, które lubią zagadki logiczne i wolą skupić się na tym, jak coś działa niż na tym, jak wygląda[...]". Gdzieś w tym momencie przestałam rozumieć ofertę. Kurs oferuje naukę od podstaw, dla osób, które nigdy wcześniej nie miały styczności z programowaniem. Zgodnie z tytułem jest to kurs JavaScript rozszerzony o bibliotekę react. I trwa 30 dni. Nauka samego JavaScriptu to kilka miesięcy. React to też co najmniej kilka następnych tygodni. Bo przecież nie chodzi o samą znajomość składni czy używanych metod, a o zrozumienie, JAK i DLACZEGO to działa.

Hasłem przewodnim strony jest: "W Coders Lab zmieniamy edukację – w ciągu 3 miesięcy zostaniesz junior developerem". Junior developer nie musi mieć doświadczenia (stąd junior), nie musi znać zaawansowanych przypadków użycia, opracować rozwiązań skomplikowanych problemów. Junior MUSI rozumieć język i technologie, w których pracuje. Musi mieć podstawy umożliwiające mu rozwijanie wiedzy. React jest biblioteką napisaną w czystym JS. Jest tylko biblioteką, żeby react zadziałał, programista sam musi napisać kod, który skorzysta z reacta i wynikiem działania napisanego kodu będzie to, co programista chciał osiągnąć. React jest NARZĘDZIEM, którego używa się za pośrednictwem JavaScriptu, wiec żeby zostać junior developerem kandydat musi znać co najmniej bardzo dobrze JavaScript. Musi rozumieć jak działa interpreter (w przeglądarce i na serwerze - nodejs), jak JS buduje scope, czym jest kontekst. Musi znać i swobodnie używać metod obiektów wbudowanych (tablice, plain obiekty, Date, JSON). Musi widzieć dlaczego null jest specjalny i jak i kiedy go używać.

Powyższe zagadnienia są poruszane podczas rozmów kwalifikacyjnych, na stanowiska związane z JS. Bibliotek można szybko się nauczyć, a to są podstawy samego języka i są wymagane, żeby w ogóle zacząć pracę z bibliotekami.

W szczegółach kursu stoją technologie, które wchodzą w jego skład: HTML, CSS, JavaScript, jQuery, React, Gulp, Sass, RWD. Dobór trochę z Księżyca. Skoro kurs skupia się na logice a nie na prezentacji (jak jest opisane) to po co CSS, SASS i RWD? Po co komu jQuery do reacta? I co z tym wszystkim ma wspólnego gulp? I dlaczego nie ma webpacka i babel? I gdzie jest ES6/7/8?

Podsumowując. Te, i wszystkie podobne im szkolenia, muszą być dokładnie przejrzane przez kogoś, kto ma rozległą wiedzę z tematu. I cały czas należy pamiętać, że nie da się przyswoić większej ilości wiedzy w krótkim czasie, tak by ta wiedza została i służyła. Dlatego nauka w szkole trwa 12 lat a nie 4, mimo, ze dzieci uczą się szybciej. Zdobywanie wiedzy polega również na powtarzaniu i używaniu świeżo zdobytych umiejętności, wiec powracanie do wcześniej przerobionego materiału jest niezbędne. A to wszystko wymaga czasu.

example how and what for to use anonymous functions

2017-07-20T13:54:00.000+02:00

I wrote some short introduction to anonymous function here, some time ago. I wrote some simple example, but no example for real life situation. Today I decided to write down an example which could be very useful on technical interview.

This is a very simple code example. We have a loop and inside this loop we create an array of functions. Every of functions logs i on the console. Then in the end we are calling the first function from the array.

var i = 0;

var funcArray = [];

for (; i < 20; i += 2) {

  funcArray.push(function() {

    console.log('i inside function', i);

  };

});

funcArray[0]();

What we want to achieve here is, to have an array of functions, to use inside of function a value of i. We cannot use index of function in array, as i is incremented by 2. This implementation looks like the easiest solution for our need.

So what would display on console as a result of this line funcArray[0]();? We expect it to be 0, but unfortunately it is... 20... WHY??

The answer is very easy - the scope. The thing which makes JavaScript harder to learn. But is very logic. Scope exists on function level (ES5) or on block level (ES6+). In this case inside of loop the function which uses scope variable i is created. But the function is called outside the loop, where i has a value 20 (the first value, which didn't meet the requirement, so there was no more incrementation of i).

So it doesn't matter which index would be called, the i outside of loop is always equal the first value, which didn't pass the condiition. It means we have to change the way how we create the scope for our function. And here the anonymous function will come with help.

What should be done, then? We have to create immediately invoked anonymous function, which will create the scope and will return the function which will be assigned to array element. As a parameter to anonymous function i will be passed to make it available inside the scope.

funcArray.push(( // immediately invoked function

// anonymous function, which gets i from scope as index

  function (index) {

    return function() { // returns a our function

      console.log('index inside function', index);

    }

  }

)(i)); // i passed to immediately invoked function

pojęcie o zawodzie programisty wśród młodzieży

2017-07-12T15:37:00.001+02:00

Ostatnio na Facebook trafiłam na taką wypowiedź:

Chciałabym poznać opinię. Zaczęłam się interesować samorozwojem i stwierdziłam że branża it jest najwlasciwsza dla mnie. No i super rozeznanie w terenie co jak po co. Sprawdzałam wyksztalcenie, doświadczenie, wiek no wszystko co trzeba. Stwierdziłam że może maturę będę potrzebować więc dałam zapytanie na lokalnej grupie o maturę w uk jak tu zdac, warunki etc. Koleżanka która pomaga czasem innym w sprawach counsil/ revenue/ inne urzędy poradziła mi gdzie się udać i zabiła mnie pytaniem .... A nie lepiej dla Ciebie jakbyś się wzięła za fryzjerstwo czy paznokcie??? ... No kurde. Ja jej mówię o tym że chce programować strony komputerowe, pisać aplikację, generalnie branża no wiadomo, A ta wypala o ee paznokciach? Wlosach? Jak ja kurde miałam raz tipsy na rękach z 8 lat temu a o makijażu mam takie pojęcie że otynkowanie zaczynamy od fluidu pudru czy czegoś. Czy ja przesadzam czy mi się wydaje?

Napisałam panience, że niestety wykształcenie, jeśli nie ma odpowiedniego doświadczenia, jest niezbędne. W odpowiedzi dostałam link do holenderskiej oferty dla juniora frontendowca bez wymagań związanych z wykształceniem/doświadczeniem oraz taki tekst:

Zresztą nie będę wiedzieć jeśli nie sprobuje. Nikt i nic mnie nie zniechęci Bo "gdzieś tam potrzebują szkoly". Do firmy kolegi na stanowisko junior chcieli wziąć chłopaka po 4 tyg kursie za który sami zaplacili. Także ten. I już sama nie wiem, czy to powszechne podejście do zawodu programisty? Pracowałam już z ludźmi, dla których hasło "złożoność obliczeniowa" było zbędnym i wymyślonym na siłę problemem, nad którym nie warto się pochylić...

deadline'y...

2017-07-12T13:48:00.000+02:00

Pracuję sobie w firmie, takim prawie prawdziwym startupie. Prawie, bo mamy bogatą firmę-matkę, która łoży na nasze utrzymanie.

Piszemy aplikację WWW, backend dostarcza nam trzecia firma. Ja zajmuję się dość krytyczną częścią, bo zapisem danych wprowadzonych przez przyszłego klienta. Tworzę z mozołem DTO, które mam później pchnąć do backendu i odkrywam, że czegoś nie wiem.

Pierwsze pytanie do naszego konsultanta z firmy trzeciej, który siedzi z nami w open space. Pada odpowiedź - nie da się, już rozmawiałem z działem wdrożeniowym i tej funkcjonalności na razie nie ma.

Nogi się pode mną ugięły. Jak to nie ma? Toż to krytyczna funkcjonalność... Idź do XYZ i z nim pogadaj dostaję dobrą radę i konsultant zakłada słuchawki.

Idę, ale do S, naszego product ownera, i mówię, że mamy bloker. Już nawet się oparłam dodania, że to kolejny. No co ty nie powiesz krzywi się S i uderza do konsultanta, który odsyła go do XYZ.

S właśnie wrócił do mnie z wiadomością, że it is not in scope. A soft launch mamy w pierwszej połowie sierpnia, to ciekawie kiedy trafi do implementacji?

shallow and deep cloning objects in JavaScript

2016-07-01T14:29:00.000+02:00

As all values in JavaScript are pass by reference clonig is quite popular operation, to save original object. Unfortunately JavaScript does not provide any method to clone deeply the whole object.

ES6 provided some features, which could be useful, but still we have to remember, that this is only a shallow cloning.

The first solution is to use Object.assign:

const a = {

  b: {

    c: 1

  },

  z: 15

};

console.log(a); // {"b":{"c":1},"z":15}

let d = Object.assign({}, a);

d.b.c = 5;

d.z = 29;

console.log(a); // {"b":{"c":5},"z":15}

console.log(d); // {"b":{"c":5},"z":29}

The first console.log will display original a object, but in the second a.b.c value will be changed. Only a.z value will stay the same. This is what shallow cloning is. Only first level properties are cloned, rest is passed by reference.

So what would happen if d.b would be changed?

d.b = 118;

console.log(a); // {"b":{"c":5},"z":15}

console.log(d); // {"b":118,"z":29}

The same situation will happen if we will use spread operator:

const aa = {

  g: {

    h: 1

  },

  y: 15

};

console.log(aa); // {"g":{"h":1},"y":15}

let e = { ...aa };

e.g.h = 9;

e.y = 23;

console.log(aa); // {"g":{"h":9},"y":15}

So, how to make a deep cloning in JavaScript?

1. Use JSON stringify and parse

JSON.parse(JSON.stringify(object));

2. Write own method to do a deep clone of passed object.

ES6 - arrows

2015-09-03T07:37:00.002+02:00

The biggest difference between arrow and function is this value. Function uses its own this value, but arrow uses this value of the enclosing context.

Arrows are always anonymous functions!

Their syntax is slightly different than function expression:

(args) => { statements }

There could be few variations from this main version:

(arg1, arg2, argN) => { statements }

arg1 => { statements }

() => { statements }

(arg1, arg2, argN) => { statements }

(arg1, arg2, argN) => expression 

(arg1, arg2, argN) => ({ prop: val })

It means - prentheses are optional. Mostly if there is only one argument, or only one value to return, this could be simplified.
But there is a catch:

(arg1, arg2, argN) => expression 

but

(arg1, arg2, argN) => { return expression } 

Example:

(arg1, arg2) => arg1 * arg2 

(arg1, arg2) => { return arg1 * arg2 }

Both return the same, but we can write it in different way.

CSS - setting elements inline - part 1

2015-08-06T17:37:00.000+02:00

I bet that every frontend developer met the problem with setting many elements in line. As lately I had to solve this problem during recruitment processes I decided to share some thoughts and solution.

Example structure:

<div class="container">

    <div class="color green"></div>

    <div class="color yellow"></div>

    <div class="color blue"></div>

    <div class="color red"></div>

</div>

Let's color elements to see them clearly:

.color {

    width: 25%;

    display: inline-block;

    height: 100px;

    padding: 0;

    margin: 0;

}
.green {

    background-color: green;

}

.yellow {

    background-color: yellow;

}

.blue {

    background-color: blue;

}

.red {

    background-color: red;

}

So we have a container, which contains few elements, and looks like on this image:

So this is definitely not the goal. The inner elements should be in line and without gaps between. Why are there those gaps? The answer is display: inline-block;. Displaying inline takes all white spaces as a spaces... and spaces have width, so last element is going down, as there is no space for it. So how to remove gaps between elements?

change boxing-size:

div {

    boxing-size: border-box; 

}

Magento beginner - set up category and product

2015-08-05T12:33:00.002+02:00

After installation of Magento I faced a new problem. The menu in the beginning wasn't much helpful. So I'm creating short post about first steps with Magento

After logging in to admin area Dashbord is first visible page. If shop is live and people are buying stuff there are many useful information.

Before you start changing anything and ONLY if your shop is not live (online) go to System -> Cache Management. Click "Select All", from Action choose "Disable" and click "Submit". This will disable cache on your Magento. So all changes should be visible immediately. If you are working on live system, remember to refresh proper cache (NOT ALL) after making changes.

To manage categories choose Catalog -> Categories -> Manage Categories. In the left column you can see already existing categories. "Default category" is crested by default. For your needs create new Root Category by clicking button "Add Root Category". This root category would be a container for all category tree. It won't be displayed. In the first tab - "General information" fill name, set "Is Active" and "Include in Navigation Menu" to "Yes" and add all information you know would be needed. Click "Save Category" to save category record.

Then, click in the name your just created root category in the left column, to set a context, and then click button "Add Subcategory". It will show you the same form. Just be sure that on "General information" tab you filled "Name" and set "Is Active" and "Include in Navigation Menu" to "Yes".

So you should now to see our new subcategory in the menu. But if you click it it shows the page with information: "There are no products matching the selection.". So let's add some products then. In admin choose Catalog -> Manage Products. Click button "Add Product" and set product attributes (or use defaults). Click "Continue". Now you can see first tab. Obligatory information are mark with asterisk. Remember to set "Status" to "Enabled". Fill information in "General" and "Prices" tabs. Then click to "Inventory" tab. There set "Qty" to any number greater than 0 and "Stock Availability" to "In Stock". Next click to "Categories" tab to bound product with category.

Now you have to bound your shop name with category. In admin click System -> Manage Stores and for your Store Name (default is "Main Website Store") choose root category you just created.

Still in admin click in System -> Index Management and reindex whatever needs it. From now all your changes should be visible.

Codility lesson 2 - JavaScript solutions

2015-07-11T17:18:00.002+02:00

Lesson 2 - Counting Elements is already merged to the repo. It contains solutions for: FrogRiverOne,
PermCheck,
MissingInteger,
MaxCounters.

Codility Lesson 1 - JavaScript solutions

2015-07-06T11:40:00.000+02:00

Some time ago I started to play with Codility challenges. As JavaScript solutions are not so popular I decided to create a GitHub repository with my solutions.

Lesson 1 - Time complexity is already merged to the repo. It contains all three tasks: FrogJmp, PermMissingElem and TapeEquilibrium.

Arrays in JavaScript - how to create an array and fill it with numbers

2015-06-16T15:22:00.000+02:00

Most common way (and fastest if array would be big, please check jsperf.com/array-magic-vs-for):

var arr = [];

var max = 100;

for (var i = 0; i < max; i++) {

  arr.push(i);

}

But if array wouldn't be so big, we can use:

var max = 7;

var arr = Array.apply(null, {length: max}).map(Number.call, Number);

Of course very often we need some specific values. Fortunately map() gives us many options:

var max = 9;

var arr1 = Array.

   apply(null, {length: max}).

   map(function(item, index){ return ++index;});

var arr2 = Array.

   apply(null, {length: max}).

   map(Function.call, Math.random);

gdzie jest moje ciasteczko??

2014-11-28T14:52:00.000+01:00

Czasami nie da sie inaczej i trzeba sięgnąć po cookie. Tak właśnie było tym razem. Prosta sprawa, user wchodzi na nasz portal, to zapamiętujemy w cookie stronę od której zaczął przeglądanie naszej witryny. Napisałam sobie prosty kod, bez żadnych bibliotek (takie coś na start, żeby mieć kod do refaktoringu i testowania rozwiązania). Pod Chrome i FF działa jak złoto, pod natywną Androidową przeglądarką również.

Pokazałam rozwiazanie naszemu seniorowi. Rzucił oczkiem i podpowiedział kilka usprawnień, m.in. wykorzystanie ścieżki ze zmiennej globalnej a nie wpisywanie jej z palca (biorąc pod uwagę fakt, że to było tylko dla jednego adresu, to co różnica?). Poprawiłam, przetetsowałam. Działa.

Jako, że rozwiązanie ogólnie przeznaczone jest tylko pod przegladarki mobilne, nie przykładałam specjalnej wagi do testowania na desktopowych. Sprawdziłam na wszystkich przeglądarkach zainstalowanych na moim HTC M8 - natywna, Chrome i FF. Działa jak złoto. Chciałam sprawdzaić pod Operą mini, ale złosliwa małpa nie chciała się łączyć z serwerem dev. Poszłam po inny telefon, to działu mobilnego. Tam na jakimś Samsungu postawili mi Operę mini, która też odmówiła współpracy. Olałam sprawę i wzięłam się za testowanie pod zwykłą Operą.

No i nie działa :(. Błędem nie rzuca, ale i nie działa. No pięknie... Jeszcze koleżanka, z którą robiłam pair programming sprawdziła na swoim WindowsPhone pod IE i też nie działa. No ki diabeł? Zostawiłam jak jest. Następnego dnia rano usiadłam do debuggowania. Modern.IE stoi na Virtualboxie, wiec wzięłam IE10 na tapetę i zaczynam debuggować. Linijka po linijce... i co? I jajo... cookie sie nie zapisuje. No jak to się nie zapisuje? - prowadzę monolog w duszy debuggując dalej. Krok po kroku testując różne ustawienia doszłam dlaczego to cookie się nie zapisuje...

Składnia jest banalnie prosta: document.cookie("nazwa=wartość");. Można ją rozszerzyć o datę ważności cookie: document.cookie("nazwa=wartość; expire=data") albo o ścieżkę dla której cookie jest ważne: document.cookie("nazwa=wartość; expire=data; path=ścieżka"). I to właśnie ta ścieżka była przyczyną problemów dla Opery i IE. Używałam ścieżki pełnej, branej ze zmiennej globalnej: http://server-name.domain.com/costam/ co okazało się zupełnie niestrawne dla tych dwóch przeglądarek. Obie wymagają podania ścieżki zaczynając od /, czyli bez domeny.

Oczywiście jaśnie oświecona Opera, ani tym bardziej IE nie dały nawet pół błędu, nic. Po prostu nie zapisywały cookie...

CSS Flexible box layout module - part 7 - Conclusions and links

2014-02-10T14:37:00.001+01:00

Conclusions

CSS flexible box layout module is an amazing tool to make web pages flexible without any calculations. It makes our containers just fit to the available space and act as we want them on different screen sizes. It will take some time as browser vendors will implement all features and we could use it without vendor prefixes. But it is worthy to wait and read about flexbox, to find callbacks for older browsers to make it ready to use as fast as possible.

Links

It doesn't make any sense to copy information from some useful sites. Please check this links and enjoy all opportunities flexbox provides!

http://www.w3.org/TR/css3-flexbox/ (official specification)

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes

http://umaar.github.io/css-flexbox-demo/

http://caniuse.com/flexbox (which browsers support flexbox)

http://css-tricks.com/using-flexbox/ (vendor prefixes tables)

CSS Flexible box layout module - part 6 - Setting elements in more than one line

2014-02-10T14:34:00.001+01:00

Not known amount of flex items not always can be solved with flex-grow property. Sometimes there are too many items to get fit on one line. Then we can put them in many lines using flow-wrap property on flex container.

flow-wrap: nowrap; /* forces flex container to display all flex items in one line */

flow-wrap: wrap; /* allows flex container to display flex items in multiple lines, direction is defined by flex-direction */

flow-wrap: wrap-reverse; /* the same as “wrap”, opposite to direction defined by flex-direction */

So if we have style definitions like:

section {

  border: 1px solid #000000;

  display: flex;

  flex-wrap: wrap;

}

div {

  background-color: #C0C0C0;

  margin: 7px;

  flex-grow: 1;

}

The result will change, depending on browser window width:

1. For section has a 760px of width:

2. section has a 480px of a width:

CSS Flexible box layout module - part 5 - Changing order of elements

2014-02-10T14:10:00.002+01:00

On interactive pages it is common that DOM elements move, disappear or appear as a result of user's behavior. CSS3 provides very useful property order, to ordering elements inside flex container. By default all flex items belong to one ordinal group – 0. If we want to change place of specific flex item, easiest way is to change its ordinal group number. Value of this property is an integer and represents the ordinal group the flex item has been assigned. Items are ordered by ascending ordinal group number.

So if we have 6 flex items inside flex container and define order: 1; for the first one, than it will be displayed in the end of flex container. Elements that belong to the same ordinal group are displaying in the order from HTML.

CSS Flexible box layout module - part 4 - Altering flex items dimensions to fill the available space

2014-02-10T14:04:00.001+01:00

We have a flex container and inside we have not known amount of flex items, and we want them to fill available space. For this we have to use flex-grow property on flex items.

flex-grow: x;

How flex-grow property works? Browser sums values of flex-grow property in flex items and then alter flex items width to be equal x/sum of all available space. For example, if we have 3 flex items, and every has flex-grow: 1;, it means that every flex element takes 1/3 of available space.

This is an example, where first flex item has flex-grow: 1; second one has flex-grow:3 and last one has flex-grow: 2;

But there is more properties related to filling available space. We can define flex-shrink property with number as a value and flex-basis with a proper width as a value.

flex-shrink: x;

flex-basis: Xpx;

flex-basis defines the ideal width of flex item, together with flex-grow define how flex items should look like on different screens. If flex-basis is defined flex-grow define which part of available space will take flex item.

Example 1.1

We have 499px width flex container with 2 flex items (A and B). Both flex items have 200px width, but A has flex-grow: 1; and B has flex-grow: 2;. So we have 400px reserved for width of both flex items and 99px of extra available space. It means that all available space we have – 99px – we need to divide on 3 parts (because we sum flex-grow of both elements, 1 + 2 = 3) and element A gets 1/3 * 99 = 33px and B: 2/3 * 99 = 66px. So in browser we will see element A width 233px and element B width 266px;.

Example 1.2

But what happens if there is no available space? If there is no available space flex-grow is not used. Assuming, both items (A and B) have the same value of flex-basis: 200px;, and flex container has width: 300px;. There is no space for two flex items, so their widths will be recalculated based on given flex-basis. Our flex items are the same, so every will take ½ of flex container width.

Example 1.3

But what if we have flex items with different value of flex-basis property? For example A has 200px and B 150px. Flex container still has 300px of width. Both flex items need to be squeezed to fit the available spaces. Browser gets a factor dividing available space (300px) on counted from flex items flex-basis properties (350px). Then uses this factor (~0.85) to calculate new widths of flex items. Flex item A will have 171px and B will have 129px.

flex-shrink defines, how flex item shrinks, if there is no available space, in comparison to other flex items in flex container.

Example 1.4

Assuming, we have flex container 300px width and inside are 2 flex items (A and B), and every has flex-basis equal 200px. Item A has flex-shrink: 1; and B has flex-shrink: 2;. Here it is a little more complicated. First browser calculates how much more space is needed (400px-300px=100px), then divides it on sum flex-shrink values of all flex items (100/3 = 33.3). Then calculates what amount should subtract from given flex-basis value using flex-shrink. For flex item A it will be 33.3x1 (flex-shrink: 1;), so item A will have 167px of width. Flex item B will have 133px, (200px – (33.3px x2)).

Example 1.5

Let's mix examples and take hardest version. So we have flex container 300px width. Inside it contains 2 flex items (A and B). Item A has flex-basis: 200px; and flex-shrink: 1; item B has flex-basis: 150px; and flex-shrink: 2;. So what is a result? Item A is 180px width and item B 120px. Why? Because item B shrinks more than item A. In this case, item A was squeezed by 10% and item B by 20%, 2 times more, just as flex-shrink property was set.

szkola, tornister i dziecko

2013-10-07T16:32:00.000+02:00

Tak ostatnio widze, ze znow media sie obudzily, ze tornistry ciezkie. Ja pamietam swoj tornister jako mega ciezki, zwlaszcza w liceum, gdzie objetosc ksiazek byla calkiem spora, przez co waga tez niczego sobie. Do tego atlasy, zeszyty, czesto zbiory zadan itp. Majac 7-8 roznych przedmiotow w ciagu dnia - tornister pekal w szwach. Koszty tez nie male.

Koszty ksiazek do obecnej pierwszej klasy technikum to wydatek rzedu 500 pln, do tego lista potrzebnych narzedzi na praktyki (klasa o profilu fryzjerskim) kolejne 500 pln. koszt takiej wyprawki - 1k pln. Masakra.

Moja najmlodsza corka wlasnie rozpoczela przygode ze szkola (w Niemczech, gdzie mieszkamy). Koszt wyprawki (podreczniki, cwiczenia i zeszyty) na nastepne 2 lata - 90 euro. Koszt wszystkich potrzebnych dodatkowych pomocy (tez na 2 lata) - czyli plastelina, rozne rodzaje kredek, bloki roznej wielkosci, olowki, dlugopisy, papier kolorowy, jakies folie i naklejki - 60 euro. W sumie 150 euro, ktore zaplacilismy naszej nauczycielce, bo to ona zajmuje sie zakupem podrecznikow (w ilosci wiekszej niz ilosc dzieci w klasie, bo wiadomo, dzieci gubia niszcza itp). Dodam, ze limit wynosi 100 euro/dziecko/rok - limit ten dotyczy kwoty, jaka rodzice wydaja na ksiazki dla swoich pociech.

Jak to wyglada w praktyce? W pierwszej klasie dzieci maja zadawane niewiele o ile w ogole. Ksiazki sa przeznaczone na mniej wiecej 2-3 miesiace uzywania, wiec sa cieniutkie, maja miekkie okladki. WSZYSTKIE ksiazki i zeszyty zostaja w szkole. Jesli dziecko nie odrobi lekcji w swietlicy, to bierze potrzebne materialy do domu, jesli odrobi ksiazka/zeszyt/cwiczenia z odrobiona praca domowa trafia w odpowiednie miejsce w sali lekcyjnej.

Tak na prawde ja niewiele wiem o tym, jak i czego uczy sie moje dziecko. Moge tylko powiedziec, ze przed rozpoczeciem roku szkolnego (co nastapilo 10 sierpnia) Mala umiala czytac powoli i sylabizujac po polsku. Miala problem z niemieckimi regulami, wiec niechetnie probowala czytac niemieckie teksty, mimo, ze mowi plynnie po niemiecku. Na chwile obecna (po 2 miesiacach nauki) pisze i czyta po niemiecku. Wciaz miesza litery (male i duze), ale na tym etapie nacisk jest kladziony na umiejetnosc napisania i przeczytania, styl nie jest wazny, zasady ortograficzne tez nie. Wazne, ze dziecko moze sie komunikowac w formie pisemnej.

Dzieciaki maja taki specjalny zeszyt, gdzie rysuja np co robili w weekend, albo wyrazaja na ryskunku, czy im sie podobala ksiazka, w ktorej ostatnio pracowali. Dzieci chetnie dodaja opisy do swoich tekstow. Nauczycielka ma ich 23 w klasie i sprawdza kazda taka prace z osobna, pisze swoje komentarze (pieknymi wyraznymi, pisanymi literkami, ktorych zazdroszcza jej wszystkie dzieci). Czasami poprawia pisownie, ale nie kreslac tekstow dziecka, ale dodajac swoj komentarz i proszac by dziecko napisalo to samo obok, ale juz poprawnie.

A wracajac do tornistra. Mloda ma wielki, wypasiony i wymarzony tornister. Wazy on cos kolo 2-3kg. Razem z zawartoscia (piornik, teczka i zeszyt do komunikacji z nauczycielami, kanapki i butla z woda) jakies 4kg. Mloda musi go wniesc na 2 pietro po schodach (ma klase na 2 pietrze), po lekcjach musi go przeniesc do swietlicy (na tym samym pietrze, moze 15 metrow od klasy), jesli odbieram ja po 16:30 to musi go zniesc na parter do drugiej sali. Zaprowadzajac ja do szkoly lub odbierajac zawsze sama niose plecak. Stanowczy plus z lekcji w jednej sali.

Starsze dzieci tez maja ksiazki w szkole. Szkola sama sponsoruje ksiazki, ktore nie mieszcza sie w ustawowych 100 euro (czyli zasadnicza wiekszosc). W praktyce jest kilka sztuk w bibliotece i nauczyciele kseruja odpowiednie rozdzialy. Do kazdego przedmiotu jest miekki segregator, do ktorego wpina sie xerowki + kartki do notatek. Po zakonczeniu dzialu xerowki i zapisane kartki zostawia sie w domu, a do szkoly nosi sie pusty segregator przygotowany na nowe xerowki. W ten spsob plecaki sa lekkie.

Uwazam to za bardzo dobre rozwiazania. Podoba mi sie wersja z kilkoma cienkimi ksiazkami na rok, bo jesli nawet trzeba cos odrobic w domu, to ciezar takiej ksiazki jest niewielki. Podobaja mi sie lekcje w jednym miejscu (wyjatkiem jest religia i gimnastyka, ale i tak dzieci zostawiaja tornistry w swojej klasie). Podoba mi sie pomysl z xerowaniem potrzebnych materialow i noszeniem do szkoly tego, co jest w chwili obecnej potrzebne, a nie calej wielkiej ksiazki do tego oprawionej w twarda okladke. Podoba mi sie system zapewniajacy miejsce do odrabiania lekcji i fachowa opieke w swietlicy. Dodam, ze panie pracujace w swietlicy sa oplacane przez miasto, a nie przez szkole. Podoba mi sie praca z uczniem w szkole, gdzie odrabianie prac domowych jest sporadyczne i sluzy glownie pochwaleniu sie rodzicom co dziecko juz umie.