DEV Community: John Jacob

3 Levels of Developer

John Jacob — Tue, 24 Nov 2020 20:04:38 +0000

Software development is easy. It's 2020. We can build an app. We can store and mutate data. It's all solved. Within reason if you can explain what you want a computer to do, I can make it do the thing.

Now: "The thing". That's the hard problem. What in the world are you building? What does it do? Why does it do it? Will anyone care that your thing does the thing it does?

I've been realizing a few phases between developers I've worked with in my career. It's three main levels of professional developers:

Level One — You can ship a feature

Within existing primitives, they can ship a new set of functionality on top.

For Example: "Add a way for users to like messages".

You need these people on your team. These kind of developers are incredible for continuous improvements and bug fixes.

Level Two — You can ship a product

You can build a product that's well scoped and well defined.

For Example: "Build a messaging app"

Good level two developers can take a well defined scope of work and ship maintainable code on time. They can define technical primitives from a non-technical design. They know how to break up work into executable deliverables and iterate until "the thing" is shipped. They can maintain and bugfix at the product level autonomously.

Level Three — You can deliver a solution

You can build a solution to a problem.

For example: "I need more customers"

Level Three developers are like Unicorns. They are designers, product managers, business analysts and full-stack coders all wrapped into one. Level three coders take abstract problems and ship concrete solutions to them. Level three coders don't ask "Should I use React or Vue?" They ask: "Should we build this at all?". A level three coder approaches the world with a ruthless bias toward shipping. Shipping small, iterating, getting their hands dirty, and pushing until their technology feels like magic to people that use it.

0 to Dev in 6 months — Recommended Syllabus

John Jacob — Mon, 07 Sep 2020 04:03:44 +0000

Take it with a grain of Salt — but if I was starting out trying to be a web dev today this is the syllabus / path I would take.

Other devs — comment below what path you would take if you were starting from scratch today.

Month 1 (HTML + CSS + Basics)

Week 1 HTML (Build and deploy a website using ugly plain css) (Deploy using google drive or Netlify)
Week 2 HTML + CSS again Deploy using Google drive or netlify
Bonus points for:
- Google Analytics
- Custom Webfonts
- Images in your website
- Mutli-page website
- First 2 weeks is about getting something on the screen, learning editors, and basics of the internet HTML + CSS is the easiest way to do it.
- Last 2 weeks: Rebuilding one of those sites with a CSS framework as a starting point. Bootstrap or Tailwind (Just using a CDN style tag)
By month one you should be pretty confident in
- HTML
- CSS
- The terminal
- Git + Github
- Basics of hosting and domains
- Basics of file structures and relative paths
- Basics of style tags and using a front end library
At this point you can probably make $15-20/hr freelance if you position yourself right.

You could also do a lot customizing things like Squarespace or Shopify

Month 2 (JavaScript)

Keep it Vanilla JavaScript
- Avoid JQuery or any other libraries
- https://www.beginnerjavascript.com/ or any other course for Vanila JavaScript
- Add interactivity to your site — Again deploy it
- Maybe do a couple hours of algorithm bullshit — not until month 2
By month two you should be confident in:
- Writing and reading JavaScript functions
- Selecting and interacting with HTML elements on screen
- Handling forms and inputs
- Some API interactivity — Maybe a Stripe Credit card collection form or the Pokemon API
- Strong recommend to try to play some some "low code" stuff and make something that actually does something. Not just a "Static" site.
At this point you can probably make $20-25/hr freelance if you position yourself right.

You could now build an MVP using "low code / no code tools — Strongly encouraged

Month 3 (React — if you want to be a "Front end dev")

This is going to take all month.
Build at least 2 projects start to finish and DEPLOY them.
Bonus points for interactivity or interacting with any kind of low code backend — airtable or Firebase

At this point you can probably make $25-30/hr freelance if you position yourself right.

Month 4 (Gatsby + CMS Systems)

(Get freelance work or do favors for people now)
- Build a static site using React + Gatsby
- Always be deploying
- Bonus points for actually getting paid to develop a website
- Understand and explore Content Management Systems
- Headless Wordpress, Contentful, Sanity Etc.

At this point you can probably make $25-30/hr freelance if you position yourself right.

Month 5 (Backend basics — Next.js or Rails)

You can start with Next.js
Even though you want to be a front end developer you'll need knowledge of the back end
You should now build an app that does "Something" with a backend you've built.

At this point you can probably make $30-35/hr freelance if you position yourself right and be up for internships / JR JR positions at agencies or firms

Month 6 (Build something real using everything you know)

