+ fler guider ×
Bli medlem
Inloggad som ...
Inloggningstid: ??

AuthorBobby

Vårt sista nyhetsbrev på communityn

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

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

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

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

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

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

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

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

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.

TopNav 4, oktober-edition

För cirka en månad sedan ändrade jag sist på TopNav. Och några nya idéer har dykt upp. Men också har flera saker fått smälta in lite mer och jag har kunnat fatta beslut som inte kändes rätt precis då jag satt med designen.

2015-10-04

Den nya logon jag testade har tagits bort, återgick till den förra, men gjorde den större. Den kändes mindre stökig, och lite gladare, mindre stel. På nåt sätt.

Dessutom så har Fat Chocobo fått komma in i värmen. Jag hade tänkt att han ska ligga bakom alla nyheter och uppdateringar (man ska kunna “kryssa ner” de man läst för att få upp nästa, upp till 3-5 stycken) och visas först då allt nytt har lästs. Men varför inte ta fram honom och alltid visa honom där uppe? Tycker han passar fint in. Rutan i sig är också lite större, inverterad gradient, och tydligare uppdelad text.

Community-rutan har fått en liten detalj ändrad. Eller två faktiskt. Knappen har gått från svag 3D-effekt till mer modern platt gradient, men i samma skarpa blå färg som förut. Rubriken gick från “Community” till “FF Community” och centrerades i fetstil ovanför knappen.

Sajtlänkarna (“Mer på FFU” och “Nyheter”) har fått permanent bakgrundsfärg för att de ska synas bättre, man missar dem så lätt annars.

“Fler Spelguider”-menyn har designats om till att likna mer på “Mer på FFU”-menyn. Ingen pratbubble-pil i toppen, bara en ren rundad ruta, med lista på sajter. I toppen en rubrik som beskriver menyn, med ett skarpt blått streck under. För att dela upp sajter i sektioner så används ett smalare ljusgrått streck än tidigare.

Här är också ett exempel på de fyra olika faser Community-menyn ska kunna vara i. Menyn kan vara minimerad eller expanderad. I designexemplet ovan är den minimerad, och användaren är inte inloggad. I följande exempel, från vänster till höger, har menyn klickats på (expanderats) så att man kan logga in. Sen är menyn minimerad men man är inloggad, och på sista exemplet är man inloggad och menyn är expanderad och visar några extra länkar. Knappar och länkar i dessa exempel är inte helt färdiga än.

2015-10-04_stages

Jag gillar kontrasterna med de mörka bakgrunderna med ljus text, och de nya skarpa färgerna av blått och orange för att kalla på uppmärksamhet (länkar, knappar), blandat med väldigt ljusa bakgrunder med svart text på.