DEV Community: Avi Goldman

JavaScript is hard: here are some of my go-to packages

Avi Goldman — Mon, 06 Jun 2022 00:37:27 +0000

I've been programming for a little while now. I'm not the best, I don't have much formal training, but my code runs and it does the job :)

I started out programming in Java. Then dabbled in python. Then did PHP for a couple of years. And finally committed to the JavaScript game back in 2015.

JavaScript is so versatile and so overloaded that it can be hard to find your way. And once you do get your bearings you can build pretty much anything. We've all read (or at least seen the titles) of articles bashing JavaScript or praising it. This isn't one of those. This is more for documenting which packages I always end up going back to, partly for myself since I forget, and partly for everyone else.

Isomorphic utilities – fancy words for "it works everywhere"
Servers – someone else's computer that usually does database work
Databases - the thing that stores your data
Frontend – your user's computer that displays data and talks to servers
Scraping – grabbing data from a website when they don't give you an API
Email – most people won't care about this but I spent a lot of my time in here

Isomorphic utilities

Category	Name	Creator	Description
Generic utilties	lodash	John-David Dalton	A utility library with a ton of useful functions for manipulating strings, objects, arrays, and basically anything else. I don't think I've ever made a project without it. Oh, and it's the most depended upon NPM package.
Debugging	debug	Debug.js	A debugging library. Add logs. Filter them out. Colors for easy visual parsing. Another top 10 package.
Data fetching	axios	Axios	A super comprehensive library for making HTTP requests. Works in the browser and node.js. Another one that is in almost all of my projects.
Data validation	yup	Jason Quense	My favorite way to validate an object. It can be as simple or complex as you need. Super portable. Casts values. I use it to validate API requests and form values in formik.
ID generation	uuid	UUID	Generates universally unique identifiers (UUIDs). I love UUIDs for IDs of things that aren't user facing. Better than sequential IDs.
ID generation	nanoid	Andrey Sitnik	Generates unique identifiers. I like it for when UUIDs are too long. Think YouTube video IDs.
ID generation	slugify	Simeon Velichkov	Takes a string and returns a "slugified" version. i.e. "Hello World" becomes "hello-world". Great for IDs that don't need to be globally unique or need to be memorable to the user.
Dates	date-fns	date-fns	You can't go without this one. If you need to deal with dates, this is the tool for you. Formatting, math, comparing, sorting, filtering – it does it all.
Promises	delay	Sindre Sorhus	Sleep for some time. Great for testing delays or for writing flaky code ;)
Promises	p-map	Sindre Sorhus	Maps an array into promises.
Promises	p-timeout	Sindre Sorhus	Timeout a promise after some time.
Promises	p-retry	Sindre Sorhus	Retries an async function on failure.
Promises	p-cancelable	Sindre Sorhus	For creating promises you might want to cancel before they complete.
Promises	p-progress	Sindre Sorhus	For creating promises you want to report progress as the work is done.
Promises	p-any	Sindre Sorhus	Resolve after any of the promises finish.
Promises	p-some	Sindre Sorhus	Resolve when a specific number of promises finish.
Promises	p-all	Sindre Sorhus	Resolve when all the promises finish.
URLs	is-absolute-url	Sindre Sorhus	Checks if a string is an absolute URL.
URLs	is-relative-url	Sindre Sorhus	Checks if a string is a relative URL.

Servers

Category	Name	Creator	Description
Server	Express	Express.js	The industry standard for running a node server. If you don't have a strong opinion about a tool, use this.
Middleware	body-parser	Express.js	A must have middleware for parsing the body.
Middleware	cookie-parser	Express.js	A must have middleware for parsing cookies.
Middleware	helmet	Express.js	A must have middleware for securing your server.
Middleware	cors	Express.js	A must have middleware for setting good cors headers.
Middleware	express-ws	Express.js	A middleware for setting up web socket things. Not a must have ;)

Databases

I almost always reach for PostgreSQL. I've been using it for years, and it's been a great tool. If I need something real-time I use Firebase. If I need something for caching or queuing I use Redis.

Category	Name	Creator	Description
Database connector	pg-promise	Vitaly Tomilov	An promise library for PostgreSQL. Low level and lovely.
Database connector	ioredis	Zihua Li	A client for Redis. No real opinions. Which is a good sign in-itself.
ORM	prisma	Prisma	An ORM with migrations and type-safety. My go-to for any new projects.
Queues	bullmq	TaskForce	My favorite way to build queues.

Frontend

