Prečo tento článok vznikol?
Možnosti prenosných zariadení "do vrecka" ma fascinovali už od "dávnych časov PDA-čiek"... Všetko to u mňa začalo zariadením Acer N30, na tú dobu nevídaná vec ktorá umožňovala aj USB-Host - pripájanie periférií. Dokonca som tak (cez kábel) pripojil telefón ako modem, bola na to aplikácia. Postupovalo to lepšími PDA, potom mobilnými telefónmi s Windows Mobile (ktoré paradoxne stratili možnosti USB Host...) a dnes považujem za vrchol v tejto oblasti Samsung-y s ich DeX funkcionalitou. Ako funguje DeX som (skúmal a) rozoberal v mojom staršom článku: Samsung DeX.
Keďže sa bavím aj tvorbou webového obsahu (mám to nateraz ako zábavu), tak som zaregistroval že pre Android zariadenia existujú aj aplikácie na kódovanie (nie len) html obsahu. Daktoré som vyskúšal už dávnejšie, ale dajako ma nezaujali. Nebolo to ono, možno tak úplná núdzovka. Lenže teraz som objavil aplikáciu ktorá ma zaujala...
Celý tento článok je vytvorený pomocou tu testovanej a prezentovanej aplikácie. To som si dal ako podmienku a v podstate som to tak musel robiť, lebo som si vytváral a pridával screenshoty počas písania pravda. Samozrejme nerobil som ho "od nuly" - na prázdnej obrazovke, ale natiahol som si do telefónu prázdny "vzor" a tam som len nahádzal obsah. Tak to ale robím aj normálne na PC.
(Čo vidím pri tvorbe na monitore ukazuje nasledujúci obrázok. Detaily popíšem neskôr.)
Čo za aplikáciu teda testujem a s akým telefónom? (+ s akými by to šlo)
Skúšam to na telefóne Galaxy S10e, super malý a výkonný telefón (akých je dnes málo!) ktorý dnes už ide zohnať za slušnú cenu (použitý). Jedna z vyšších vlastností tohoto telefónu (v porovnaní napríklad s radou A od Samsungu) je to, že má podporu funkcie DeX. A tu sa to ukázalo naplno. Mobil som pripojil ku svojej PC zostave (respektíve miesto PC k jeho zostave periférií), takže mám k dispozícii fullHD monitor, klávesnicu a myš. A telefón sa samozrejme pri práci nabíja... Išlo by to na hocakom Samsung telefóne od verzie S8, Note8, po posledné S modely. A plus aj daktoré lepšie tablety podporujú DeX - na takom tablete by to bolo zasa iné pravda - on má dostatočný display aj bez prídavného monitora. Skúsil som a bolo to zaujímavé. Stačí pridať externú klávesnicu k nemu. (otestované na lacnejšom Galaxy TAB S6 lite, aj ten na to stačil)
A s akou aplikáciou to teda pracujem? Ako som už spomenul - zopár som ich už skúsil dávnejšie, ale práve teraz
skúšam konkrétne túto: Spck Editor
Pro.
Je to pre mňa novinka a nestačím sa diviť ako funguje... Aj preto vznikol tento článok. Nie je to len aplikácia,
je to aj webová služba. Ja som sa ale zameral len na samotnú Android aplikáciu.
Ako funguje aplikácia Spck Pro
Zaujal ma už štart aplikácie na mobile - pri voľbe "Nový projekt" mi to ponúklo totiž hneď na výber možnosti v čom by som ho chcel vytvoriť... A že tam toho je na výber:
Vybral som si HTML a hneď som dostal "základnú kostru" aj so "svätou trojicou" základných súborov a základným
obsahom pre HTML:
A prekvapenia pokračovali aj ďalej. Vlastný Live monitor, automatická nápoveda (nie len) príkazov pri písaní (nie vždy 100%, ale isté komfortné písanie tu je...), no spíšem to radšej tak do bodov, aby bolo jasnejšie ako to fungovalo:
- Ako ide nastaviť zobrazenie (keď už rozbehnem projekt) je vidno už na prvej snímke hore v článku. Je
k tomu čo dodať? Pracujem na mobile (s pripojeným monitorom)... Snáď len to že aj konzolu ak ju potrebujem pri
tom môžem mať... Mám komplet prehľad o adresári s ktorým pracujem. Jednoducho prepínam súbory s ktorými chcem
pracovať (či CSS, JS, HTML, aj obrázky sa zobrazia ak na ne kliknem aby som videl ktorý to je...).
- Šírky tých jednotlivých blokov idú pekne nastaviť ako chcem (potrebujem).
- Live monitor môžem mať teda priamo viditeľný. Ale má to háčik - neustále ako sa (automaticky po každej zmene) refrešuje tak je stránka na začiatku. Takže ak si ju chcem tak lepšie pozrieť, alebo ak pracujem na dajakom obsahu inde ako na začiatku stránky, tak musím neustále skrolovať. A potom len začnem písať a je znova mimo oblasť ktorú som chcel sledovať... Ale máme druhú možnosť - externý...
- Externý Live monitor - spustím si ho tak, že kliknem na zelenú "play" šípku a potom ako sa mi otvorí
stránka na celý SPCK program (Preview) tak si vyberiem voľbu "Otvoriť v prehliadači". A to dokonca aj s
aktívnou konzolou ak chcem! (tu na tej obrazovke v nastaveniach ide tiež otvoriť) Nemám tam potom síce
automatické obnovovanie, nič menej - aj teraz môžem mať ten monitor neustále viditeľný, stačí dať okná SPCK
programu a prehliadača vedľa seba, no a funguje aspoň obnovenie v tom prehliadači. Takže občas len kliknem
myšou vedľa a vidím aktuálny "výstup" na monitore. Ba má to aj výhodu - neskáče mi to pri obnovovaní na
začiatok stránky, snáď je to aj lepšie takto. Ešte si môžem jedným klikom ten prehliadač zväčšiť na celú
obrazovku a zasa späť. Bez toho aby som si rozhadzoval SPCK apku. Samozrejme ide Live monitor nastaviť tak na
úzko že to simuluje mobilný telefón (aj externý, aj ten integrovaný).
- A dokonca môžem mať tento výstup na monitor aj na samotnom telefóne na ktorom je toto celé spustené. Len to musí byť iný prehliadač ako ten čo je spustený na monitore v Dex-e! Ale to je najmenej... Na Android je ich dosť. Takže vo Firefoxe mám pekne stav projektu na mobile na stole vedľa monitoru. Tým pádom mám vyriešené ako kontrolovať responzivitu (alebo teda dizajn) na mobilnom zariadení.
- Konzola pracuje vcelku fajn, ukazuje aj CSS vlastnosti elementov (ak konkrétneho vybraného), ide použiť aj na výpisy pri odlaďovaní .js súborov (console.log - na to aby toto fungovalo musí byť js súbor nalinkovaný v html súbore ktorý je aktívne zobrazený v Live monitore!!).
-
Je tu aj integrácia Git-u - fajn funguje verziovanie čo som skúsil, a GitHub-u (neskúšal som to
rozbehnúť).
- Ak potrebujem pridávať obrázky do projektu, tak si ich jednoducho pridám priamo do potrebného adresára (z Galérie či z iného miesta v mobile), a aj premenujem. Ak ich pridávam už priamo do kódu stránky tak zápis source adresára a názvu img súboru mi výborne našepkáva aplikácia. Alebo si nakopírujem z adresára obrázkov priamo "Path" pre konkrétny obrázok... A čo ma šokovalo (nevedel som o tom či a prípadne odkedy to funguje) - DeX podporuje aj kombináciu kláves Shift+Windows+S na výber individuálneho výstrižku obrazovky. Sila, to sa mi teraz naozaj hodilo. (Screnshot komplet obrazovky je tam odjakživa - je na to ikonka dolu v lište.)
- Aplikácia má kopu nastavení - písmo, témy, vlastnosti, aby sa s ňou pohodlnejšie pracovalo.
- Nie je problém mať aj viaceré projekty rozrobené, ľahko sa celé ich adresáre prepínajú potom.
- Dokonca tam idú pridať knižnice, a to taký zoznam, že všetky ani nepoznám... Toto som ale neskúmal ďalej.
- Nápoveda - pri práci s JS súborom ma upozorní aj na nesprávne príkazy. Ak nie vždy, tak sa ozve aspoň
konzola potom.
- Aj pri html obsahu mám nápovedu, aj keď nie tak kompletnú ako vo VS Code. Ale dačo to pomáha. Pri CSS tak isto, vcelku fajn. Všetky bežné príkazy, samozrejme zátvorky sa uzatvárajú a tak.
- Odsadenie riadkov kódu je asi automatické, lebo nič som neriešil, ale mám kód úhľadne "uprataný"...
Vidieť to aj na screenshotoch. (Toto je ale trochu problém pri zobrazení toho kódu priamo v mobile na výšku -
strašne veľké odsadenia a málo viditeľného textu potom!)
(Myslím že keby som mal k dispozícii len čisto mobil, tak by som ho používal na šírku a s prídavnou klávesnicou... Inak by to bolo čisté utrpenie.)
A dajaké mínusy (obmedzenia) čo som zistil:
- Vytvoriť element "p" sa dajako nedarí pomocu nápovedy. Tento neponúkne. Ale napríklad "ul" zoznam na pohodu, hneď aj s jedným "li" blokom...
- Nemám informáciu o rozlíšení v ktorom sa mi zobrazil náhľad... Pre odlaďovanie responzivity trochu problém.
Ale urobiť si mini skript na pár riadkov ktorý to bude vypisovať dakde na roh obrazovky je najmenej
(window.innerWidth, ale samozrejme aj kontrola "resize" aby to bolo vždy aktuálne)...
Asi takto:
span style="position:fixed; top: 1rem; right: 1rem; color: white; background: red; z-index: 1000;" id="w_i"
A JS časť:
w_i = document.getElementById("w_i");
w_i.innerText = (window.innerWidth);
display_width();
window.addEventListener("resize", display_width);
function display_width() {
w_i.innerText = window.innerWidth}
A dačo na záver
Takto som spísal aspoň krátky prehľad čo aplikácia dokáže. Je to asi prvá aplikácia s ktorou sa dá naozaj dačo robiť. A to hlavne - vcelku príjemne. Samozrejme si treba zvyknúť na rozdiely oproti VS Code, a ja nerobím na dajakých mega projektoch. Nič menej - dokážem tu vytvoriť vcelku pohodlne dajaký obsah na net...
Určite teraz neprejdem z VS Code na túto aplikáciu (aj keď aj z Android zariadenia dokážem odoslať súbory na
svoj FTP server...), ale bolo to také zaujímavé osvieženie pri písaní kódu. VS Code sa dá pravda vďaka plugin-om
tak krásne vyladiť... Ono to bol skôr trochu test pre mňa nových možností ako využiť mobilný telefón dnes. A
teda aj nový experiment (a tým pádom aj článok na môj web). A taká malá ukážka, že kde dnes mobilné telefóny sú.
Lebo mám pocit, že doba kedy nám bude stačiť (doma) iba mobilný telefón, tu v podstate už pomaly je... Nenahradí
plnohodnotne PC, ale keby som dnes prišiel o PC (ako bežný domáci užívateľ), tak s takýmto Samsungom a DeX-om
dlho vydržím aj bez PC...