DEV Community: Adam Barker

How to make a dynamic Twitter Header with Switchboard Canvas

Adam Barker — Wed, 27 Oct 2021 13:57:41 +0000

A number of interesting posts here on dev.to describe how to make a dynamic Twitter header/cover and they inspired me to add this capability to Switchboard Canvas - an API-driven image generation tool.

With Switchboard Canvas, users first create a template, then use the API to create images from it with data you supply or from other tools that you already use.

In this tutorial we’ll:

create a template
Use Switchboard Canvas to make a connection to Twitter
Use the API to generate an image from the template
Use the API to actually update your Twitter header

What are the dimensions of a Twitter header/cover image?

The correct size for a Twitter header/cover image is 1500x500 pixels.

Making a Twitter header/cover template

Open the Previewer and choose Profile header from the Twitter section.

Saving your template at this point, despite it being empty, will default it to this size in the future.

Background

For a background, I chose this moon and stars backdrop from Adobe Stock. I also resized it to a height of 500px. Upload the resulting image to your Library.

Add an Image element choose the image from your Library. Make sure the API name for the image is backdrop.

When choosing a background for a template, it’s helpful to have it fade into another color, especially if you’re going to add Text elements on top of the image.

In the template properties, set the background color to #112346:

Now we can change the Element Opacity of the background image to something around the 75% mark:

Adding a quote element

To add a quote to the image, we’re going to add a Text element. I’m using a Google Font called Sorts Mill Goudy from Google: https://fonts.google.com/specimen/Sorts+Mill+Goudy

Using pinning, we’re going to ensure that regardless of the quote we use in the Text element, it will stay centered, and won’t take up any more room than the bounding box.

Follow these steps to create and position the Text element for your quote:

Click Add Text or press T to add a Text element.
Set the API Name to quote.
Set the Text Color to white.
Set the Text to something generic such as “This is a placeholder for a favorite quote”.
Click the Bottom and Right pinning icons to enable pinning to those edges.
Set the Top edge px value to 50.
Set the Left and Right px values to 200.
Set the Bottom edge px value to 0 and the % to 50.

The Location panel properties should look like this:

We’re pinning the Text element to 200px from the left edge, 200px from the right edge, and 50px from the top edge.

On the bottom edge we’re pinning to 50% - which is 50% of the height of the template.

Ensure the Horizontal Alignment and the Vertical Alignment are set to Center and Middle respectively. This will keep the text in the center on the bounding box in both directions.

Adding the latest follower images

The next step is to add a series of five Image elements that will show the profile pictures of our five latest followers.

This data comes from Twitter automatically, so we just need to add the elements and make sure they’re named properly.

Follow these steps to make a profile image:

Click Add an Image, or press I.
Close the Library popup that appears - we don’t need an image at this point.
Change the width and height to 100.
SHIFT+Click the Bottom Pinning icon. This enables pinning to the bottom edge but also keeps the height you entered - 100 pixels.
SHIFT+Click the Right Pinning Icon. Likewise, this enables pinning to the right edge but keeps the width you entered at 100 pixels.
To add a little offset from the very edge, set the Right Pinning px value to 20. Before leaving this field, press SHIFT+Enter. This sets all px offsets to 20.

To finish off the image:

Set the Stroke Color to white, and set the Stroke Width to around 20%.

Lastly, change the API Name to follower5-image.

Your first follower image should look like this:

Making the other four follower images

With follower5-image selected, press CTRL+SHIFT+V to duplicate it.

Change the Right pinning setting as follows:

Drop the edge selector down, and instead of edge, choose follower5-image
Drop the side selector down and choose Left
Make sure the px value is still 20px.

Set the API Name to follower4-image.

This pins the right hand side of follower4-image to the left hand side of follower5-image with an offset of 20px.

Repeat this process 3 more times, duplicating the element and setting the edge selector to the element you previously created.

Don’t forget to set the API Name of each new element follower3-image, follower2-image, and follower1-image respectively.

Adding a thank-you note

The last element to add to the template is a thank-you note, thanking your last five followers.

Follow these steps to add and position this Text element:

Click Add Text or press T to add a Text element.
Set the Text to something like “Thank you to my latest followers:”
Set the Left pinning edge selector down and choose follower1-image and set the side selector to Left.
Click the Right pinning icon to enable it.
Set the Right pinning edge selector to follower5-image and set the side selector to Right.
Set the Height to 60px.
SHIFT+Click the Bottom pinning icon to enable it, preserving the 60px height.
Set the Bottom pinning edge selector to follower1-image and set the side selector to Top.
Set the Bottom pinning px value to 10.

These settings pin the position of your thank-you Text element to the follower images, specifically, to the left edge of follower1-image, to the right edge of follower5-image, and 10px above follower1-image.

Previewing the template in other sizes

Even though we’re making a Twitter header/cover which are always 1500x500, we can use the Preview control to make sure our template is responsive.

Press P to open the Previewer and choose some of the other sizes. The follower images and the thank-you message should always be in the bottom-right corner, and the quote should be centered at the top of the template.

Make sure we’re designing back at 1500x500 before closing the Previewer panel.

Make sure your template is saved and that the API Name for it is twitter-header.

Connecting to Twitter

Now that the template is created, visit your Profile page to connect Switchboard Canvas to your Twitter account.

Click the connect to twitter hyperlink. Twitter’s authorization page will load and ask you to accept the request. Once authorized, Canvas will indicate a successful connection.

Using the API

Now we can use the API to create an image from the template.

You can specify a quote to appear in the Text element in your template.

Using a REST client such as Insomnia or Postman, make sure your API key is added as the X-API-Key header, and send a POST request like this:

{
    "template": "twitter-header",
    "sizes": [
        {
            "width": 1500,
            "height": 500
        }
    ],
    "elements": {
        "quote": {
            "text": "Those who dare to fail miserably can achieve greatly."
        }
    }
}

This will return a response with a link to your new image:

{
  "duration": 2327,
  "usage": false,
  "success": true,
  "warnings": [],
  "sizes": [
    {
      "warnings": [],
      "success": true,
      "size": {
        "width": 1500,
        "height": 500
      },
      "url": "https://files.canvas.switchboard.ai/544d9fbe-270a-476c-8612-1b3385e9900c/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.png"
    }
  ]
}

As you can see, the quote has been set but the follower images have not.

Send the request again but this time, set the updateTwitterHeader property to true:

{
    "template": "twitter-header",
    "sizes": [
        {
            "width": 1500,
            "height": 500
        }
    ],
    "elements": {
        "quote": {
            "text": "Those who dare to fail miserably can achieve greatly."
        }
    },
    "updateTwitterHeader": true
}

Thanks again to the authors of the following posts for the inspiration!

How I made my Twitter header dynamic

Chris Bongers ・ Jul 5 ・ 6 min read

#twitter #webdev #node

Dynamic Twitter Header using Python

Haider Ali Punjabi ・ Sep 10 ・ 6 min read

#python #twitter #programming #automation

How to Dynamically Update Twitter Cover Image to Show Latest Followers Using PHP GD and TwitterOAuth

Erika Heidi ・ Jun 2 ・ 11 min read

Please visit https://www.switchboard.ai if you're interested in automating image generation with an API.

JavaScript's Import/Export Business

Adam Barker — Mon, 25 May 2020 17:02:43 +0000

JavaScript really stepped into the import and export business with ES Modules.

With ES6, the language introduced the import and export keywords allowing easier modularization and organization of code.

The import keyword supports a number of different syntaxes and is often confusing when first thinking about modules.

Hopefully this article can be a concise explanation of each, and to that end we’ll start with a basic module that exports some things we can use.

const name = "Marley";

class Animal {
  numberOfLegs;
  name;

  constructor(name, numberOfLegs) {
    this.name = name;
    this.numberOfLegs = numberOfLegs;
  }
}

function favoriteAnimal() {
  return new Animal("Dog", 4);
}

export { name as default, Animal, favoriteAnimal };

Here we have a module that exports three items: a string, a class and a function.

Notably, the name is just a string but it’s the module’s default export.

Let’s look at the different ways we can import and use the members from this module.

Importing the default export

We can import as much or as little as we need to use from our module. The simplest import brings in the default export: name.

import name from "./module";

// name === "Marley"

‘Name’ is obviously very broad so we can actually rename this import for use in our module.

import dogsName from "./module";

Now, ‘name’, the default export, has been imported with an alias. We can refer to this variable in our importing module using ‘dogsName’;

