Building websites is hard. Being user-focussed, having a progressive enhancement mindset, and thinking things through from the beginning can have a real impact on both the speed and quality of delivery. In this article, Shane Hudson is going to explore building a text box, in an exaggeration of situations many of us often find ourselves in. Hopefully, by the end of this article, you can all feel more emphatic to how the journey from start to finish is rarely linear.
Read more…
Developers conduct AB tests, accessibility audits, unit tests and cross-browser checks. Once you’ve solved a problem, you don’t want to repeat that effort. By building a reusable component library, we can continuously utilize past efforts and avoid revisiting already solved design and development challenges. In this article, Oliver Williams looks at augmenting HTML with components that have built-in functionality and styles. He’ll also show you how to make these custom elements reusable across projects using NPM.
Read more…
In this tutorial, you will build a sci-fi ID card for Avengers. Today, Kunal Sarkar will teach you Flexbox, Nested Flexbox, CSS animations, and a ton of other CSS techniques while building this interesting project. You will learn an effective way of making a full-page background, centering elements with Flexbox and auto margins, and see the basic usage of Flexbox and nested Flexboxes to make single dimension layouts. Let’s get started!
Read more…
It’s incredible to see how far web standards have come. Flash was one of the reasons a lot of folks started building websites. Flash was one of the reasons Simon Owen started building websites. It pioneered in a lot of areas, and this led to people creating amazing things with it. Over the years, it’s pushed the web forward a great deal. Adobe’s official announcement of dropping support of Flash, though, does raise concerns. Here are some of the groundbreaking things Flash could do back then, and how we can go about doing them today.
Read more…
Did you know that you can incorporate Vue into your project the same way that you would incorporate jQuery — with no build step necessary? Let’s cover some common use cases in jQuery and how we can switch them over to Vue, and why we’d even want to do so. In this article Sarah Drasner shows you that Vue is also a pretty nice abstraction for small sites that don’t need a lot of overhead. Due to Vue’s flexibility, it’s also easy to transition this code to a build step and component structures if you’d like to adopt a more complex structure over time. It’s actually pretty fun to try it out!
Read more…
In order to really know whether your work is any good, you need a higher level of principles that can be used as a measuring stick for implementing design. You need something that is removed from a specific language like CSS or an opinionated way of writing it. To bridge this gap, Tom Greever’s compiled nine principles of design implementation. This is a set of broad guidelines meant to preserve an underlying value. It can be used as a guide for someone working on implementation or as a tool to evaluate an existing project. To make it easier to follow along and see how each principle applies to a project, Tom will use a design mockup from one of his projects as the basis for this article.
Read more…
Have you ever wanted to make a website that non-technical folks can edit right in the browser? Or have you ever wanted to make a website that presents an editable collection of items (e.g. your portfolio)? Or simply upload images to a website you made, right from the browser? In this article Lea Verou will show you that you can do these things (and more!), just with HTML and CSS? No programming code to write, no servers to manage. You can make any element editable and saveable just by adding one HTML attribute to it. In fact, you can store your data locally in the browser, on Github, on Dropbox, or any other service just by changing an HTML attribute.
Read more…
In this article, Lea Verou explains what an HTML API is, why they’re useful, and which important lesson developers can learn from them. Keep reading to find out how to design a good one. You might be wondering, “All HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of following poll.
Read more…
Creating responsive email is not an easy task. If you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. There are a few techniques out there to help email developers. You might be familiar with some of them, such as the hybrid approach, the mobile-first approach or even the Fab Four technique by HTeuMeuLeu. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.
Read more…
Email design and development is a beast. Email client vendors haven’t been as progressive as web browser vendors in adopting new standards. Not much has changed in email design. In fact, it has gotten worse. With the introduction of mobile devices and more and more email clients, we have even more caveats to deal with when building HTML email. In this article, Lee Munroe brings you an insight into the world of building and sending email, and a couple of code snippets and resources that are sure to add some hours back into your life.
Read more…
