AI na vlastním počítači

V posledních letech zažívá umělá inteligence (AI) obrovský rozmach. Od chatbotů po generativní nástroje, AI se dostala do každodenního života i práce, a to s velkým přínosem pro jednotlivce i firmy. Mnozí se proto zajímají, jak si tyto technologie přinést blíž k sobě – třeba přímo na svůj počítač. Tady přichází na scénu LM Studio, které umožňuje snadné spuštění AI modelů lokálně, tedy přímo na vašem zařízení, bez potřeby cloudových služeb.

LM Studio bylo uvedeno na trh v roce 2024 a jeho hlavním cílem je zpřístupnit AI technologie každému, kdo má dostatečný hardware. Díky podpoře open-source modelů, jako jsou Llama, Mistral nebo StarCoder, si můžete vybrat, jaký model se nejlépe hodí pro vaše účely, ať už jde o programování, zpracování přirozeného jazyka nebo jiné úlohy.

Jak si LM Studio spustit na vlastním počítači? Nejdřív je potřeba si stáhnout aplikaci pro Windows, macOS nebo Linux přímo ze stránek LM Studia. Poté můžete přejít do záložky Discover a vybrat model z nabídky nebo si najít konkrétní model podle názvu. Následně model načtete do paměti a můžete začít s ním komunikovat v rozhraní Chat.

Je ale potřeba mít na paměti, že práce s AI vyžaduje určitý hardware. Minimální požadavky zahrnují Mac s procesory M1/M2/M3 nebo PC s podporou instrukcí AVX2, což znamená, že méně výkonná zařízení mohou mít s těmito modely problémy. Doporučuje se také mít alespoň 16 GB RAM, zejména pro větší modely.

Jaké modely jsou k dispozici? LM Studio podporuje širokou škálu modelů. Například Llama 3.1, který je univerzálním modelem od společnosti Meta, nebo Mistral, populární open-source model s 7 miliardami parametrů. Pokud hledáte něco specializovanějšího, můžete zkusit StarCoder, který je navržen pro generování kódu a řešení programátorských úloh, nebo Qwen 2.5, což je model ideální pro práci s rozsáhlými texty a strukturovanými daty. Další modely najdete na Hugging Face.

LM Studio je skvělý nástroj, pokud chcete experimentovat s AI lokálně a bez obav o soukromí, protože všechna data zůstávají na vašem zařízení. Je to přístupná a flexibilní cesta, jak přinést AI přímo k vám domů.

Llama Coder - aplikace na přání

Pamatujete si, jak jsme se ve škole učili malou násobilku? A jak jsme si ji museli znovu a znovu procvičovat, až nám šla jako po másle? No, dneska pro vás mám něco, co tohle všechno posune na úplně novou úroveň.

Představte si, že potřebujete rychle vytvořit aplikaci na procvičování malé násobilky – a teď pozor, nebudeme se s tím piplat celé hodiny nebo dny, ale zvládneme to během několika minut. Jak? Jednoduše! S pomocí nástroje Llama Coder, což je šikovný AI asistovaný nástroj na generování kódu.

Llama Coder: Co to vlastně je?

Llama Coder je jako váš osobní programátorský kouč. Nemusíte být programátorský mág, abyste s ním vytvořili něco úžasného. Stačí vám nápad, který mu zadáte – a klidně i česky! Ano, slyšíte správně, nemusíte znát žádný specifický programovací jazyk. Jen mu jednoduše napíšete, co chcete, a on vám během pár vteřin vygeneruje hotový kód.

Když dřív bylo programování na dlouhé lokty...

Teď se na chvíli vraťme zpátky v čase. Pamatujete, jak dlouho trvalo, než jsme naprogramovali i ty nejjednodušší aplikace? Týdny, někdy i měsíce práce. Museli jste dokonale rozumět programovacím jazykům, měli jste před sebou hodiny a hodiny psaní a ladění kódu, testování a opravování chyb. A když jste konečně měli hotovo, občas jste zjistili, že to pořád není úplně ono, a začali jste znova.

Magie jedním kliknutím

