PHP For Beginners: Building a Simple CRM from Scratch

Customer Relationship Management (CRM) is a system that manages customer interactions and data throughout the customer lifecycle between the customer and the company across different channels. In this tutorial, we are going to build a custom CRM in PHP, which a sales team can use to track customers through the entire sales cycle.

We'll be creating a simple CRM system for salespeople (more…)

Tools to Visualize and Edit SVG Paths (Kinda!)

It was brought up at the SVG Summit the other day, wouldn't it be nice when working with SVG to be able to work with it both ways at once?

  1. See and edit the code, and see the results visually
  2. See and edit the visual shapes, and see the code change

There might not be the perfect one true tool, but there are certainly some ideas getting there!

(more…)

Computer Science Distilled, Chapter 2: Complexity

This is a full chapter excerpt from Wladston Viana Ferreira Filho's brand new book Computer Science Distilled which he has graciously allowed for us to publish here.

In almost every computation, a variety of arrangements for the processes is possible. It is essential to choose that arrangement which shall tend to minimize the time necessary for the calculation. —Ada Lovelace

Websites to Generate SVG Patterns

These aren't particularly hard to web search for, but just in case you didn't know they existed I figured I'd drop them here. I've used all three of these in the past and I think they do a good job of driving home how cool of patterns you can make in SVG with such little code.

(more…)

Add a Number to Two Variables At Once

You can initialize two variables to the same value at once, kinda:

var foo, bar;
foo = bar = 10;

But there is no similarly easy mechanism to add, say, 5 to both foo and bar at the same time. Of course, it's simple enough to just do:

foo += 5; // foo is now 15
bar += 5; // bar is now 15

But that's two operations. (more…)

Annotation is Now a Web Standard

This sure is exciting news: the various groups that make up the W3C have agreed upon a set of rules by which we’ll be able to annotate, highlight and make comments to a webpage without the need of a third party script or framework.

Dan Whaley describes why this could be a big deal:

The W3C standards are a key milestone towards a future in which all pages could support rich layers of conversation without requiring any action by their publishers—because that capability can be built into the browser itself and be available as a native feature, just like like web search. The shared vision is that conversations will be able happen anywhere on the Web, or even on documents in native apps, and inline instead of below-the fold, in a federated, standards-based way.

Responsive Images in WordPress with Cloudinary, Part 2

In Part 1 of this series, I provided some background on responsive images, describing how you can add srcset and sizes attributes to an img element to serve appropriately sized image files to users of a website based on the size and capabilities of their browser and device. I also shared how WordPress used its native image resizing functionality to implement srcset and sizes automatically and how you can use an external image service like Cloudinary to extend the native implementation that WordPress provides.

(more…)

Google Analytics Data Studio

I've said a number of times in the past:

I wish I could just check a checkbox and make certain Google Analytics data public.

I get that analytics can be a very private thing for some sites. I think there are just as many sites where that data just doesn't need to be private. Not only would it be interesting, but insight might be gleaned from having more eyeballs on the data, and it could contribute to a wider data set of analytic trends.

Anyway, there is no such checkbox. (more…)

HTML APIs: What They Are And How To Design A Good One

Lea Verou writes about the design of HTML APIs and how we might write better documentation for web designers. An HTML API is term for a JavaScript library that is configured and controlled through HTML rather than through JavaScript. For example <div data-open-modal="#modal"></div> might tell a library that this element is in charge of opening a modal. There is no configuration or initting other than loading the library itself.

My favorite part of this piece is where Lea confronts what might generally be seen as a simple plug-n-play JavaScript library:

Even this tiny snippet of code requires people to understand object literals, arrays, variables, strings, how to get a reference to a DOM element, events, when the DOM is ready and much more. Things that seem trivial to programmers can be an uphill battle to HTML authors with no JavaScript knowledge

By giving folks an HTML API we can avoid potential headache.

...remember that many of these people do not speak any programming language, not just JavaScript. Do not talk about models, views, controllers or other software engineering concepts in text that you expect them to read and understand. All you will achieve is confusing them and turning them away.

Lea's made a collection of libraries that have HTML APIs.

An Animated Intro to RxJS

You might have heard of RxJS, or ReactiveX, or reactive programming, or even just functional programming before. These are terms that are becoming more and more prominent when talking about the latest-and-greatest front-end technologies. And if you're anything like me, you were completely bewildered when you first tried learning about it.

(more…)

Individual CSS Transform Functions

Dan Wilson documents a classic annoyance with transforms:

button {
  transform: translateY(-150%);
}
button:hover {
  /* will (perhaps unintentionally) override the original translate */
  transform: scale(.8);
}

The native (and WET) solution is list the original transform again:

button:hover {
  transform: translateY(-150%) scale(.8);
}

Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:

:root {
  --tx: 150%;
  --scale: 1;
}
button {
  transform: 
    translateY(var(--tx))
    scale(var(--scale));
}
button:hover {
  --scale: 0.8;
}

Cascading custom properties FTW.

​The Best Tech Jobs in the World

Over 6,000 companies use Hired to find their next team member and with transparency into each company, you're empowered to make the right decision about what opportunities you'd like to pursue. Say goodbye to pushy recruiters trying to sell you on roles you don't actually want. Life's too short to waste time with companies that are a bad fit, or to find out after months of interviewing that the offer is no good. Try Hired and let companies apply to you.

The best part: it's always free.

Fluid Typography

Using viewport units and calc(), we can have font-size (and other properties) adjust their size based on the size of the screen. So rather than always being the same size, or jumping from one size to the next at media queries, the size can be fluid.

(more…)

Do responsive sites have to be so tall on mobile?

Kevin Vigneault:

I don't believe that the overall page length itself is inherently problematic. I have noticed though that in many responsive designs, purposeful groupings of content are easy to spot on larger screens, but get muddled when things start to stack on mobile screens.

This is probably mostly a problem on "content" sites in which you smash things down into the ol' tube of content. I don't mind the tube, but I think Kevin is doing some smart thinking here. There are plenty of different patterns that can happen while tubizing, and it's probably not thought about enough.

This site is particularly guilty. A quick document.documentElement.offsetHeight test showed 14749px, more than double the height of an example Kevin pointed out that was a bit excessive.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag