Category: FFUniverse

FFU fyller 20 år!

2017-11-18 / Bobby

Final Fantasy Universe har funnits på nätet längre än de flesta andra sajter. Den 17 november 1997 släpptes Final Fantasy VII i Sverige, och det spelet fick mig omedelbart att göra en liten hemsida om det. Den växte. Minst sagt. Idag har vi tusentals av sidor med guider, nyheter, och forumtrådar.

För att fira detta stora jubileum så har hela detta år vigts åt att göra omfattande ändringar på sajterna. Detta är vad vi har åstadkommit de sista månaderna. Och när vi ändå är igång så tar vi en blick in i framtiden.

Ny Nyhetssajt

Ny design och ny adress. Alla gamla nyheter (nästan 1500 stycken) har också migrerats. Den gamla sajten har i princip helt tagits ner. Kvar är bara några få sidor som också ska försvinna på sikt. Dessutom kör vi inbygd kommentering vi Disqus istället för att lägga tid på nåt eget system.

Besök vår nya nyhetssajt!

Ny “om oss”-sajt

Vi hade ett kaotiskt system förut där information relaterat till sajten i stort låg spritt överallt och man behövde klicka sig runt massor för att finna fram. Nu samlas allt under en liten egen del på FFU med en sparsmakad design.

Besök vår Om oss-sajt!

Omstrukturerad support

FFU var unika på världsbasis med att erbjuda support på många FF-spel via epost. Detta system höll dock inte i längden, det användes inte, och var tidkrävande i underhåll. Dessutom placerades viktig hjälp till spelen utanför själva guiden till spelet. Nu lägger vi istället in vanliga frågor direkt i guiderna, enkelt sökbara. Support på spelen kan man fortfarande få, men via vår Facebook. Det lilla som är kvar av dessa sidor kommer försvinna.

Utvecklarbloggen

Vi hade denna blogg länge som startsida till guiderna. Det var förvirrande och dåligt. Nu har vi en egen plats bara för bloggen och annat tekniskt vi önskar dela. I framtiden är det tänkt att delar av FFU läggs ut som öpen källkod här.

Ny spelväljare

Förr hade vi en väldigt välbesökt sida som listade alla guider vi har. Den var ful och sliten och låg på en ologisk adress. Denna sida är nu helt omgjord och ligger på rooten till guiderna. Där kan man få en bra överblick över alla spel vi har i ett snyggt och dessutom mobilanpassat format.

Besök vår nya guideväljare!

Smartare TopNav

I toppen på alla sidor ligger en massa länkar till våra sidor och guider. Den har behövts byggas smartare för att funka på alla våra sajter utan manuellt jobb. Nu klarar den hämta data från alla våra servrar och visa på ett identiskt sätt. Dessutom fick vi äntligen på plats en riktigt bra mobilvariant av denna meny.

Diverse rensningar

Databaser, filer och kod har kunnat städats upp massor tack vare de stora grepp vi gjort.

Framtiden

Vi har fortfarande några guider i det gamla formatet. De ska migreras över. Först ut blir FF8-sajten, som nästan är färdig. Efter det ska FF9, FF10 och FFX-2 guiderna följa samma resa.

Gamla startsidan ska helt göras om. Ingen info eller nyheter ska finnas kvar där. Bara en vägvisare till våra olika delar. Också FAQ-sajten ska bort, allt ska in på guiderna.

Ny TopNav är under utveckling redan nu. Ny mer modern design står i fokus.

Ny design till guiderna står också på tapeten, och är något vi hoppas få lanserat under 2018. Där ska guiderna lyftas till nya höjder.

Håll oss under övervakning, här händer massor!

Ny nyhetssajt – öppen beta

2017-09-25 / Bobby

Det tog lite tid men nu finns en öppen beta av vår nya nyhetssajt. Du är välkommen att testa den!

Den går under det interna kodnamnet “nyheter.” och är tänkt att helt ersätta den gamla nyhetssajten vi har haft i väldigt många år nu (typ 10 år). Detta är en del av våra 20-årsjubileumsplaner. Alla gamla nyheter kommer att migreras (detta migreringsscript blev klart idag) men alla gamla kommentarer raderas. Gamla sidor med information flyttas till “nyheter.” eller “om.”, många har redan flyttats.

