Category: Webbutveckling

Februari-release på FFU

2021-02-24 / Bobby

I dessa dagar har vi rullat ut nye versioner av våra tre viktigaste kodbaser – designen till alla guiderna – theme-ffu2, till vårt plugin som ger oss TopNav och EndNav – plugin-common, samt designen till guide-väljaren – theme-light (det ligger också annan funktion och andra sidor där, så som “Senaste uppdateringarna“).

Detta har vi nu lanserat:

Theme Light

1.2.0 av theme-light – Theme Light är alla de där småsidorna på FFU som inte är guider, alltså startsidan, felsidor, lista över alla uppdateringar, och liknande. Theme Light har nu utvidgats stort för att ta över absolut allt som vi tidigare använde ASP classic och vår Windows-server till, detta är ett kritiskt steg för att kunna helt stänga ner den servern.

Theme light kan nu:

Visa vår 404 sida, ersätter den vi har på Windows-servern.
Visa RSS för alla uppdateringar på alla våra guider, ersätter den vi har på windows-servern. Vår gamla RSS för detta dirigeras nu hit.
Visa en community-template för när den stängs ner 1 mars. Ersätter communityn som ligger på Windows-servern.
Visa vår “välkommen”-sida där man väljer väg (guider, nyheter eller annat). Ersätter sidan vi har idag på Windows-servern.
Några andra mindre fixar:
- Fixat länkar som ej funkade på uppdateringssidorna (namn och logo länkade ej till guiden på översikten).
- Länk till RSS i toppen och botten på sidor som visar uppdateringar från bara en guide.
- Förbättrad och modernare kod för hur titlar (<title>) hanteras på alla sidor. Lite småjusteringar återstår, men nu är det lättare att specialanpassa detta.
- Alla spelloggor ligger nu i /logos/ istället för i /img/ som inte gav nån mening.

Theme FFU2

1.7.2 av theme-ffu2 – Theme FFU2 används för att visa alla våra guider, och innehåller således väldigt många olika mallar, och väldigt mycket kod. Vi har gjort några lyft här för att dels visa upp våra RSS-feeds bättre, och dels för att på sikt kunna ta bort kod för saker som nyare WordPress gör för oss.

Vid sista migreringen (FFX-2-sajten) la vi in några bildgallerier på det sätt WordPress öppnar för inne i admin, för att få testa systemet gott. Och det funkade så bra, men det såg helt trasigt ut. Vi har nu skrivit om koden för detta så att dessa gallerier ser ut och beter sig exakt som de gamla, fast i tillägg använder alt och title attributen på rätt sätt.
En liten orange länk till guidens RSS-feed på startsidan efter listan men nyheter.

Plugin Common

1.6.0 av plugin-common – Vårt FFU-plugin som ansvarar för att alla delar av sajten – trots olika design på sidorna – får TopNav, EndNav, och i övrigt ser ut och funkar likadant. Detta plugin har fått flera tillskott som gör att vi kan ta bort kod andra platser, eller flytta något bort från Windows.

Tagit över all koden för att lägga in uppdateringar (posts) som skrivs på guiderna i en egen databas som vi nu lagrar tillsammans med guiderna. Detta ger oss mer flexibilitet runt val av themes i framtiden, men mest gjordes detta för att säkra serverbyte – få allt bort från Windows.
En ‘ta mig till toppen’-knapp nede till höger på alla våra sidor som aktiverat den nya topnaven (just nu är det 100% av sidorna). Den animeras snyggt och kan användas för att komma till toppen på sidan snabbt när du är långt nede i en guide och läser.
Tagit över all kod för att skjuta in länkar till alla våra olika feeds på alla sidors <head>. Förut underhölls detta manuellt på alla sajter, nu ordnar pluginet det.

Vi är nu ett stort steg närmare att inte vara beroende av Windows-servern och 15 år gammal kod full av säkerhetsproblem som inte fixas. Nu återstår bara att stänga av communityn, och att flytta hela vårt www-område till den nya WordPress-server vi satt upp för att ta över med hjälp av alla utökningar i Theme Light.

Vi sover inte, vi jobbar

2020-05-29 / Bobby