ABD — ALWAYS BE DEPLOYING — Shipping things, get paid early on if you can.
- Build small and complete
Random note: This "Front End Web Development" course from Treehouse seems pretty solid and my recommended path kind of follows this

Simple Full Text Search in Rails

John Jacob — Sat, 22 Aug 2020 03:05:55 +0000

No gems, no dependencies, no complexity. Here’s a basic full text search to use on simpler, smaller rails apps.

Don’t get me wrong, I love ElasticSearch, or Ransack for larger more complex projects. But sometimes you just need something simple. This website for example.

At the time of writing this I’ve implemented search using plain old Ruby. This example not only does “full text” search, but it also searches the full text across multiple attributes, lastly, it also supports searching within ActionText rich text blocks as well.

Here's the basics for Searching the Post model within my blog:

I have a before_action for the controller to a set_scope method:

before_action :set_scope, only: :index

Here's that set_scope method:

  def set_scope
    @posts = Post.all
    if params[:search]
      basics = search_basics
      body = search_body
      tags = search_tags
      post_ids = basics | body | tags
      @posts = @posts.find(post_ids)
    end
  end

  def search_basics
    @posts.where(
      "title ilike ? OR description ilike ?",
      "%#{params[:search]}%","%#{params[:search]}%"
    ).pluck(:id)
  end

  def search_body
    @posts.joins(:action_text_rich_text)
      .where(
        "action_text_rich_texts.body ilike ?",
        "%#{params[:search]}%"
      ).pluck(:id)
  end

  def search_tags
    tags = params[:search].split(" ")
    Post.tagged_with(tags, :any => true).pluck(:id)
  end

Here's how I render my basic search bar at the top of my posts index to wire it up in the view:

<form id="search" action="<%= posts_path %>">
  <div class="input-group">
    <%= text_field_tag :search, params[:search], id: 'content_search_term',class: 'form-control', placeholder:'Search...' %>
    <div class="input-group-append">
      <button class="btn btn-primary" type="submit" id="button-addon2">Search</button>
    </div>
  </div>
  <% unless params[:search].blank? %>
    <small><%= pluralize(@posts.count, "post", "posts") %> found for search "<%= params[:search] %>" <a href="<%= posts_path %>" class="text-muted pl-2 text-decoration-none"><i class="fas fa-times"></i> Clear Search</a></small>
  <% end %>
</form>

Bottom Line

This is not the cleanest or most performant way to do search in rails, but sometimes simpler is better. If you only have a few dozen records to search and don't need "sloppy" search, this hack will probably suffice. Otherwise, there's plenty of resources out there on Elastic search and search-kick.

My Problem with HTML Tables

John Jacob — Fri, 21 Aug 2020 20:59:51 +0000

I feel like no css framework has really solved the problem of HTML tables.

Take this basic bootstrap table for example:

"Responsive" Tables On Mobile 🙄

Even the table-responsive class is hardly "responsive" it just makes the table scroll sideways off the screen. This is not an ideal solution.

My Alternative

I string together div's with col classes to make sure the interface responds well on mobile devices, so instead of scrolling offscreen, content flows into nice rows:

Codepen

Open this up and drag the preview window to get a gist of what I mean:

How does everyone else solve this problem?

I like my solution because it is one piece of code that carries into mobile and desktop, however it's just so incredibly verbose.

What CSS frameworks handle this well? How else have people solved this?

Solutions for Staging / Demo Account Data?

John Jacob — Fri, 07 Aug 2020 22:40:27 +0000

Every software product I've ever built always has this same problem. Sales, marketing / product need a repeatable demo account populated with best case scenario data that doesn't take manual reset and doesn't have any side effects. I was listening to this episode of the Re-work podcast from Basecamp and it was good to know that I'm not totally crazy in this being a pain point.

💬🙏 comment below — how are you solving this?

I would love to know, don't limit answers to Rails! I'm sure we can be inspired based on whatever framework people are in.

Our Current solution — very "Rails Specific"

I use Rails fixtures and pre-load those fixtures in a bin/setup script. If you take your time to pre-populate all this fixture data it works really well. You've got that data for testing (Which is usually a win) and then it's easy to set up staging or localhost to just reset back to this state with a simple command.

However — especially with ActionText and ActiveStorage it gets clunky and you end up with these huge fixture files. I have found some solutions to limit the pain here, you can pull down production data and then write it to fixtures, then update it.

Other Misc Rails Thoughts / Tips

I've recently learned you can do this quasi-inheritance thing in your fixture files to DRY them up. And of course, you can write ERB in fixtures. (Things like Faker can help this) but even with all this, there's got to be a better way.

