Using Redux with React Hooks
Note, 2023: This article was most relevant when Redux initially launched its hooks API as people began migrating to hooks. While it probably isn’t as useful as it was then, it is still accurate in 2023 and relevant for anyone who is working with a legacy codebase. You might also be interested in our newer post: Redux Toolkit is the official way to write Redux apps. React Redux recently released ve
Concise Media Queries with CSS Grid
Media queries are commonly used to control responsive layouts on websites. Organizing layouts this way is intuitive: On a wide desktop display, we want to present information in columns, and as screen width diminishes below a threshold, we stack elements vertically. With modern CSS, solutions to this problem have become easier than in the past. No longer must we use kludgey rules like display: tab
Sandi Metz' Rules For Developers
Back in January, Sandi Metz introduced her rules for developers in a Ruby Rogues podcast episode episode. Around the time Sandi’s rules were published, the team I am on was starting a new project. This post details the experience of that team applying Sandi’s rules to the new application. The rules _There are four rules._ Here are the rules: Classes can be no longer than one hundred lines of code.
A more efficient and organized workflow for SVGs
SVGs can be messy to develop with, often times being exported from a graphics application and being pasted into a document. However, they become much more delightful to work with when you have a readable file and clean markup. Optimizing SVG for the web When an SVG is exported from an application, it usually comes with code that’s unnecessary for rendering it on the web. For example, in Sketch, th
It's About Time (Zones)
This is the first article of a 2-part series. The second article is about a case study in multiple time zones. Ruby provides two classes to manage time: Time and DateTime. Since Ruby 1.9.3 there are fewer differences between the two libraries, with Time covering concepts of leapseconds and daylight saving time. For the rest of this article, Time will be used in all the examples. TZInfo is another
Following the Path
Where is the user.rb file located? Perhaps in the current directory? That’s a trick question. There isn’t enough information to determine that from that single line. The answer is more complex, flexible, and involves some UNIX history. $LOAD_PATH $LOAD_PATH is a global variable in Ruby that points to an array of path strings. The following is the (truncated) result of viewing $LOAD_PATH in pry: [1
How We Test Rails Applications
I’m frequently asked what it takes to begin testing Rails applications. The hardest part of being a beginner is that you often don’t know the terminology or what questions you should be asking. What follows is a high-level overview of the tools we use, why we use them, and some tips to keep in mind as you are starting out. RSpec We use RSpec over Test::Unit because the syntax encourages human read
But I Don't Want to `bundle exec`
I have seen a number of discussions on different forums about bundle exec rake vs rake. Best practice is that you run your executable scripts with bundle exec. Recently when running rake on a project I’d just joined, I ran into an odd error related to different versions of gems being activated. However, RubyGems was friendly enough to suggest a potential solution to my problem: use bundle exec. $
CSS Animation for Beginners
The human brain is hardwired to pay attention to moving objects. Because of this natural reflex to notice movement, adding animation to your website or app is a powerful way to draw users attention to important areas of your product and add interest to your interface. When done well, animations can add valuable interaction and feedback, as well as enhance the emotional experience, bring delight, a
To gem, or not to gem
…that is the question. Whether ‘tis nobler in the mind to suffer the slings and arrows of outrageous Gemfiles, or to take arms against a sea of dependencies and by opposing, end them. Last year while mentoring an apprentice here at thoughtbot I was asked how I decide when to add a gem or not. That conversation was in particular about the decision to use Warden for authentication rather than Devise
Controlling color with Sass color functions
Sass comes with functions that can easily be applied to colors in your CSS properties. These functions, when used correctly, can be incredibly powerful. They take some of the sting out of choosing and manipulating colors. When used with variables, they can speed up development drastically. Let’s start off with a creating variable for the color that we’re going to manipulate: This is important for
Better Commit Messages with a .gitmessage Template
It can be tough for your team to know exactly why they need the changes you’re proposing in a pull request. What if we could give them more context? There’s an episode of The Weekly Iteration where a simple trick was mentioned. After adopting it myself, I have noticed my co-workers commenting on how useful these messages have been in providing context. The trick is simple. Split your PR message in
HTTP Safety Doesn't Happen by Accident
Before the days of CSS, JavaScript, AJAX, and Web 2.0, there were two main ways for a Web user to tell their browser to make a request to a Web server: Clicking on a link to a different page, and clicking on a button to submit a form. This distinction was helpful to users in the brave new world of the Web. Clicking on a link meant that you wanted to see a document: you were requesting information
How To Write A Great README
Leadership is often defined as having the ability to make others want to do what it is that you would like them to do. You want people to want to use your software, and often their first introduction will be through the README in the source code or on the project’s GitHub page. The Basics There are of course components to a technical document that make it more effective. Describe what it is that y
Module Pattern in JavaScript and CoffeeScript
One of the shortcomings of JavaScript objects is the lack of support for private members. The ability to create private members makes external APIs more meaningful and helps keep code more manageable and DRY. The Module Pattern, pioneered by Douglas Crockford while building the YUI library, is a mechanism that allows for creating public and private members in JavaScript. This post looks at the pat
Brewfile: a Gemfile, but for Homebrew
Bundler users define dependencies for Ruby applications in a Gemfile and install those dependencies by running bundle install. Homebrew users on macOS can define system dependencies for their projects with a Brewfile: The brew bundle command is automatically installed the first time it is used. Simply create a Brewfile at the root of your project’s directory tree, and run brew bundle while in that
Sass's `@content` Directive Use Cases
Sass 3.2 added the @content directive, which allows us to pass a content block into a mixin. @mixin apply-to-ie6-only { * html { @content } } @include apply-to-ie6-only { #logo { background-image: url(/logo.gif); } } We can use it anywhere that declarations need to be wrapped in outer-scoped selectors, and many places where declarations are duplicated. Media Queries We can inline our media queries
Removing Sass Duplication Using Sass Maps
Recently Dan asked me to get new icons for Raleigh, New York City, and Austin added to some of our landing pages. Once I created the icons, I checked out the site to put them in below the offices that have already been on the marketing pages. It looked like this: &#boston:after { background: url('/img/icon_boston.png') no-repeat center top; } &#denver:after { background: url('/img/icon_denver.png'
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TDDing in React with Apollo and TypeScript
Decorating ActiveRecord