Nej då vi har inte somnat sedan sist. Vi jobbar vidare för fullt. Det som varit fokus i hela 2019 har varit att skriva färdigt nya FF7-guiden, för första skivan. I samma släng så såg vi behov för fler designelement för att kunna lyfta fram viktig information, Side Quests med mera. Detta skapade vi och har lagt in i vårt guide-theme i början av detta år.

FFU2 v1.7

Nu idag släppte vi samtidigt version 1.7 av vårt guide-theme. Det innehåller mest förbättringar för mobilanvändarna, buggfixar, samt bättre sök, samt stöd för EndNav via vårt plugin.

Vi tog också tag och gjorde några mindre knappt märkbara förbättringar på vår TopNav.

EndNav

FFUs footer/endnav har spretat i sin design väldigt. Varje sida har gjort den på sitt sätt. Du kan tro det varit jobbigt att ändra något i den. Men nu äntligen har vi flyttat den helt in i vårt wordpress-plugin så att de automatiskt läggs till alla våra guider, med kod från endast en källa.

Vi har tre olika footers, den på guidesajterna, den ljusare på guideväljaren (startsidan) samt så alla andra (upp till 10 olika). Alla dessa har ersatts av en av de två varianter vi utvecklat. Vi har en guide-variant, som passar bäst på guiderna, och en ljusare och mindre variant till alla andra sajter. Alla våra sajter som kör i WordPress har nu en av dessa, de andra får leva vidare tills de dör, utan underhåll.

Som bonus förbättrade vi designen på bägge dessa varianterna. De blev luftigare och mer polerade, samtidigt optimerade vi dem så mycket vi kunde genom att ersätta gamla bakgrundsbilder med CSS, eller bara helt enkelt tog det bort. Samtidigt har vi förbättrat väldigt för mobilanvändarna, de har tidigare oftast inte ens sett footern, nu får de den, i responsiv design.

Vi kan också bjuda på flera små enkla men klädsamma animationer, och för att balansera det annars vita och blå FFU: massa starka färger.

Bye Bye Windows (snart…)

Ett av våra största projekt, som hållit på under flera år, är flytten från Windows-servrar till PHP och WordPress. Det återstår just nu bara 4 guider och communityn, och så några sista småsidor med funktioner på www. I dagarna har vi tagit ett stort lyft för att flytta den gamla sidan som listade alla sajterna uppdateringar, den ligger nu på guidernas startsida och kan visa sista ändringarna i ett snyggt format. Man kan antingen se uppdateringar för alla guider, eller via länk från en guide se endast vad som är relevant för den. Trots att de flesta inte kommer behöva den sidan så är den värd en titt, den är riktigt snygg. Ännu en sida från Windows-servrar kan tas bort.

Utvecklingsflyt

Störst grund till att vi lyckas rulla ut så här relativt stora ändringar samtidigt utan märkbart antal buggar är vårt förbättrade arbetssätt på lokal maskin. Vi använder först Local (från Flywheel) som kör WordPress och databas lokalt. På detta sätt kan vi simulera hela FFU i en trygg miljö innan nåt läggs ut. Sen så versionshanterar vi allt genom BitBucket (genom VScode) och när det är dags att lansera något kör vi bara en git pull på servern via SSH och alla ändringar lanseras i en stöt. Tänk att vi jobbade på ett mer manuellt sätt förut … hemsk tanke.

Framtiden

För resten av 2020 planlägger vi att få flytta de där fyra sista sidorna så att det mesta av gammal asp-kod kan tas bort. Vi fantiserar också massor om en helt ny design till guiderna, trots att den utvecklats massor över åren så är den i grund och botten 8 år gammal! Kanske dags för nåt nytt. Men det är ett stort projekt så vi får se.

Nya funktioner till våra guider

2019-09-06 / Bobby

Alla våra guider har idag uppdateras till version 1.6 av vårt egna WordPress theme. Det är inte en helt ny design, men mycket är förbättrat eller nytt. I denna version har vi fått med nästan hundra små (och några stora) förbättringar – synliga och osynliga. Här är de du säkert kommer ha mest glädje av:

Bättre på mobil