Again — would love to hear from the Dev.to community

How do you deal with "Demo" account data?
How does your marketing and sales team are well supported on this? What if they need to make changes or updates?
How do you keep this whole thing from not being such a pain in the ass?
How do you keep this in sync with new feature rollouts?

Tables and other Advanced Formatting in Action Text (Kind of)

John Jacob — Fri, 07 Aug 2020 22:12:06 +0000

I work on an in house Learning Management system built in Rails. This Learning Management system allows our content team to create articles, videos and quizzes. This content is delivered through lessons for new business owners. Through these tracks they learn all they need to learn to start and run new service businesses.

Since were on rails and we needed rich text editing we reached for Action Text. Action Text gives you the solid Trix editor plug and play in your app.

Rails Action Text in Practice in our Content Library Back-end

However: Action Text / Trix doesn't support tables.

Our content team had lots of tables of information they wanted to be able to communicate. Sometimes it's hard to get across nuanced information for estimating and process without a table. We realized we needed table support in Action Text / Trix.

First Direction — Action Text Attachments

My first path was to extend the Action Text attachment model. This is what the team at Timelapse documented. Although they provided some good direction, there was nothing I could directly leverage. Also, this seems like a lot of front end complexity for a v1 of a product. Was looking for something similar. In this research I found this great Rails Conf video from Chris Oliver of Go Rails, a strongly recommended resource on Action Text attachments in general. However, decided against doing something so front end heavy (for now).

The Crazy Idea that worked: Render Code-blocks as HTML

Since this project didn't ever need a "Code Block" these articles render to a non-technical audience, why not allow any valid HTML written in a code block to render as HTML.

Pros:

No extra front end work
Simple Extension of the Article Decorator
Very maintainable portable simple content (Just HTML)

Cons:

Your users have to be reasonably technical to update HTML code-blocks
You don't get a WYSIWYG interface when editing content

I put a rough prototype and did a screen recording to get my colleagues thoughts.

Execution

All credit goes to the great Manuel Ortega for actually making my crazy idea work, he was able to build a clean implementation that solved many of the pitfalls my prototype was riddled with.

It all essentially boils down to one plain ol' ruby object — this Richtext::CodeBlocks::HtmlService object:


class Richtext::CodeBlocks::HtmlService
  ALLOWED_HTML_TAGS = ["table", "tr", "td", "th", "col", "pre", "p", "h1", "h2", "h3", "summary", "details", "row", "code"]
  ALLOWED_HTML_ATTRIBUTES = []

  # To Validate HTML tags and protect from bad formatted input
  def self.validate(html)
    errors = []
    html = Nokogiri::HTML::DocumentFragment.parse(html)
    html.search("pre").each do |pre_tag|
      pre_tag_html, pre_tag_errors = self.ensure_well_formed_markup(pre_tag.text)
      errors.push(pre_tag_errors) unless pre_tag_errors.empty?
      inner_html = self.extract_inner_html_from_pre_tag(pre_tag_html)
      inner_html = self.remove_not_allowed_tags_and_attributes(inner_html)
      pre_tag.children.first.replace(Nokogiri::XML::Text.new(
        inner_html,
        pre_tag
      ))
    end
    html = ActionText::Fragment.new(html)
    [html.to_html, errors.flatten.uniq]
  end

  # To parse each code block tag and render it to HTML
  def self.render(rich_text)
    html = Nokogiri::HTML::DocumentFragment.parse(rich_text)
    html.search("pre").each do |pre_tag|
      inner_html = Nokogiri::HTML::DocumentFragment.parse(pre_tag.text)
      inner_html = add_styles_to_tables(inner_html)
      advanced_code_block = "<div class='advanced-code-block'>#{inner_html.to_html}</div>"
      pre_tag.replace(advanced_code_block)
    end
    html.to_html
  end

  private

  def self.ensure_well_formed_markup(html)
    parsed = Nokogiri::XML("<pre>#{html}</pre>")
    [parsed, parsed.errors]
  end

  # To add our bootstrap specific classes to table elements
  def self.add_styles_to_tables(html)
    html.search("table").each do |table|
      table["class"] = "table"
      table.wrap("<div class='table-responsive'></div>")
    end
    html
  end

  def self.extract_inner_html_from_pre_tag(html)
    Nokogiri::XML(html.at("pre").inner_html)
  end

  # To add error messages to mis-formatted HTML
  def self.error_messages(errors)
    readable_message = ->(e) { e.message.split(":")[3].strip rescue "" }
    errors.map {|e| readable_message.call(e) }.uniq.join(", ")
  end