Ale dnes? Llama Coder vám to všechno usnadní. Stačí otevřít llamacoder.together.ai, napsat, co chcete naprogramovat, a za minutku máte hotovo. Skutečně, za minutku! Nevěříte? Mrkněte třeba na tohle procvičovátko malé násobilky, které jsem vytvořil za pár sekund: llamacoder.together.ai/share/QGhI0. 😎 Je to jednoduché, rychlé a efektivní.

Kde všude Llama Coder využijete?

No a teď si představte, kde všude byste mohli Llama Coder využít. Nejste si jistí? Tady je pár příkladů:

• Vzdělávání: Tvorba interaktivních výukových nástrojů. Ať už chcete procvičovat matematiku, programování nebo cokoliv jiného, Llama Coder vám pomůže během chvilky.
• Start-upy a malé podniky: Máte nápad na aplikaci, ale nemáte programátora? Žádný problém! Llama Coder vám umožní vytvořit prototyp, který můžete ihned začít testovat.
• Automatizace práce: Jednoduché skripty a automatizace, které by normálně zabraly hodiny práce, jsou s Llama Coder otázkou pár minut.
• Hobby projekty: Máte v hlavě nápad na malou hru nebo aplikaci pro vlastní potěšení? S Llama Coder je to hračka.

A to je jenom špička ledovce! Možnosti jsou prakticky nekonečné.

(Ano, text napsal Chat GPT)

BBC micro:bit pro malé i velké

Při předvánočním vymýšlení dárků jsem objevil nádhernou hračičku - malý počítač BBC micro:bit pro výuku programování a robotiky. Byť je micro:bit aktuálně ve verzi 2, Ježíšek donesl z důvodu nedostupnosti nového starší model v1.5. Ten je ochuzen jen o pár nahraditelných nebo prominutelných drobností. Počítáček disponuje pěknou řádkou periferií včetně tlačítek, displaye, akcelerometru, teploměru, převodníků a dalších a přitom jde rozšiřovat spoustou dostupných modulů a nakonec - je to univerzální počítač - lze k němu přibastlit cokoliv.

Programovat lze micro:bit v on-line prostředí Microsoft MakeCode for micro:bit pomocí bloků, Pythonu i JavaScriptu. MakeCode existuje i jako aplikace. A co je podstatné obsahuje i emulátor, na kterém běží program okamžitě na živo. Takže hrát si můžete i bez hardwaru! A je to (také) v češtině.  Pomocí bloků seskládal můj jen programováním málo políbený synovec hned jako druhý program "Kámen, nůžky, papír" s počítáním score a životů. Dále máte k dispozici Python Editor for micro:bit i Scratch - micro:bit.

Program se pak jednoduše uploadne do přes USB kabel připojeného počítače micro:bit "jako na flashku", ten si jej "nacucne" a okamžitě začne provádět. Proces nahrávání obstará i MakeCode, ale není to úplně vyladěné a po několika bezproblémových přeprogramováních nám neustále vyskakovalo okno finderu a MakeCode psal nějakou chybu. Nicméně nahrávání probíhalo úspěšně. Drobnost.

A MakeCode se umí propojit i s GitHub! Ostatně prosím... Marenek/teplomer: Jednoduchý teploměr / Simple thermometer.

Počítač micro:bit je u nás běžně dostupný včetně periférií a stavebnic i na "velkých e-shopech". Nicméně nejlépe navštívit speciálku BBC micro:bit | HWKitchen.cz. Tam najdete i nějakou tu dokumentaci a návody v češtině.

Odkazy

• Micro:bit Educational Foundation | micro:bit
• 1.5 micro:bit revision
• Microsoft MakeCode for micro:bit
• Python Editor for micro:bit
• Scratch - micro:bit
• BBC micro:bit | HWKitchen.cz

Jak ladit web pro Safari na Linuxu?

A je to tu zase! Reklamace, že se zase cosi nějak divně ukazuje v Safari na Macu. Hmm, jasně, opravím... Ale jak přijít na to, co to vlastně sakra... Macka nemám, pracuju na Linuxu. Safari pro Linux? Není. Cesta přes Wine? To ne ne. Virtuální OS s prohlížečem? To už mám vyzkoušené kvůli IE a není to zrovna komfortní. Něco nativního? Co? Ale moment! Safari jede na WebKit, ne? Na stránce download mimo jiné prohlížeč Epiphany, ale nějaký divný archiv toto... Podle pkgs.org jsem pak ale kulišácky dohledal jméno balíčku epiphany-browser. Pak stačí standardní instalace

sudo apt-get install epiphany-browser

a voilá! Máme tu prohlížeč "Web" ukazující neduhy Safari na Ubuntu. Alespoň to, co mi bylo reklamováno ano. Ladící nástroj je podezřele podobný tomu ve Firefoxu, není-li stejný. Takže... a hotovo, opraveno. :-)

Ale samozřejmě netvrdím, že to nejde jinak a lépe. ;-)

Odkazy:

• WebKit
• Epiphany-browser Download (DEB) (dohledej si balíček podle verze OS)
• Luakit Web Browser (další prohlížeč, nezkoušel jsem)
• Common WebKit Browsers - dummies

Zachování historie při rozdělení nebo spojení souborů v GIT?

Při používání verzovacího systému, v našem případě GIT-u, je celkem podstatné zachovat historii změn souborů. Přitom je velmi snadné o ni přijít. Třeba při rozdělování nebo spojování souborů. Vysvětlení co a jak a hlavně i návod, jak a co, jsem našel na blogu Raymonda Chena v několika navazujících příspěvcích:

• Mundane git tricks: Combining two files into one while preserving line history | The Old New Thing
• How do I split a file into two while preserving git line history? | The Old New Thing
• How to split out pieces of a file while preserving git line history: The hard way with commit-tree | The Old New Thing
• How to split out pieces of a file while preserving git line history: The easy way with misleading commits | The Old New Thing

A až tě z toho rozbolí hlava, na odlehčení si dej jeden poučný příběh Hardware engineers solve a usability problem with the PS/2 connector, but inadvertently create a new one | The Old New Thing. :-)

Neseriózní Less.js v prohlížeči

Bez css preprocesoru jako je Less.js si dnes snad ani seriózní webařinu nedokážeme představit. Při normální seriózní práci si také neumíme představit, že by se kompilace less nespustila při buildu (nebo tak nějak jako podobně, prostě "pre-").

Ale občas se hodí zcela neseriózně zpracovat less v prohlížeči, třeba když připravujete jen takovou stránečku třeba pro náhled ikon, nebo tak něco, a chcete použít fragment stylů projektu v less. Není to žádný problém.

Podle Using Less.js - Browser Usage | Less.js potažmo less-docs/using-less-in-the-browser.md at master · less/less-docs · GitHub či LESS - Using Less In The Browser - Tutorialspoint a less.js - cdnjs.com - The best FOSS CDN for web related libraries to speed up your websites! necháme natáhnout script, případně doplníme konfiguraci, a podle css - Is it possible to inline LESS stylesheets? - Stack Overflow upravíme type, protože při naší neserióznosti máme styly přímo v html. Script pak musí být natažen až za styly! Výsledný kód pak bude vypadat nějak takto:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Test</title>

    <style>

        /* css */

    </style>

    <style type="text/less">

        /* less */

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.12.2/less.min.js"></script>

</head>

<body>

    <!-- obsah -->

</body>

</html>

mjml - šablony pro responzivní emaily poměrně snadno a celkem rychle

Už přes dva roky mám v konceptu postu o mjml poznámku "ROZPRACOVANÉ!". To jsme se s mjml našli poprvé, když jsem připravoval layout emailového newsletteru pro jistý projekt. No a po dvou letech jsme se našli znovu, tentokrát při přípravě layoutu obecných emailů.

mjml je šablonovací systém pro generování responzivních emailů. Všecky ty hnusy tabulek v tabulkách, inline styly, definice písma pro každý element a jiná zvěrstva řeší sám. Samosebou ne vše je v každém mailovacím programu nebo službě stoprocentní, ale to není snad ani email v prostém textu.

Pro editaci lze využít jak online mjml editor, editor mjml-app se zabudovanou validací i kompilací, editor Atom s pluginem, stejně tak Sublime text, tak jakýkoliv textový editor, balíček pro node.js (npm) a příkazový řádek. Také lze využít drag&drop online editor služby Mailjet.

Ostatně pomocí čeho mjml soubor připravit je popsáno v podrobné dokumentaci...