Vi har rent generellt jobbat ganska hårt på att FFU ska se snyggare ut på mobil och mindre skärmar. Detta var inte alltid helt optimalt förut, till exempel gick hela guiden in i mobil-läge på relativt stora skärmar, vilket är lite onödigt. Vi har nu fixat och jobbat på detta mer genomtänkt. Vår helt omdesignade mobilmeny är en stor del av detta (mer om den senare)! Dessutom, går du in på våra bildgallerier så kommer du kunna njuta av fullt stöd för att gå mellan bilderna genom att swipa med fingret.

Bättre guide-navigator

Vi har små länkar för att komma till nästa (eller förra) del i guiden. Detta är väldigt praktiskt och uppskattat, men funktionen har saknat det där lilla extra. Nu går vi hårt ut och introducerar en uppdaterad sådan navigator. Vi lyfter fram vad de olika delarna heter, så att du bättre vet vart du är på väg. För att lyfta fram det vanligaste man vill göra när man kommit till botten av en sida så har vi lagt in en stor och tydlig knapp för nästa sida i guiden. En liten detalj som underlättar mycket för den som spelar samtidigt som denne läser våra guider. Självklart är mobilstödet för denna navigator väldigt bra.

Ny mall: innehållsförteckning

Våra guiders guider (wow, kan man säga så? – men jag menar alltså själva FF7-guiden som tar dig genom spelets story) har haft lite bristande översikt på alla de delar/kapitel de består av. Vilken del ska man börja på? Vart hittar jag information om boss X? Vart kan jag läsa om grotta Y? Det ordnar vi genom att helt omarbeta hur vi gör översikten på en guide – möt vår nya innehållsförteckning! Med snygga bilder och tydliga rutor kan man snabbt få sig en översikt av allt innehåll. Bilderna matchar så klart innehållet. Under varje kapitel (vi ska nu pröva kalla detta för “kapitel” mer konsekvent) visas korta “taggar” som representerar allt det stora just detta kapitel tar upp, men utan att spoila för mycket. Du har nu den perfekta översikten direkt på guidens startsida! Just nu är detta bara introducerat på nya FF7-guiden, men kommer till fler guider framöver.

Syskonnavigering

En egen liten navigator för att lätt navigera till nästa (eller förra) sidan + tillbaka till översikten. Aktiverad på alla bossar och karaktärer. Fungerar i stort sett exakt som guide-navigatorn beskriven tidigare. Självklart med utmärkt mobilstöd. Vi hoppas detta ska göra det lättare för dig att komma igenom flera bossar på en gång, samt få klickat dig runt ännu mer på FFU!

Omdesignad och bättre mobilmeny

Detta är möjligen en av mina personliga favoriter, en helt ny meny för mobil! Inte bara är den riktigt snygg och i sann gammal Final Fantasy-anda, den är också extra funktionell genom att den sätter sig fast på toppen av din skärm när du skrollar ner på sidan. Använd den närsomhelst för att ta fram alla sidor på en guide, så att du lätt hittar dig till nästa sak du söker. Som bonus är den helt gjord i CSS och extremt mycket snabbare än den gamla.

Stora boss-utklipp till guiderna

Guiderna kan enkelt hämta in data om en boss bara genom att redaktören länkar till bossen. Vi hade detta förut men introducerar nu en större och bättre inforuta för bossar – den visar HP, svagheter, styrkor, samt kortfattade tips för att besegra bossen (självklart med en länk vidare till full beskrivning på boss-sidorna). Används än så länge bara i nya FF7-guiden. Dessutom prövar vi något ganska nytt – gul och orange färg i vår design för att bryta lite mot det blå.

Mängder av småförbättringar

Guiderna är i behov av mer rikt innehåll, så vi lägger in snyggare citat och tydligare markering av vad du ska välja i menyer eller i dialoger i spelen. Vi har också lagt in små toningar, animeringar, och grafiska uppdateringar här och där som du kanske (eller kanske inte) lägger märke till. Även jobbet för oss att skapa helt nya guider, samt underhålla existerande guider, har förbättrats enormt (för att inte nämna alla förbättringar vi gjort på kodbasen). Vill du veta mer, eller få tekniska detaljer så skrev vi om det för någon vecka sedan.