Category	Name	Creator	Description
Framework	React	React	A JS library for building user interfaces.
Metaframework	Next.js	Vercel	A React Framework - I wouldn't use React without something like this.
Styling	styled-components	styled-components	A CSS library for React. Only for when I want 100% control.
Styling	tailwindcss	Tailwind Labs	The utility-first CSS framework. When I don't care about 100% control, I use Tailwind.
Data fetching	SWR	Vercel	The best way to fetch data in React (that I know of)
Forms	Formik	Jared Palmer	The best way to build forms in React (that I know of)
Utilities	clipboard-copy	Feross Aboukhadijeh	Copies something to the user's clipboard. That's it.
Utilities	file-saver	Eli Grey	Makes it super easy to save files to the user's computer.
Utilities	react-outside-click-handler	AirBnb	"When the user clicks outside this element, do XYZ"
Utilities	@reach/auto-id	Reach - the accessible foundation for React	Auto generate IDs. Useful for connecting labels and inputs without needing to manually set the id.
Utilities	@reach/rect	Reach - the accessible foundation for React	React hook and higher order component to get the exact size of the DOM element.
Utilities	react-intersection-observer	Daniel Schmidt	Track when a DOM element enters the viewport. "When the user scrolls to this element, do XYZ".
Utilities	react-focus-lock	Anton Korzunov	"Don't let the user leave this element"
Utilities	react-error-boundary	Brian Vaughn	"When something breaks, display XYZ"
Components	Reach UI	Reach - the accessible foundation for React	A ton of accessible React components I turn to all of the team
Components	dnd kit	Claudéric Demers	Wanna make sortable lists, drag and drop builders, or anything else that the user can move? This is the tool for you.
Components	downshift	Kent C. Dodds	Accessible comboboxes.
Components	react-toastify	Fadi Khadra	Easy way to show toast notifications (Those notifications that pop up in the corner.)
Components	react-contexify	Fadi Khadra	Easy scalable way to add context menus. (What you get when you right click.)
Components	Split.js	Nathan Cahill	Super flexible utilities for resizable panes.
Components	kbar	Tim Chang	A customizable command palette.
Components	react-monaco-editor	react-monaco-editor	A nice React wrapper around Monaco Editor
Components	react-chartjs-2	reactchartjs	A nice React wrapper around chart.js

Scraping

Category	Name	Creator	Description
Headless browser	Playwright	Microsoft	A headless browser for testing and prototyping. Supports all major browsers and has great utils for waiting for the DOM to be ready.
Extraction	Metascraper	microlink.io	A library for extracting metadata from web pages.
Extraction	html-get	microlink.io	A library for getting the HTML from any webpage, even if it uses JavaScript for rendering.
DOM navigation / manipulation	cheerio	Cheerio	A jQuery-like library for navigating and manipulating the DOM. Couldn't live without it.

Email

Ok so I work in email. I spent a lot of time thinking about email creation, validation, testing, etc. This section probably won't be interesting to most folks but I figured I'd add it anyways.

Email address validation

Category	Name	Creator	Description
Domains	disposable-email-domains	Ilya Volodarsky	A list of domains associated with disposable email services. You'll never catch em all but this is pretty damn good.
Domains	free-email-domains	Kiko Beats	A list of domains associated with free email providers.
Domains	email-providers	Jannis R	A list of domains associated with email providers.
Localparts	role-based-email-addresses	Mixmax	A list of localparts (the part before the `@` sign) that refer to a role and not a person (i.e. "sales" or "admin")
Email address	email-misspelled	Julien Amblard	A library that will suggest an correction if the given email address probably has a typo.
Email address	email-addresses	Jack Bearheart	A library for validating email addresses.

String / HTML / CSS manipulation

I a email creation platform and it requires a fair bit of DOM and string manipulation.

Category	Name	Creator	Description
Email parser	mailparser	Node Mailer	A library for parsing emails. I'm a fan but it's a bit heavy compared with letterparser and is node.js only.
Email parser	letterparser	Mat Sz	A full isomorphic library for parsing emails. Oh and it has AMP support which is a big plus. My go-to now-a-days.
CSS inliner	juice	Automattic	The industry standard CSS inliner. It's hard to beat.
CSS navigation / manipulation	postcss	PostCSS	A library for transforming CSS. Super powerful but a bit too dependent on perfect code for my liking.
HTML navigation / manipulation	Cheerio	Cheerio	A jQuery-like library for navigating and manipulating the DOM. Couldn't live without it.
HTML navigation	simple-html-tokenizer	Tilde	A library for tokenizing HTML. I use it for finding the source information for HTML attributes.
HTML manipulation	sanitize-html	Apostrophe CMS	A library for sanitizing HTML.
HTML manipulation	escape-html	Component	A library for escaping HTML.
HTML manipulation	html-to-text	html-to-text	A library for converting HTML to text. Not perfect but a great base to work off of.
HTML information	is-self-closing	Jon Schlinkert	A library for checking if a tag is self-closing.
HTML information	html-tags	Sindre Sorhus	A list of all HTML tags.
HTML information	caniemail	parcel.io	The data powering caniemail.com - the best source of support data for email.
String manipulation	ranges-apply	Codsen	A library for manipulating strings. When you need to do non-parsing HTML/CSS manipulation there is literally no better way than this.

Open a new tab when your browser extension is installed

Avi Goldman — Fri, 07 Feb 2020 13:56:07 +0000

I recently published my first Browser extension to Chrome and Firefox, bringing Glitch superpowers to your browser. After the user installed the extension, I wanted to show the user a new tab with some information about myself as well as ask them if they wanted to receive updates about the extension and other projects I’m working on.

I was inspired by some of my favorite Chrome extensions that do this, including Wappalyzer, ColorZilla, and Honey. Here’s a quick demo of Honey’s install page.

Thankfully it was a fairly short amount of code to get this working! In case you're interested in doing something similar, here's how I did it.

manifest.json

Normally this is the section where you need to update your manifest.json so you can implement the functionality. However, here we will use the tabs API, most of which can be used without any extra permissions 🙌

We do need to have a background script declared in our manifest.json. A background script listens for an event, like installs, messages from the content scripts, and more.

{
  "name": "Glitch extension",
  "version": "0.0.1",
  "description": "Glitch superpowers for your browser 👾",
  "background": {
    "scripts": [ "background.js" ],
    "persistent": false
  },
  "browser_action": {
    "default_icon": "browser-icon.png",
    "default_popup": "popup.html"
  },
  "manifest_version": 2
}

background.js

We will listen to an event when the extension is installed. The event contains a reason property which could be any of the following: "install", "update", "chrome_update", or "shared_module_update"
Since we only want to open the new tab on install, we will make sure that the reason equals “install”.

