Chcete vědět, co se odehrálo ve světě techniky za poslední měsíc? Nebo si popovídat o tom, co zrovna bastlíte? Pak dorazte na prosincovou Virtuální Bastlírnu s mikrofonem a kamerou, nalijte si něco k pití a ponořte se s strahovskými bastlíři do diskuze u virtuálního piva o technice i všem možném okolo. O čem budou tentokrát strahováci referovat? Téměř každý už si všiml významného zdražení RAM a SSD, jsou zde ale i příjemnější zprávy. Průša uvádí
… více »Národní úřad pro kybernetickou a informační bezpečnost (NÚKIB) podporuje vyjádření partnerů ze Spojeného království, kteří upozorňují na škodlivé aktivity společností Anxun Information Technology (též „I-S00N“) (pdf) a Beijing Integrity Technology (též „Integrity Tech“) působících v kyberprostoru a sídlících v Čínské lidové republice (ČLR). Tyto společnosti jsou součástí komplexního ekosystému soukromých subjektů v ČLR,
… více »Společnost Pebble představila (YouTube) prsten s tlačítkem a mikrofonem Pebble Index 01 pro rychlé nahrávání hlasových poznámek. Prsten lze předobjednat za 75 dolarů.
Společnost JetBrains v listopadu 2021 představila nové IDE s názvem Fleet. Tento týden oznámila jeho konec. Od 22. prosince 2025 již nebude možné Fleet stáhnout.
Byl vydán Mozilla Firefox 146.0. Přehled novinek v poznámkách k vydání a poznámkách k vydání pro vývojáře. Řešeny jsou rovněž bezpečnostní chyby. Nový Firefox 146 bude brzy k dispozici také na Flathubu a Snapcraftu.
Před rokem převzala Digitální a informační agentura (DIA) vlastnictví a provoz jednotné státní domény gov.cz. Nyní spustila samoobslužný portál, který umožňuje orgánům veřejné moci snadno registrovat nové domény státní správy pod doménu gov.cz nebo spravovat ty stávající. Proces nové registrace, který dříve trval 30 dní, se nyní zkrátil na několik minut.
IBM kupuje za 11 miliard USD (229,1 miliardy Kč) firmu Confluent zabývající se datovou infrastrukturou. Posílí tak svoji nabídku cloudových služeb a využije růstu poptávky po těchto službách, který je poháněný umělou inteligencí.
Nejvyšší správní soud (NSS) podruhé zrušil pokutu za únik zákaznických údajů z e-shopu Mall.cz. Incidentem se musí znovu zabývat Úřad pro ochranu osobních údajů (ÚOOÚ). Samotný únik ještě neznamená, že správce dat porušil svou povinnost zajistit jejich bezpečnost, plyne z rozsudku dočasně zpřístupněného na úřední desce. Úřad musí vždy posoudit, zda byla přijatá opatření přiměřená povaze rizik, stavu techniky a nákladům.
Organizace Free Software Foundation Europe (FSFE) zrušila svůj účet na 𝕏 (Twitter) s odůvodněním: "To, co mělo být původně místem pro dialog a výměnu informací, se proměnilo v centralizovanou arénu nepřátelství, dezinformací a ziskem motivovaného řízení, což je daleko od ideálů svobody, za nimiž stojíme". FSFE je aktivní na Mastodonu.
Paramount nabízí za celý Warner Bros. Discovery 30 USD na akcii, tj. celkově o 18 miliard USD více než nabízí Netflix. V hotovosti.
Odkazy
Náš kód sa bude skladať z veľmi jednoduchého HTML formulára. Kód vyzerá nasledovne:
<!DOCTYPE html> <html> <head> <title>Form</title> <meta charset="utf-8" /> </head> <body> <form action="index.html" method="post" id="ajaxform" class="ajax"> <p><input type="text" class="color" name="color" value="#00ff00" /></p> <p><input type="submit" name="set-default" value="Set default" /> <input type="submit" value="Save" /></p> </form> </body> </html>
Po odoslaní formulára prehliadač posiela nasledujúce dáta:
color: #00ff00
Pri kliknutí na "Set default" sa pošle o jedno pole viacej:
color: #00ff00 set-default: Set default
Aby bol náš kód pekne znovupoužiteľný budeme ho písať ako jQuery modul. Na začiatok si určíme API. To bude fakt úplne jednoduché (spôsob použitia hovorí sám za seba):
AbcLinuxu.cz
ITBiz.cz
HDmag.cz
AbcPráce.cz
jQuery(function($) {
$('form.ajax').ajaxsubmit();
});
Nasledujúci kód je samotný jQuery modul. Samotný kód je jednoduchý a jediný skutočne nelogický riadok je posledný riadok s kódom (zátvorky nerátam).
Skript odchytáva submit event z formulára. Dáta formulára serializuje a pomocou post metódy pošle serveru. Celý HTML dokument, ktorý server vráti vloží do divu a z neho vyberie obsah formulára, ktorý vloží do vnútra formulára. Vloženie dokumentu do elementu div je potrebné pretože jQuery nevie priamo pracovať s dátami, ktoré obsahujú elementy ako head, title …
jQuery.fn.extend({
ajaxsubmit: function() {
return this.each(function() {
var self = $(this);
var elementId = self.attr('id');
var action = self.attr('action');
self.on('submit', function(event) {
event.preventDefault();
var data = self.serialize();
$.post(action, data).done(function(response) {
var $response = $(response);
$("#" + elementId).html($('<div/>').append(response).find("#" + elementId).html());
});
});
});
}
});
Po odoslaní formulára prehliadač pošle vždy (bez ohľadu na tlačidlo čo je samozrejme chybné) nasledujúce dáta:
color: #00ff00
Pusitme sa teda do opravy kódu tak, aby nám skript odosielal aj hodnotu tlačidla, na ktoré užívateľ klikol. To dosiahneme zaregistrovaním click eventu na submit tlačidlo. Kód vyzerá nasledovne:
jQuery.fn.extend({
ajaxsubmit: function() {
return this.each(function() {
var self = $(this);
var elementId = self.attr('id');
var action = self.attr('action');
self.on('submit', function(event) {
event.preventDefault();
var data = self.serialize();
$.post(action, data).done(function(response) {
var $response = $(response);
$("#" + elementId).html($('<div/>').append(response).find("#" + elementId).html());
});
});
$('input[type=submit]', self).on('click', function(event) {
event.preventDefault();
var data = self.serialize();
if ($(event.target).attr('name')) {
data += '&' + encodeURIComponent($(event.target).attr('name')) + '=' + encodeURIComponent($(event.target).attr('value'));
}
$.post(action, data).done(function(response) {
var $response = $(response);
$("#" + elementId).html($('<div/>').append(response).find("#" + elementId).html());
});
});
});
}
});
Po odoslaní formulára prehliadač posiela nasledujúce dáta:
color: #00ff00
Pri kliknutí na "Set default" sa pri prvom pokuse odošle:
color: #00ff00 set-default: Set default
Posledný kód mal jeden závažný nedostatok. Po načítaní DOM nami nabindované udalosti neplatia na nové elementy. Takže napriek tomu, že odosielanie formulára naďalej fungovalo (pretože ním sme nemanipulovali) odosielanie tlačidla prestalo fungovať (a ako na potvoru sa problém prejaví až pri druhom pokuse). Krásne odhaliteľná chyba, že ;) Poďme tento príklad teda doraziť do funkčného stavu.
jQuery.fn.extend({
ajaxsubmit: function() {
return this.each(function() {
var self = $(this);
var elementId = self.attr('id');
var action = self.attr('action');
var inputClickCallback = function(event) {
event.preventDefault();
var data = self.serialize();
if ($(event.target).attr('name')) {
data += '&' + encodeURIComponent($(event.target).attr('name')) + '=' + encodeURIComponent($(event.target).attr('value'));
}
$.post(action, data).done(function(response) {
var $response = $(response);
$("#" + elementId).html($('<div/>').append(response).find("#" + elementId).html());
$('input[type=submit]', self).on('click', inputClickCallback);
});
}
self.on('submit', function(event) {
event.preventDefault();
var data = self.serialize();
$.post(action, data).done(function(response) {
var $response = $(response);
$("#" + elementId).html($('<div/>').append(response).find("#" + elementId).html());
});
});
$('input[type=submit]', self).on('click', inputClickCallback);
});
}
});
Náš formulár je konečne funkčný, niečo tomu však chýba. Ruku na srdce, koľko % návštevníkov zvládne zadať farbu v hex kódoch? Na výber farby teda pridáme color picker. Po pridaní príslušných skriptov postačí tento kód:
$("input.color").spectrum({ clickoutFiresChange: true });
A je to. Alebo nie?
Samozrejme náš príklad zase nie je úplne funkčný. Odosielanie formulára totiž kradne click event. Ak colorpicker nastavený na aktualizáciu pri kliknutí mimo (clickoutFiresChange: true) odchytením kliknutia na submit jednoducho ukradneme pluginu udalosť a namiesto novej farby odošle starú.
Odosielanie sa samozrejme dá ohackovať tak, aby +/- fungovalo, ale v tomto blogu mi nešlo o to ukázať riešenie na tento konkrétny prípad. Skôr by ma zaujímalo, či je nejako jednoducho možné vyhnúť sa týmto problémom. Nechcem predsa od jQuery nič zložité, len jemne vylepšiť web, ktorý je stavaný tak, aby bol dostupný všetkým bez ohľadu na to, či používajú lynx, čítačku pre nevidiacich, alebo moderný prehliadač.
PS: dnešné nadpisy sú z môjho obľúbeného webu.
Tiskni
Sdílej:
18.11.2013 19:34
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
18.11.2013 20:25
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
19.11.2013 01:46
Josef Kufner | skóre: 70
19.11.2013 08:05
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Áno je to jedno z riešení. To moje riešenie používa hack v podobe vloženia celého webu do divu len preto, lebo knižnica na manipuláciu s DOM nevie manipulovať s celým vráteným dokumentom. Ak toto nedokáže knižnica priamo na to určená tak si dovolím tvrdiť, že tá knižnica je jednoducho vadná. Odosielanie formulára do skrytého iframu je hack a myslím, že vydrží kratšie než hack s divom. V poslednej dobe prehliadače zvyknú zvyšovať bezpečnosť medzi rámcami, takže neviem dokedy sa bude dať odchytiť onload.
Minule som dostal do rúk optimalizáciu jedného webu. Bol to web zo šablóny s veľkosťou asi 10MB (načítavanie okolo minúty). V hlavičke napchaných asi 30 jquery pluginov. Tak si teda hovorím, že tam dám on demand loading obrázkov počas scrollovania. Hodím teda jquery plugin na to a zistím, že bez nejakého hacku funguje len vtedy ak scrolluje celý web (nie div s overflowom auto). No nič, hodím teda hack a bum rozhodilo filtrovanie pretože filtre rátali s tým, že všetky obrázky budú načítané. Tak som teda trochu ohackoval filtre aby si aktualizovali rozmery pri onloade na obrázkoch. Bolo to brutálne pomalé, preblikával celý web ... Takto som sa ešte pár dní hral kým som to celé zahodil. Prácu s jQuery by som prirovnal k prechádzke mínovým poľom. Jednoducho si myslíte, že ste už len krôčik od toho aby ste sa z toho dostali a zrazu vaše vnútornosti lietajú všade po okolí.
Aby som nebol zlý len na jQuery ... skúšal som teda aj iné knižnice. Jedna z vecí ktoré mi fakt u jQuery chýbajú sú bindingy ... ktoré som si myslel, že elegantne rieši AngularJS. A tak už 2 dni v práci riešim dynamický obsah formulára podľa informácii o produkte. Na prvý pohľad vyzerá obyčajný select s výberom produktov ako jednoduchá záležitosť. Angular má priamo možnosť urobiť options nad zoznamom objektov, vybrať ktorá property je label a ktorá je value ... lenže ak má byť value celý objekt tak je správanie totálne rozbité. Javascript totiž 2 rovnaké objekty nepovažuje za rovnaké a porovnáva referencie (dosť blbé na vysokoúrovňový jazyk). Takže aj keď mi z jedného API vylezie pekný zoznam produktov, z druhého vybraný produkt a sú rovnaké angular mi jednoducho stále vypisuje chybu že nemám vybraný produkt pretože mi objekty pri porovnaní == vrátia false (popis hacku na initial selection, ktorý je v mojom prípade neaplikovateľný). Jednoduché a rýchle riešenie spočíva v zaháknutí sa na načítanie zoznamu produktov a na načítanie objednávky (keďže sú doťahované paralelne a neviem ktorá bude skôr) a ich ohackovanie aby mali aj rovnakú referenciu. Možno sa to dá aj inak, ale AngularJS sa ešte len učím (musím keďže nám z práce odišiel expert na js a všetko teda zostalo na mne, doteraz som riešil len serverové veci).
Teraz idem s bývalým kolegom robiť totálnu integráciu angularu s djangom (tastypie na rest + môj zatiaľ nezverejnený html api browser). Máme v pláne celý kód dať open source (zrejme BSD licencia). AngularJS je pekná knižnica, ale brutálne trpí tým, že je postavená nad js. Ja sa stále snažím prísť na to ako ľudia dokážu pracovať s js, ale zatiaľ ma to stálo len veľa nervov a vytrhaných vlasov.
Vloženie dokumentu do elementu div je potrebné pretože jQuery nevie priamo pracovať s dátami, ktoré obsahujú elementy ako head, title …Coze ??
19.11.2013 19:03
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
To je odkaz na aktuálny dokument, nie parsovaný dokument vrátený z xhr.
Ak ten divný kód nahradím:
$("#" + elementId).html($("#" + elementId, $response).html());
Tak mi vnútorné volanie $("#" + elementId, $response).html() na validnom dokumente vráti undefined čo mi pri volaní .html(...) funguje podobne ako volanie bez argumentov tj. vráti aktuálne html namiesto modifikácie. Asi pol hodiny som strávil hľadaním toho prečo sa mi obsah divu neaktualizuje .... i keď mám taký pocit, že vo firefoxe to išlo.
19.11.2013 22:30
Bedňa | skóre: 34
| blog: Žumpa
| Horňany
20.11.2013 07:34
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Mňa nezaujímajú argumenty. V blogu som riešil úplne jednoduchý problém - odosielanie formulára javascriptom tak, aby som ponechal funkčnosť aj s vypnutým js a nemusel som používať nejaký extra kód na serverovej časti. V prvom komentári (keďže k blogu sa to nedá) som priložil zdrojové kódy a celé som to písal preto, aby sa niekto chytil zdrojákov a ukázal ako sa to má robiť správne (konkrétne som dúfal v úpravu posledného príkladu). To riešenie, ktoré som ukázal ja je nefunkčné, náchylné na chyby, bez ošetrenia prakticky čohokoľvek ... jednoducho typický js kód, ktorým je posiaty celý web. Keďže sa tu pohybuje mnoho mnoho programátorov lepších ako ja hodil som do blogu čo mi vadí pretože chcem vedieť ako sa to rieši správne.
20.11.2013 08:46
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
Ja som čo sa týka vývoja js buď úplne nový alebo úplne mimo, ťažko povedať. Pred pár dňami nás v práci opustil jediný expert na javascript, takže som tieto veci musel prebrať ja. Primárne som vývojár v python (~50%) potom C++ (~20%), QML (~15%), zvyšok tvoria len marginálne veci typu lisp, haskell. Prakticky za všetkými jazykmi vidím nejakú logiku ale keď vidím v js pomocou jquery spúšťať metódu spôsobom $("selektor").názov_pluginu("názov_pluginu").metóda() tak si začnem o js niečo škaredé myslieť. Teraz sa hrabem rôznymi materiálmi, chápem, že js je skôr funkcionálny jazyk s namontovanou syntaxou podobnou c / jave čo je podľa mňa absolútne nešťastné riešenie. Chápem, že asi musím zmeniť nejako myslenie (niečo ako prechod C++ - haskell) ale zatiaľ som nenašiel nejakú magickú formulu kedy som si povedal, že viem s tým robiť a jazyk mi neprekáža v tom čo chcem urobiť.
20.11.2013 11:33
Josef Kufner | skóre: 70
$('...').něco().něco()), je to jen úspornější způsob, jak zapsat array map a foreach.
20.11.2013 12:37
mirec | skóre: 32
| blog: mirecove_dristy
| Poprad
JS nie je funkcionálny jazyk, len má akú-takú podporu funkcionálneho programovania. Keď som sa naposledy o to zaujímal zamietli prijatie tail rekurzie. A k tomu zápisu myslím, že som minule videl $("datepicker").pickadate("pickadate").get("yyyy-mm-dd").
20.11.2013 21:08
Bedňa | skóre: 34
| blog: Žumpa
| Horňany
