HTML und Javascript

Hier möch­te ich ei­ni­ge Tips und Ja­va­scripts ver­öf­fent­li­chen die ich sonst nir­gends ge­fun­den ha­be oder die ich aus an­de­ren Grün­den für wich­tig hal­te.

HTTP ist unsicher

(?) Fra­ge­zei­chen! Goog­le be­haup­tet das. Ja, HTTP ist un­si­cher wenn Sie über ei­ne Sei­te Pass­wör­ter oder per­sön­li­che Da­ten ein­ge­ben und je­mand ge­nug In­ter­es­se da­r­an hat um ei­nen nicht un­er­heb­li­chen Auf­wand da­für zu trei­ben. Dies trifft auf mei­ne Site (und un­zäh­li­ge an­de­re) nicht zu. Sie ent­hält In­for­ma­tio­nen, die ich be­wusst öf­fent­lich ge­macht ha­be, die po­li­tisch und recht­lich in wohl je­dem Land der Welt un­be­denk­lich sind, nicht mit per­so­nen­be­zo­ge­nen Da­ten ar­bei­tet und ich wüss­te auch nicht, was je­mand da­von hät­te mit­zu­le­sen, wie sein Nach­bar oder ei­ne an­de­re $PERSON_OF_INTEREST sich durch mei­ne Site klickt. Dass er es tut kann er auch wenn ich HTTPS ver­wen­de se­hen. Le­dig­lich wel­che Sei­ten ge­nau und even­tu­el­le Ein­ga­ben kann er dann nicht mit­le­sen. Aber selbst wel­che Sei­ten sie ab­ru­fen kann er an­hand der über­tra­ge­nen Da­ten­men­ge ziem­lich si­cher er­mit­teln.

Goog­le Chrome wird mei­ne Site ab Ju­li 2018 als un­si­cher mar­kie­ren. Ich hoste mei­ne Site kos­ten­los auf mei­nem 1&1-Ac­count, bei dem SSL (und da­mit HTTPS) lei­der nicht mög­lich ist. Ich ver­die­ne da­mit kei­nen Cent und bin ent­spre­chend auch nicht be­reit, für ei­nen HTTPS-Ser­ver und das ent­spre­chen­de Zer­ti­fi­kat zu zahlen (und na­tür­lich auch nicht für ent­spre­chen­de Goog­le-An­zei­gen). Wenn Goog­le (der ja Busi­ness-ori­en­tiert denkt) nun mei­ne Site mit die­sem Schein­ar­gu­ment ab­wer­tet wird sie wohl ir­gend­wann ver­schwin­den. Mir scha­det das nicht (ob­wohl es mir na­tür­lich leid tun wür­de), aber den Leu­ten, die von mei­ner Site pro­fi­tie­ren könn­ten. So wird frei­es Wis­sen und Open Source, si­cher­lich nicht nur auf mei­ner Site ver­nich­tet. Nun, tat­säch­­lich wird es nicht ver­nich­tet, es ist im­mer noch da, aber Goog­le kann be­wir­ken, dass es wirk­lich schwer zu fin­den ist! Sehr scha­de, aber Geld re­giert be­kannt­lich die Welt! Leu­te wie ich zahlen ja schließ­lich auch nicht für An­zei­gen bei Goog­le und so pas­se ich nicht in sein In­ter­net.

So wer­den tau­sen­de Sites als un­si­cher mar­kiert ob­wohl von ih­nen kei­ne Ge­fahr aus­geht. Das wird letzt­lich da­zu füh­ren, dass User das un­si­cher ein­fach igno­rie­ren und so auf tat­säch­­lich un­si­che­re Sei­ten he­r­ein­fal­len wer­den. Wem ist da­mit ge­hol­fen? Goog­le hat si­cher­lich ei­ne Ant­wort... Ver­mut­lich ist es ein­fach nur Goog­le!

Bullshit by Design

Das ist mei­ne Zu­sam­men­fas­sung für Ja­va­script.

Ei­ne Pro­gram­mier­spra­che, in der Va­ria­blen we­der de­kla­riert noch ty­pi­siert wer­den müs­sen ist ein De­sign­feh­ler.

Ich muss­te zum Glück noch nicht so viel in Ja­va­script pro­gram­mie­ren aber ich bin schon in ei­ni­ge Fallen ge­tappt und ha­be Stun­den mit der Suche nach Feh­lern ver­bracht, die es in ei­ner ver­nünf­ti­gen Spra­che ein­fach nicht ge­ge­ben hät­te:

• Feh­len­de Ty­pi­sie­rung: ob 11+11 22 oder 1111 er­gibt hängt nur da­von ab ob der Com­pi­ler die 11 als String oder als Number auf­fasst. Der Work­around, den ich im In­ter­net ge­fun­den ha­be, liegt da­r­in, die Va­ri­ab­le vor­her mit 1.0 zu mul­ti­pli­zie­ren um si­cher­zu­stel­len dass es ei­ne Number ist. Das ist Bullshit.
• Feh­len­de De­kla­ra­tions­pflicht: wenn Sie ver­ges­sen, ei­ne als lo­kal ge­dach­te Va­ri­ab­le als sol­che zu de­kla­rie­ren, wird sie still­schwei­gend glo­bal de­kla­riert. Noch schlim­mer: ei­ne even­tu­el­le gleich­na­mi­ge glo­ba­le Va­ri­ab­le ei­nes an­de­ren Skripts wird gna­den­los mit­be­nutzt. Skrip­te, die ge­trennt von­ein­an­der feh­ler­frei funk­tio­nie­ren ver­sa­gen plötz­lich wenn sie zu­sam­men ver­wen­det wer­den. Das ist Bullshit.

Seit ECMA5, das 2008 er­schien, gibt es zu­min­dest die Mög­lich­keit durch use strict zu­min­dest den zwei­ten Punkt zu eli­mi­nie­ren. Na ja, bes­ser spät als nie. Aber don't use strict ist im­mer noch der De­fault, da­mit al­te Scrip­te wei­ter­hin funk­tio­nie­ren...

SI-Prefix

Als ich da­nach ge­sucht ha­be dach­te ich, ich wür­de zig Sei­ten fin­den, die sich da­mit be­schäf­ti­gen aber ich konn­te nicht ei­ne mit nütz­li­chem In­halt fin­den. Ko­misch, nicht wahr? Hier nun ein klei­nes Ja­va­script das es er­laubt, Ein­ga­ben mit SI-Pre­fixen vor­zu­neh­men und das Aus­ga­ben in eben­sol­chen dar­stellt.
Es kon­ver­tiert Ein­ga­ben wie 1k3, 1.2M oder so­gar ver­gleichs­wei­se un­sin­ni­ge wie 1e6u in ei­ne ent­spre­chen­de Ja­va­script-Number und wan­delt Num­bers in ei­ne ge­eig­ne­te SI-Schreib­wei­se.
Das Skript ist kei­ne be­son­ders ho­he Pro­gram­mier­kunst aber wahn­sin­nig nütz­lich und ich hof­fe sie ha­ben Freu­de da­r­an. Wenn Sie ei­nen Feh­ler da­r­in fin­den oder ei­ne Er­wei­te­rung vor­schla­gen möch­ten wä­re ich Ihnen für ei­ne kur­ze Nach­richt dank­bar!

Ich muss an die­ser Stel­le noch­mal da­r­auf hin­wei­sen: Dieses Skript hat für mich funk­tio­niert, ich kann je­doch kei­ne Gewähr da­für über­neh­men, das es un­ter al­len Um­stän­den und Ein­ga­be­be­din­gun­gen (User sind er­fin­de­risch!) kor­rek­te Wer­te lie­fert. Wenn Sie es be­nut­zen tun sie dies auf ei­ge­ne Ver­ant­wor­tung und ei­ge­nes Ri­si­ko!

Ich ver­wen­de das Skript aus­gie­big in mei­nen Elek­tro­nik-Rech­nern in de­nen es sich gut be­währt hat.

Des Rät­sels Lö­sung: mein Lieb­lings­edi­tor hat die In­clude-Da­tei als UTF mit BOM ab­ge­spei­chert. Das In­clude er­zeug­te des­halb ei­nen Zei­len­um­bruch vor dem Lo­go! Also, Da­tei ge­la­den, Ko­die­rung ge­än­dert auf UTF oh­ne BOM und es funk­tio­nier­te wie er­war­tet!

Sitemap.xml

Haben Sie sich auch schon mal da­r­ü­ber ge­är­gert, dass Goog­le von Ihrer Site ei­ne Site­map.xml-Da­tei ha­ben will? Wer hat sich die­sen Schwach­sinn aus­ge­dacht? Ei­ne Site­map kann (und wird) sich Goog­le an­hand Ihrer in­ter­nen Links selbst er­stel­len. Wenn Ih­re Site to­te Sei­ten ent­hält (die nicht von Ihrer Do­main aus ver­linkt sind) ist das Ihr Feh­ler. Selbst Xenu kann das.

Aller­dings wird ei­ne Site­map in der je­de ein­zel­ne Sei­te die Pri­or­ity 0.8 hat wohl eher zur Ab­wer­tung füh­ren. Das ein­zi­ge Plus wä­re, dass Sie ak­tiv Wer­tig­kei­ten Ihrer Sei­ten an­ge­ben kön­nen. Das hät­te man pro­blem­los auch mit ei­nem Me­ta-Tag er­rei­chen kön­nen, oh­ne den Zwang ei­ner XML-Da­tei die, wenn sie nicht extrem sorg­fäl­tig vor­ge­hen, nie­mals den vol­len Um­fang Ihrer Sei­ten re­flek­tie­ren oder auch nicht mehr exis­tie­ren­de Da­tei­en ent­hal­ten wird (was ver­mut­lich zur Ab­wer­tung führt).