chrome.runtime.onInstalled.addListener(function(details) {
  if (details.reason === "install") {
    chrome.tabs.create({ url: "https://avigoldman.com/glitch" });
  }
});

Try it out

That’s it! Now every time your chrome extension is installed, a new tab will be opened. And here’s a video of it working 👾

Happy coding,
Avi

Give Glitch superpowers with this browser extension 🎏💖

Avi Goldman — Tue, 14 Jan 2020 18:01:26 +0000

I'm super excited to share my latest project: a browser extension to make it easier to remix glitch apps, import code from git, or start a fresh project.

You can install it on Chrome or Firefox right now!

With it, you can easily:
👀 View glitch app details
🎤 Remix glitch apps
🍱 Generate embed code
💻 Import code from GitHub and GitLab
✨ Start new Glitch projects from any page on the web

All about Glitch

Glitch is an awesome tool where you can find cool projects, copy them and make them your own, and create things you can share with people immediately – all in your browser. You can read more about what Glitch is this “What is Glitch?” post.

Seriously – there is some really cool stuff to check out. Here is a project that is filled with animated doodles where you can create your own.

Why I made this

If you can’t tell, I’m a bit of a super fan of Glitch. In fact, I can show you the exact date and time Glitch won my heart. 😅

// Detect dark theme var iframe = document.getElementById('tweet-975910762978852865-548'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=975910762978852865&theme=dark" }

I found that when I was in my own project it was super easy, but checking out random projects, moving between the source and the app, and pulling in code from GitHub was definitely harder.

So I decided to scratch my own itch!

Give it a try

If you are a Glitch fan like me, then give this extension a try! It’s available for Chrome and Firefox. And if it works for you, upvote it on Product Hunt! 😻
Interested in creating your own browser extension? All the code is available in this Glitch project 👾 for you to remix into something that works for you.

Happy coding,
Avi

How To Send Faxes Via Email Using SparkPost, Twilio & Cloudinary

Avi Goldman — Fri, 12 Jan 2018 14:08:50 +0000

No Fax Machine? No Problem! SparkPost, Twilio, and Cloudinary Are Here To Save The Day!

I don’t know about you, but I don’t have a fax machine. Once in a blue moon, I have to send or receive a fax, so I was excited when Twilio shared an awesome way to receive faxes straight to your email using SparkPost. But that is only half the battle. I decided to build the ability to send faxes from an email so I would never need a fax machine again!

We’ll build a function so we can send a PDF attachment to FAX_NUMBER@YOUR_DOMAIN, which will automatically fax the PDF to the phone number before the at sign (a.k.a. the local part, for all you email geeks out there). To do this, we’ll use SparkPost’s inbound functionality, Twilio’s Fax API, and Cloudinary to glue them together. We’ll receive an email to a Twilio function, pull off the attached PDF, save it to Cloudinary, and send it as a fax.

Sign Up and Configure Your SparkPost Account

The first thing you’ll need is a SparkPost account and a domain you want to use to receive mail (a.k.a. an inbound domain). You’ll also need to create an API key with permissions to read and writeinbound domains and relay webhooks

Next, add the SparkPost MX records for your inbound domain. Once you verify that they are set up correctly, run the following cURL to add your inbound domain.

curl -XPOST \
  https://api.sparkpost.com/api/v1/inbound-domains \
  -H "Authorization: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "domain": "YOUR_DOMAIN" }'

Sign Up For Cloudinary

Next, we’ll need a Cloudinary account to store the PDF we’ll fax. If you don’t know, Cloudinary is a powerful solution for storing, manipulating, and delivering all your media. Grab your cloud name, API key, and API secret and put them somewhere safe for later.

Create & Configure Twilio

We’ll use Twilio to consume the incoming emails and send the faxes. To get started, sign up for an account, and buy a phone number that can send and receive faxes.

Twilio’s serverless functions are perfect for this project. This isn’t a stateful application and it doesn’t need to be running all the time. Using one, we can quickly get set up and run our application.

We’ll need the following NPM modules for our function:

Let’s also add in our environment variables for Cloudinary and enable Twilio’s option to pass through our ACCOUNT_SID and AUTH_TOKEN so we can use their client library without worrying about our credentials:

The Code

First things first, let’s write our basic Twilio function and pull in our dependencies:

const cloudinary = require('cloudinary')
const { MailParser } = require('mailparser')
const { toArray } = require('lodash')
exports.handler = function(context, messages, callback) {
  const twilio = context.getTwilioClient()
  cloudinary.config({
    cloud_name: context.CLOUDINARY_NAME,
    api_key: context.CLOUDINARY_KEY,
    api_secret: context.CLOUDINARY_SECRET
  })
}

The messages variable is an object full of the messages SparkPost handed off to us. We’ll need to loop through the messages, pull off the attachment, save it to Cloudinary, and send off the fax.

// after the cloudinary config
const promises = toArray(messages).map((message) => {
    const toNumber = pickPhoneNumber(message)
    return pickPdfAttachment(message)
      .then((attachment) => {
        if (!attachment) { return false }
        return uploadAttachment(attachment)
      })
      .then((mediaUrl) => {
        return sendFax(twilio, toNumber, mediaUrl)
      })
  })
  Promise.all(promises)
    .then(() => callback(null, 'success'))
    .catch((error) => callback(error))

Parsing The Email

You can see an example the payload SparkPost sends in the API documentation. The important parts for us are the rcpt_toand the
content which will contain the raw email. These live inside message.msys.relay_message.