Import everything and give it a name

We can import everything from our module and we can give everything that comes in a name that we can use to access what was imported.

import * as animalStuff from "./module";

// animalStuff.name === "Marley";
// animalStuff.favoriteAnimal() = 
//    Animal { name: "Dog", numberOfLegs: 4 }

Importing one or more exports by name

In addition to importing the default export or everything, we can specify the names of the exports we’d like explicitly:

import { Animal, favoriteAnimal } from "./module";

This is the first time we’ve seen the curly brackets. These denote that we’re asking for specific members.

Importing specific exports and giving them an alias

In this example we can import named exports but alias them so we can use a different name in our importing module.

import { Animal as Pet, favoriteAnimal } from "./module";

const dog = new Pet(...);

Importing a module to run side-effects

This is a strange use case in that nothing is actually imported. However, any global code you might have in your module is executed.

Suppose for example, you had an additional file that contained the following code in extend.js, responsible for adding a run method to our Animal class:

import { Animal } from "./module";

Animal.prototype.run = function() {
  console.log(`${this.name} is running!`);
};

Nothing is actually exported here, but if we wanted to use the run method in our importing module, we’d need the side-effects import:

import { Animal as Pet } from "./module";
import "./extend";

const dog = new Pet("Marley", 4);
dog.run();

import is a Promise: Dynamic Imports

Using import as a function returns a promise; these use cases are known as Dynamic Imports.

It allows you to conditionally import a module at run-time:

if (weNeedToRun === true) {
    await import("./extend");
}

Hopefully this brief primer into the import syntax has been useful. Check out the official Mozilla docs for import and export for more examples.

Custom Validators for Angular Reactive Forms

Adam Barker — Sun, 24 May 2020 00:22:36 +0000

Angular… ugh, I know.

But Reactive Forms are actually pretty cool and once you get the hang of them, you can appreciate all of the form dynamics that Angular handles for you.

At the end of the day we want to supply an object to a form, allow the user to make changes and keep those changes valid.

Angular provides classes to marry object properties to markup and a convenient FormBuilder to help construct groups of form components with default values.

this.formGroup = formBuilder.group([
  {
    "name": [
      "Adam",
    ],
    "age": [
      "21"
    ]
  }
]);

Out of the box Angular provides a set of validators that cover many if not most requirements.

My name should be longer than 20 characters and clearly I’m no older than 25 so I can specify validators to the FormBuilder object:

this.formGroup = formBuilder.group([
  {
    "name": [
      "Adam", Validators.maxLength(20)
    ],
    "age": [
      "21", Validators.max(25)
    ]
  }
]);

We can check for validation errors in our FormGroup object with the errors property of each control. This property maintains an object that, when the value is valid, is empty. Otherwise, the object contains keys indicating how the value has failed validation.

For example, if our name value was say 28 characters, longer than the valid 20 characters,

formGroup.get("name").errors

would return:

{
    maxLength: {
        actualLength: 28,
        requiredLength: 20
    }
}

If we need something a little extra, something outside the typical min, max, required or email, we can write a custom validator.

Suppose we wanted to validate a favorite movie field. Let’s add a movie validator and determined that any value other than Back To The Future is invalid:

function movie(control: AbstractControl)
    : { [key: string]: any } {
    if (control.value !== "Back To The Future") {
        return {
          movie: {
            suppliedMovie: control.value,
            quality: "Questionable"
          }
        };
    }

    return undefined;
}

Here we check the control’s value and it’s not the value we want we can return an object specify how the value is invalid. If the value is valid, we return undefined because we don’t want the errors object to be populated in this case.

It’s a simple change to add our new validator to the FormBuilder call:

this.formGroup = formBuilder.group({
  name: ["Adam", Validators.maxLength(25)],
  age: ["21", [Validators.min(0), Validators.max(25)]],

  // Instead of using the Validators class we can 
  // supply our own validator, movie:
  favoriteMovie: ["Silent Running", movie]
});

What if we wanted to be less stringent and maybe offer the user of our validation function the option to specify a number of movies that could be favorites.

Now we need an argument to movie, like max and maxLength do.

function movie(
  validMovies: string[]
): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } => {
    if (validMovies.indexOf(control.value) == -1) {
      return {
        movie: {
          suppliedMovie: control.value,
          reason: "Not one of my favorites!"
        }
      };
    }
  };
}

