Författararkiv: George

Om George

Founder of the Boolean algebra

Devday 2016

Vi har haft vår årliga Devday, en dag i kunskapens tecken där syftet är att testa nya tekniker under ett paraply av vägledande och smått märkliga teman. Filosofin bakom Devday är att praktisera den pågående interna kunskapsspridningen, exempelvis i form av teknikkvällar, genom att erbjuda en dag för att förverkliga idéer och skapa lagkänsla. Då vi alla är kodfantaster är det ytterligare en bonus att kunna ha lite friare tyglar kring vilka tekniker man kan använda i utvecklandet. Årets övergripande tema var ”MasterDev” där varje lag med givna grundrecept, ett skafferi fyllt av ramverk och sin egen personliga kryddning fick en dag på sig att implementera något ur kategorierna:

– Intranet of things
– Adventures in the shell
– George Booles matkasse-webappar

Lagen tävlade mot varandra i två priskategorier: folkets val-priset, samt teknikpriset. Det sistnämnda gick till laget som plockade flest poäng från en lista med bonusobjektiv, där det fanns allt från dokumentation till unit-tester och användandet av specifika ramverk.

Så vad kunde våra lag koka ihop under en dag?

– En konsolbaserat tinder som använder SharePoints user profile service och visar ASCII art av dina potentiella matchningar. Högerpil för like!

– Recept-appar i varierande utformning som gav menyförslag baserat på valda kategorier och/eller sökord, förslag till restauranger som serverar maten, en ingredienslista om man föredrar att laga den själv, samt passande middagsmusik.

– En flic-integration som triggar text-to-speech över ett Sonos-system.

devday_1

devday_2

devday_3

devday_4

The great ”Sites I’m following” battle

Spoiler: It’s a draw.

The problem

A customer has a server setup where the URL for the default zone is not accessible at all for users (has something to do with ADFS). This is working out somewhat fine, except in a few places. Some links are rendered with urls point to the default zone, meaning that they redirect the users to the wrong domain. Some of these links are located on *queue horror music* the ”sites I’m following” page.

sites I'm following

The circled link leads to the default URL, in this solution only accessible from inside the server. So every user using this page will get redirected to a page that doesn’t work.

Solution

It started out with a good solution of an HTTP handler, but because of circumstances, that was not a viable solution. Instead I had to resort to fixing it on the client side with JavaScript.

Attempt one

I wanted something that wasn’t too problematic performance, so I added a click handler to all the anchor tags in question. When a user clicked a links, the href attribute was replaced to contain the correct hostname.

This uses a configuration object where a specific hostname was matched to another. I will not publish it here, since it contains the actual domains, but it looks something like this:

Does it work? No.

Why? Well, it works on all links except the ones on the ”Sites I’m following” page. The hrefs are replaced, but just before the users is redirected (visible in the next image, circled in blue), it is changed back to the original URL. Makes me pull my hair. SharePoint runs some kind of magic (probably something to do with mquery) after my click handler.

Solution 2

So then I started looking at the visible url, can I somehow change it? Turns out it’s an input field with a value. Circled in red here:

sites I'm following-htmlI can easily enough change the value, and I did. But when run on page load it didn’t happen. However, when I ran the exact same code in the browser directly, it worked. Until I resized the window. I’m not even kidding. Every time I resize the window, the value of each input field is reset back to its original value. I have no idea why someone put that in there from the beginning.

Solution 3

In the end I just replaced the anchor tag and input field with my own. Stupid.

We’re having our first Bool DevDay!

Bool is filled to brim with talented and knowledgeable people. This is a force that can do great good and we try to do just that! We want to constantly keep learning and exploring new ideas. This is why we will host our first Bool DevDay at the beginning of June.

A whole day of free learning. Come up with a project and create something. Try something you never have the time for during regular hours. That technology no customer asks for, but we know will help in the future, or a powershell script to watch farms from misbehaving, or a new Minecraft plugin.

I am very proud to be in charge of this new initiative here at Bool, and also proud to see my colleagues rise to the occasion and come up with great ideas. I’m very excited for 4th of June!

 

CSS Vertical Align or: How I Learned to Stop Worrying and Love Display: Table

I grew up with it and it’s hard to shake. It follows me around, looking over my shoulder everytime I try to position anything. That deeply ingrained hatred of tables. Nothing was as ugly and disgraceful as using tables to position content (that and maybe using capital letters for your tags).

  • What, are you not using THE BOX MODEL? I can’t work like this.

I sometimes sit and glare longingly at those at the office that don’t have to support the older versions of IE. Imagine the glory and wonder of using Flexbox! To be able to roll around in align-items: center, revel in justify-content and delight in flex width. But, alas. It is not so, using flexbox for corporate oriented (especially SharePoint) styling is still some years off.

But I still have to vertically align things all the time. And that’s the reason for this post. Yes, it is true. I have started to use tables to get things to where I want them. Not actual tables, but virtual ones with div and span elements with display table. And I have come to, maybe not love it, but at least rather like it. It sort of works, if used correctly. There is a learning curve, an especially steep one if your brain is telling you to RUN AWAY. But with some time and determination you too can get there.

The problem to solve

Typically we’re talking about an icon that should be centered vertically to a text of unspecified height. Position: absolute won’t help you here, nor will margin top, since the height varies. What I used to do was use a background image with background-position: center. But these days we have to take retina screens into account. Begone blurry images!

But what about svg?

says you.

Yes, that would also be nice, but legacy systems prevent me from using that (long story, SharePoint is to blame). Also I would like to utilize icon libraries like FontAwesome.

The solution

Use table layout for this!
The wrapping parent gets:

And then every child element gets

And no padding or margin top or bottom on the children, that messes everything up. Both child elements now becomes as high as the highest of them, and the content is placed in the vertical middle. Magic.

Want a clearer picture and try it out yourself? Here’s a plunker where you can do that.

So you tried this and there’s no magic?

The problem with this method is that it’s mad hard to “debug”. It’s insanely difficult to understand what’s wrong when something is off in the aligning. Try to remove all set height, line-height and margins and paddings on the child elements, as well as all other positioning styling (relative or absolute).

Nothing new under the sun

Yes, people have of course used this before, but that doesn’t mean everyone has, or that it isn’t news to someone. After all, until recently I didn’t use it and I spend a fairly large amount of my day arguing with CSS.