We can pull out the phone number by splitting off the local part from the rcpt_to value – everything before the @.

function pickPhoneNumber(message) {
  return message.msys.relay_message.rcpt_to.split('@')[0]
}

We’ll also need to pull the PDF off of the message. To do this, we’ll parse the RFC 822 value using the mailparser library and return the content of the first PDF attached.

function pickPdfAttachment(message) {
  return new Promise((resolve, reject) => {
    const content = message.msys.relay_message.content
    const isBase64 = content.email_rfc822_is_base64
    const body = isBase64 ? Buffer.from(content.email_rfc822, 'base64') : content.email_rfc822
    const parser = new MailParser({ streamAttachments: true })
    let attachment
    parser.on('data', (data) => {
      if(!attachment &&
          data.type === 'attachment' &&
          data.contentType === 'application/pdf') {
        attachment = data.content
      }
    })
    parser.on('error', reject)
    parser.write(body)
    parser.end(() => resolve(attachment))
  })
}

Saving The Attachment

Assuming we get an attachment, we’ll need to put it in an accessible spot for Twilio to pull it from. Enter Cloudinary. Using their Node library we can easily pipe the PDF and get the publicly accessible URL.

function uploadAttachment(attachment) {
  return new Promise((resolve, reject) => {
    const stream = cloudinary.v2.uploader.upload_stream((error, result) => {
      if (error) {
        reject(error)
      }
      else {
        resolve(result.url)
      }
    })
    attachment.pipe(stream)
  })
}

Sending The Fax

The last step for our code is to send the fax! Twilio makes this really easy. We need three values: the number we are sending to, the number we are sending from, and the media url. We’ll use the number we bought earlier to send for the “from” number. And we should have a phone number from the local part of the email and the media url from Cloudinary!

function sendFax(twilio, toNumber, mediaUrl) {
  return twilio.fax.v1.faxes.create({
      to: toNumber,
      from: YOUR_PHONE_NUMBER,
      mediaUrl: mediaUrl,
    })
    .then((res) => {
      console.log('sent', mediaUrl, 'to', toNumber)
    })
}

Create A Relay Webhook

The last piece of the puzzle it to tie our inbound domain from SparkPost to our Twilio function. Let’s create a relay webhook to pass all mail sent to our inbound domain onto our Twilio function. Copy your function path and pass it into this cURL request to create the relay webhook. Make sure that “Check for valid Twilio signature” is unchecked so that SparkPost can access it!

curl -XPOST \
  https://api.sparkpost.com/api/v1/relay-webhooks \
  -H "Authorization: YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{ "target": "YOUR_TWILIO_PATH", "match": { "domain": "YOUR_INBOUND_DOMAIN", "protocol": "SMTP" }, "name": "Email-to-Fax" }'

Send The Fax!! 🎉

Send an email over to FAX_NUMBER@YOUR_DOMAIN with your fax attached as a PDF and it should go through!

You can set up receiving faxes for a fully working email fax machine with some guidance from our friend Patrick at Twilio! Feel free to reach out if you’ve got any questions and have fun faxing!

-Avi

P.S. Before you launch this to the world, you’ll probably want to validate the phone numbers you’re sending to and add some security to who can send. I’d suggest a token in the email that you verify in the Twilio function.

The post How To Send Faxes Via Email Using SparkPost, Twilio & Cloudinary appeared first on SparkPost.

Announcing HEML: An Open Source Framework for Email

Avi Goldman — Fri, 27 Oct 2017 13:05:21 +0000

Today I am excited to announce the first release of HEML, an open source markup language for crafting clean, responsive emails.

Why

If you’re not familiar with writing HTML emails, it can be a painful process. A few months ago I started to play with some exciting interactive developments on the front end. I found the bottleneck wasn’t sending or testing the email, but simply building the email itself. At our next company hackathon, I took the opportunity to solve this problem, and thus HEML was born.

Each element in HEML renders into email-ready HTML so that you can send without worry. HEML also works to iron out CSS bugs and limitations of different email clients. An excellent example of one such bug is an obscure issue in Lotus Notes where if you use RGB decimal value, the entire style declaration will be ignored. HEML will handle that bug for you.

Our Goals

We wanted HEML to help make email more accessible to developers. The idea is for developers to jump in quickly and build their emails without wrestling with Outlook (or any other email inbox). To do this, we focused on three things.

Native feel

We wanted HEML to look and feel like HTML. As a result, it mirrors HTML as closely as possible and uses plain ol’ CSS for styling.

Forward Thinking

HEML doesn’t limit you from taking advantage of all that HTML and CSS can do. It encourages progressive enhancements. Email doesn’t have to look the same everywhere.

Extendable

HEML lets you create your custom elements, share them, and pull in other elements made by the community.

Using HEML

There are a couple of different ways to use HEML.

Get started quickly using our editor at heml.io/editor.

To use it locally, install it with:

npm install -g heml

Create your HEML email in email.heml:


<heml>
  <head>
    <subject>Email Rox!</subject>
    <style>
      body { background: SkyBlue; }
      h1 { color: DarkViolet; }
    </style>
  </head>
  <body>
    <container>
      <marquee><h1>Hello world </h1></marquee>
    </container>
  </body>
</heml>

and run:

heml develop email.heml

That starts a development server that will auto-reload your browser whenever you make a change.

Once you’re ready to send your email into the wild, run:

heml build email.heml

This generates an email.html file that is ready to be sent.

Give it a spin!

This is our take on a difficult problem. It doesn’t solve every problem presented by email, but it can help you create solutions for your unique email challenges. There has been amazing work done to simplify this challenge by MJML,Foundation for Email, and many others. We hope you find this equally as helpful!