Instead of the movie function now immediately validating the value and returning an error object, it’s basically a higher-order function and returning a function that Reactive Forms will use. We provide an array of movie names as an argument, and these are used by the function at validation time to check the control’s value.

this.formGroup = formBuilder.group({
  name: ["Adam", Validators.maxLength(25)],
  age: ["21", [Validators.min(0), Validators.max(25)]],

  favoriteMovie: ["Silent Running",
    movie([
        "Teen Wolf", 
        "Saving Private Ryan", 
        "Inception"
    ])]
});

Now, Silent Running (excellent movie, criminally downvoted) is still invalid, but we’ve supplied a list of movies for which the value will be valid.

Check out the StackBlitz for this example!

WWDC2019: Of Course We Need To Work Overtime

Adam Barker — Wed, 05 Jun 2019 15:49:40 +0000

There's been a big response to a comment Tim Cook said at the recent WWDC2019 event.

He applauded the engineers and other staff who gave up "nights, weekends, and time from their families".

It was a polarizing comment for sure. The response was full of mixed opinions about the way staff are treated and the way they're made to feel obligated to put in extra time.

In Apple's case, there were undoubtedly a whole host of complex reasons that led to people overworking to prepare for this event. Aside from the logistics of staging the event and inviting industry professionals and press, there's the significant pressure of being a company under such scrutiny (read as Wall Street) - that pressure would have been felt exponentially the closer they got to the deadline.

In other industries the pressure comes from clients. In some fields of law, as in the consulting game, the client is largely dictating the timeframe, and you end up with teams of people working days on end without breaks to meet a deadline.

Common sense would dictate that clients should understand that if your consulting team is working working around the clock and not sleeping, they're not going to produce the best work for you. However, the market does not run on common sense. The client also knows a price was negotiated, and if the team does not have enough staff to manage the project without overtime, then hire more staff. It's your problem, not mine.

I actually think the software development industry has done pretty well managing this problem because we enjoy a variety of methodologies that help us track and manage time throughout any given project.

With Agile, we can break a project down into sprints and estimate work fairly accurately. Agile has not only done a lot for making software development visible to the wider audience, but also for helping us avoid the so-called death-march: working all hours to meet some arbitrary deadline and screwing up our routine in the process.

I think building overtime into your culture is fundamentally wrong.

I think someone choosing to put in an extra hour or two to ensure a solid start to the following day or to build in some extra insurance for a future event is fine. As a developer, if I'm working on something and time's getting on, I'll secretly negotiate with myself to get to a certain point because I'll be so much happier tomorrow starting from a cleaner point. In a way that extra effort is locking in my motivation for a later time.

I'm also a fan of overtime being rewarded on a case by case basis. In contrast, you might be paid a premium knowing your consulting job means you'll be at the mercy of a new deadline all the time. You'll always be working overtime.

I much prefer the on-demand model - there might be an important demo and we might need to rally, but after that crunch period the team need to feel that effort is valued on an individual level. They should promptly be rewarded with time off (some multiple of the extra hours they committed) or extra pay (some multiple of their hourly rate).

Overtime is a common occurrence and often unavoidable but it's the relationship between employer and employee that is most important. No employer should take employees for granted and expect overtime as a given. Everyone has different priorities in their lives and you need to give extra when you expect to receive extra.

Let me know your thoughts! I'd love to hear about your experiences - whether you feel like you're taken advantage of or whether you feel suitably compensated when crunch time hits.

Python & Pandas Course

Adam Barker — Thu, 30 May 2019 15:41:27 +0000

Not incentivized in any way but I just happened to stumble across a code for Udemy's Python & Pandas course.

Get it free with code: APRILMAGIC.

I guess the magic is the code still works when it's basically June. 🤷🏻‍♂️

One Way to Level Up Your Development Career

Adam Barker — Sun, 26 May 2019 16:05:23 +0000

Over the past few years I’ve been asked a few times what’s the best way to ‘level up’ a development career.

As developers we primarily think in terms of the languages and frameworks we need to learn, how to go about utilizing best practice and being good, compassionate team players.

I think one of the best ways to level up is to spend time thinking about how what you and your team works on benefits the company or client you’re working for.

Sounds obvious right? Your product manager, architect or team lead outlines what needs to be done and as a team or freelance developer you build and deploy that thing.

But where you can differentiate is reverse engineering the company’s vision and applying your technical skills to directly affect that vision.

A non-technical CEO or manager will far more appreciate your value if you’re empathetic to the bigger picture than just operating in siloed sprints, features or bug-fixes that we’re used to in the day to day.

Demonstrating that you’re capable of thinking at those two distinct levels is a huge advantage. One of the most effective ways to do this is to think in terms of the cost of a specific decision. Sure, your manager or tech lead may have already decided on the best solution for a given problem but if you can display empathy for the same decision making process, they’ll see you as someone invested in helping them solve the same problems, someone operating on the same level, and someone who helps them do their job as well as your own.

Having co-founded a startup, I love it when our team suggests different ways of solving a problem taking cost into account. It may be the use of a different AWS service that benefits us over the long term, an admin function that gives extra visibility into a sensitive area, or use of a new framework that will save the team a ton of time.

In essence, they’re thinking holistically about how they can benefit the wider business before diving into technical details.

In small companies and startups it’s a lot easier to do this because you’re so much closer to founding or ‘senior’ people, but if you’re in a larger company, demonstrating empathy to your manager is a great quality that will travel well in positive word of mouth.

Crucially it creates a lot of trust that you have the business’s best interests at heart. This often gets rewarded when businesses need to pivot or create new functions that need new leaders.

Be the first name that springs to your manager's mind when this happens!

Is it dev dot too or is it dev dot tee oh?

Adam Barker — Sat, 11 May 2019 00:39:30 +0000

So literally my whole entire life I've been pronouncing this site as "dev dot too" but I've just heard someone refer to it as "dev dot tee oh".

Now I'm freaking out. I'm freaking out mostly with relief as I realized I've not actually verbalized the site's name in front of anyone and have therefore spared myself what I can only imagine to be considerable embarrassment.

But it made me think: the last time I did this was many years ago when people couldn't decide if GIFs had a hard or soft G. Is hard or soft G like tabs vs spaces?

So now I want to hear examples of when people called things the wrong thing for the longest time...

...or had that moment when they heard someone pronounce something and thought I never thought I should say it like that.

Comment and let me know! 👇👇👇👇

The Day Everyone Turned Into Michael Johnson. A Lesson In F5.

Adam Barker — Sun, 15 Apr 2018 18:27:50 +0000

There is no real point to this article - it’s not one of my usually strong lectures and doesn’t feature a key take-away or call to action.

It’s just something hilarious that happened many years ago that I recently remembered.

I think it was 2002 and I’d joined a small company in the UK as a software developer. (This was before new companies were called startups and before joining new companies was cool). The company had designed a telecoms product and offered businesses unlimited calls for a low(ish) monthly cost.

At the time it was a revolutionary idea and we gained many customers quickly. We’d developed the billing system, we ran business development, we had a tiny call centre, everything.

Classic ASP

Our tech stack was largely Microsoft based. We had a classic ASP website and we ran on SQL Server. Everything kinda ran well, but what we lacked was any sort of contigency. We’d grown so quickly that no-one had had the time to think about disaster recovery or database backups or even source control.

Unit and integration testing didn’t exist, exception handling was minimal and problems were fixed as we found them - in production.

You can see where this is going.

The Billing Run

The single most important monthly event for us was the Billing Run. This essentially consisted of running a job that would calculate every customer’s bill and generate a document that would by electronically sent to an off-site printing location. From there the bills would be packaged into branded stationery and mailed to the customers. Once a bill was generated, it would be saved into a online location so that we had a PDF copy of what was created for reference.

The Billing Run was always a stressful time. Because we were largely hands-off after the job hard started running, we would always worry that bills would be accurate and that we were correctly calculating everything. (Deep down we knew something would always go wrong because we’d rushed everything).

Bob

My co-worker at the time was a wonderful chap. After we met we became close friends and for this reason he won’t mind me saying that despite being a software developer, software development was not his strong suit. I’ll do him the honor of protecting his identity and call him Bob. (His name was actually Bob).

