DEV Community: Abe Dolinger

DIY VS Code Extension 2: Publish

Abe Dolinger — Mon, 12 Oct 2020 03:24:59 +0000

In the last piece, we walked through developing your first VS Code extension. Congrats! Now let's put it on the Marketplace.

A lot of this is covered in Microsoft's guide - some of which is reproduced here. I made this because I found some steps a little confusing.

Publishing

Get An Azure Devops Account

In order to manage your extension on the Marketplace, you need an account with Azure Devops. You can sign up here.

Create a Publisher

(Microsoft's guide recommends doing this on the command line - this is deprecated. Do it as below.)

Head to the Marketplace Management console to create a publisher. You'll be asked to enter some info, like the publisher name and ID.

The publisher ID is what goes into the command string you made in the last step. Now you can go back and change those, if they are different. (See this section in the last post for details. Again, change it everywhere, or nothing will work.)

Get the CLI tool

Run npm i -g vsce (if you're using NPM). This installs vsce, the command-line tool we will use to publish the extension.

Get a PAT

You'll need a Personal Access Token (PAT). Head to your DevOps dashboard, which will be here:

https://dev.azure.com/your-account-name/

Follow the instructions in the official docs - there are nice screenshots and a thorough walkthrough.

Remember to extend the life of the token and add the Manage Marketplace scope.

Copy the token when you see it - if you go back without doing so, you'll lose it and have to start this step over.

Log In As Your New Publisher

Run the following on the command line:

vsce login <publisherId>

Use the publisher ID you created earlier. The tool will ask for your PAT, which you can paste in here.

Fill Out Your package.json

Open up your package.json. Fill out the following fields.

name: the URL slug in the marketplace (format accordingly).

displayName: the marketplace title of the extension (what you want people to search for).

description: the text that will appear underneath your displayName in a search. (The shorter the better.)

publisher: the publisher ID you created above.

repository: the URL of your repo. It's formatted like this:

  "repository": {
    "type" : "git",
    "url" : "https://github.com/256hz/SwapTernary"
  }

To give your command a default hotkey, you can add contributes.keybindings. My contributes section is below for reference.

// package.json
  ...
  "contributes": {
    "commands": [
      {
        "command": "256hz.swapTernary",
        "title": "Swap Ternary"
      }
    ],
    "keybindings": [
      {
        "command": "256hz.swapTernary",
        "key": "shift+alt+s"
      }
    ]
  },

Make A Nice Readme

Edit README.md in the root of your project - this is what will be shown when you browse the extension in the marketplace. They provide a good template. It's always nice to have some demo gifs here, usage instructions, and any known issues.

You can also add a LICENSE in the root to contain your legal license, and a CHANGELOG.md for changes.

Publish!

From the command line, at the root of your extension, run

vsce publish 0.1.0

You can use whatever version you like - the script will automatically update your package.json with the right number. It does have to be formatted according to the semVer rules.

From here on out, you can forget about the version number if you like. You can run vsce publish [major/minor/patch] and it will automatically bump it up for you.

You should get an email shortly (to the address you added when you created your publisher above). It should say that the publish was successful and you can now find your extension on the marketplace.

Give it a shot - open up the Marketplace from VS Code (shift + command + x). Search for the title you used in your package.json. You (and everybody else) can now use your extension! Time for a PINEAPPLE PARTY.

Congratulations, and welcome to the world of extension development. Have fun!

If you have any questions or get stuck please feel free to ask below.

Cover photo: Code by Clement H on Unsplash

DIY VS Code Extension 1: Development

Abe Dolinger — Mon, 12 Oct 2020 03:20:48 +0000

Have you ever wished for a little extra feature in VS Code, and nothing turns up in a search? Fear not. It's time to DIY.

A few days ago I realized I had once again swapped my true/false cases in a ternary expression. It's always a little annoying to reformat it, switch the punctuation, redo whitespace, etc. So I made SwapTernary!

If you want to try it out, it's here - or search the VS Code Extension Marketplace for SwapTernary. You can also check out the repo if you just want to see the code.

By my calculations, if I save only 11,000 developers just five seconds each, it will be worth the time investment! Demos below.

Development

Getting Started

Fortunately for us, the VS Code team has made bootstrapping a project a pretty quick process. One thing I will say for Microsoft is that their push towards better documentation really shines in some areas. This is one of them.

Please Stop Working With ICE

A much larger thing I will say against Microsoft - stop working with ICE.

Getting Started, cont'd

Their doc Your First Extension was hugely helpful, and I recommend following it closely. I'll cover the essentials here.

Bootstrap Your Extension

The team have made an NPM package using yeoman that generates a Hello World extension for you, complete with tests. You can install it with the following command in Terminal (assuming you use NPM):

npm i -g yo generator-code

When that's all set, run yo code from the folder you'd like to have your code in. It offers a nice selection of starter templates:

❯ New Extension (TypeScript) 
  New Extension (JavaScript) 
  New Color Theme 
  New Language Support 
  New Code Snippets 
  New Keymap 
  New Extension Pack 
  New Language Pack (Localization)

I chose the first option. You'll also be able to enter a name, description, initialize a repo, etc. (Hit Enter to go with defaults - you can always change stuff later.)

Once that finishes installing, open up src/extension.ts in Code. Hit F5 to start the debugger. A new Code window with your extension installed should appear.

Then you can enter the Command Palette (Mac: ⇧⌘P, Windows: ^⇧P) and type Hello World, or whatever you named it in the last step. You should be able to hit Enter and see a friendly popup.

Let's Write Some Code

To swap a ternary, I knew I would need to edit selected text. The team have graciously compiled a repo with ~50 sample extensions for us to work from. How about document-editing-sample? That seems promising. For me, it's perfect - an extension that reverses the selected text. The whole thing is below for reference.

// extension.ts
export function activate(context: vscode.ExtensionContext) {
  const disposable = vscode.commands.registerCommand('extension.reverseWord', function () {
    // Get the active text editor
    const editor = vscode.window.activeTextEditor;

    if (editor) {
      const { document, selection } = editor;

      // Get the word within the selection
      const word = document.getText(selection);
      const reversed = word.split('').reverse().join('');
      editor.edit(editBuilder => {
        editBuilder.replace(selection, reversed);
      });
    }
  });

  context.subscriptions.push(disposable);
}

There's a lot of useful info here.

Your extension must be wrapped in a function called activate, which takes the editor context as an argument.
Your code must be registered by the registerCommand command and stored as a variable.
That variable must be pushed to the context.subscriptions array, which where VS Code manages active extensions.
You already have all this boilerplate in your new extension.
registerCommand is where we come in. It takes two arguments: a string and a function. Let's talk about the string first.

The Command String

The command string takes the format of <publisher>.<commandName>. Mine is 256hz.swapTernary.

The publisher is you. If you don't have an Azure DevOps account yet, don't change it now; we'll cover creating a publisher in the next post.

Enter a commandName. Use simple, letter-only strings. Now, add the whole command string into your package.json twice: under activationEvents and contributes.commands.

// package.json
...
  "activationEvents": [
    "onCommand:256hz.swapTernary"
  ],
...
  "contributes": {
    "commands": [
      {
        "command": "256hz.swapTernary",
        "title": "Swap Ternary"
      }
    ]
  },

Make sure the command string is the same in all three places or nothing will work. This is especially true if you are like me and change the name of your command 50 times.

The title field above is the friendly name that will show up in the Command Palette.

(You can also add a keybinding here. See my package.json for an example.)

Your Custom Function

Now, the fun part. Er, the function. This is the entry point for your command.

    const editor = vscode.window.activeTextEditor;

This gives us access to the active editor environment.

    if (editor) {
      const { document, selection } = editor;

Our editor context has a document and a selection. Cool. These are not raw text, by the way - they are instances of the Document and Selection classes. Each has special methods and properties.

      const word = document.getText(selection);

This is how we get our raw text. The Selection contains pointers to its beginning & end positions in the Document, and the document takes these and gives you what's between them.

You can perform whatever logic you want on the text now, and all the work in my extension takes place at this step. In the example, they reverse the text.

      const reversed = word.split('').reverse().join('');

Then, we use the active editor's edit method to replace what we have. edit takes a callback and passes in something called the editBuilder.

      editor.edit(editBuilder => {
        editBuilder.replace(selection, reversed);
      });

editBuilder.replace takes two arguments: a Selection, and our new, raw text. selection is already good to go - we destructured it out of the editor above. So all you have to do now is process your text and pass it in as the second argument.

I needed to do a bunch of string manipulation for my extension:

split the statement up into the condition, true/false clauses, and formatting.
keep track of whether you're in the middle of a string, so the ?: characters won't be wrongly parsed as syntax.
keep track of nested ternaries, so we only swap the outermost expression.
show error modals if the expression can't parse properly.

Happy to answer questions about those if you're interested, or you can check out the repo.

That's all for development! Now, let's publish the extension. On to part 2.

Cover photo: Code by Clement H on Unsplash

My Interviews After Bootcamp: Summaries

Abe Dolinger — Mon, 30 Sep 2019 17:04:03 +0000

As a followup to my last piece, I want to give a short (anonymized) picture of what my interviews were like while searching for my first position in the field. I sent in roughly 300 applications in 3 months. What follows are the experiences I had with companies where I got at least a phone screen (15, or 0.5%).

I hope this provides a window into some of the interview processes / questions you'll encounter, and makes you more comfortable with the idea of failure in the job search. I never totally got the hang of it - I'd still let my ego get bruised with every rejection. But it did get easier.

Every one of these - except the two companies I met at my school's career fair - was from an online application or interaction. I heard from all over that the quickest way in was through connections at meetups & events. Meetups kill my family time, so after a couple of unsuccessful startup-themed events, I retreated back to my internet comfort zone. I don't necessarily endorse this, but it did eventually work for me.

Again, this happened over three months. The first month was mostly empty, and I started to pick up steam around the end of the second month. Most of these happened in the final five weeks of my job search.

The format is:

Company industry/specialty

broad # of employees, application method
Interview type: information

Education space/video focus

50 employees, applied on LinkedIn
HR Interview (Phone): Why ********; front or backend; do you know or want to know C#
Outcome: did not advance.

Social/e-commerce

1000 employees, applied on LinkedIn
HR Interview (phone) - why ********, career trajectory, what's something at work you're proud of
Tech Interview 1 (video): Longest substring with k unique characters
Tech interview 2 (video): Reverse letter order in a string; refactor that method to be recursive; reverse word order in a string; build a hash class from the ground up.
Outcome: did not advance.

Autonomous driving

500 employees, applied on LinkedIn
Tech Interview 1 (phone): React: state management, props, data pathways; Redux state management; CSS box model; CSS frameworks (BEM, Semantic, light vs heavyweight); stackable columns.
Outcome: did not advance.

Internal chat

100 employees, applied on LinkedIn
HR Interview (phone): why ********, career trajectory, have you ever contributed to process/best practices at work
Tech interview 1 (Zoom): React: lifecycle methods, performance improvements, performant component design; role of Redux in app; containers vs. VMs; Javascript: is JS single-threaded; sync vs async; call stack vs. event stack; front or backend.
Outcome: Did not advance.

B2B candidate services

50 employees, applied on LinkedIn
Dev Interview (video): why ********, career trajectory, work style
Tech interview 1 (video): JS trivia (var vs let), innerHTML === bad.
Q1 - Given a .csv of # of clicks and a domain, give a total of clicks for each level of the domain
I.e. input: [‘90, sports.yahoo.com’, ‘10, news.yahoo.com’]
Output: { com: 100, yahoo.com: 100, sports.yahoo.com: 90, news.yahoo.com: 10 }
Q2 - Given two arrays of strings, return the longest matching streak.
I.e. input: [‘/home’, ‘/store’, ‘/blog’, ‘/contact’], [‘/store’, ‘/blog’, ‘/home’, ‘/contact’]
Output: [‘/store’, ‘/blog’]
Onsite: 6 interviews with 9 people. Behavioral, system design, product design, programming. Algorithm question: Common ancestor in two tree nodes. Given an array of objects that represent a binary tree (each object in the format {parent: child}), construct the tree and find out if two given nodes share an ancestor.
Outcome: Did not advance.
Feedback: need more production experience.

SEM / UX agency

20 employees, matched at school Job Fair
HR Interview (in-person): Front or backend; where do you see yourself going; app demo
Tech interview 1 (phone): Given a Linux path and the . and .. operators, return a final path. Input: ”/etc/usr/../temp/./../../”, output: ”/”
Onsite: 3 interviews with frontend, backend, & lead developer. First 2 mostly behavioral, with some design questions: how would you slice up this layout, how would you solve this design problem. 3rd: high-level design of a ‘subscription purchase’ feature on an e-commerce platform, frontend & backend; app demo & minor code review.
Outcome: No offer.

Finance industry

500 employees, matched at school Job Fair
Tech interview 1 (in-person): App demo; front/backend; where do you see yourself going
Code challenge (take-home): Make a command-line executable that takes a .csv file and an optional date. .csv contains investor transactions/shares purchased. Output JSON of total cash raised, total shares, and ownership of each investor.
HR Interview: why ********, where do you see yourself going
Outcome: did not advance.
Feedback: code challenge doesn't include tests, doesn't validate # of arguments, created own date/error handling instead of using Ruby builtins.

Game/social app

100 employees, applied on LinkedIn
HR Interview (phone) - why ********, career trajectory. I asked if the position was good for a junior developer, interviewer did not know.
Outcome: Did not advance.

Web services

500,000 employees, applied on LinkedIn
Tech interview 1 (phone): Behavioral: tell about a time the status quo wasn’t good enough and what you did to change it. Internet: What happens when you type an address in the browser bar. What is SSL and how does it work. HTML/CSS: Create a mockup of an accordion: box, header, content. Tag styles vs class styles, when would you use one vs the other. JS question: given two arrays of objects with ID keys, combine the matching IDs and return a merged array.
Outcome: Did not advance.

Blockchain solutions

1000 employees, applied on Jumpstart
HR Interview (phone): What is your favorite application of blockchain
Video Interview: I missed it. Messed up the time zone.
Outcome: Did not advance (shockingly).

Backend services

500 employees, applied on LinkedIn
HR Interview (phone): Ruby on Rails experience/projects, deployment.
Onsite Interview: Rails: how to break up functions into folders. Deployment. ActiveRecord under the hood. React Native: Navigation props. Platform-specific development. Feedback: they wanted someone with more experience, but would contact in ‘a couple of weeks’ when hiring for a junior position.
Outcome: Withdrew application on offer

Frontend agency

20 employees, applied on AngelList
Behavioral Interview (video): Why ********, where do you see yourself, favorite projects, do you consider yourself an entrepreneur
Code challenge: Make and host a color browser to provided spec. Hew to layout; color cards, detail view, results pagination; color filtering/searching optional. Made Rails API backend & React frontend, hosted on Heroku/Netlify respectively. Feedback: good overall, though lacked proper routing.
Outcome: Withdrew application on offer

IoT solutions

50 employees, recruiter initiated
Tech screen (video): Chat with lead developer, React Native, Java, full stack vs frontend, TypeScript
Code Challenge: Use two in-house tools and Node.js to subscribe to a remote feed of numbers and regularly provide an averaged summary.
Feedback: Got ‘pretty far’. Maybe jumped in too quickly without full grasp of details.
Onsite: React Native: Given an array of animal objects with images, descriptions, & endangered status, show a scrolling list of cards built to a visual spec. Behavioral: client relationships, creative process, managing disagreements, learning process.
Outcome: Offer accepted.

App agency

20 employees, recruiter initiated
Phone screen (recruiter): Why an agency, experience, tools used
Phone screen (CEO): Culture fit, remote work, technology enjoyed. Feedback: worried that I’m green, but willing to do a tech interview.
Outcome: Withdrew application on offer.

Backend services

100 employees, recruiter initiated
Phone screen (Tech Prog Mgr): There was none, just wanted to schedule an interview.
Onsite: Algos/data structures?
Outcome: Withdrew application on offer

So, You've Finished Bootcamp. Are You Employable?

Abe Dolinger — Wed, 18 Sep 2019 22:13:41 +0000

So there I was - sweaty, bedraggled, wild-eyed, and proud; after 15 weeks of intensive web development training, I'd done it. I'd proved - to myself, and maybe even others - that I understood the fundamentals of programming, and gained intermediate fluency in two languages. I'd deployed apps in two major frameworks, and gotten the hang of their DSLs. I had over a thousand commits on Github. I was employable, and would have a job in no time!

Countless rejections later, I can tell you that in a competitive market this is simply not the case. However, in the last few weeks, I've been getting much more consistent interest. I've advanced to second and third rounds with multiple companies, and today I accepted an offer from my first choice. As far as I can tell, there are a few reasons for this, and I'd like to break them down for you, the new graduate. (Also, I never would have gotten this far without the bootcamp, so this is in no way intended to be a substitute to the program. Think of these as strategies to differentiate yourself from other grads who won't put in this effort.)

Specialize . . .

If there's any language or framework or tool or anything you've touched so far that was more interesting to you, dive into that. I chose frontend, and specifically React/React Native, since I had the most fun with those. People love to see that you can learn something really well - you can teach skills, but not the drive to really go deep. Keep everything on your resume and skill list, but lead with your chosen specialty. I was hired for a frontend role, but had interest from backend roles, and one company said it was because of the aptitude I showed for React.

. . . But Also, Try a Different Stack

I learned Rails & React in school. I tried MEAN & MERN afterwards to make sure I could apply my training to new technologies. And although I now harbor a sort of mild distaste for Angular, hello world-ing in these new technologies was not too hard, and it looks great on my resume. It also reinforces the idea that you learn new things fast, and won't need 9 months of onboarding.

Test Ya Damn Code (and Write Testable Code)

Twice I was asked to comment on the lack of testing in my Github repos, and I didn't advance in either interview. It was also the main reason I didn't pass my first take-home code challenge. Coincidence? I think not.

In school, all of our labs were built around passing automated tests in Rspec or Jest. Exposure to test-driven development? Check! What they didn't teach us was to write the tests ourselves. Many of us left feeling like it was a blind spot, and a scary one to tackle alone. You know what? For intro projects, making some unit tests is dead easy.

Testing is ubiquitous in the real world, and even if companies aren't testing 50% of their codebase, they want you to feel like they should. Fortunately, when something is required of a lot of developers, a few will do the heavy lifting so it's easy for the rest of us. Modern testing tools are designed to require very little effort to learn.

Learning to write easily testable code is a bit harder. Go back to one of your bootcamp projects and write exhaustive unit tests for each feature. Some things will be easy - do your links navigate to the right URLs? But you will soon find parts of your code that are impossible to test in isolation. And that, dear reader, is Bad. Learn more from this excellent blog.

Data Structures and Algorithms (DSAs)

It's very likely you'll be asked to solve an algorithm question - a sort of riddle - in your job search. There's a lot of chatter by devs at all levels that this part of the interview process is broken. And really, you won't be solving tiny riddles every day. When I went through the Flatiron School, we barely scratched the surface; however, they are part of a standard CS degree, and knowing DSAs is often cited as the reason CS students are preferred over bootcampers.

From my perspective, learning DSAs is invaluable - and being able to select the proper one under pressure does prove that knowledge. It's part of every dev's job not just to make solutions, but to make efficient solutions, and to make efficient solutions efficiently. If you can break any problem into the most effective DSAs, quickly, you'll be able to focus on larger design patterns or solve inefficiencies in the code of other, inferior developers. You will be a more effective programmer.

That said, for junior positions, the questions I've gotten have not been too bad. I worked the Easy interview track on Leetcode until I was comfortable that I understood each one, and that covered 90% of the questions I've seen. The others were from jobs that were probably above junior level.

See my eye-crossingly intelligent friend Rylan Bauermeister's pieces on: Binary Trees, Linked Lists. Also learn to implement a hash class from scratch. This came up multiple times.

Get Good At Vanilla

I'll use the example of CSS. While in school, I mainly used frameworks like Bootstrap and Semantic to style my projects, because they were quick to deploy and looked fine. I was caught out on this in an interview early on when I listed stackable columns as a benefit of a heavyweight framework like Semantic. This revealed I'd never dove into Flexbox at all, and was ignorant of modern CSS capabilities.

So, I took a random card-based page from an e-commerce site, and recreated it in React and vanilla CSS. It took me about three days. Did you know you can use variables in vanilla CSS? How about show an even drop-shadow border on all four sides of a card with one property? Use calc to make your sizing dynamic (or anything dynamic, really)? Well, I do now. And knowing that I can do it without the help, or load, of a framework has made me more confident as a frontend developer.

Drink From The Source

Take a framework you've gotten comfortable with, and think of a feature that was tricky for you to get working properly. (It's not super important which one.) Now open up its Github repo and look at what it's actually doing. Confirm it by passing it different inputs. Tinker! The source code of a widely-used open source framework is pretty likely to have been formatted for readability. Maybe the feature isn't perfectly documented - contribute to the README! I promise this will make you more confident. I had a PR approved on one of the Google Cloud docs and it did wonders for my self-esteem. (Super nice folks, btw!)

By the same token, learning about your language's compiler will also make you better. Example: creating identical object models in JS can make searching through those objects 7x faster.

At our level, you shouldn't be expected to know framework source code or compilers from back to front. You should show that you know they're there, and are comfortable thinking in their terms.

The Dreaded Behavioral Questions

There's no way around these. You're going to have to answer a variation of 'So, tell me about a time you disagreed with someone at work' almost every time. Look up the STAR or CARL techniques for answering these questions, write outlines, and practice them. Rewrite and practice until you can answer concisely and in a way that indicates you (a) are human, (b) can communicate about emotionally charged situations in a productive way, (c) won't be a horrific asshole to work with, and (d) care about getting shit done that benefits the people around you. That's all they want to know. That's pretty reasonable, right? I mean, that's who I would want to work with.

Your Cover Letter & Resume

When sending in a cold application, write a cover letter that's about 3 sentences long. Mention something from the job post, and why you're drawn to it. As a the geniuses at The Onion once proclaimed, "Student Thanks Professor Who Taught Him To Pretend To Give A Shit." Don't cyberstalk every employee or memorize every patch note. They just need to know that you're comfortable making them part of your identity.

In a short paragraph on your resume, sing your own praises - not just about your coding abilities (which count!), but all the skills you've gleaned from your other life experience. In professional language, of course. Anything that can be construed as project management, communication between groups, creative & technical problem solving - these are all instrumental to your new career. Emphasize these points under past jobs as well.

Find the nodes in your life that make you look like this was always your ultimate goal and you are going to excel at it. They are there, I promise. Graduating from a bootcamp proves you can absorb a lot of information fast! That can get a recruiter over the hump if you're missing experience in part of the job's tech stack. I know a developer who did their whole bootcamp in Python, and got hired for a Ruby job right afterward, by emphasizing this.

Now . . .

This probably seems like a lot to do. It is. It took me about three months. I was a little all over the place, but if you're better focused than I am, you could probably do each of these in a two-week span or less. In the scope of an average job search, that's not that bad. And I think doing some or all of this will do nothing but benefit you.

Good luck! I believe in you!

Deploying a Two-Repo App to One Domain on Heroku

Abe Dolinger — Tue, 23 Jul 2019 03:27:23 +0000

So! You've followed good practices, and kept the frontend and backend of your new web app in separate Github repos. (This is nice because it modularizes your project, and allows you to, say, swap out your backend without your frontend having to be redeployed.) Now it's time to showcase your brand new invention. However, you want to keep your backend exposed, and you want it to look professional, by hosting it on the same domain as your fronted. How's that going to work?

The basic theory of this will apply to any hosting, but since Heroku's interface makes this dead simple, we'll use that as an example.

Step 1: Initial Deployment

Deploy both repos to their own Heroku app. Heroku has an excellent guide to deploying from Git from the command line, as well as one for deploying from Docker. It doesn't matter what .herokuapp domains you choose for them at this point, since they'll only be visible to you.

Step 2: Get thee a domain

Get a domain. There are many registrar choices, and most of them are GoDaddy. Namecheap and Domain.com also come up a lot as recommended. YMMV, DYOR. Important: make sure your choice supports adding custom DNS, specifically CNAME records.

Step 3: Generate Custom DNS Pointers On Heroku

Now for the fun, and surprisingly easy, part. Go to your backend's Heroku dashboard. Open up the Settings tab, and scroll down to Domains and Certificates. Click the big purple Add Domain button. This opens the following dialog:

Here, type in a subdomain of the domain you own, for example backend.yourdomain.com. It's important that it's a subdomain and not the root: CNAME records can only point to subdomains.

Heroku auto-generates a unique DNS target; copy this to your clipboard. After generating, your Domains section will look something like this:

(I redacted my DNS targets, but that's where yours will be.)

Step 4: Point your new domain's DNS to those records

Head to your domain's settings page, and look for a DNS area. In my hosting, it looks like this:

Once you're in the DNS panel of your domain, you should see an area to add custom DNS records.

Here's how you should fill yours in:

Make sure the Name field matches the subdomain of the DNS record you generated on Heroku. Type should be CNAME. The Value is the one in your clipboard, the long auto-generated DNS pointer address. Click Add Record and you'll be good to go!

If you're not curious about CNAMEs, you can skip the next section.

Intermission: A brief diversion on DNS and CNAME records

DNS exists to convert clumsy human things like letters and unicode into the lovely, clean numbers of true IP addresses. These records exist on many servers around the world, and are cached by your ISP for quicker lookup time.

Unfortunately, CNAMEs are confusingly - perhaps even badly - named. CNAME stands for Canonical NAME. The implication is that you're changing the 'canonical name' of the record that points to your site's IP address. It's actually the opposite - you're creating an alias to your site's Canonical NAME. Oh well. There are rumblings in the DNS community that indicate CNAMEs may eventually be replaced by ANAMEs, the accurately named Alias NAME record. Besides being a properly constructed title, an ANAME is inherently faster than a CNAME: it serves the IP in one query, rather than a CNAME's two. If only for the sake of naming conventions, I hope that this becomes the standard.

Anyway, for now, you're almost certainly stuck with CNAMEs, as there is no formal ANAME standard and very few hosts offer it, and if they do it's going to be their own interpretation. So it goes. Intermission is over, let's get back to our program.

Step 5: Now do it again

Repeat Steps 3 and 4 for your frontend. Do not repeat step 5, as this would trigger an infinite loop.

Step 6: Wait

If you read the DNS section above, you'll remember that DNS records exist in a ton of different places, and are cached under many different schemes. This is frankly amazing and wonderful, but for you, it means giving DNS a second to catch up with your changes. I found my CNAME changes happened pretty quickly - within a few minutes - but some changes can take hours, or even a day or two. With any luck, your experience will be like mine.

Step 7: The Final Touch

Let's say you want the visitor to experience only having to type in the root domain to get to your project. That's pretty reasonable. You're in luck! Simply forward your root domain to your front-end subdomain. In my hosting, that's simply called a 'redirect'.

This should also not take too long.

Congratulations! You're now fully hosted and served under one domain. Now someone can look at your site and have no hint of all the hard work you've done to get it to this point, which I guess was the idea all along.

You can see my implementation of this at 256hz.com, which is redirected to portfolio.256hz.com, which in turn gets its backend data from pgdb.256hz.com.

Thanks for reading! If you have any trouble, leave a comment and I'll do what I can to help.

Intro to Meditation for Coders

Abe Dolinger — Tue, 04 Jun 2019 15:41:37 +0000

Maybe you’ve noticed meditation’s quietly exploding popularity. The benefits are said to be huge, and the difficulty great. There are many methods, each of its own hardcore sect, or expensive new-agey guru. The pseudoscience around it, and the hard-to-quantify results, have turned off many a rational person - maybe including you.

I am a big proponent of meditation. My own practice is about eight years old. I think it should be taught in schools from an early age. It has the potential to make you feel better and perform better in any situation. No one’s mental health is perfect; meditation is part of any real self-care plan, in my opinion. I’m aiming this post at programmers specifically because coding is a discipline that rewards good mental hygiene. We are required to hold a map of complex interactions, syntax, and business logic in our heads; and as we aren't taught how to process difficult emotions, we often have to work through the fog of those. This can be difficult, or (at worst) impossible.

Below, I’ll make a three-part appeal to you to give meditation a shot. If you’re skeptical of meditation’s benefits, Part 1 gets in the weeds about some good evidence for its efficacy. Part 2 is on physical preparation for meditation (super important!). If you want to skip to the meditation exercise itself, it’s last, in part 3.

Part 1 — Science

Improvements in cortical thickness

This study (n=322; not huge, but significant) is widely cited; the team of neuroscientists looked for — and found — solid connections between meditations of different types and benefits in brain function.


Fig 1. Your cortices are gonna get swoll.

This experiment measured relative thickness of the brain’s cortex. (Cortical thickness is associated positively with brain function; it has been found to be a good predictor for IQ, for example[1]). Participants practiced three categories of meditation, for three months each. At the end of each period, researchers found cortical thickening in areas of the brain that corresponded to the goal of that particular meditation. Subjects also performed better in cognitive testing after their training. Loosely: those who trained in “presence” meditation improved their attention spans; those who trained in “affect” showed improved emotional intelligence; and those who trained in “perspective” gained, well, perspective.

Improvements in bodily function
Additional studies have measured physical benefits correlated with meditation, as well. This study associated lower blood pressure in hypertensives who meditated (warning — low sample size). This one (n=60) found significant decrease in blood sugar level in meditating patients with coronary artery disease.

There are also a bunch of studies correlating meditation practice in schools leading to improvements in behavior and performance. I’ll add the complete list I looked at for this article at the bottom.

Part 2 — Preparation

In Sanskrit, ‘yoga’ (योग) is a concept encapsulating many forms of meditation. The practice of stretching we in the West call yoga is only one. That is to say, originally, the stretching in yoga was meant as a preparation for meditation. If your body is sore, tense, unrested, badly positioned, or malnourished, it’s harder to get into a meditative state. I won’t go into proper rest and nutrition, but I will cover two easy stretches that help me relax.

If you spend all day looking at a computer, the places that are most likely to become tense are your neck, shoulders, arms, and lower back. A good way to test bad posture is to see if it's comfortable to hold in a deep breath. If you’re hunched, for example, you’ll feel tightness near your solar plexus. When your back is straight and your body is aligned, you can breathe more deeply and fully.

Hand Claspy Shoulder Stretchy Thing
I couldn’t find pictures of this or even a name for it, so I may have made it up out of sheer necessity.

Sit or stand up straight
Hold your arms straight out
Hold hands with yourself
Relax your shoulders and pull your arms apart. Move your head/neck/hands around for maximum stretchage.

This is easy to do anywhere, and gives me quick relief from tight shoulders.

Ragdoll Pose


Fig 2. It's pretty much just bending in half and relaxing.

There are a lot of nice things about “ragdoll pose”: it improves circulation to your head, stretches your lower back, and relaxes your neck and shoulders. I like to relax my neck and wiggle my head back and forth. Try taking a few deep breaths while you’re down there.

Everybody's body is different - if you want to learn stretches for other parts of your body, the internet is a great resource. If you don't have the time or money for a yoga class, there are good free ones on Youtube.

Meditation Prep
Once you find somewhere relatively peaceful to sit, check your posture.

Sit so your back is straight-ish and your legs are relaxed.
Wiggle your head a little and position it so it’s balanced on your neck.
Relax your hands in your lap.
Do the same wiggle but this time with your lower back. Move it around and let it come to rest where it feels most balanced.

(You can do these same checks to see if your posture is okay while you’re working. Here's the Mayo Clinic's guide to an ergonomic computer setup, for starters.)

Part 3 — First Meditation Exercise

Thanks for sticking with this so far!

As I touched on in the first part, meditation can have many end goals. For your first time, try one that is simply meant to give your conscious mind a little break.

Contrary to popular belief, you don’t have to “stop thinking” to get benefits from meditation. In fact, you don’t have to do anything at all. The simplest meditation is predicated on surrender: you don’t have control over your brain, and that’s okay. You only have limited control over your body, and that’s okay, too.

I spent literal years trying to breathe and force myself to feel peaceful. It did not work for me. Here’s the exercise that finally pointed me in a productive direction. This is more aligned with the “presence” category from the first study in part 1. You’ll move your concentration from “thought-awareness” (or -unawareness) to “feeling-awareness”.

Set a timer for 10 or 15 minutes. This way you won’t have to keep track of the time while you’re meditating. Consider the time ‘blocked out’. Phone on silent, etc.
Sit down, let your eyelids close & check your posture (see part 2).
Maintain a regular schedule of mid-deep breaths. Don’t go crazy, but try to breathe more deeply than you would unconsciously.
Focus on a part of your body. Every time you breathe out, let it relax. (I like to start at the top of my head and go down, to facial muscles, jaw, neck, shoulders.)
When (not if) you get distracted, don’t worry about it. Move your concentration back to the last part of your body you were working on, or go straight to where you feel the most tension. Maybe you’ll want to stretch out a tense body part. Go ahead, that’s great — it means you’re improving awareness of your body.
It’s likely that if you do this for long enough, you will start to feel some kind of difficult emotion. I think part of the reason we’re always doing stuff (I’m looking at you, phone) is to distract from the emotions we’re worried about having to process. That is a huge benefit of meditation — you’re prompted to experience and deal with whatever you’ve been putting off. Feel the emotion as a physical sensation. A lot of them manifest in your chest or abdomen. Maybe you’ll even feel overwhelmed. Excellent work. Keep breathing.

Bonus goal: if you keep focusing your awareness on a relaxed body part, you might be able to feel it tingling lightly. I think this is a normal sensation that our brains filter out as noise. I found it easiest to feel this in my hands.

When the timer goes off, you can shake yourself out, and see if you feel any different. Sometimes the benefits are obvious, and you'll feel clearer and more present immediately. Other times, your mind will have been racing the whole time you try to meditate, and you won't feel any better. Don't despair! I often find, when that happens to me, that the peaceful feeling comes later in the day.

After doing it regularly, I notice it when I stop for a day or two: I find my attention wandering; I feel cranky, unfocused, and mentally foggy. If 15 minutes a day seems like a lot, consider that you could be trading it for 15 hours of unhappy or suboptimal thinking. It's worth it.


Fig 3. A still from Bojack Horseman, a cartoon for adults who have difficult emotions.

Thanks for reading!
If you have your own meditation tips, or if this helps you in any way, please let me know! If it doesn't, and you still want to try, I'm happy to talk to you about it, and see if I can help. Good luck (=

Appendix: List of Studies

Effect of 6 Months of Meditation on Blood Sugar, Glycosylated Hemoglobin, and Insulin Levels in Patients of Coronary Artery Disease. Sinha, S., et al.
Specific Transcriptome Changes Associated with Blood Pressure Reduction in Hypertensive Patients After Relaxation Response Training. Bhasin, M., et al.
Effects of mindfulness-based stress reduction (MBSR) on emotion regulation in social anxiety disorder. Goldin, P.R., et al.
Mindfulness meditation and reduced emotional interference on a cognitive task. Ortner, Catherine N.M., et al.
Mindfulness Training for Elementary School Students: The Attention Academy. Napoli, M., et al.
The Influence of Concentrative Meditation Training on the Development of Attention Networks during Early Adolescence. Baijal, S., et al.
School-based mindfulness instruction: An RCT. Sibinga, E., et al.
A low‐dose mindfulness intervention and recovery from work: Effects on psychological detachment, sleep quality, & sleep duration Hülsheger, U., et al.
Meditation programs for psychological stress and well-being: a systematic review and meta-analysis. Goyal, M., et al.
The effects of meditation-based interventions on the treatment of fibromyalgia. Kozasa, E.H., et al.

The Game of Life (in Ruby)

Abe Dolinger — Thu, 23 May 2019 15:21:03 +0000

Conway’s Game of Life is a popular coding exercise, often used as a way to explore a new language, or a new facet of a language. I’ll give a brief history (though it’s a fun topic, and I’ve provided links at the bottom if you’d like to learn more).


Fig 1. John Conway. by Thane Plambeck

The Game stems from the writings of physicist (and polymath) John von Neumann in the 1940s. We know it as it was refined by mathematician John Conway, in the late 1960s. It was intended as a model of single-celled population growth and decline, played out on a two-dimensional grid.

Conway’s Rules

Each cell has eight neighbors.
The number of neighbors each cell has determines its life or death into the next turn.
If the cell has: fewer than two neighbors, it will die of loneliness.
- two or three neighbors, it will live on.
- four or more, it will die of overcrowding.
If an empty space has exactly three neighbors, it will become a living cell.

Under these rules, it’s possible to create structures that move, grow, self-replicate, and sustain indefinitely. This little guy is one of the first "discovered" self-replicating structures, called a Glider.


Fig 2. A small and rather adorable glider. Wikipedia

You can create massively complex and interactive groups with these rules, including (but not limited to) a Turing-complete programming language. After creating your version in Ruby, you’ll be able to simulate these yourself!

Life, Meet Ruby

This is such a fun exercise because it can be created in a wide variety of ways. Ruby is a very good example of an OOPL, so I’ll cover two options: Cells as Objects, and Board as Object.

Cells as Objects

In an object-oriented language, it’s natural to think of each component as its own class. In pseudocode, you could describe the Cell class like this:

class Cell

@position = [x, y]

def self.count_neighbors
  Cell.all.each |cell.position|
  if cell.position is next to any other cell.position
      create_cell / destroy_cell

Each cell knows where it is in your grid, and how to check how many other cells are around it. This is a valid solution, but you can imagine that it quickly gets inefficient. Each cell must iterate through every other cell, every time it wants to count its neighbors! This is known as big O(N²) computational time, meaning the number of calculations required for one "turn" is the square of the number of cells in your array. Also, creating cells gets tricky; since we aren’t making objects for empty cells, measuring the right conditions for a new cell isn’t trivial. In boards with millions of cells, our poor, non-quantum computers will become sad.


Fig 3. Very sad

Board as Object

Here’s an option that allows you to only iterate over each cell once, and then each square of the board once. The board is an object, storing an array of positions (cells), with two main methods: get_board_size, and check_board.

class Board
@cells = [(x1, y1), (x2, y2), (x3, y3), ...]
def get_board_size
  @cells.each
     find min(x, y) and max(x, y)
end
def check_board
  from board min(x, y) to board max(x, y)
  check_neighbors
     if neighbors
         create_cell / destroy_cell

This allows you to only go over each cell once, to get the size of the board. Then you iterate over the whole board to create and destroy cells. This puts you in the realm of O(N) computational time, meaning the number of calculations your program makes will increase linearly with the number of cells on your board.

Conclusion

There’s good reason Game of Life shows up a lot on lists of coding “katas” and exercises; the rules are simple, but the implementation can vary wildly. The two examples I covered here are only two of the object-oriented possibilities — can you think of ways to make the game in a functional programming environment, for example? There are solutions with finite boards; with hexagons instead of squares; or even with their grids on three-dimensional objects. Check out the gnarly Trefoil Knot life below.

You can find my functional-ish Python solution below, which adds simple ASCII visualization, and a small list of preset patterns.

Happy gaming!

Scraping Recipes with Nokogiri

Abe Dolinger — Wed, 15 May 2019 19:34:58 +0000

I'm working on a project that requires scraping recipes from the front end of a variety of sites. An incredible journey! And the friend I made along the way was right beside me all along!

NOKOGIRI.

Most of you probably know Nokogiri as the point in your Ruby on Rails install where you take a break to get a beverage. (Why is Nokogiri bundled with every flavor of Rails on Earth? I have no idea.* It's quite large, and specialized.) But here you are, already on a first-name basis with a world-class web scraper. Want to keep tabs on something that doesn't have an RSS feed? Aggregate content from a whole category of sites? Amass training data for your latest NLP project? You've come to the right place.

Nokogiri comes with tools for scraping three main formats: CSS, HTML, and XML. I used a combination of the HTML and CSS tools. If you like Javascript, a Nokogiri object gives you the equivalent of document.querySelectorAll on documents not your own. Then you get to add as much Ruby sugar on top as you like. If that doesn't sound delicious, you are reading the wrong blog post.


fig 1. Ruby sugar, anyone?

The first thing you'll need is to request a copy of the page. I used a gem called HTTParty, for which I took the onerous step of adding 'gem httparty' to my gemfile. Requesting with HTTParty looks like this:

Tricky. Bear with me here: loading this into a Noko object is kinda gnarly.

Oh wait, that was incredibly easy. Just to be clear, we told NG to parse the HTTParty output as HTML, and store it in an instance variable. Why an instance variable? Let's take a moment to reflect on our project setup.

I recommend separating the scraper object from the model (or models) you use to store the results. In the scraper, you can keep:

scraping methods
the URL of interest
your Nokogiri page object
your scraped "seed data"

Then you can use the seed data to generate the result objects in your database. Keeping these separate means you're not wasting a bunch of database columns in either model, or giving your results methods they'll never use.

In my scraper DB objects, I kept the Noko page, recipe title, URL, yield/cook time, and arrays of strings for ingredients and instructions. Since I'm on Postgres, setting up the array attributes was a piece of cake:

$ rails g migration add_columns_to_scrapers

and in your new migration:

add_column :scrapers, :ingredients, :string, array: true, default: []
add_column :scrapers, :instructions, :string, array: true, default: []


fig 2. Cake.

If you're on another database, you might create join tables for these attributes, which is slightly less fun. But hey, you're not using Postgres, so . . tough nuts? Please be advised, I won't be sparing on the food puns.

Anyway. Now the fun part: the scraping methods!

I was worried I'd have to construct monster conditional regex statements to parse ingredients lists. Fortunately I was working with well-designed commercial apps, with nice unique classnames. So, I used Nokogiri's CSS method to scrape my data instead.

At the point after you capture your page, set a debugger so you can play with the results. OK, let's see what the whole thing looks like.

@page


fig 3. Send help pls.

Oof. This is the first "hard-looking" thing we've come across. It's really not so bad. What you're seeing is the Nokogiri object version of every single element and sub-element in the page. This is actually pretty awesome - it means you have very fine control over the results.

The recipe title was my first target. So, I opened up Chrome's Inspect Element, and got the class of the <h1> title.

There it is! The conveniently named page-title. Now we can use the .css method:

@page.css(".page-title")

Phew. Still with me? We added the . to .page-title to tell Nokogiri we want to search for that term as a class name. Well, it turns out Noko gives us a little more than we want. Here are the results of that query:

Fortunately, we can use the .text method on any of these to, well, get the text. This is a lot like using .textContent in JS.

@page.css(".page-title").text

We're getting close! All we need is Ruby's excellent .strip method, which gets rid of whitespace and newlines.

@page.css(".page-title").text.strip

Ta-da! You've just scraper-Hello-Worlded.

For all you Ruby chainsmokers like me, getting the array of ingredients is a treat.

This is much the same as the above.

css("li .component-name") gets back an array of Noko objects,
which we convert to a long string with .text.
Then we split on newlines,
and map strip onto each item from the split array. (If that syntax looks weird to you, you can write it as .map {|i| i.strip }.)
That gives us a few empty strings as well, so we select the non-empties.

Result:

Win. Now I had to parse the ingredients strings for amount, measurement, and name. That is another blog post all its own, though. For now, enjoy your newfound skillz!


fig 4. Cake.

Thanks for reading. Let me know if anything needs to be cleared up or expanded on.

*OK, I googled it. Rails includes Nokogiri because it's a dependency of the test suite rails-dom-testing, which makes sense I guess, since you're going to want to parse your page for testing. Grumble grumble.

DEV Community: Abe Dolinger

DIY VS Code Extension 2: Publish

Publishing

Get An Azure Devops Account

Create a Publisher

Get the CLI tool

Get a PAT

Log In As Your New Publisher

Fill Out Your package.json

Make A Nice Readme

Publish!

DIY VS Code Extension 1: Development

Development

Getting Started

Please Stop Working With ICE

Getting Started, cont'd

Bootstrap Your Extension

Let's Write Some Code

The Command String

Your Custom Function

My Interviews After Bootcamp: Summaries

Company industry/specialty

Education space/video focus

Social/e-commerce

Autonomous driving

Internal chat

B2B candidate services

SEM / UX agency

Finance industry

Game/social app

Web services

Blockchain solutions

Backend services

Frontend agency

IoT solutions

App agency

Backend services

So, You've Finished Bootcamp. Are You Employable?

Specialize . . .

. . . But Also, Try a Different Stack

Test Ya Damn Code (and Write Testable Code)

Data Structures and Algorithms (DSAs)

Get Good At Vanilla

Drink From The Source

The Dreaded Behavioral Questions

Your Cover Letter & Resume

Now . . .

Deploying a Two-Repo App to One Domain on Heroku

Step 1: Initial Deployment

Step 2: Get thee a domain

Step 3: Generate Custom DNS Pointers On Heroku

Step 4: Point your new domain's DNS to those records

Intermission: A brief diversion on DNS and CNAME records

Step 5: Now do it again

Step 6: Wait

Step 7: The Final Touch

Intro to Meditation for Coders

Part 1 — Science

Part 2 — Preparation

Part 3 — First Meditation Exercise

The Game of Life (in Ruby)

Conway’s Rules

Life, Meet Ruby

Cells as Objects

Board as Object

Conclusion

More Reading

Scraping Recipes with Nokogiri

NOKOGIRI.