So give it a try! Hopefully, it makes your life easier. If you have any feedback, suggestions, or bugs, let us know.

Happy Coding!

The post Announcing HEML: An Open Source Framework for Email appeared first on SparkPost.

Meet Our New West Coast Developer Advocate

Avi Goldman — Fri, 18 Aug 2017 13:05:54 +0000

Hello everyone! ðŸ‘‹ Avi here. I’ve got exciting news about my role at SparkPost!

TL;DR:

// Detect dark theme var iframe = document.getElementById('tweet-895313651669712900-662'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=895313651669712900&theme=dark" }

Last summer, I joined SparkPost as an intern on the Growth Engineering team. I was lucky enough drop the “intern” part of my title in September of last year, and I’ve gotten to work on some pretty interesting stuff.

Now, one year later (drumroll please) I’m psyched to say that I’m joining the Developer Relations team as the west coast Developer Advocate in San Francisco. ðŸŽ‰ I’ve gotten to work with Mary and Aydrian during my time here and I’m thrilled to join them full time.

I visited SF for the first time after AngelHack Silicon Valley a couple of weeks ago and I’m already a little in love with the city.

// Detect dark theme var iframe = document.getElementById('tweet-892181717372477440-528'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=892181717372477440&theme=dark" }

I’ve got a ton of ideas that I hope to share about email and making it a little more fun. I’ve got some tooling for front-end work that I’m playing with because let’s face it – HTML emails are hard. (If you want to help, let me know ðŸ’Œ)

After that, who knows! I want to work on email testing and validation tools, integrations with some awesome projects, and some fun demos and guides. Right now, I’m toying with the idea of checkers built with interactive email and SparkPost.

I’m going to be traveling to more events now as well (though I’ve managed to go a good number as an engineer) so if you see me, say hi! I absolutely love going to hackathons, so if you have any suggestions there let me know!

In any case, I’m new to the Developer Advocacy side of things, but I’m super excited for this adventure. If you have any tips or tricks for living in SF or traveling, tweet em at me ðŸ˜¬

If you want to talk, you can find me on Twitter, Github, or email â¤, and I’m always up for a cup of coffee.

This post was originally published on sparkpost.com

PHP Frameworks In The Wild: A Closer Look at the PHP Ecosystem

Avi Goldman — Fri, 04 Aug 2017 13:05:35 +0000

SparkPost and PHP Frameworks: Scratching the Surface

PHP is one of the older languages used on the Web, created in the mid-nineties. Some environments are still stuck running PHP 3 while others are running the latest version. There’s been a lot of development around amazing PHP frameworks and tools in the last few years, and most of them come with easy ways to send mail. We recently broke down how we simplified our PHP library, but going with a native solution can still be easier sometimes. Here’s a quick breakdown of how to use SparkPost to send mail with some of the more popular PHP frameworks in the wild.

Plain ol’ PHP

Sometimes you just need to fire off a quick API call. All you need is a little cURL magic to do what you need. Check out this snippet for shooting off SparkPost requests.

<?php 

/**
 * Use this method to access the SparkPost API
 */
function sparkpost($method, $uri, $payload = [], $headers = [])
{
    $defaultHeaders = ['Content-Type: application/json'];

    $curl = curl_init();
    $method = strtoupper($method);

    $finalHeaders = array_merge($defaultHeaders, $headers);

    $url = 'https://api.sparkpost.com:443/api/v1/'.$uri;

    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, $method);

    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

    if ($method !== 'GET') {
        curl_setopt($curl, CURLOPT_POSTFIELDS, json_encode($payload));
    }

    curl_setopt($curl, CURLOPT_HTTPHEADER, $finalHeaders);

    $result = curl_exec($curl);

    curl_close($curl);

    return $result;
}

echo "Sending email...\n";
$email_results = sparkpost('POST', 'transmissions', [
    'content' => [
        'from' => [
            'name' => 'SparkPost Team',
            'email' => 'php@yourdomain.com',
        ],
        'subject' => 'First Mailing From PHP+cURL',
        'text' => 'Congratulations!! You just sent an email with PHP+cURL!',
    ],
    'recipients' => [
        ['address' => 'john.doe@example.com',],
    ],
], ['Authorization: YOUR_API_KEY']);

ðŸ˜ + ðŸŽ¶ = â¤ï¸

Here at SparkPost we created a composer package to simplify using our API in all modern PHP environments. It’s quick to install and provides some “sugar to smooth out some of the more confusing parts of the API. To keep our library as flexible as possible, we use PHP HTTP to let you bring your own request library. To use it we can require guzzlehttp/guzzle, the php-http/guzzle6-adapter, and the sparkpost/sparkpost library. Then we are good to go with the code below.

<?php
require 'vendor/autoload.php';

use SparkPost\SparkPost;
use GuzzleHttp\Client;
use Http\Adapter\Guzzle6\Client as GuzzleAdapter;

$httpClient = new GuzzleAdapter(new Client());
$sparky = new SparkPost($httpClient, ['key'=>'YOUR_API_KEY', 'async' => false]);

$promise = $sparky->transmissions->post([
    'content' => [
        'from' => 'name' => 'SparkPost Team <phplibrary@yourdomain.com>',
        'subject' => 'First Mailing From PHP Library',
        'text' => 'Congratulations!! You just sent an email with the PHP library!',
    ],
    'recipients' => [[ 'address' => 'John Doe <john.doe@example.com>'], ],
]);

World of WordPress

