title: From Bootstrap: How to make a point with CSS tags:

  • CSS
  • Bootstrap

Something I noticed while digging around in bootstrap was how they added a point to a dropdown menu. I thought I'd demo a simplified version of the steps to get there. In Bootstrap the point is created using a pseudo element and also takes advantage of

but I'll be keeping things simple here.
1
2
3
4
5
1. Start with an element (div) and add a border
2. Each side of the border is connected at either end by a mitre joint. This is what is taken advantage of To create the pointer look.
3. The height and width of an element is the internal size of that element, the border is calculated on top of that. So the border will still be drawn even when the height and width are both set to 0. I've also increased the size of the border here.
4. Final step is to make 3 of the sides transparent and the

background-color

This leaves you with a pointer.
1
2
3
You don't have to have an equilateral triangle, by changing the widths of the 2 adjacent sides you can create a variety of triangular shapes. The demos all have a

border-top-width``` of 20px.

Kevin Marks and the Indie web

First up here is Kevin Marks' talk on "the web we found"; the web 10 years ago, the web today and the future of the web at LeWeb'13.

The talk starts by looking at the web in 2003 and a compares it to the web in 2013. This was just the background and foundation to lay out the ideas of the indie web and the future of the web.

The bit I found really relevant

When Marks was discussing the future of the web one of the points that resonated with me was about building tools that you want to use. I think this idea will colour most of the decisions about how this blog engine is developed (for now). It's easy to go down a rabbit hole of second guessing what other people want in a tool. But while it's just me, I'll stick to a few rules of thumb:

  • In the core development, I'm not going to worry too much about breaking what I already have.
  • With one big caveat, when I update the the distribution version of the engine that is powering this blog I'm not going to overwrite any theming or content I already have here.
  • Going from writing a new post to publishing, I want that to take minimal steps. Ideally one but I've not decided on grunt powered commits.

Bonus Feature

Here is a follow-up interview with Kevin Marks where he discuss and expands on some of the ideas from his presentation and gives a bit of background on the history of video and the web.

Adam Sanderson

I am a front-end developer. My day-to-day work is with JavaScript which is lucky because that's the part of web development I find most interesting.

I've had an idea for a local developer meet-up in Hastings called Devtings