Category Archive for: code

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Increasing Drupal contributions from underrepresented groups

For the past two years, I’ve published the Who sponsors Drupal development report. The primary goal of the report is to share contribution data to encourage more individuals and organizations to contribute code to Drupal on Drupal.org. However, the report also highlights areas where our community can and should do better. In 2017, the reported data showed that only 6 percent of recorded code contributions were made by contributors that identify as female. After a conversation in the Drupal Diversity & Inclusion Slack channel about the report, it became clear that many people were concerned about this discrepancy. Inspired by this conversation, Tara King started the Drupal Diversity and Inclusion Contribution Team to understand how the Drupal community could better include women and underrepresented groups to increase code and community contributions. I recently spoke with Tara to learn more about the Drupal Diversity and Inclusion Contribution Team. I quickly discovered…

Read More →

Building a RSS Viewer With Vue: Part 2

Welcome to Part 2 of this mini-series on building a RSS viewer with Vue. In the last post, I walked through how I built my demo using Vue.js and Vuetify on the front end and Webtask on the back end. When I built that initial version, I knew it was exactly thatmdash;an “initial” version. I took some time to work on a few updates, and while I won’t dare call this a “perfect” version, I do think I’ve made some improvements and I’d like to share them with you. Article Series: Setup and first iteration Refinements and final version (This Post) Before I get started, here are links to the completed demo and source code. View Demo View Code Feel free to fork, file PRs, and report bugs to your heart’s content! The Plan When I shared the initial version in Part 1, I outlined some ideas to improve the…

Read More →

How to Fix Your Git Branches After a Rebase

Let me tell you about a problem I sometimes have. I have a feature branch in code review—let’s call it feature-1. While I’m waiting for approval, I want to start working on a new feature, so I create a new feature branch off of feature-1—let’s call that one feature-2. This might look something like: a—b—c—d—e—f master g—h—i feature-1 j—k—l—m feature-2 When feature-1 is approved, I rebase it off master to prepare for merging. Now, I check my git tree and uh-oh! feature-2 is all busted. It has its commits, plus the feature-1 commits that were just rebased. a—b—c—d—e—f master | | g’–h’–i’ feature-1 g—h—i—j—k—l—m feature-2 We can see j, k, l, and m like we expect, but we still have g, h, and i in there. We can’t fix it by rebasing feature-2 off feature-1. This is a super annoying problem. What we ultimately want to end up with is…

Read More →

Here’s the thing about “unused CSS” tools

There are a lot of tools that aim to help you remove “unused CSS” from your project. Never a week goes by that I don’t see a tool for this being shared or promoted. It must strike some kind of perfect chord for some developers. I care about performance, and I know that reducing file sizes is good for performance. Indeed, it is. I bet we have CSS that is unused in our stylesheets, if we removed that, that’s a performance win. Yep, it would be. We should automate that. Ehhhhhh, I’m not so sure. There are major performance tooling players that play up this idea, like Lighthouse and how it gives you CSS and JS “Coverage”, which will surely tell you that you’re shipping code you don’t need to be. The tools that claim to help you with unused CSS have to perform analysis to be able to tell…

Read More →

Building a RSS Viewer With Vue: Part 1

As I explore, learn, and most importantly, play with Vue.js, I’ve been building different types of apps as a way to get practice with and improve my use of it. A few weeks ago, I was reading about the shut down of Digg’s RSS Reader and while great alternatives exist, I thought it would be fun to build my own with Vue. In this article, I’m going to explain how I put it together and also what’s wrong with it. I knew getting into this that I was going to make some compromises, so the plan is to follow up this version with a nicer one in a follow-up post. Article Series: Setup and first iteration (This Post) Refinements and final version (Coming Soon!) Let’s start by looking at the app and explaining the various components. View DemoView Code A Look at the App When opening the application, you’re presented…

Read More →

Understanding the Almighty Reducer