Our very own Raju wrote a SparkPost plugin to use SparkPost as your email provider. It exposes key features like using templates, sending via SMTP or the API, and allows you to hook in at a ton of points to modify the email and settings on the fly. Plus, it’s easy to get started ðŸ˜Ž

PHPMailer

PHPMailer is probably the most popular way to send mail in PHP! It’s got a great API that makes it easy to plug any SMTP provider. Check out this simple example to get started with SparkPost quickly.

<?php

// This example uses the PHPMailer library:
// https://github.com/PHPMailer/PHPMailer

require 'vendor/autoload.php';

$mail = new PHPMailer;

// configure for sparkpost
$mail->isSMTP();
$mail->Host = 'smtp.sparkpostmail.com';
$mail->Port = 587;
$mail->SMTPSecure = 'tls';
$mail->SMTPAuth = true;
$mail->Username = 'SMTP_Injection';
$mail->Password = 'YOUR_API_KEY';

$mail->setFrom('phpmailer@yourdomain.com');
$mail->addAddress('john.doe@example.com');
$mail->Subject = 'First Mailing From PHPMailer';
$mail->Body = 'Congratulations!! You just sent an email from PHPMailer!';

if (!$mail->send()) {
  echo "Message could not be sent\n";
  echo "Mailer Error: " . $mail->ErrorInfo . "\n";
} else {
  echo "Message has been sent\n";
}

Laravel

Laravel is a whole beast unto itself so I’ll just hit the main points. You can follow the official Laravel docs to get set up with the SparkPost mail driver. Once you’ve done that you can generate and send your mailables. Matt Stauffer did a solid write up on using SparkPost with Laravel which is worth checking out.

CodeIgniter

CodeIgniter provides a simple API to send mail. You can add the SMTP configuration in code or through config/email.php. Check out the example below to fire off a quick email.

<?php

// inside a controller

$config = [
  'protocol' => 'smtp',
  'smtp_host' => 'smtp.sparkpostmail.com',
  'smtp_user' => 'SMTP_Injection',
  'smtp_pass' => 'YOUR_API_KEY',
  'smtp_crypto' => 'tls',
  'smtp_port' => '587',
  'newline' => "\r\n",
];

$this->load->library('email');
$this->email->initialize($config);

$this->email->from('codeigniter@yourdomain.com', 'Your Name');
$this->email->to('john.doe@example.com');
$this->email->subject('Testing SparkPost SMTP from CodeIgniter');
$this->email->message('Congratulations!! You just sent an email from CodeIgniter!');

$this->email->send();

Be sure to comment below or tweet us if you want us to go into more depth on any particular tool or if we missed your favorite framework ðŸ‘‹

This post was originally published on sparkpost.com

How And Why We Simplified The SparkPost PHP Client Library

Avi Goldman — Mon, 31 Jul 2017 21:16:22 +0000

You might remember that last year we released the 2.0 version of the SparkPost PHP client library. We’ve talked about the evolution of our approach across all our client libraries, but I wanted to dive deeper into the PHP changes.

Why

After 18 months of having our client libraries in the wild we’ve learned some important lessons. The biggest one was that abstraction is hard when you’re wrapping a living, growing API. With 16 API endpoints and more coming we were limiting our users and ourselves as our client libraries fell behind our API additions. We changed our mentality to focus on providing a thin layer of abstraction with some syntactic “sugar” to simplify the more complex areas of our API.

Using the PHP client library

In the new version we decided to let a single method drive all SparkPost requests. This lets you hit any API endpoint quickly and with a ton of flexibility.

<?php
// in 1.x
$sparky->setupUnwrapped('metrics');

$results = $sparky->metrics->get('deliverability', [
  'from'=>'2016-03-07T17:00',
  'to'=>'2016-03-08T17:30',
  'metrics'=>'count_targeted,count_injected,count_rejected',
  'timezone'=>'America/New_York'
]);


// in 2.x
$promise = $sparky->request('GET', 'metrics/deliverability', [
  'from'=>'2016-03-07T17:00',
  'to'=>'2016-03-08T17:30',
  'metrics'=>'count_targeted,count_injected,count_rejected',
  'timezone'=>'America/New_York'
]);

In the 1.x version we did a good amount of property mapping. For example, to enable inline css you would set inlineCss => true when you called $sparky->transmission->send. Now in the 2.x release, we simply pass along the data you provide, so to inline css you would set 'options' => [ 'inline_css' => true ]. While this might look more complex at first it actually makes it easier to use since you can now depend on our main API docs and quickly translate JSON into an associative array.

We also moved off of the deprecated egeloen/ivory-http-adapter to use php-http/httplug. This means you can continue to bring your own HTTP request library and adds the new ability to use promises in PHP.

How To Use It

We have a bunch of examples on how to use our new 2.x library in the github repo. Here’s a quick walk through on how to get going.

Installing & setup

First we need to pull the library from composer. If you don’t have that setup, check out their getting started page. (If you’re using a PHP version earlier than 5.6 or you can’t use composer you can still use our API with some simple cURL magic!)

We are going to use guzzle as our request library. You can use any of the httplug-supported clients.

composer require guzzlehttp/guzzle
composer require php-http/guzzle6-adapter
composer require sparkpost/sparkpost

Now that we have our dependencies we can set up the library. To run our code synchronously we’ll set async to false.

<?php
require 'vendor/autoload.php';

use SparkPost\SparkPost;
use GuzzleHttp\Client;
use Http\Adapter\Guzzle6\Client as GuzzleAdapter;

$httpClient = new GuzzleAdapter(new Client());
$sparky = new SparkPost($httpClient, ['key'=>'YOUR_API_KEY', 'async' => 
false]);