Před dvěma lety jsem bojoval s několika problémy, které, jak se ukázalo, způsobily různé verze mjml - dokumentace, ukázkové šablony, pluginy do Atomu byly pro verzi 3.3.5, ale aktuální verze mjml byla 4.0.3 a některé komponenty byly změněné a migrace z verze 3 na 4 (lze příkazem i v online editoru) nefungovala správně. Po downgradu na 3.3.5 mi zmizelo několik problematických momentů a vygenerované html konečně vypadalo správně. To jen jako upozornění, že ne vždy jde vše hladce.

Samostatná kapitola jsou obrázky. Výsledný email musí obsahovat absolutní url na obrázky, při vývoji je ale snazší pracovat s relativní cestou. S tím je třeba se nějak vypořádat. Pro správnou funkci preview pluginu do Atomu jsem si tehdy musel "dát obrázky na web", jinak se vůbec nezobrazovaly.

Je tu ale i možnost vložit obrázky přímo do emailu pomocí mjml-with-images-loader pro Webpack, ale ještě jsem to nezkoušel.

Ohledně obrázků v emailech jsem studoval ještě A Guide for SVG Support in Email | CSS-Tricks, SVG | Campaign Monitor a How to Embed Images in Your Emails: The Facts | SendGrid.

Pro integraci do Symfony potažmo Twigu existuje balík Symfony bundle for MJML nebo AssoconnectMJMLBundle (o čemž je článek Using MJML email templates with Symfony).

Vybrat a implementovat jeden z nich mě ještě čeká.

---

P.S.: Po dalším průzkumu a samostudiu jsem nakonec jen "vypáral" z balíčku asi tak tři řádky kódu -  samotné zavolání kompilace mjml, protože jsem potřeboval přidat pro render další parametry, což balíček neumožňuje, a naopak zbytek funkcí jsem vůbec nepotřeboval.

Edge pořád neumí ES6

Prosluněné dny hladkého vývoje webu na Linuxu, laděného pod Chrome a dolaďovaného pro Firefox, narušila zapeklitá chyba v Edge: SCRIPT1028: Expected identifier, string or number.
Dalo mi to trochu pátrání krzevá balíčky, dokumentaci, odborné weby a fóra (včetně výše uvedeného), než jsem došel k poznání, že celý problém působí rest parametry či spread operátory (či syntax), vymoženosti JavaScriptu ES6.
Ta se mi tam dostala z Bootstrapu zakompilovaného do js balíčku. Takže taková ta neopravitelná věc. Díky, EasyAdmin. :(
Přeskočme několik hodin usedavého pláče a přistupme rovnou k řešení: nenechme inkriminovaný javascript natahovat na web rovnou (jako hotový asset), ale přidejme ho přes webpack (nebo snad něco jiného? Možná tak Webpack Encore) projektu a profiltrujme ho přes Babel, kterým ty moderní zrůdnosti, jak si jistě myslí u Microsoftu, odstraníme.
Hurá! Web funguje a pochvala od projekťáka nás nemine. ;)

• Rest parameters and spread operator
• Rest parameters - JavaScript | MDN
• Spread syntax - JavaScript | MDN
• Can I use... rest parameters
• Can I use... spread

Jak ladit web pro MSIE/Edge na Linuxu?

To si tak už kolik měsíců v kuse vesele vyvíjíte web na Linuxu a výsledek jen občas zkontrolujete na Windows v prohlížeči Edge a pro klid duše i MSIE (i když to už jen tak pro formu a nejhůř ve verzi 10). No dobře, hlavní projekt si přeci jen zbaběle nastavíte tak, aby se na něj dalo "koukat" i z vedlejšího počítače a kontrolujete jej i při vývoji.
Pak se ale objeví zapeklitost na dalším projektu. Rozstřelit si nastavení nechcete... Pátráte, jak tedy na Linuxu ladit webovou aplikaci pro Explorer a najdete celkem optimální řešení:

1. nainstalujte si VirtualBox od Oracle
   (drobná nepěknost - v menu na Ubuntu Mate se objeví až po restartu)
2. stáhněte si "virtuální počítač" přímo od Microsoftu
   (vyberte si od Win7 s IE8 po Win10 s Edge)
3. importujte virtuální stroj do VirtualBoxu a polaďte si nastavení
   (třeba podle Set Up a Windows 10 Virtual Machine and Run Internet Explorer 11 and Edge on Mac or Linux | Viget)

