Web development today can be a whirlwind of various technologies, and even the simplest of widgets can often be complex under the hood.
Building a Tabs Widget
:focuspseudo-class in CSS.
:focuspseudo-class is used to target an element that has received focus by the user (either by using the keyboard or the mouse). It is supported in every browser including IE8+. Additionally, you can apply a
:focusstate to any HTML element as long as you give it a
tabindexattribute indicates if an element can receive focus. It can take several values, including a negative value, zero, or a positive value. Each of these values determines what order an element should be focused on.
Demo for the Tabs Widget
In the HTML, each tab is a button with the content for each tab inside of a paragraph element. Each paragraph element is hidden, then set to
position: absoluteso that the content will display in the same area for each tab. The first button element has the
autofocusattribute, so that the first tab will be visible on the initial page load. Each tab is wrapped in a div, and each div is given a
tabindexvalue, which allows the
<div>to be focusable.
As for the CSS, each button is set to
display: inline-block, allowing for the tabs to appear side by side. We apply the
:focuspsuedo-class to the button and use the adjacent sibling selector to show the related paragraph element when the button is focused. I’ve also added focus styles to the tab’s container
div, which means that the tab will keep its focused state until the user clicks outside the entire widget.
Slideshows, image sliders, magic picture changing boxes: whatever you call them, the pattern is used all over the internet, so much so that nearly every website has one. If you’re a web developer, the time will come when you may have to build one on your own. With that in mind, let’s look at how […]
How do you identify IO?
For me, IO is the feeling of being overwhelmed with the large amount of information I need in order to stay useful as a web developer. Other times, it manifests itself as a feeling of panic when a new tool, language, or project is announced. IO can go on to cause fear when you feel that you’re failing to keep up with the industry, or even make you upset when a new tool leads you to consider changing your workflow. IO can lead to avoiding new technologies, not fully enjoying your career, and feeling inferior to those who have more experience than you in a certain area.
IO causes real problems
If you have or are currently struggling with IO, then you probably understand the side effects it can cause. If you tend to overwork (as I sometimes do) IO can lead to more hours spent studying code, reading articles, and making demos. On its own, this isn’t necessarily a bad thing, but too much time spent working, combined with too little time spent eating or sleeping, can lead to a burnout. If IO is leading you to resent your job, depression and anxiety can also be common side effects, perpetuating the general feeling of being overwhelmed with your work.
If you haven’t heard the news already, the Chrome team at Google has released Chrome version 36 for Windows, Mac, Linux, and Android (available “within the next few days”). The Google Chrome Releases blog provides a brief overview of some of the latest updates.
Chrome 36.0.1985.125 contains a number of fixes and improvements, including:
- Rich Notifications Improvements
- An Updated Incognito / Guest NTP design
- The addition of a Browser crash recovery bubble
- Chrome App Launcher for Linux
- Lots of under the hood changes for stability and performance
Although not mentioned in the above blog post, it has been confirmed that Chrome 36 contains a variety of new and improved features aimed towards benefiting the web development community.
HUGE. Chrome 36 is now stable! ~300 million people will soon have *full* support for Web Components: pic.twitter.com/xiIQHF5wlI
— Addy Osmani (@addyosmani) July 16, 2014
Yo has gotten quite a bit of attention recently. If you haven’t heard of Yo before, the concept is simple. You download the app, add your friends, and tap on their usernames to send them a notification that says “Yo” (complete with sound effect). That’s it. The app has been called useless, insecure, brilliant, and incredibly versatile.
Whatever you choose to believe about the well-funded, recently “viral” app, their API allows for more than just one-way communication between you and your friends.
The Medium post that anounces the Yo API highlights some example use cases.
A blog can Yo the readers whenever a new post is published. Imagine getting a Yo From PRODUCTHUNT.
An online store can Yo its customers whenever a new product is offered. Imagine getting a Yo From JENNASHOPIFY.
A football club can Yo the fans whenever the team scores a touchdown. Imagine getting a Yo From THE49ERS.
An ice-cream truck can Yo the kids when it’s around the corner.… Imagine getting a Yo From THEICECREAMTRUCK.
The API is pretty simple. It has one endpoint, http://api.justyo.co/yoall/, meaning that sending a post request to that URL with your API token will send a Yo notification to everyone who has added your application username. A python demo containing this example has been posted to Github by the Yo team.
In any given week I can expect to write at least a few hundred lines of code in around four different languages. I can also expect to edit, review, and collaborate on code written by the other developers I work with.
Simply put, there’s a lot of code flying all over the place, and things can get very complicated when it’s not organized, managed, and most importantly, written well. Let’s look at a few different ways to improve the overall quality of our code.
Start Building Modules
CSS preprocessors like Sass (our introduction here) allow you to write individual CSS files, and then include them into one main file when you compile them. This lets you write individual css files for different components like buttons, lists, and fonts. At the end, they’re all included into one main file, but maintaining these files becomes a whole lot easier. Here’s a look at how SitePoint author Hugo Giraudel organizes his Sass projects, and his favorite tools for doing so.
Brad Frost also gives a great overview on the ideas and methodologies for writing modular code here.
Part of the fun of being a Web Developer is the need to keep up with the industry. For me, that means a lot of time listening to podcasts, looking at Github repositories, and reading blogs.
Sometimes this will lead to a night of lost sleep over articles that make one or more of the following points:
We’re in a tech bubble
Google, Facebook, and other tech giants are hurting the web
Our Internet Service Providers are evil
The web is too centralized
Advertising is ruining the internet
There’s too much data on the web, and only harm can come from this
Recently I’ve noticed an increase in the number of these articles, while a voice in opposition to these ideas can be hard to find. I’d like to take a look at a few common themes to see if there really is reason to worry about the current state of the web.
Are We Really Going Through a Tech Bubble?
Short Answer: No.
Recently, web analyst and venture capitalist Mary Meeker published an exhaustive report focusing on internet trends in 2014. Part of the report focuses on IPO data showing that in 2013, the number of tech companies going public was 87 per cent less than the number of companies going public in 1999, around the height of the Dot-com bubble. The total value of all technology IPOs is 73 per cent lower in 2013 than it was in 1999 and 2000.
The report reaches a similar conclusion about the amount of venture capital funding in the current technology market. In short, this is all great news: the data shows a steady increase in the value of tech companies, but no sign of a bubble. Investors have apparently been a lot more careful than they were during the Dot-com era.
It could be argued that speculation has caused certain sectors of the global technology market to be overvalued. But a correction in those sub-markets wouldn’t necessarily lead to a deflation of the entire tech industry.
Meeker’s data shows us that the web is still experiencing steady growth at a healthy and profitable pace. That’s great to hear if you’re a web developer or designer looking for a job. Overall, there’s no cause for worry.