Building the transmission

Looking at the following transmission, we can see it’s almost identical to a regular SparkPost transmission. The difference is that we added a cc and bcc. This is that “sugar” I mentioned. The library will go through and format your cc and bcc recipients to fit the SparkPost API’s requirements.

<?php
$transmissionData = [
    'content' => [
        'from' => [
            'name' => 'SparkPost Team',
            'email' => 'from@sparkpostbox.com',
        ],
        'subject' => 'Mailing via PHP library 2.x',
        'text' => 'Woo! We did the thing!',
    ],
    'recipients' => [
        [
            'address' => [
                'name' => 'YOUR_NAME',
                'email' => 'YOUR_EMAIL',
            ],
        ],
    ],
    'cc' => [
        [ 'address' => [ 'name' => 'ANOTHER_NAME', 'email' => 'ANOTHER_EMAIL' ] ]
    ],
    'bcc' => [
        [ 'address' => [ 'name' => 'AND_ANOTHER_NAME', 'email' => 'AND_ANOTHER_EMAIL' ] ]
    ],
]

<?php
try {
    $response = $sparky->transmissions->post($transmissionData);
    echo $response->getStatusCode()."\n";
    print_r($response->getBody())."\n";
}
catch (\Exception $e) {
    echo $e->getCode()."\n";
    echo $e->getMessage()."\n";
}

And there you go! Your email is off!

To dig into the library, checkout the repo on GitHub, or come talk to our team in Slack. And if you find a bug (ðŸ˜±) submit an issue or a PR. Check back soon for an upcoming post on using SparkPost with some popular PHP frameworks.

This post was originally published on sparkpost.com

Using Slack Emojis Almost Everywhere

Avi Goldman — Fri, 30 Jun 2017 13:35:17 +0000

Anyone in the modern workplace is probably familiar with tools like Slack, a team-oriented chat platform for getting things done. One of my favorite features is the emoji shortcut, which allows you to simply type :emoji-name: to insert the corresponding emoji. It makes it really easy to add emotion without hunting for the particular emoji you’re thinking of. After living in Slack for hours every day I found myself trying this shortcut in other apps, which disappointingly didn’t work. I’ve kept an ear to the ground for a solution to this very first-world problem… and finally found one!

But how? ðŸ¤”

At our last company holiday party, Aydrian mentioned that he had recently added an auto-correct match to his iPhone which replaced shrug with Â¯\_(ãƒ„)_/Â¯. I loved the idea, so when I got home, I added all my favorite Slack emoji shortcuts to my Mac auto-correct.

To do this on a Mac, go to System Preferences > Keyboard > Text and then add emoji shortcuts. For an iPhone its the same process, found in Settings > General > Keyboard > Text Replacement. It’s that easy! Here is a table of my most used emojis.

shortcut	emoji
:_1:	ðŸ‘Ž
👍	ðŸ‘
😊	ðŸ˜Š
:cry_:_	ðŸ˜¢
:eyeroll:	ðŸ™„
:grimace:	ðŸ˜¬
😯	ðŸ˜¯
😂	ðŸ˜‚
💋	ðŸ˜˜
😷	ðŸ˜·
:money:	ðŸ¤‘
🐒	ðŸ™ˆ
:nerd:	ðŸ¤“
:party:	ðŸŽ‰
:peace:	âœŒï¸
:plane_down:	ðŸ›¬
:plane_up:	ðŸ›«
:plane:	âœˆï¸
💩	ðŸ’©
🤷	`Â¯\_(ãƒ„)_/Â¯`
:sick:	ðŸ˜·
:sleep:	ðŸ˜´
🤔	ðŸ¤”
👋	ðŸ‘‹

But does it work â‰ï¸

I’m pretty happy with how it works. Check it out in action. ðŸŽ‰

Hopefully this trick will help you maintain your emoji skills everywhere. Sometimes you’ll want to want to use an emoji you haven’t added a shortcut for though ðŸ˜Ÿ You can keep your emoji-ing in high gear with the keyboard shortcut ctrl + cmd + space ðŸŽ‰

More love for emojis â¤ï¸

Emojis in your code ðŸ–¥

While it might not be the best idea, it is possible to use emoji in your code and comments. More practically, if you’re like me and prefer writing in your code editor, being able to add emojis easily is a nice feature (I’m actually using it to write this blogpost – gettin’ meta). There are a ton of plugins that help with that. Here are a few that I’ve heard good things about:

Emojis as your code ðŸ˜¯

On a slightly more whimsical front, there is an open source project named Emojicode which is an entirely emoji-based language. You should definitely give it a try.

Be sure to comment or tweet us your favorite hacks for slack emojis. I’m always on the lookout for new tricks!

p.s. At SparkPost we love all things Slack – check out Cole’s posts if you’re interested:

The post Using Slack Emojis Almost Everywhere appeared first on SparkPost.

Updated Support Docs: A Better Way To Find The Resources You Need

Avi Goldman — Wed, 14 Jun 2017 16:40:52 +0000

Supporting Support

Maybe you’re new to SparkPost and you want a guide to get started. Or maybe you’re a long time pro and you want to test your production list with a sink server. For these things and everything in between you’ll find the answer in our support docs.

Sounds pretty standard for most companies, right? Unfortunately we’d gotten a lot of feedback from our users that our support website was difficult to use. From their perspective, the search didn’t always return the best results, the navigation could be confusing at times, the content styling was inconsistent, and the design hid information cues about the the page below the fold. We were using Desk.com behind the scenes to build out the site, which was a fine solution, but didn’t allow people outside of our support team, including our fine community members, to improve our documentation.