I was recently mentoring someone who had trouble with the .reduce() method in JavaScript. Namely, how you get from this: const nums = [1, 2, 3] let value = 0 for (let i = 0; i < nums.length; i++) { value += nums[i] } …to this: const nums = [1, 2, 3] const value = nums.reduce((ac, next) => ac + next, 0) They are functionally equivalent and they both sum up all the numbers in the array, but there is a bit of paradigm shift between them. Let’s explore reducers for a moment because they’re powerful, and important to have in your programming toolbox. There are literally hundreds of other articles on reducers out there, and I’ll link up some of my favorites at the end. What is a reducer? The first and most important thing to understand about a reducer is that it will always only return one value.…

Read More →

Creating a Bar Graph with CSS Grid

If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you! Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might consider before getting started. Preface The bar is a pretty basic shape: you can control its dimensions with CSS width, height, number of grid or table cells, etc. depending on how you’ve coded it. As far as graphs go, the main thing we want to control is the height of the bars in the graph. Controlling height with Grid cells (like here) is convenient for designs where the height is incremental by a fixed value — no in-betweens. For example, signal bars in phones or when you don’t mind setting a lot of…

Read More →

Digging Into React Context

You may have wondered lately what all the buzz is about Context and what it might mean for you and your React sites. Before Context, when the management of state gets complicated beyond the functionality of setState, you likely had to make use of a third party library. Thanks to recent updates by the awesome React team, we now have Context which might help with some state management issues. What Does Context Solve? How do you move the state from a parent component to a child component that is nested in the component tree? You know that you can use Redux to manage state, but you shouldn’t have to jump to Redux in every situation. There’s a way to do this without Redux or any other third party state management tool. You can use props! Say the feature you want to implement has a tree structure similar to what I…

Read More →

Creating a VS Code Theme

Everyone has special and perhaps, particular, tastes when it comes to their code editor. There are literally thousands of themes out there, and for good reason: a thing of beauty and enhancement to productivity for one can be a hindrance to another. It’s been an item on my bucket list to create my own theme. I was coding very late the one night, well into the small hours of the morning. Everyone in my house was sleeping and so, as usual, the only light was the glow of my screen. I know it’s not necessarily healthy to code like this, but it’s literally the time I’m most productive: there are minimal distractions, I’m not dealing with work stuff, family stuff, friend stuff, or puppy stuff. I can focus. I had some preferences set for the theme I had been using and, though they all worked well for daytime or plane…

Read More →

Reflecting on five years at Basecamp

Back when I was a kid, they called this place 37signals. 👴👋👽This week I celebrated my fifth year around the sun at Basecamp. For a lot of people that’s probably not a big deal, but for me it kind of is — it’s by far the longest I’ve ever been at any one job (my previous record was ~3 years).That got me wondering — what’s so different this time around that made it stick? I eventually realized it basically came down to this:I’m happy at Basecamp because every day I’m in a position to ship the best work that I can.I admit that’s a rather generic statement, and pretty much every company in the world tries (or claims) to do the same. So what does Basecamp do that works so well for me?Now before we get into the specifics, let me just say that this post isn’t meant to be a humble brag of how amazing Basecamp is.…

Read More →

Memory is Short

Recently the entire developer community has found itself polarized over the $7.5 billion acquisition of GitHub by Microsoft: Developers are the builders of this new era, writing the world’s code. And GitHub is their home. I suppose the issue is that developers feel like their home either got sold without their permission or they’ve been robbed… or both (at the same time)? Whatever… I’ve lived too long to see this and not be surprised in the slightest. But, to be honest, I actually welcome the new owners. Microsoft, under the incredible leadership of Satya Nadella has really pulled the company out from the muck and mire of poor decision making and into the light. More of my developer friends have changed their tune when it comes to Microsoft and their brand. So, yeah… I like Microsoft. If I wasn’t doing what I’m doing… maybe I’d go work for them. ……

Read More →

New in Basecamp: See where projects really stand with the Hill Chart