A máte na dobrém počítači slušně běžící Windows na 90 dnů trápení zdarma!

Ještě se dostat na localhost vašeho počítače... Podle virtualbox - How to access localhost:8080 running on ubuntu from windows running into virtual box? - Ask Ubuntu stačí projekt(y) zadat do hosts, ale s ip adresou 10.0.2.2.

Pak už je na čase ponořit se do práce... ;)

Jak dostat font-display do fontů z Googlu

Při dalším ladění "našeho projektu" jsem se rozhodl vyřešit poznámku v Pagespeed Insights / Lighthouse (po pravdě jsem to vyzkoumal v Auditu v Nástrojích pro vývojáře v prohlížeči Chrome):
Diagnostika - Zajistěte, aby text při načítání webfontů zůstal viditelný
Pomocí funkce font-display stylů CSS zajistěte, aby byl text při načítání webfontů viditelný uživatelům. Další informace.
"Další informace" odkazují na článek Controlling Font Performance with font-display, podle kterého je třeba doplnit do definice písma přístup k vykreslení
@font-face {font-display: fallback; ... }
Prosté? Ne tak moc, když importujete, a chcete importovat, webová písma přímo od Googlu. Jako třeba
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&subset=latin-ext');
Je tu takový drobný paradox, jak poznamenávají v článku Google Fonts and font-display s osvětlením situace dalšími užitečnými tipy:

Google Developers suggests using Lighthouse -> Lighthouse warns about not using font-display on loading fonts -> Web page uses Google Fonts the way it's suggested on Google Fonts -> Google Fonts doesn't supports font-display -> Facepalm.

Jednoho by z toho...

Ale zpět k projektu. Máme tu {less}, Grunt (zatím ještě) a Node (samozřejmě). Importované definice se do výsledného stylu vloží celé. Někdo přeci musel už připravit nějaký plugin... Dva dny jsem (mimo jiné práce) hledal, ale nenalézal. Našel jsem a vyzkoušel nějaké jiné pluginy, ale bez úspěchu.

A pak najednou na mě vyskočí přesně to, co hledám od začátku: dkrnl/postcss-font-display. Tento PostCSS plugin vloží do všech definic @font-face ve style kýžený parametr font-display. Hotovo. Uff :-)

Jak na dlouhá "slova" na webu?

Jsou věci, co se vrací jako bumerang. Třeba potřeba se popasovat s nezalomitelným textem, respektive dlouhými slovy. Přesněji "slovy". V praxi jde, pokud nebudeme brát v potaz Němčinu, o emailové a webové adresy a parametry notebooků a telefonů, které produktový manažeři s oblibou naperou do názvu, oddělené lomítky a bez dostatky mezer, na kterých by se text mohl v prohlížeči zalomit. Samozřejmě tyto nešvary se připomenou až s vyladěným layoutem (jsem si myslel) a ostrými daty.

První věc, která opravdu nejde ignorovat. Dlouhé "slovo" rozstřelí layout ve flex-boxu. Boxíky postižených produktů se roztáhnou. Zafunguje malé kouzlo. Stačí nastavit na item ve flexu

min-width: 0;
Minimální šířka nemusí být nulová, ale musí být definovaná. Více

• html - How to word-break text in a flex display when the text is long? - Stack Overflow
• Flexbox and Truncated Text | CSS-Tricks

Pak to chce nějak ošetřit samotný text. Při googlení je potřeba zohledňovat stáří rad a návodů. Co platilo před rokem dnes už neplatí, nebo nemusí platit. V CSS lze nastavit pravidla pro dělení a zalamování slov. V kombinaci s media query jde o dobrou pojistku zachování funkčního layoutu a čitelného textu. Použijme třeba podle Dealing with long words in CSS | justmarkup něco jako

.hyphenate {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
Více

• Dealing with long words in CSS | justmarkup
• Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc) | CSS-Tricks
• hyphens | CSS-Tricks
• CSS Hyphens Not Working in Firefox? - Stack Overflow
• CSS hyphens property

Na všechno styly ale nestačí. Správnému dělení slov pomůžeme znakem měkké dělení. Hojně se řeší, jakou formu zápisu znaku volit, ale aktuálně by to mělo být použití entity

­­­
Pročti si