Nya nyhetssajten använder WordPress som backend/redigeringsverktyg, Disqus som kommentarsystem, och ett öppet design, Sirius (ej utvecklat av oss). Nyheter får stora fina toppbilder, texten är lättläst, och det är ett lätt system att jobba i. Dessutom är det lägre tröskel för att kommentera på saker. Och självklart är det lätt att dela allt på sociala medier.

Ta gärna en titt. Vi började producera nytt material i förra veckan och har mycket nytt på gång. Och är du skrivsugen och vill hjälpa oss på en av de största och äldsta FF-sajterna på nätet så är det bara att säga till, vi söker efter bra folk just nu!

I nästa vecka kommer vi migrera över 1472 gamla nyheter till systemet. Det är allt vi skrivit under vår 20 år långa historia.

Provkör betan av vår nya nyhetssajt!

Vårt sista nyhetsbrev på communityn

2017-06-19 / Bobby

I dagarna har jag spammat 2000 gamla avstängda användare på FFUs community, vissa som inte varit aktiva på många många år. Anledningen är att vi firar 20 år i år och jag önskar aktivera de få som har lust att bli aktiva igen. Kanske inte primärt via communityn, men gärna via andra kanaler så som Twitter och Facebook, och våra guider.

Nej då, communityn kommer inte läggas ner, men mycket oanvänd funktionalitet kommer att pensioneras. Vissa saker har legat och skräpat i många år. Likaså användare. Allt detta ska raderas. Men några har faktiskt bara glömt oss medan livet fortsatt susa vidare. Dessa önskar vi ge en sista chans att ta upp kontakten med oss igen.

Detta är brevet jag skickade ut (och redan nu har vi fått nya följare på Twitter och fans på Facebook):

Vårt sista nyhetsbrev? | Communityn på FFUniverse.nu
Hej,
Detta är mycket troligen det enda nyhetsbrev jag skickar dig. För väldigt många år sedan – kanske över 15 år sedan till och med – registrerade du ett medlemskap på svenska Final Fantasy-gemenskapen FFUniverse.nu
Minns du inte oss? Det är ok. Jag minns inte vad jag gjorde igår, än mindre för 15 år sen. Vi har inte dött eller gått under, vi lever och skriver guider fortfarande. Bland annat för FF15, FF7-remake, FF12 remastered, och en massa annat!
I år – i november – fyller vi 20 år. Det är inte överdrivet många sajter på internet som hållit sig flytande så länge. Detta önskar vi så klart att fira stort med våra vänner.
Är du intresserad av att ta del av detta och fortfarande vara vän med oss så önskar vi att du gör något av följande (eller alla tre) för att fortsätta hålla kontakten (vi kommer inte skicka fler såna här brev):
* Följ oss på Twitter – https://twitter.com/FFUniverse_nu
* Gilla vår sida på Facebook – https://www.facebook.com/ffuniverse.nu/
* Vår community – http://www.ffuniverse.nu/community/
Och logga gärna in på communityn igen (begär glömt lösenord om du inte minns). Då ser vi att du är aktiv och vi kan ta med din användare till framtida system. Vi gör nämligen stora arbeten på sajten för att uppdatera gammal teknologi, och dessvärre ser vi att det mesta måste kastas ut och bytas ut mot något nytt. Alla inaktiva användare kommer då försvinna.
Så, om du bara blev irriterad för detta mail så behöver du inte göra nånting, det kommer inte fler. Blev du glad och vi väckte nåt gammalt gott minne hos dig – bli vän med oss igen, släpp in oss i värmen!
Med vänliga hälsningar,
Bobby Westberg – Webmaster

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.

Två “nya” sajter på väg

2017-06-05 / Bobby

Vi har två nya sajter under utveckling sedan en tid tillbaka, du surfar på en av dem – “dev.ffuniverse.nu”.

Ordet ny är väl en överdrift för denna blogg är densamma som förut, bara på en annan adress. Det var inte långsiktigt logiskt att använda root-sajten på guide-servern som blogg. Det funkade i fyra år men inte längre.

Utvecklarsajten skapades därför, här på dev.ffuniverse.nu. Primärt ska detta vara vår blogg, vi fortsätter som förut med inblickar i våra planer och vår utveckling. Men på sikt kan vi här dela mer “bakom”-grejer, öppen källkod, med mera. Just nu ligger här bara de överflyttade blogginläggen från gamla servern i samma design som förut.