Bob had the remarkable ability to… let’s say, break things. I’m not sure he actually meant to wreak such havoc but he had a wonderful track record of deleting things, losing things, dropping databases and tables, being late for work, forgetting to go home from work, forgetting where the office was. The list is quite endless.

UPDATE dbo.customers...

One day we had a request come down from the call center. A customer’s name had a typo and it needed fixing. The customer was upset. The operator in the call center couldn’t change the name because of a bug in the system. Naturally.

We were all fairly nervous because we were right in the middle of the Billing Run. Generally changing anything mid Billing Run as considered a bad idea. We were even scared to answer the phone during the Billing Run.

Anyway Bob took the call and heard the story about how Michael Jonson was missing an ‘H’, and was subsequenly excited to realize he could probably fix this with the minimum impact. A simple database update. It wasn’t like he had to make a code change and redeploy something, after all.

Anyone familiar with the majority of SQL tools these days knows that while you can be authoring large scripts or procedures, it’s also possible to highlight a portion of script and execute it in isolation.

Such functionality was Bob’s downfall that day, for Bob authored a statement such as:

UPDATE dbo.customers SET firstName=‘Michael’, lastName=‘Johnson’ WHERE id = 187222;

(Savvy administators will be wondering why our tables were in the dbo schema. My response is: Good point.

Secondly I need to point out that 187222 is an arbitrary number and does not, in the slightest, indicate the number of customers we had).

Bob then proceeded to take his mouse and highlight the statement and press F5, immediately executing the statement. Only he didn’t highlight both lines, just the first.

At this point, everyone in our production customer table had the same name.

These days my responses to mistakes are more professional, but at the time I burst out laughing. It was so… Bob.

A few short minutes later we got a call from the off-site printing location informing us that everyone’s bill suddenly had the same name. We’d need to rerun the Billing Run.

Obviously we didn’t have a very recent backup of the production database and Bob spent the next few hours tracking it down, restoring it, and correcting all the customer’s names.

By the time we could rerun the Billing Run, the billing period was slightly off which meant we’d need to include a letter in everyone’s billing telling them what had happened.

There are many lessons to be learned here. Bob didn’t get to learn any of them, he was fired immediately. That’s a joke of course, you can’t fire anyone in the UK. But things have moved on and thankfully development methodologies and general DevOps have many safeguards in place.

Still, I’ll always think of Michael Johnson when I press F5.

One of the Most Useful Software Development Skills Has Nothing To Do With Software Development

Adam Barker — Tue, 10 Apr 2018 20:27:41 +0000

One of the reasons software developers love what they do is because they love learning.

When you first start to learn a programming language, it can feel like an overwhelming undertaking.

Especially these days.

When I was 14 I took a three week work experience job at a small software development house and I remember the owner being marginally impressed at a game I’d written (in AMOS for the Commodore Amiga - yep, that long ago), but then he looked at me and said:

“You need to learn C.”

With one language I could have recreated all the products that software house had developed. But these days, you need knowledge of multiple languages and multiple frameworks, knowledge of databases, knowledge of DevOps-style tasks so you can deploy your creations, knowledge of compilers, transpilers, build tools and containers.

Despite the enormous array of tools available with which to build applications, these skills are a commodity. It’s true that the longer you spend learning the more confident you become that you can learn something else. But there are other skills that are as important, if not more important in today’s environment.

Mindset: Don’t write code, solve problems.

I once worked for a software company that employed maybe around 50 developers, but two stood out.

These two were the true rock stars. Their opinions were valued above all others and it often seemed like they ran the company themselves. They enjoyed direct access to the top of the tree and their every wish granted by the executive team.

I wondered what it was about them that garnered such respect by the company’s founders. I felt I’d had the same amount of experience and offered the same skill level.

Eventually it occurred to me.

They didn’t write software, they solved problems.

I think one of the best skills to deploy if you’re joining a small company is to be empathetic towards the company’s goals. There will be many priorities over creating perfect bug-free software and establishing solid methodologies and 100% test coverage. Unless the company has raised considerable capital and can afford to hire a huge team that takes 3 months to put everything in place, you will just need to be in build mode, and your product needs to be done and out the door in 3 months.

You won’t always have the luxury of time to make everything perfect or refactor some code to where you’d like it. Sometimes bugs have to stay unfixed or features left out because the business has greater priorities. Showing respect for these, and driving your decisions from these can make a huge difference.