• Soft hyphen - Wikipedia
• text - Soft hyphen in HTML (<wbr> vs. &shy;) - Stack Overflow
• wbr na www.quirksmode.org

Rovnou jsme se dostali i k HTML5 tagu

<wbr>
který slouží k označení místa, kde se může v případě potřeby text zalomit, ale bez "-". To je přesně to, co je dobré vrazit za výše zmíněná lomítka v názvech.

• <wbr> - HTML: HyperText Markup Language | MDN
• Can I use... Support tables for HTML5, CSS3, etc
• What is <wbr> in HTML5? Why do we need this? - Quora

Dřív se toto nahrazovalo využitím třeba tenké mezery &thinsp;. I další entity, jako třeba &zwnj; a &zwj; můžou najít uplatnění.

• hyphenation - HTML: Soft hypen (&shy;) without dash? - Stack Overflow
• Special Characters [Robin’s HTML 4.0 Conformance Test]
• The Little-Known Preview Text Hack You May Want to Use in Every Email – Litmus Software, Inc.
• &ZWNJ;&NBSP; Preview text hack > Litmus
• Zero-width non-joiner - Wikipedia
• Zero-width space - Wikipedia

Obecně se řešení problémů s dlouhým textem věnuje článek Handling Long and Unexpected Content in CSS | CSS-Tricks.

Toto neberte jako přesný návod, spíš soupis poznámek k navedení, kde hledat nápovědu k dané problematice.

Zlý Chrome aneb jak z přítele zákeřný nepřítel se stal?

Dlouho předlouho již k prohlížení webů i práci Chrome používám. Chvíli trvalo mi sic, než přešel jsem naň z Firefoxu užívání, leč navykl jsem si záhy na všechny udělátka a nechci měnit. Ale poslední dobou se Chrome, respektive Google, nechová vůbec hezky.

Nedávno jsem zjišťoval, co mi asi tak může vytěžovat disk a zpomalovat ne zase tak starý, i když ne zrovna naddimenzovaný počítač. Objevil jsem stále běžící software_reporter_tool.exe - utilitka Chromu pro "zjišťování programů, co by mohl zhoršit zážitek z brouzdání po webu". Aha: nepracuj a brouzdej?

Podle návodu How to block the Chrome Software Reporter Tool (software_reporter_tool.exe) na gHacks Tech News jsem zablokoval přístup k adresáři utilitky (smazání prý nestačí, utilitka se po aktualizaci Chromu zase vrátí) a noťas se o poznání zrychlil.

Další zákeřnost přišla pod praporem bezpečnosti: Google aktivoval Site Isolation všem desktopovým uživatelům Chrome. Když bojujete o každou píď paměti, nepotěší. Podle vlastního pozorování se ale již nainstalovanému Chromu nic takového nezapnulo. Nicméně podle Zvýšení bezpečnosti izolováním webů - Nápověda Google Chrome lze toto nastavení změnit na "adrese" chrome://flags/#enable-site-per-process

Prostě fakt dík, že se o mě tak staráte :-(

Jak JavaScriptem na pseudo elementy?

Upravit elementy elementy HTML stránky? Žádný problém! Máme DOM, máme jQuery... Změnit styly? V jQuery máme metodu .css(). Ale... Co to? No ano! Pseudo elementy jako ::before nebo ::after se takto jednoduše změnit nedají! Musí se to "kacknout". Jak? Pěkně to servíruje článek Modify pseudo element styles with JavaScript od Pankaj Parashara.

Osobně jsem úspěšně ozkoušel Metodu 3:
$('<style>.red::before{color:green}</style>').appendTo('head');

(samozřejmě, že to taky umím bez jQuery)

Circuito.io pro snadný začátek s Arduino

Hračičkové z Roboplan připravili kromě jiných zajímavý projekt Circuito.io. Circuito.io je webová aplikace, která vám pomůže s návrhem jednodušších projektů s počítačem Arduino.

Naskládáte si potřebné komponenty a Circuito.io pro vás vygeneruje "nákupní seznam", návod k zapojení i kód základu potřebného programu.

Každý začátek nemusí být těžký. ;)

Theremin v prohlížeči i telefonu