Ich ha­be kei­ne Site­map ein­ge­reicht und wer­de das auch nicht tun. Das ist mir ein­fach zu­viel Ar­beit! Für mich ist es auch nicht wich­tig, dass ich mit al­len Mit­teln mög­lichst an ers­ter Stel­le der Goog­le-Tref­fer lande. Für die User, die von mei­ner Site pro­fi­tie­ren könn­ten wä­re es wich­tig, aber nicht für mich. Wenn Sie ei­nen Shop be­trei­ben könn­te das na­tür­lich an­ders aus­se­hen. Dann viel Spaß mit der Site­map.xml...

Es gibt Stim­men die be­haup­ten, Ya­hoo (so­wie Bing) wür­de Sei­ten mit meh­re­ren h1 ab­wer­ten. Nun, die Tref­fer die ich von Ya­hoo oder Bing be­kom­me ma­chen we­ni­ger als 1% aus so dass mir das wirk­lich ziem­lich egal ist. Goog­le scheint sich mei­ner Mei­nung an­zu­schlie­ßen :-)

Es mag sein, dass dies ein selbst­ver­stär­ken­der Vor­gang ist. Viel­leicht ha­be ich nur des­halb so­we­nig Ya­hoo-Tref­fer weil ich meh­re­re h1-Tags pro Sei­te ha­be. Aller­dings wür­de ich es nicht ris­kie­ren, 10% mehr Ya­hoo-Tref­fer zu be­kom­men oh­ne si­cher zu sein, da­mit nicht 10% Goog­le-Tref­fer ein­zu­bü­ßen.

Nach mei­ner Er­fah­rung gibt es nur ei­ne Such­ma­schi­ne auf die ich mei­ne Site op­ti­mie­ren muss. Den Na­men ken­nen Sie. Alles an­de­re ist ab­so­lut be­deu­tungs­los.

Dass man nicht zig CSS-Da­tei­en und Skrip­te ein­bin­det wenn man ei­ne schnel­le Site ha­ben will ist selbst­ver­ständ­lich und soll­te je­dem Web­ent­wick­ler klar sein. Be­zeich­nen­der­wei­se dür­fen ver­schie­de­ne Ele­men­te von AMPs nur von Goog­le-Ser­vern ein­ge­bun­den wer­den. Ein Schelm wer Böses da­bei denkt...

Tooltips

Ich ha­be vie­le tol­le CSS-Codes ge­fun­den, die hüb­sche Tool­tips er­zeu­gen, aber nicht ein ein­zi­ges, das auch funk­tio­niert wenn das Ele­ment ganz links oder ganz rechts er­scheint. Stets wur­de der Tool­tip nicht voll­stän­dig an­ge­zeigt son­dern links oder rechts ab­ge­schnit­ten. Die ein­zi­ge mir na­he­lie­gen­de Me­tho­de ist ein simp­ler span mit ei­nem Title-Tag der dann im Tool­tip er­scheint. Der Brow­ser zeigt ihn stets kom­plett an, nicht in ei­nem Lay­out, das mir ent­spricht, aber es funk­tio­niert im­mer! So ein­fach und so funk­tio­nal. Sparen Sie sich den Är­ger ir­gend­et­was an­de­res zu ver­su­chen!

Automatische Silbentrennung

... schön wär's! Im Open-Source-En­vi­ron­ment hat sich aspell weit­ge­hend durch­ge­setzt. Seine Trenn­vor­schlä­ge dürf­ten je­doch ein Haupt­quell von Dep­pen­leer­zei­chen im Deut­schen sein. Wäh­rend die Sil­ben­tren­nung im Eng­li­schen ganz gut funk­tio­niert lässt sie sich im Deut­schen nicht so ein­fach au­to­ma­ti­sie­ren. Kennt aspell ein zu­sam­men­ge­setz­tes Wort nicht, schlägt es ein­fach vor, es ge­trennt zu schrei­ben. Und es kennt vie­le Wor­te nicht! Und schon ha­ben Sie in 90% der Fäl­le ein Dep­pen­leer­zei­chen!

Zur Sil­ben­tren­nung mei­ner HTML-Sei­ten ha­be ich mir ein klei­nes Perl-Skript ge­schrie­ben.

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ

Ich ha­be ihn kur­zer­hand mit Font­Forge selbst er­stellt und stelle ihn hier zum Down­load als TTF und als WOFF-Font zur Ver­fü­gung. Frei für jeg­li­che Ver­wen­dung au­ßer zum Ver­kauf. Pimpen Sie Ih­re ge­druck­te Do­ku­men­ta­tion oder Ih­re Web­site, pri­vat oder ge­werb­lich, was Sie wol­len, es ist frei!

