Do not be anxious and seek first the kingdom of God.

As many as 60 percent of the Kenyan population now has access to electricity according to official data. But in neighbouring Tanzania, the penetration rate is less than half of that and sparsely populated rural communities are especially neglected.  

The post Tanzania turns to solar power to increase electricity connectivity appeared first on LatestSolarNews.

Joining South Florida’s lush, green canopy of real trees are a new crop of solar trees. These “trees” have blue trunks and bear no fruit, but supply clean energy to whoever needs it. If you’re at the beach and your phone starts to die, you can charge it right here using Solar Power. Here’s how …

The post Solar Trees Powering The Park Of South Florida appeared first on LatestSolarNews.

At this year’s CSSConf in Melbourne (AU) I gave a talk called “Styling with STRINGS”. The talk is about how we can use Flexbox, currentColor and __EM__s inside components to quickly style entire Web Apps straight in the browser.

In case of tl:dw here some of the main points:

Layout

When creating mobile “App” layouts, where not the whole page is scrollable, but instead only certain parts. And you have anchored areas like header/footer and a main area that should fill out the available space, then the easiest way is to use Flexbox.

This lets you easily drag around components that are set as flex items and they always position nicely. Using flex: 1; on components makes them stretch out and fill the available space. A good use case is a search input or a title.

Color

If you don’t specify the border-color (initial value) it will be the same value as color.

Furthermore there is a color value called currentColor. As the name indicates, it’s also mapped to the current color value. We can use it as background-color for example. Not that useful when the text should be readable, since now text and background are the same color, but for some components without text it can be quite useful. Like in the example below with the slider thumb.

If a component set should look similar to the “iOS 7” style then currentColor works great. Below all components have no color values at all and only use currentColor. This let’s us change everything by only changing the color value in the root html element.

Size

In a similar way, EMs are mapped to font-size. So if we use EMs to define only the proportions of a component, we can use font-size to scale it up/down. And if we inherit the font-size we could also control everything at once with just a single property in the root or in groups if we go deeper down the DOM tree.

REMs work the same except that they are tied to the root html element only. We could use it to control the spacing of the components by using REMs for margin/padding.

I wrote about this in more detail in the Sizing (Web) Components post.

All together

Now if we combine this all and test it in an example application, we can easily design many variations right from the DevTools/inspector in a quick and easy way.

Feel free to play around with the CSSConf App yourself or check out the source on GitHub.

How to save?

You might wonder how you can save the changes made in the DevTools/inspector without having to manually copy them over into your CSS file. In Chrome there is a feature called Workspaces. It let’s you map a URL to a local folder. Once that is setup, all CSS changes will automatically be saved to your local disc. Here a post that explains how to setup Workspaces. It’s advised to use version control like Git, so that you can always discard all changes if you went too far and wanna start over.

Conclusion

Admittedly it is somewhat in between of being useful for production and just a “hack”. Especially the currentColor. But the main point of the talk is best told by this quote:

“Creators need an immediate connection” — Bret Victor

The examples I used are just the closest I could get using CSS alone and still keep code clean. I hope we keep that principle alive and improve on it.

ps. Artist of the puppet master illustration: Unknown.

pss. Here all the other videos from CSSConf.

A lot of photo apps allow you to add filters before sharing. The typical UI for picking a filter is a row of little thumbnails that can be horizontally scrolled. I’m sure you’ve used it many times. It looks something like this:

The problem

A filter picker like that is easy to understand and works pretty well. But in my case, there is something that has been bugging me a bit. Here is how I use it:

1. I start with the first thumbnail and then just keep tapping one after the other.
2. If there is a filter that I like, I try to remember its name. And somewhat its position, but more like “somewhere at the beginning”.
3. Then once I reach the end, I start scrolling back trying to find the ones I liked.
4. Usually there are like 2-3 filters that I would like to quickly compare before making my final choice. But it’s quite hard to scroll between them, especially if they are far apart. Also having to remember their name/position costs some precious brain power.

Now, I don’t really know how most people use these filter pickers. Could be that:

1. Most people just stop once they found a filter they kinda like and don’t bother trying the rest.
2. Or some have a few favorites and know their name/position already.
3. You could also just look at the little thumbnails. But some filters are very similar and I need to see them on the actual photo to judge.

Possible solutions

So I was thinking about some possible improvements:

1. Order by popularity

Automatically order the filters based on how often they get used. This makes filters that you use most appear at the beginning and are easier to get to. You could always keep scrolling in case you’re in the mood for something new. This would of course mess it up for people that have filters remembered by position. But not sure how many actually do that.

2. Manual re-order

Let people manually reorder the position. Could be done similar like the home screen icons on iOS (long press until they wiggle, then drag around). I would probably move my favorites to the front and also sort based on color/style.

3. Narrow down

Let people temporarily toss away the filters they don’t want. This would allow you to narrow down your selection to just a few for easier comparison. Of course, all the filters would be back next time you take a new photo.

Or probably even better (3B): Instead of throwing away the ones you don’t like (could be tedious if there are a lot of filters), you could push up only the ones you like and they would move to the right with a visual separator. It’s similar how you can pin a Chrome browser tab to separate it from the rest. Then once you scrolled to the end, you would have all your previously selected filters next to each other, waiting to be the lucky winner.

Conclusion

I understand that the suggestions might make a photo app more complicated and harder to explain to a new user. But it could be more a “power user” feature that you’re not forced to use if you don’t want to. Anyways, in case I’m not the only one with this (small) problem, I hope some day we will have a better way to filter filters. Ohh.. and let me know if you’re already using an app that tackles this somehow.

Update

Thanks for all the comments. Good to see more people thinking about this. I played around a bit more with the demo, mostly after the conversation with Ignacio in the comments below. So here a 4th option:

4. Select and cycle

Let people select a couple filters and then cycle through them by tapping on the photo. It’s actually similar to 3B, but it keeps the UI simple by using the photo as the secondary navigation control. Here the steps how to use:

1. You can tab each filter until you find one you like.
2. If you tab a 2nd time on that filter, it gets selected as a “favorite”. It will move up a little to visualize it.
3. You can keep trying other filters and mark more as favorites.
4. Once you reached the end (or think you have enough), you can tap on the photo above the filter picker to quickly cycle through all your previously selected (favorited) filters. Now comparing different filters is really quick and easy.

Try the demo.

The implementation of the demo could still be improved. It is a bit hard to discover that you can tap the photo to cycle through your favorites. Might need some visual clue to help understand it better. Adding swipe gestures instead of tapping would also improve UX. Or to remove a filter from your favorite selection, you could just swipe down on the image. Also note that the filters are CSS based and still a bit glitchy when animating. But you should get the idea.

Update II

Manuel Haring explored a similar concept where you can push up filters to narrow down your selection.

Here a larger video that has even a third selection stage.