Our new setup allows our users to not only find what they need quickly, but allows them to submit changes or even add new articles if they’re so inclined.

What Changed?

The tl;dr is we moved the support docs into GitHub, open sourced it, shoved the articles into Algolia for awesome search, and wrote a pipeline right into our sparkpost.com WordPress website. Whew! We also redesigned the landing page to help call out resources for getting started, migrating from other providers, and getting help. Let’s roll up our sleeves and and dig into some of the changes that we made.

Into the weeds

Prison break: hacker style

The first step was to to get our articles out of Desk.com. They have an API, so with a little work we wrote a script to export the articles from desk and convert them from HTML to Markdown. This was relatively easy, albeit tedious -- since the Markdown converter had some trouble with the messy HTML there was a bit of manual cleanup.

Each category of articles was stored in a folder, which had an index.md file to store any metadata. Within each category folder was a media folder for any related images.

articles/
├── category_name/
│   ├── media/
│   │    └──my_article/
│   │       └──some_picture.png
│   ├── index.md
│   ├── my_article.md
│   └── another_article.md

WordPressing

Next up was pushing the articles into WordPress. To start, we first needed to set up a custom post type and taxonomy in WordPress for the support articles and categories. We used a library written by our very own Jason Rhodes to simplify the management of our custom post types. With a couple of custom templates, we were good to go on this front.

<?php
// Support Article CPT
new CustomObject('support_article', array(
  'singular_name' => 'Support Article',
  'plural_name' => 'Support Articles',
  'description' => 'Support Articles',
  'supports' => array('title', 'editor', 'author', 'excerpt', 'custom-fields', 'revisions'),
  'public' => true,
  'has_archive' => false,
  'show_ui' => false,
  'taxonomies' => array('support_category'),
  'rewrite' => array(
    'slug' => 'docs/%support_category%',
    'with_front' => false,
  ),
));

// Support Category CT
register_taxonomy('support_category', 'support_article', array(
  'labels' => $support_category_labels,
  'rewrite' => array(
    'slug' => 'docs',
    'with_front' => false,
    'hierarchical' => true,
  ),
));

With regard to search, we decided to use Algolia which has worked really well for us with our API documentation. They built a really great WordPress plugin that handles indexing, multiple environments, and the search that you see live. Needless to say, we’re big fans.

Laying the pipeline

This final piece was the most complicated. We needed to push any changes to the categories, articles, and media in a way that worked across our local, staging, and production environments.

To build out this we used:

Bash + WP CLI, a super useful tool for interacting with WordPress from the command line.
Some JS for converting the Markdown to HTML.
Travis CI for automated build and deployment

We wrote a wrapper around the WP CLI to handle the environment variables that we stored in Travis. During each deploy we first updated the categories, followed by each article. The categories are fairly straight forward: find the changed index.md files, and update the corresponding categories in WordPress.

Handling the articles is where it gets interesting. There are a bunch of states to account for. You could replace and move an image in an article, move the article to a different category, or even delete the entire article and rerun the deploy. We took the safest route of rebuilding the entire world around the article on every update, including the metadata, images, and actual content.

Don’t let this fool you -- while it sounds relatively straightforward, each of the above steps could be a whole blog post on its own. Maybe I’ll dig into that someday, but for now, feel free to dig around the deployment scripts and reach out if you have any questions. And if you find a typo in our docs or want to write an article about using SparkPost with your favorite email client/tool/language, simply submit a PR on the docs repo and we’ll take a look!

This post was originally posted on the SparkPost blog.

DEV Community: Avi Goldman

JavaScript is hard: here are some of my go-to packages

Table of contents

Isomorphic utilities

Servers

Databases

Frontend

Scraping

Email

Email address validation

String / HTML / CSS manipulation

Open a new tab when your browser extension is installed

manifest.json

background.js

Try it out

Give Glitch superpowers with this browser extension 🎏💖

All about Glitch

Why I made this

Give it a try

How To Send Faxes Via Email Using SparkPost, Twilio & Cloudinary

No Fax Machine? No Problem! SparkPost, Twilio, and Cloudinary Are Here To Save The Day!

Sign Up and Configure Your SparkPost Account

Sign Up For Cloudinary

Create & Configure Twilio

The Code

Parsing The Email

Saving The Attachment

Sending The Fax

Create A Relay Webhook

Send The Fax!! 🎉

Announcing HEML: An Open Source Framework for Email

Why

Our Goals

Using HEML

Meet Our New West Coast Developer Advocate

TL;DR:

PHP Frameworks In The Wild: A Closer Look at the PHP Ecosystem

SparkPost and PHP Frameworks: Scratching the Surface

Plain ol’ PHP

ðŸ˜ + ðŸŽ¶ = â¤ï¸

World of WordPress

PHPMailer

Laravel

CodeIgniter

How And Why We Simplified The SparkPost PHP Client Library

Why

Using the PHP client library

How To Use It

Installing & setup

Building the transmission

Using Slack Emojis Almost Everywhere

But how? ðŸ¤”

But does it work â‰ï¸

More love for emojis â¤ï¸

Emojis in your code ðŸ–¥

Emojis as your code ðŸ˜¯

Updated Support Docs: A Better Way To Find The Resources You Need

Supporting Support

What Changed?

Into the weeds

Prison break: hacker style

WordPressing

Laying the pipeline

ðŸ˜ + ðŸŽ¶ = â¤ï¸

But does it work â‰ï¸

More love for emojis â¤ï¸