Theremin (teremin) je podivný elektronický hudební nástroj, který vynalezl v roce 1919 Lev Sergejevič Těrmen. Jeho zvuk zná každý, i když třeba ani neví, že jej vydává právě theremin. Hojně se používá "u filmu", ale zaslechnete ho napříč všemi hudebními žánry. Osud samotného vynálezce je tak zajímavý, že o něm vznikla i divadelní hra Teremin. Luke Phillips alias Femur pro změnu připravil on-line Theremin v JavaScriptu. Najdete jej také na stránce Chrome Experiments - Theremin by Luke Phillips a jsou dostupné i zdrojáky na GitHub - lukephills/Theremin: Browser based Theremin emulator using web audio, react and typescript. Femur upravil theremin i pro iPhone/iPad. Pěknou zábavu a pevné nervy rodině a sousedům. ;-)

Jak udělat Death Star z lampy z IKEA?

Automated IKEA PS 2014 Pendant Lamp - IKEA Hackers - IKEA Hackers:

"Being an engineer myself I could not resist adding remote control to this manually expandable lamp I saw at IKEA, no matter the cost. I’ve replaced pull strings with M3 threaded rod and DC motor, added micro-controller to drive it and after a bit of soldering, cutting, drilling it moves by itself."

• Turn an IKEA Lamp into a Remote-Controlled Death Star Lamp
• Remote Controlled IKEA Death-Star Lamp

Nové Raspberry Pi 3 - 64-bitů s Wi-Fi a Bluetooth

Jedeme dál...

Meet the New Raspberry Pi 3 — A 64-bit Pi With Built-in Wireless and Bluetooth LE

• Quad-core 64-bit ARM Cortex A53 clocked at 1.2 GHz
• Roughly 50% faster than Raspberry Pi 2
• 802.11n Wireless LAN
• Bluetooth 4.1 (including Bluetooth Low Energy)
• 400MHz VideoCore IV multimedia
• 1GB LPDDR2-900 SDRAM (i.e. 900MHz)
• Priced at $35

Také...

• Raspberry Pi 3 on sale now at $35 - Raspberry Pi
• The Raspberry Pi 3 Adds Built-In Wi-Fi and Bluetooth, Gets a 50% Speed Boost
• Tohle je Raspberry Pi 3: Má zatím nejlepší procesor a konečně i integrovanou Wi-Fi a BT | Cnews.cz
• Raspberry Pi 3 Model B (abclinuxu)
• Raspberry Pi Founder Eben Upton Talks About the New Raspberry Pi 3
• Raspberry Pi 3 je tu, co nabídne? | Svět hardware

'via Blog this'

On-line regex aneb regulární výraz na pitevně

Regulární výrazy (regular expression) zaskočí nejednoho programátora. Slabšího programátora. ;-) Jestli to nechceš nechat na sobě znát, nabrnkni si pod lavicí Online regex tester and debugger: JavaScript, Python, PHP, and PCRE - velmi chytá "hračka" pro ladění regulárních výrazů i s analýzou a popisem postupu práce testovaného výrazu.

Správňácký .preventDefault() vs. vražedný return false;

Když si zavěsíte v JavaScriptu (potažmo JQuery) na event kliknutí na dokaz či tlačítko (.click()) nebo odeslání formuláře (.submit()) vlastní funkci, možná pro zablokování původní (default) operace použijete return false; (tak jak se běžně používalo v parametru onclick). Chyba! Pak se už jen divíte, proč se vám neprovádějí další nabindované funkce. return false; je totiž všechny "odstřihne".
Proto opravdoví programátoři ;-) použijí .preventDefault(); a to je celé kouzlo. Viz event.preventDefault(), jQuery event.preventDefault() Method, preventDefault() Event Method.

Trello, JIRA pro chudé. A nejen to!

Při profesionálním nasazení agilních technik, jako je scrum, kanban a tak, se běžně používá licencovaný JIRA Agile od Atlassian. Při menších projektech lze ale podobně využít i free on-line aplikaci Trello. Trello je ale obecné! Backlog, Sprit a podobné výmysly si musíte tak nějak víc představit. Na druhou stranu si ale můžete v Trello uspořádávat třeba jen nápady, plánovat dovolenou, připravovat svatbu nebo větší večírek. Trello lze využít i jen k poznámkám jako je třeba Google Keep. Můžete vše sdílet, přizvat spolupracovníky...

Trello existuje i jako aplikace pro Android - Trello - Organize Anything.