Den andra sajten är dock helt ny. Den heter om.ffuniverse.nu och ska innehålla all information som gäller hela FFU. Till exempel information om hur man kontaktar oss eller hur vi använder cookies, eller vår historia (20 år!). Designen där är gjord av samma person som designat bloggen (ett fritt WordPress-tema). Den klär utmärkt en så enkel sida med fokus på bara text.

Vårstädning efter 20 år

Anledningen till denna omorganisering är vårt 20-årsjubileum och de stora strategiska grepp vi tar. Guide-servern ska fortsätta med sina högkvalitativa guider, och till slut ska alla våra guider ligga där. Då kan vi göra oss av med en mängd gammal och dålig och seg teknologi. På root, där bloggen låg förut, ska vi ha en enkel lista med alla logos till spelen så att man fort kan välja guide. Detta är mer logiskt än att ha det på www.ffuniverse.nu/games.aspx där det ligger nu lite för undangömt. Och svårt att komma ihåg. Denna ändring kommer inom nån månad.

“Om”-sajtens största syfte är att rensa nyhetssajten från information och sidor som inte är nyheter. Detta gör att vi redan nu kunnat radera en mängd gamla filer och text. Väldigt lite återstår för att denna sajt ska kunna utannonseras officiellt som färdig, bara uppdaterade länkar runt FFU.

Det faktiska målet

Parallellt med dessa småsajter pågår något mycket större och viktigare – det som händer med “om.” och “dev.” är bara små pusselbitar. Vi skalar bort del efter del av vår existerande nyhetssajt för att faktiskt kunna helt ta bort den och sätta upp en helt ny på en annan plats på FFU. Vi jobbar just nu för fullt med att migrera och snygga till alla tusentals gamla nyheter, för självklart ska de leva vidare.

När vi kommit lite längre i detta jobb så ska ni få ta del av en beta och mer info. När så nyhetssajten är flyttad kan vi konkludera med att all asp.net-teknik på servern är borta och det innebär avsevärt enklare underhåll av TopNav och annan infrastruktur på sajterna. Hela den gamla nyhetssajten ska då raderas och endast en introsida ska ta dess plats, där får man en översikt på hela FFU.

Vi kommer också i denna stora process lägga ner FAQ-sajten. Den splittas upp och läggs in på varje respektive guide (ett arbete dom pågått en längre tid redan) medan sajt-info flyttas till “om.”-sajten.

Kvar av gammal teknik blir då bara communityn. Och den som hänger med oss in i nästa år får se vad vi kan tänkas hitta på då.

FFU – 20 år på nätet – planerna

2017-05-20 / Bobby

FFUniverse firar i sluten av november smått otroliga 20 år på internet. Vi har funnits längre än de flesta sajter där ute. Vi har hållit på utan stopp sedan 1997. Ganska imponerande för en liten guide som började när en 16-årig Örebroare la upp för att hjälpa andra som spelade Final Fantasy VII.

Det är några månader till vi fyller år, men hela detta år har vi starkt fokuserat på att göra väldigt stora grepp på baksidan, i våra interna system. Tråkiga men viktiga grepp för att kunna överleva 20 år till. Mycket gammal teknologi har sakta men säkert bytts ut. Jobbet började egentligen redan med 15-årsjubileumet och den nya FF7-sajten i 2013.

Vi började med en sajt åt gången. De togs ner från Windows-servern, där de låg som statiska “.asp”-filer (eller ASP.NET), med all text “hårdkodad” som HTML. Alla ändringar behövdes göras direkt i filerna av någon webbutvecklare. Väldigt bökigt, så oerhört många ändringar blev inte ens gjorde. Väl nere från Windows-servern så la vi upp dem på en egen sajt i WordPress, alla med samma design, menysystem och funktionalitet. Detta underlättade massivt för oss, och det ser man på att vi nu kan uppdatera dessa guider lätt och ofta med nytt material! Sedan dess har vi flyttat över 16 FF-sajter! Det återstår nu bara 5 sajter, varav en (Sword of Mana) inte kommer att flyttas.

Tidigare i år flyttades FFVI-sajten, nu jobbar vi på FFVIII-sajten, och resten av året hoppas vi på att få gjort något med de sista stora: FFIX och FFX-sajterna. Vi ska dessutom göra ännu större ansträngningar för att helt få bort gammal teknologi.