Es wür­de mich freu­en, wenn er für Sie nütz­lich wä­re und ich wä­re glück­lich über ei­ne Mit­tei­lung, ob und wo­für Sie ihn be­nut­zen. Danke.

Ich ha­be mich be­müht, ei­ne pixel­genaue Wie­der­ga­be des HD44780 zu er­rei­chen. Aller­dings sind die Zei­chen ober­halb 127 nicht im­ple­men­tiert. Dafür ha­be ich ei­ni­ge Zei­chen ein­ge­fügt, die ich als Soft-Char­ac­ters in mei­nen Pro­jek­ten ver­wen­de:

Zeichen	Position	HTML	Darstellung
Antenne	161 (0xa1)	iexcl	¡
µ	181 (0xb5)	micro	µ
Ω	937 (0x3a9)	Ome­ga	Ω

Die ein­ge­stell­te Grö­ße kann er­heb­li­chen Ein­fluss auf die vi­su­el­le Dar­stel­lungs­qua­li­tät des Fonts ha­ben, spe­zi­ell bei Ge­rä­ten mit be­grenz­ter phy­si­ka­li­scher Auf­lö­sung wie man es bei Web­sei­ten fin­det. Ändern Sie die Grö­ße um ei­ni­ge Pro­zent um ein bes­se­res User-Er­leb­nis zu er­rei­chen.

In­zwi­schen ha­be ich den Font noch um deut­sche Umaute so­wie die Bal­ken­co­des für die Füll­stands­an­zei­ge er­gänzt. Die­se sind im Stan­dard-Zei­chen­satz des HD44780 nicht ent­hal­ten, kön­nen je­doch bei Bedarf pro­blem­los als Soft-Char­ac­ters er­zeugt wer­den.

Web- und TTF-Font LED/LCD 7-Segment

Im Rah­men mei­nes Di­gi­tal-Waa­ge-Pro­jekts war ein Font wün­schens­wert, der die Dar­stel­lung auf der Sie­ben­seg­ment-An­zei­ge re­a­lis­tisch wie­der­gibt.

Da ich ei­nen sol­chen nicht im Netz ge­fun­den ha­be, bie­te ich auch mei­ne selbst er­stell­te Ver­sion zum Down­load als TTF oder WOFF an.

Dar­stel­lungs­bei­spiel:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Ab­ort. 51-23=28.

Auch hier, frei für jeg­li­che Ver­wen­dung au­ßer zum Ver­kauf!

Na­tür­lich kön­nen Sie auch hier Vor­der­grund- und Hin­ter­grund­far­be nach Ihren Wün­schen an­pas­sen, bei­spiels­wei­se für ein LCD:
rE5Et. CLEAr. don't touch. 5YNC. 1234567890. YE5. no. N0. N0. Ab­ort. 51-23=28.

Sehen Sie hier die re­a­li­sier­ten Zei­chen.

Hin­weis: Dies ist kein voll­wer­ti­ger Schreib­font! Er ent­hält nur Zei­chen die mit ei­nem Sie­ben­seg­ment-Dis­play dar­stell­bar sind, al­so z.B. ein gro­ßes A aber kein klei­nes, ein klei­nes b aber kein gro­ßes, ei­ne ge­schlos­se­ne ecki­ge Klam­mer aber kei­ne of­fe­ne (die ge­nau­so aus­se­hen wür­de wie das gro­ße C). Na­tür­lich ent­hält er auch kein x, w oder v, da die­se Zei­chen mit sie­ben Seg­men­ten nicht dar­stell­bar sind. Für ein gro­ßes O müs­sen sie ei­ne Zif­fer 0 neh­men, für ein gro­ßes I ei­ne Zif­fer 1. Sie­ben­seg­ment halt. Mehr geht nicht. Da­mit kön­nen Sie aber auch Ihr Sie­ben­seg­ment-Dis­play im Vorab recht gut aus­tes­ten!

Auch hier gilt: durch die har­ten Gren­zen des Fonts kann die Dar­stel­lungs­größe er­heb­li­chen Ein­fluß auf den sicht­ba­ren Ein­druck be­wir­ken. Wäh­len Sie ggf. den Font ei­ni­ge Pro­zent grö­ßer oder klei­ner um ein bes­se­res User-Er­leb­nis zu er­rei­chen!

Hier ei­ne Sei­te zum Testen der Fonts in un­ter­schied­li­chen Grö­ßen. Testen Sie mit ver­schie­de­nen Brow­sern auf un­ter­schied­li­chen Ge­rä­ten mit un­ter­schied­li­chen Auf­lö­sun­gen und un­ter­schied­li­chen Be­triebs­sys­te­men.