Tim Evko is a front end web developer from New York, with a passion for responsive web development, Sass, and JavaScript. He lives on coffee, CodePen demos and flannel shirts.

Tim's articles

  1. You Don’t Need JavaScript for That!

    Web development today can be a whirlwind of various technologies, and even the simplest of widgets can often be complex under the hood.

    With that in mind, I’d like to focus on a variety of things you can do with just HTML and CSS, no JavaScript required. Why, you ask? While some of these solutions may not be practical for every use case, they do inspire outside-the-box thinking that promotes lowered complexity, and a wider array of browser support. Here are a few cool things you can do without having to write a single line of JavaScript.

    Building a Tabs Widget

    We’ve all seen how the checkbox hack can be used for interactivity without JavaScript, but unfortunately, this comes at a cost to accessibility. So instead of another checkbox tutorial, I’d like to show how you can create an accessible tabs widget using the :focus pseudo-class in CSS.

    Using :focus

    The :focus pseudo-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 :focus state to any HTML element as long as you give it a tabindex attribute.

    Using the tabindex Attribute

    HTML’s tabindex attribute 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

    See the Pen Pure CSS Tabs Widget by SitePoint (@SitePoint) on CodePen.

    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: absolute so that the content will display in the same area for each tab. The first button element has the autofocus attribute, 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 tabindex value, 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.

  2. How to Make a Simple Image Slider With HTML, CSS and jQuery

    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 […]

  3. Becoming Truly ‘Full-Stack’ is Unrealistic, But You Should Try

    Web development is a field of many titles. You can be a front end developer, a user experience designer, a software engineer, or a backend developer. If that’s too broad, you can call yourself a JavaScript guru, Bootstrap developer, or Node rockstar. There’s really no limit to the number of diverse (and sometimes odd) job […]

  4. How Not to Get Overwhelmed as a Web Developer

    In the past week, I’ve worked on projects that have required me to write HTML, CSS, Javascript, and PHP. In working on those projects, I’ve had to employ various technologies, including responsive design, AJAX, Wordpress theme development, API integration, and modular javascripting. Let’s not forget that most (if not all) of these projects involved a preprocessor, build tool, or method of version control. Does that sound a lot like your week? Truth be told, in todays world of web design, development, and software engineering, you’re expected to know a variety of languages, tools, technologies, and coding methods. This field is fast paced, frequently changing, and incredibly complex. It’s no surprise that so many of us have felt the growing burdens of Information Overload.

    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.

    The Solutions

    Stacks

    Although keeping up to date is an expected requirement in the field of web development, IO doesn’t have to be a consequence. For me, the most helpful solution to the problem of IO has been to limit the number of languages I aim to be proficient in. I call it a ‘stack’, and it currently consists of HTML, CSS, Javascript, and PHP. Outside of my stack, I’m able to use other languages if a project requires it, but I won’t be looking to gain an expert knowledge of them.

  5. What’s New in Chrome 36

    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

    For Developers

    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.

    In addition to full web components support, Chrome 36 contains support for un-prefixed CSS transforms and two exciting new javascript methods: Object.observe and element.animate().

  6. The Yo API: The Possibilities Are Endless

    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.

    The API

    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.

  7. 6 Tips for Writing Better Code

    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

    One of the best ways to keep code consistent, reusable, and organized, is to group functionality together. For example, rather than dumping all your JavaScript into one main.js file, consider grouping it into separate files based on functionality, then concatenating them once you reach your build step. Of course, there’s a lot more to writing modular code, and you can write modular code for more than just JavaScript.

    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.

    New technologies, such as Polymer allow you to write custom HTML elements, so that your HTML, CSS, and javascript can be grouped into individual components based on functionality. Be sure too look into Browserify (our introduction here), which allows you to use Node.js-style modules in the browser.

    Or, if you’d prefer a video, here’s an introduction to the most common preprocessors for CSS, HTML and JavaScript: Sass, Haml and CoffeeScript.

    Brad Frost also gives a great overview on the ideas and methodologies for writing modular code here.

  8. Stop the Doomsaying: The Web is Just Getting Started

    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.