Tack för nu. Vi får se vad som väntar i nästa version, om det blir 1.7 eller om vi hoppar direkt till 2.0. Men jag har flera önskemål, bland annat bättre översikt samt sök till bossarnas sidor.

FFU2 Theme 1.6

2019-08-24 / Bobby

Ett märkligt namn – “FFU2 version 1.6” – men FFU har haft två större eror – den gamla där alla sidor såg ut som de ville och var handkodade och svåra att underhålla, bestående av mest HTML och lite ASP classic (utan databas eller admin) på en FTP-server. Och så den nya där de alla körs på WordPress, har mer modern kod (HTML5, CSS3), ny server och subdomän (“guide.”), och samma snygga design överallt. Den eran kallar jag “FFU2”. Alla våra guider flyttas sakta men säkert över till detta system.

Den design vi har nu på FFU2 har redan över 7 år på nacken, men den lever och utvecklas lite hela tiden så det känns inte gammalt (över 500 ändringar har gjorts över åren). Just nu är vi på version 1.5.1, det stora nya som kom med 1.5 var att väldigt mycket kod skrevs smartare och effektivare, så våra sidor laddas fortare, något som bidragit till toppbetyg hos många tjänster online som mäter hastighet.

Nu jobbar jag på 1.6. Där tar vi tag i ett gäng gamla irritationer, utdaterad kod, repetativ kod, osmart kod, och förenklar mycket för oss själva. Samtidigt utförs flera önskningar vi haft en längre tid, speciellt ett större lyft på guiderna och bossarna.

Några highlights på det vi jobbar med:

Design och funktioner

Småjusteringar på designen, bland annat “transitions” och “gradients”:
Ny större boss-snippet (visar det viktigaste om varje boss) till guiderna, i härlig orange färg:
Förbättrad guidenavigator (med helt ny och tydlig “nästa”-knapp):
Ny “syskon-navigering” (baserad på guide-navigatorn), lagt in på alla karaktärer och bossar:
Ny startsida/översikt till våra guider, en “ruta” per del/kapitel, med information om innehållet:
“Sticky” meny för varje guide (sajt) som följer med när du scrollar på mindre skärmar:
Fixat “med i striden”-funktionen på bossar (hade inte funkat på länge):

Övrigt

Generellt bättre på mindre skärmar (allt blir inte klumpigt stort redan vid 960 pixlars bredd).
Uppdaterat Lightcase (för bildgallerier) från version 1.6 till 2.5 (nu med swipe-stöd på mobil).
Helt omskriven kod för menyn (löser flera problem vi haft).
Omarbetad och förbättrad JavaScript.
Förbättrad CSS och struktur.
Massa annat smått.

Du kan följa utvecklingen direkt i källkoden på Bitbucket om du vill, vi utvecklar i en egen branch (gren). Namnet “MENU2” är historiskt, jag skulle bara skriva om logiken bakom menyn för att fixa tre gamla långlivade buggar som irriterat mig … men skulle bara fixa lite till i samma släng.

Version 1.6 är precis runt hörnet och vi räknar med att bli färdiga med de sista 5-6 små förbättringarna i loppet av en vecka. När allt är på plats så släpps det över hela FFU omedelbart tack vare vårt smidiga uppsätt med git som jag skrivit om tidigare.

En ny sak som är värd att nämna, även om den inte syns, är att jag för första gången på länge har en ordentlig lokal testmiljö, något som snabbar upp utveckling och testing oerhört. Detta tack vare Local By Flywheel, ett enkelt och användarvänligt program för alla som jobbar med WordPress och behöver sätta upp lokala miljöer.

Ny spelväljare/guideväljare lanserad

2017-06-10 / Bobby

Vi har pratat om det tidigare och haft planerna på det länge, men så plötsligt fick jag lite tid över och kunde bygga och färdigställa vår nya guideväljare (en slags karta med alla FF-spelens logos, som man kunde klicka på för att komma till det spelets guide/sajt).