end

Using the HtmlService

You can just add a method in the article model:

def formatted_body
  Richtext::CodeBlocks::HtmlService.render(self.body.to_s).html_safe
end

and then call it in the view

  <%= @article.formatted_body %>

Screenshots

Here's the example of the editor with code blocks:

Here's the example output of that article:

Here's example validation being thrown to prevent you from saving bad HTML.

In Production

Obviously this repo is a very limited example, but used well in production with an extended CSS framework this can be pretty powerful in practice:

Github Repo

This is just a basic demo rails app using this approach. Excited to get feedback from anyone else looking to explore a feature like this.

Developer with New Baby Coming Soon — HELP!

John Jacob — Wed, 29 Jul 2020 19:12:50 +0000

I'm incredibly excited that my wife and I will be having our first baby girl in a month or so.

Also, pretty scared.

Looking to get a good thread going with practical tips and tricks.

My top questions / concerns:

How do I balance supporting being there for family and pushing my career through ongoing learning?
Am I really going to be able to balance my Engineering Manager job and a new baby?
My job is remote, how do I make myself available for wife and baby and also have clear work time?
Will I die of lack of sleep?

Other parents — Please help!

Abbreviations in Software Development

John Jacob — Sun, 26 Jul 2020 17:43:38 +0000

One of my pet peeve's in the software world is how much we all use abbreviations. Technical or non-technical. Seems half the time we don't even know what they mean.

I've put together a reasonably complete list here of the most common ones the industry seems to use too much.

We actually walk through and explain a bunch of these in the most recent episode of our podcast — Iteration, a podcast about software development and design.

Comment below with essential ones I've missed or gotten wrong. Might turn this into a Github repo so we can try to get a source of truth around this insanity.

Technical / General Software

CROn: Command ron on
URL: Uniform Resource Locator
TTL: Time to Live — Example a cache's TTL
DOM: Document Object Model
HTML: Hypertext Markup Language
CLI: Command Line Interface (CLI)
API: Application Program Interface (API)
TDD: Test Driven Development
CI: Continuous Integration (CI)
UX: User Experience
UI: User Interface
CSS: Cascading Style Sheets
IDE: Integrated Development Environment
FTP (File Transfer Protocol)
TLD (Top Level Domain) (.com, .net, .car)
SSO Single Sign On
JS: JavaScript
AJAX Asynchronous JavaScript and XML
GUID Global Unique Identifier
GUI Graphical User Interface
OOP Object Oriented Programming
ORM Object Relational Mapping
DSL: Domain Specific Language
REGEX Regular Expression
PHP Personal Home Page/PHP Hypertext Preprocessor
REST Representational State Transfer
SDK Software Development Kit
SQL Structured Query Language
XML Extensible Markup Language
2FA: Two factor authentication
DNS: Domain Name Servers
Web RTC — web real time communications
FOSS — Free Open Source Software
WYSIWYG: What you see is what you get
JSON - JavaScript Object Notation
TS: Type Script
POC : Proof of Concept

Marketing / Sales

CTA: CTA: Call-to-Action
CTR: Click-through Rate
CPL: Cost Per Lead
CPA: Cost per Action
CPC: Cost per click
PPC Pay per click
CR: Conversion Rate
CRO: Conversion Rate Optimization
CMS: Content Management System
PDP: Product Detail Page
PLP: Product Listing Page
SEO: Search Engine Optimization
SEM: Search Engine Marketing
SMM: Social Media Marketing
MAP (Marketing Automation Platform)
MQL: Marketing Qualified Leads
LPO (Landing Page Optimization)

Business Terms

KPI: Key Performance Indicators
OKR: Objective Key Results
RFP: Request for Proposal
IC: Individual contributor
P/E - Price-to-earnings ratio (How much does the stock cost vs how much does the company earn?)
P&L - Profit and Loss — How much money comes in the door and what they lost to get it
ROI - Return on Investment
WC - Working Capital (Liquid money to spend)
B2B - Business to Business
B2C - Business to Consumer
D2C - direct to consumer
BD - Business Development
QA - Quality Assurance
YTD: Year to Date
CRM: Customer Relationship Management
MOM: Month over Month (compares a metric over to previous month)
SAAS Software as a Service
ERP Enterprise Resource Planning
EPD — Engineering Product and Design
NDA Non-Disclosure Agreement
YoY Year On Year (compares a metric over to previous year)
RDD Requirements Definition Document
PRD Product Requirements Definition
RFQ : Request for Quotation
RFI : Request for Information
PO : Purchase Order
WO : Work Order
SKU : Stock Keeping Unit