For years we’ve used Basecamp To-Dos to track all of our design and programming work here at Basecamp. They help us make sure that nothing slips through the cracks.However, for some projects, tracking to-dos isn’t enough. When you have dozens or hundreds of tasks, you need a way to see the bigger picture. Is the project going to be done on time? Are we making progress on the right tasks? Which things need to be solved now and what can be deferred until later?To solve this problem, we built an entirely new idea into Basecamp To-Dos. It’s a 10,000-foot view of our projects that answers the hard questions about where things really stand.Introducing the Hill Chart.Progress is not a number“42% of the tasks are complete.” What does that tell you? Very little.For creative work and software projects, you can’t describe progress with a number. Why not? Because tasks on a project aren’t all the same. If…

Read More →

Manipulating Pixels Using Canvas

Modern browsers support playing video via the <video> element. Most browsers also have access to webcams via the MediaDevices.getUserMedia() API. But even with those two things combined, we can’t really access and manipulate those pixels directly. Fortunately, browsers have a Canvas API that allows us to draw graphics using JavaScript. We can actually draw images to the <canvas> from the video itself, which gives us the ability to manipulate and play with those pixels. Everything you learn here about how to manipulate pixels will give you a foundation to work with images and videos of any kind or any source, not just canvas. Adding an image to canvas Before we start playing with video, let’s look at adding an image to canvas. <img id=”SourceImage” src=”image.jpg”> <div class=”video-container”> <canvas id=”Canvas” class=”video”></canvas> </div> We created an image element that represents the image that is going to be drawn on the canvas. Alternatively…

Read More →

How Microsoft's acquisition of GitHub impacts the cloud wars

Today, Microsoft announced it is buying GitHub in a deal that will be worth $7.5 billion. GitHub hosts 80 million source code repositories, and is used by almost 30 million software developers around the world. It is one of the most important tools used by software organizations today. As the leading cloud infrastructure platforms — Amazon, Google, Microsoft, etc — mature, they will likely become functionally equivalent for the vast majority of use cases. In the future, it won’t really matter whether you use Amazon, Google or Microsoft to deploy most applications. When that happens, platform differentiators will shift from functional capabilities, such as multi-region databases or serverless application support, to an increased emphasis on ease of use, the out-of-the-box experience, price, and performance. Given multiple functionally equivalent cloud platforms at roughly the same price, the simplest one will win. Therefore, ease of use and out-of-the-box experience will become significant…

Read More →

Combining the Powers of SEM and BIO for Improving CSS

CSS is easy, some might argue, but that “easiness” can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell. If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now! In this article, I am going to use the code example below to explain how SEM and BIO works and how they can help enhance your CSS strategy. See the Pen by thebabydino (@thebabydino) on CodePen. Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purpose of both SEM and BIO is to better handle…

Read More →

The State of Changing Gradients with CSS Transitions and Animations

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future. Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And while animating background-size or background-position or the opacity or rotation of a pseudo element layered on top can take us a long way in terms of achieving cool effects, these workarounds are still limited. There are effects we cannot reproduce without adding lots of extra elements or lots of extra gradients, such as “the blinds effect” seen below. The blinds effect (live demo, Edge/ IE 10+ only). In Edge, getting…

Read More →

Forms, Auth and Serverless Functions on Gatsby and Netlify

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences. Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I’ve been meaning to dive into their “backend” features since. Today, I’m doing just that, using a static Gatsby site, Netlify’s Forms, Identity, and Functions features. This tutorial will show you how to: Add static forms to your site Add user authentication for password-protected content Create an AWS Lambda function Ready to supercharge a static site with serverless features? Consider checking out Netlify’s React-powered static CMS after this post! And here’s a tutorial on a whole…

Read More →

​Customize payment solutions with our enhanced platform

(This is a sponsored post.)We’ve upped our game by using developers’ feedback to improve the Authorize.Net payment platform. Check out our new, streamlined API, better sample code and SDKs, and use them to provide your merchants with a secure, scalable payment solution. You’ll see that it’s a seamless and efficient way to make sure you and your merchants get paid! Start playing Direct Link to Article — PermalinkThe post ​Customize payment solutions with our enhanced platform appeared first on CSS-Tricks. Source: CssTricks

Back to Top