I många år låg denna guideväljare som en del på nyhetssajten, på /games.aspx. Inte så logiskt eller enkelt att komma ihåg. Mer logiskt var ju så klart att ha den som en helt egen sida, och i “root” på vår nya fina femåriga guide-server, på guide.ffuniverse.nu/. Men där hade vi lagt upp vår blogg. Efter många om och men så fick vi den flyttad, och då öppnade sig möjligheterna för att skapa vår nya guideväljare.

Ny design

Den har en enkel design. En lätt svag gråblå färg i bakgrunden som tonas ut i nästan vitt med en gradient. Självklart helt gjort med CSS.

background-color: #f1f3f5; /* Måla hela sajten i denna färg */
background-image: linear-gradient(
    to bottom, /* Skapa en gradient från toppen till botten */
    #c9ced7 0px, /* Första färgen är denna, rita den fram till nästa färg (totalt 1 pixel, för att ge en liten "kant"-effekt) */
    #adb5c2 1px, /* Nästa färg kommer redan efter 1 pixel, detta är starten på gradient */
    #f1f3f5 131px /* Gör en gradient mellan förra färgen och denna på en längd av 130 pixlar */
);

Detta är kopierat från guidernas egna WordPress-theme så att man ska känna igen sig. Alla logos känner ni kanske också igen stilen på, det är också samma stil som på guiderna. En tunn vit ram runt bilden, med skugga bakom. Flera logos vi inte hade från förut var tvungna att skapas, men det var en relativt enkel jobb eftersom vi har Photoshop-mallar för det mesta av våra nya sajter.

Grid

Alla logos läggs upp i rader, tre per rad på en dator med stor skärm, och en per rad på mobil. Detta mobilstöd är också helt nytt, en liten bonus. För responsiv design använder vi ett tunnt och enkelt CSS-ramverk som heter Simple Grid, det påminner om Bootstrap men är enbart för att skapa “rutnät” på mobil och PC. Stora fördelen är att det är en fil som bara är 1 kB stor, istället för nära 100 kB på Bootstrap.

<div class="row">
  <div class="col-6 col-12-sm">
    Full rad på mobil, halv rad på PC.
  </div>
</div>

Flexbox

Eftersom alla logos ser väldigt olika ut – jämför till exempel FF2 och FF12! – så måste vi se till att alla “rutor” de placeras i blir lika höga. Detta är något som tidigare var väldigt svårt med CSS, men fick till och med ibland gå tillbaka till att använda tabeller för det, något som är semantiskt inkorrekt. Men för några år sedan kom CSS Flexbox, och nu kan man använda det fullt ut.

Man har först en box som omslutar alla småboxar, denna huvudbox ges flex-stöd.

display: flex;

Och så när jag lägger detta på en <ol> lista så förstår webbläsaren att denna är i flex-läge och ska anpassa alla innehållande boxar efter varandra. Men vad händer när huvudboxen blir för stor för att alla boxar i den ska få plats? Då säger man bara att de ska puttas ner på nästa rad med denna:

flex-wrap: wrap;

Sen ska man lägga display: flex; också på varje innehållsbox. Då kommer alla boxar (alla <li> element) bli lika breda och höga oavsett storlek på skärmen eller innehållet. Superlätt! Inte en enda linje JavaScript behövs (som förut).

En sista fin detalj är att om man vill centrera alla logos horisontalt, men vertikalt placera dem på botten, så är det också sjukt lätt nu jämfört med förut. Dessa två linjer ordar det hela.

li {
  align-items: flex-end; /* Vertikalt */
  justify-content: center; /* Horisontalt */
}

Nu är allt placerat som det ska.

Grupper

För att förenkla för besökaren så delar vi in – precis som förut – alla spelen i tre olika grupper. Den numrerade originalserien av Final Fantasy (FF7, FF8, men inte FFX-2 t.ex.), alla andra FF-spel, och så resten av Square Enix-spelen (som ej hör till FF-serien, som till exempel Chrono Trigger).

Footer

Längst ner på sidan ligger några snabblänkar till FFUs olika större sajter, samt avslutande länkar med nyttig info, så som cookies. Alla dessa länkar använder sig nu av de nya “dev.” och “om.”-servrarna.

Historik

Som referens har du här en bild på den gamla designen (skulle gissa på 10 år gammal, och inte stöd för mobil). Den kan inte längre nås eftersom jag redan ändrat på alla länkar i TopNav, i footers, och andra ställen på FFU.

Snabbare hemsida med CSS istället för bilder

2017-04-07 / Bobby

De sista par veckorna har jag jobbat sakta men säkert med att plocka ut några bakgrundsbilder i från vår design och ersätta dem med endast några få linjer text (CSS).

Bakgrundsbilderna är oftast små, så de tar inte tid per styck (eller tillsammans) att ladda ner. Men webben fungerar i bakgrunden i stort sett på samma sätt som när den för många år sedan först slog igenom. Saker går i en och samma “lina”, så när du kommer in på FFU så får du första själva koden och texten till sidan, sedan kommer alla bilder som står för själva grafiken, och de skickas till din dator en och en. När vi då har runt 30 bilder för olika grafiska element i vår design så springer tiden fort iväg. Millisekunder blir till sekunder. Och sånt märkt. Speciellt på mobil med dålig täckning, t.ex. när du åker tunnelbana eller står ute i en skog (varför du nu ska surfa på FFU när du är i en skog låter jag vara osagt).

Med CSS (CSS3 för att vara specifik) kan man lätt göra väldigt många effekter idag som för 10 år sedan bara kunde göras i t.ex. Photoshop och läggas upp som bilder (jpg, png, gif). Slutresultatet är inte visuellt annorlunda, man får i princip exakt samma resultat, men det krävs ingen extra nerladdning för filen och sidan kan ritas upp för besökaren lite snabbare.

Dessa veckor har jag fokuserat på bakgrundsgrafik som jag tidigare gjort i Photoshop och som innehåller gradienter av färger, och/eller linjer (vertikalt eller horisontalt) för att ge skugg/ljus-effekter på linjerna. I nästan 10 fall av bilder har jag kunnat bytt ut bilderna mot en linje CSS vardera. Med linear-gradients i CSS kan vi åstadkomma ganska häftiga effekter, enkelt. Och för att ändra i effekten behöver man bara ändra i denna kod, man slipper alltså helt att starta upp några bildhanteringsprogram eller liknande.

Gradient färg

Denna lilla fina gradient ligger bakom inloggningsformuläret till Communityn uppe i TopNav. Den designades för snart 10 år sedan, som en bakgrundsbild. Denna onödiga nerladdning har jag nu tagit bort och ersatt med denna rad kod i CSS istället:

background-image: linear-gradient(to bottom, #c5d1d9, #74899a);

Genom att bara säga att bakgrundsbilden är en så kallad linjär gradient, som går från toppen ner till botten (top bottom) samt de färger som ska användas, så klarar din dator och webbläsare att blixtsnabbt måla upp gradienten. Allt utan att ladda ner en endaste bild.

Detta är alltså gjort på flera ställen i TopNav och vårt FFU-tema till WordPress. Genom detta laddas sidorna lite snabbare, och det gillar inte bara sökmotorer som Google, utan även du och jag som använder sidorna.

Ett mer komplicerat exempel är en dubbla sidoram vi har i vår “footer” runt våra populäraste guider. Den ser ut så här idag (och fram till nu var denna grafiska “effekt” uppnådd med en bakgrundsbild):

Koden för dessa linjer (en tunn vit tillsammans med en tunn svart linje till vänster, och samma upplägg till höger – alla med en genomskinlighet på 75%) är lite mer komplex än den tidigare vi såg.

background: linear-gradient(
     to right,
     hsla(1,1%,100%,0.15) 0px,
     hsla(1,1%,100%,0.15) 1px,
     hsla(1,1%,1%,0.15) 1px,
     hsla(1,1%,1%,0.15) 2px,
     transparent 2px,
     transparent 179px,
     hsla(1,1%,100%,0.15) 179px,
     hsla(1,1%,100%,0.15) 180px,
     hsla(1,1%,1%,0.15) 180px,
     hsla(1,1%,1%,0.15) 181px
);

Här definierar jag upp att de genomskinliga färgerna bara ska vara en pixel breda, först vit, sen svart, sen genomskinligt i merparten av bilden, för att så göra två nya linjer. Inte kanske det första man hade förväntat sig uppnå med linjära gradienter, men såhär kan man göra många kul effekter på sin webbsida. Utan bilder!

Och, man ser ingen skillnad på resultatet. Här är två bilder, en från före uppdatering (med bakgrundsbilder) och en från efter (med bara CSS-kod):

* Bakgrunden som kommer fram till höger om login-formuläret har inte med denna ändring att göra.

Här är hela 3 bakgrundsbilder ersatta av CSS.

Första version av plugin laddar in TopNav

2017-03-25 / Bobby

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

Nytt lanseringsflyt med Git

2017-02-15 / Bobby

I alla år har jag jobbat med webbsidor på det mest grundläggande sättet när det kommer till att få ändringar ut “live”. Jag har öppnat ett FTP-program, oftast Filezilla, och så laddat upp filerna på servern. En efter en. Detta funkar ganska bra när man jobbar med en hemsida från bara en dator, och bara en person. Så fort nån av dessa parametrar ökar så kommer problemen. Man börjar skriva över varandras ändringar, eller sina egna.

För cirka ett halvår sedan moderniserade jag sättet jag får ut ändringar på genom att introducera Git på servern. Git är ett versionskontrollsystem, den har koll på ändringar i alla filer och sparar historik på allt. Det som är extra fint är att man oftast också har någonstans online där filerna lagras i tillägg mot lokala hårddisken. När man så slår upp en ny dator så säger man bara “Hämta hem de sista ändringarna från servern” och du vet att du alltid har rätt filer.

$ git pull origin master

Vi använder ett privat konto på Bitbucket för våra projekt. Men har också jobbat en god del med Github och öppna projekt (öppen källkod). Det passar dock bättre med ett privat konto för just FFU =)

En stor bonus med Git-kontrollerad uppdatering av filer – förutom det att det gör det superenkelt för mig att jobba på sajten från flera olika datorer – är hur jag får ut filer på FFU. Jag kan nu ändra massor av filer i massa olika mappar lokalt, testa det till perfektion, och så istället för att ladda upp en och en fil (där jag garanterat kommer glömma minst en viktig fil) bara går in på servern och säger “hämta alla ändringar från Bitbucket” och boom – alla ändrade filer hämtas ner i en smäll.

$ git pull origin master

Hur smidigt som helst! Jag har inte använt ett FTP-program sedan dess. Och utan detta nya sätt att jobba hade jag inte utfört de stora strukturella ändringarna jag fått gjort på Communityn i det sista (endast rensning/flyttning/namnbyten på filer). Där var det snack om över 50 ändringar i 40+ filer, det hade tagit år och dar med FTP att hantera, men nu bara ett kommande med Git.

En sjuttifemte bonus med Git är att jag nu har megakontroll på alla filer över hela sajten. Genom att bara fråga Git “Är några filer ändrade” så skannar den hela disken och svarar snabbt med “nej” eller en lista på ändrade filer. Jag har nu kontroll på om några skräpfiler eller “hacks” smyger sig in på servern (vi har haft stora problem med det tidigare).

$ git status

Det är allt. Det kommandot berättar exakt vad som ändrats och inte ändrats. Kan inte förstå hur jag överlevde med att jobba på det gamla sättet =S

Höststädning och ny 404-sida

2016-12-20 / Bobby

Jag tänkte ta upp två FFU-problem som blivit löst denna höst. Mängder av skräpande filer (vissa hackade) och totalt värdelös felsida.

FFU har länge (sedan runt 2004) haft felsidor. Alltså sidor som fångar upp besökare som klickar på gamla länkar eller skriver fel adress. Dessa fick bara mer och mer trafik, mest på grund av bilder som tagits bort. Men de funkade långt ifrån 100%, var röriga att använda och programmera, koden var dålig. Dessutom loggade de överdrivet många fel – den sidan stod som FFUs populäraste sida! En enda röra helt enkelt.