Den största boven på vår server just nu är den gamla nyhetssajten. Så idéen här är att helt få den bort och sätta upp en ny sajt på “nyheter.ffuniverse.nu”, också den i WordPress. Där ska vi så klart importera alla gamla nyheter, men också tillföra en massa nytt som bättre kommenteringssystem (via Disqus), bättre möjligheter att dela intressanta saker, bland annat. Efter det ska det mesta av nyhetssajten som idag ligger på “www.ffuniverse.nu” (root) tas bort. Där ska i stället ett slags FFU-nav växa upp, en vägvisare vidare in på våra sajter.

När det är gjort så kommer vi också flytta denna blogg bort från root på “guide.ffuniverse.nu” och ge den en egen subdomän, för ordningens skull. Den kommer hamna på antingen “blogg.” eller “dev.”, jag tror mest på det sistnämnda för då passar det fint att samla lite annat där. Då lämnas “guide.”-serverns root-sida öppen för att helt ersätta gamla “/games.aspx” (sidan som visar alla spelens logos). Vi får då en mer logisk struktur, där på root av guide-servern väljer du vilken guide du vill titta i.

Det ska också ändras lite i strategin. FFU var tidigt en av få som erbjöd support på epost på de flesta FF-spelen. Något vi erbjöd gratis. Detta har i princip ersatts av forum, Facebook, och liknande. Så vi kommer att lägga ner denna funktionalitet, och därmed mycket av FAQ-delen av FFU. Vi flyttar all kontakt in på Facebook, och alla spelens “Vanliga Frågor” ska flyttas in på respektive sajt (detta har vi redan sett på alla guide-sajterna, t.ex. på FF7-sajten). Det är mer logiskt att ha det tillsammans med resten av guide-innhållet, och sökmotorer förstår det bättre. Det är troligt FAQ-delen återuppstår på “faq.” för att också innehålla lite annan hjälp-info runt sajterna, men vi får se.

För att allt detta ska funka har vi tvingats utveckla många saker ni inte ser. Vårt migreringsverktyg “Migrate 2 WordPress”, och vår nya smarta TopNav (som ser identisk ut men är omskriven från grunden). Utan dessa två viktiga verktyg hade vår modernisering inte varit möjlig. Och självklart fortsätter vi skruva på dessa verktyg framöver, efter behov.

Många väldigt stora ändringar, helt klart. Men de behövs för att på riktig modernisera ett åldrande FFU som minst sagt har lidit hårt av gamla krämpor. Och ja, allt detta är planlagt att rullas ut fram till och runt 20-årsjubileumet!

Följ oss på Twitter, gilla oss på Facebook, och bli med på vår resa till nästa generations 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.

Vi jobbar på eget WordPress-plugin

2017-03-21 / Bobby

En stor styrka med WordPress är deras många plugin. Man kan enkelt installera en massa färdig funktionalitet på sin sajt istället för att slippa bygga allt själv. Detta är smart och något som hjälpt FFU mycket. Funktioner som jag tidigare lagt massor av timmar på för att bygga installeras med ett klick.

Men de har inte allt, och mycket de har är dessutom dåligt, eller inte exakt som just du vill ha det. Så därför kan man också bygga egna plugins.

FFU har redan ett eget WordPress theme (all design). I det ligger också massa funktionalitet som hör mer generellt till FFU och inte till just detta theme. Denna funktionalitet flyttar jag nu över till ett eget plugin som vi utvecklar på Bitbucket privat. Fördelen med denna separering är att vi nu kan jobba med flera olika themes (som denna sida) men ändå dela alla FFU funktioner via detta plugin.

Just nu är vårt plugin inte ens i alpha-version. Jag har efter många timmar och mycket frustration lyckats få upp grunden. Det var inte helt lätt, och php bjuder på en del rörig kod ibland. Men nuvarande version av pluginet klarar att lägga in FFUs Topnav med allt av html, CSS och Javascript som behövs. Detta öppnar så klart för att kunna introducera Topnav enkelt även på denna sida. Det enda som behövs är en ny så kallad “hook” som Topnav kan fästs sig till. Den lägger man enkelt in i sitt theme. Mer än så är det inte. Enorm skillnad från förut!

Vidare ska detta plugin få kod för att krysspublicera till uppdateringsdatabasen (rätt komplex kod som nu ligger i våra themes), kod för att lägga in Playstation-knappikoner i text (också komplex theme-kod idag), och en massa annat intressant på baksidan.

Som du säkert räknat ut kommer detta plugin fortsätta vara privat och inte delas. Det ger ingen mening utanför FFUs värld.

Kommer hålla er uppdaterade om hur det går, och eventuellt dela lite tips eller kod.

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