Experience helps in these cases because experience will help you make better decisions - mostly in terms of what not to waste time doing. Speed is the priority in those early days.

If you’re able to demonstrate empathy to the company’s founders, it puts you in a great position to build trust and loyalty because they know you’re on their side; that you’re invested in all facets of the business and are not just an employee or a siloed member of the team.

The Super-Brief History of JavaScript Frameworks For Those Somewhat Interested

Adam Barker — Mon, 02 Apr 2018 18:22:37 +0000

JavaScript frameworks have come a long way and any new developer is not only faced with learning a language but choosing with framework to learn first.

The choice available today is a result of some incredible innovation in a relatively short space of time. As recently as 2004, Google released Gmail which is regarded as the first everything-in-the-browser product we know today as Single Page Applications.

If you're just starting to learn JavaScript, you arrive at a good time, but there wasn't always so much choice and flexibility if you wanted to do anything interesting in the browser.

Dynamic HTML

In the early 2000’s, JavaScript was largely in its infancy, and was mostly used to perform basic changes to a page. The highlights included mouse-overs, dropdown menus and scrolling text - things developers take for granted today with the power of CSS.

Back then, Internet Explorer dominated the web browser landscape (I know, weird right?) and since 1999, included a wrapper around a library Microsoft had developed for their own e-mail product, Outlook. The lovely but dauntingly named XMLHttpRequest object eventually became standardized across browsers and was the gateway to how we experience much of the Web today.

Crucially, this XMLHttpRequest allowed requests to be sent to a server, and a response processed, without having to refresh the browser or perform a full round trip. Until then, things like clicking a tab or posting a form meant the server processed that request and decided how to render the response, and the browser would spin away and eventually show the result.

Developers jumped on the functionality and saw the potential to create real desktop-replacement applications on the web. Asynchronous Javascript and XML, shortened to AJAX, was the phrased coined to describe this newfound ability.

jQuery

jQuery wasn’t technically the first JavaScript framework, but its popularity exploded after it was released in 2006. jQuery aimed to solve many of the issues developers faced with subtle differences in web browser implementations, and it abstracted much of the functionality developers wanted into a clean and easy to learn framework.

With the potential to build applications that harnessed the convenience of the web, developers built larger and larger solutions that tested jQuery’s maintainability. Products like Gmail had demonstrated what could be achieved but it became clear more enterprise friendly tooling might be needed.

Backbone & AngularJS

In 2010, Jeremy Ashkenas released Backbone, the first framework aimed at creating single page applications. Jeremy had seen how messy a huge jQuery application could become and wanted a cleaner approach to remedy the thousands of selectors and interwoven event handlers. Interestingly, Backbone didn’t require jQuery, it was an independent framework but certain functionality could be enabled if jQuery was present.

Around the same time, Adam Abrons and Misko Hevery created AngularJS, which soon after fell under Google’s care when Hevery took a job at the company. Angular was the first framework that provided a complete architecture for front-end application development.

One of AngularJS’s main features was bi-directional data binding and provided a way to bind a model’s data to HTML markup and have changes update in real-time. Developers called this ‘automagic’. Angular also supported dependency injection and the ability to create reusable components.

Knockout, Meteor, React

Knockout is another framework that provided a solution to bi-directional data binding, although it provides only a fraction of the functionality of AngularJS. Meteor too, had a significant following but in 2013, Facebook released its React framework and has since enjoyed huge popularity.

Many new developers first hear about React and make it their framework of choice. Despite this, React does has a relatively steep learning curve, but it also benefits from excellent documentation and an enormous community.

For a developer it’s very interesting to see the way frameworks have tried to solve the problems of their predecessors. I think Angular (certainly the most recent versions) share a lot with React and in turn they both share common goals with Vue, the new kid on the block.

Another consideration that has become increasingly important is how easily these frameworks can support mobile targets. Ionic and React Native have proven to be considerable players as teams attempt to standardize on JavaScript as a language for all means: server side with NodeJS, desktop and mobile browser, and targeting native devices with the help of additional frameworks.

In summary, JavaScript is a great language to learn and with these frameworks, almost anything is possible on any device. With each new release of a framework there is much evidence of learning from previous incarnations so there's never a better time to dive in and start to build your first application.