Nu har detta blivit mycket bättre. Vi har utvecklat en helt ny felsida för status 404 (sidan finns inte). Lite fräschare design, bättre hjälptexter, och andra finesser.

Vad tycks?

Denna nya felsida är mycket smartare (och snyggare). Den slår inte vilt omkring sig, och alla fel registreras bättre. Detta har gett oss möjlighet att storstäda på servern. Sajter som vi förut flyttat från windows-servern till guide-servern har legat kvar med sina gamla filer. Inne i dem låg nämligen all redirect-kod. Som mest i över två år har filer legat och skräpat såhär. Vissa till och med hackade, vilket så klart gav oss massa bekymmer. Nu är de äntligen raderade. Istället hanteras redirects i serverns web.config som permanenta redirects (det smartaste sättet att hantera gamla länkar på). Web.config är en serverfil som analyserar varje besök – “Vilken sida är du på väg til? Jaha den ja, den har vi flyttat, jag skickar dig till ny adress istället.”. Och med tiden går fler och fler på rätt sida direkt istället för till de gamla. 404-sidan registrerar också de få som ännu är vilsna så att de manuellt kan hanteras.

Hundratals mappar och filer har raderats från servern i denna process. FFU har aldrig vägt så lite. Efter detta har vi sett statistiken för besök på 404-sidan i princip nå noll efter detta införst, 404-sidan är inte längre en av FFUs mest besökta sidor.

Sajterna på Windows-servern vi kunnat helt radera är: 1, 2, 4, 5, 11, 12, 13, Kingdom Hearts, Chrono Trigger, Crystal Chronicles, och Tactics Advance. Dessa finns nu bara på guide-servern i WordPress. Ljusår lättare att administrera.

Som bonus betyder också färre filer på disk att vi har mindre att hålla kontroll på, och generella fel är lättare att identifiera.

Ny mall: FAQ dragspelsmeny

2015-10-03 / Bobby

Vår gamla FAQ/Support-sajt är tänkt att med tiden flytta mer in på varje enskild guide-sajt. Detta så att man inte ska tvinga besökarna ut från guiden för att få svar på vanliga frågor. Dessutom är det bättre för sökmotoroptimalisering att man har denna info direkt på varje guide. FAQ-delen kommer dock leva kvar, möjligen i förändrad form, för att samla alla vanliga frågor för flera spel (och sajten) utan att besökaren behöver gå via guiderna. Två vägar till samma mål alltså.

Just nu är det bara vår FF7-guide som har en sådan FAQ-sida direkt på sajten. Vi håller fortfarande på och testar ut systemet för att se om det ska bli en permanent lösning för alla sajter. Och småjusteringar behövs hela tiden. Men de andra sajterna ska uppgraderas till detta nya system när vi är redo.

Men som det såg ut och funkade på FF7-sajten var extremt enkelt. Jag skapade bara en helt vanlig textsida som hette “Vanliga Frågor” och la sen in varje fråga som en undersida. Frågan var titeln, och brödtexten var svaret. En PHP-funktion listade så länkar på huvudsidan ner till alla undersidor.

Problemet med detta är två. Dels kom det extremt långa titlar på sidor in i menyn till vänster, som förstörde eller såg riktigt dåligt ut. Och dels så var det lite mer jobb eftersom man behövde första skapa den nya frågan med svaret och efter det sortera in den rätt i menyn.

Så det jag gjorde var att programmera en ny WordPress-mall i PHP med stöd av lite JavaScript. I WordPress så tog jag bort alla undersidor och flyttade istället in dem på huvudsidan, “Vanliga Frågor”, och la varje titel som en “h2”-rubrik. Min nya mall-kod analyserade denne text och gör en navigationsmeny av alla h2:or på sidan. Man kan lätt identifiera dem som dragspelsmenyer på grund av pilarna som visas i menyn före länktexten. Klickar man på en av dessa frågor så hämtas texten (svaret) automagiskt upp av JavaScript och visas direkt under, man scrollas också ned till rätt ställe på sidan på ett mjukt och smidigt sätt.

Testa gärna vår nya Vanliga Frågor-mall och säg vad ni tycker. Fler sajter följer efter en liten testrunda med mindre justeringar på koden