DEV Community: Jess Chandler

One language?

Jess Chandler — Mon, 17 Feb 2020 18:33:23 +0000

Do you spend all/most of your time with one language/tech stack?

In my day job, I work in data analysis, programming in VBA and R. For my side-hustle, I manage a site with a MEEN tech stack. In my free time, I create apps in Swift, manage websites with jekyll and MERN, and try to learn and adapt.

However, I see some folks who have deep knowledge in one code base and don't seem to switch constantly. I'm curious, what portion of folks work exclusively or almost exclusively in one language/tech stack.

photo credit: Nick Fewings on Unsplash

Where to logic?

Jess Chandler — Wed, 05 Dec 2018 01:00:15 +0000

Motivation

me: Did you know that you can return HTML from a method in a mongoose schema?
also me : I did not.
me : Sure. I just tried it out, now, you can use methods like item.getSummaryContainer() to get your summary container HTML.
also me : Cool.runs off to create a bunch of methods to return HTML, deletes if/then statements in views and replaces with method calls

minutes pass

also me: Wait, but why?
me: blinks

Discussion

So many times as a developer, I've come up with some new (to me) idea and then jumped in with two feet only to later wonder if perhaps the idea was not so good. Actually deciding is hard and requires experience that not all of us have.

My current rendition of a new and fun, but perhaps not good (or maybe it is) idea is as good as any to drive the conversation about how developers should approach these "Wait, but why?" decisions. I don't personally have the answers, but I hope that discussion in the comments will help suss it out.

Setup

I gave a bit of it away in the motivation - what if we return HTML from mongoose schema methods. For this example, we have a Mongo Express Node stack. I'll show two code approaches to one very simple display if/then. Assume in both cases that user.things are returned as part of the response from the server.

Logic in EJS

When the logic is in the EJS, the schema is just the variables (or other methods, but none shown here for simplicity), and the HTML is broken by if/then statements.

thing.js

const mongoose = require('mongoose');

const thingSchema = mongoose.Schema({
     name: { type: String },
     description: { type: String },
     cost: { type: Number }
 });

module.exports = mongoose.model('Thing', thingSchema);

userthings.ejs

<% include ./partials/header %>
<div class="container-fluid">
  <div class="col-12 col-md-8 mx-auto">
    <div id="upcoming">
      <h2>Things</h2>
      <div class="row">
        <% user.things.forEach(function(thing){ %> 
          <div><h1> <%= thing.name %> </h1>
            <% if (thing.sold) { %>
              <h5> was sold for <%= this.cost %> </h5>
            <% } else { %> 
              <h5><%= this.description %> for just <%= this.cost %></h5>
            <% } %>
            </div>
        <% }) %>
      </div>
  </div>
</div>
<% include ./partials/header %>

Logic in Mongoose Schema

When the logic is in the schema, the HTML is not clear from the EJS page, but the page is clean.

thing.js

const mongoose = require('mongoose');

const thingSchema = mongoose.Schema({
     name: { type: String },
     description: { type: String },
     cost: { type: Number },
     sold: { type: Boolean )}
 });

thingSchema.method({
    printinfo: function () {
      let theinfo = '<div><h1>'+this.name+'</h1><h5>'+this.description+' for just '+this.cost+'</h5></div>'
      if (this.sold) {
        theinfo = '<div><h1>'+this.name+'</h1><h5> was sold for '+this.cost+'</h5></div>'
      }
      return the_info
    }
});

module.exports = mongoose.model('Thing', thingSchema);

userthings.ejs

<% include ./partials/header %>
<div class="container-fluid">
  <div class="col-12 col-md-8 mx-auto">
    <div id="upcoming">
      <h2>Things</h2>
      <div class="row">
        <% user.things.forEach(function(thing){ thing.printinfo(); }) %>
      </div>
  </div>
</div>
<% include ./partials/header %>

Ultimately, both return the same HTML and present the same results. Which is better? Is one more correct? Why? I think it is possible that the answer may be "just do what feels right for you" but I don't actually know. I'd like to know how folks work this kind of stuff out.

Game Plan

My game plan at this point is to continue to try, fail, and try again with things. I will continue to read to learn about others' ideas and to share when new things come along to excite or surprise me. I love that the dev community can be so supportive and creative in this wild and free land of the interwebs.

I hope that you, fellow devs, will put your ideas on how devs, especially less experienced devs, can make choices like this, below.

Explain git config Like I'm Five

Jess Chandler — Sat, 10 Nov 2018 19:19:02 +0000

I felt like I totally understood when I set up my git config for an app running on heroku to finally have a staging and production environment separately. However, it has been a few months since I did it, and now things are not working as I thought they would. Clearly, I did not understand at all.

Essentially, I wanted to have a heroku staging app (generic heroku url) and my heroku production app (at my url) where I can get logs for both and manage both through the heroku CLI on my terminal. This seems like a fairly typical need, and I expect I'm not alone in getting confused.

Here's where I'm at:

I followed Heroku dev guidance to setup my environment... I think
Everything was working smashingly. My master pushes went to my github repo and were automatically deployed on my production heroku app. My staging pushes went directly to my heroku staging app.
I was concerned about an issue and ran heroku logs and then a series of heroku commands on my master branch only to continuously get information about my staging environment. No amount of heroku logs -r production would change this situation.
In an attempt to get logs from my production app, I ran heroku git:remote -a appname -r production. Sadly, that changed my production pointer from my github repo back to heroku (which expected to get code from github).
I manually changed the url for my production remote back to github in my git.config. Now, changes push properly to github again, but I cannot see production heroku logs using the CLI.

How is this so confusing? I tried a ton of googling for guidance git-config but encountered explainer after explainer just going step by step through typing shell commands to set things up and not really discussing WHAT IN THE WORLD is going on inside the .git/config file.

I appeal to my amazing DEV.TO friends for help here. Explain this whole .git/config to me like I'm 5.

FWIW - mine looks something like:

[core]
    repositoryformatversion = 0
    filemode = true
    bare = false
    logallrefupdates = true
    ignorecase = true
    precomposeunicode = true
[branch "master"]
    remote = production
    merge = refs/heads/master
[remote "heroku"]
    url = git@heroku.com:myapp.git
    fetch = +refs/heads/*:refs/remotes/heroku/*
[remote "production"]
        url = https://github.com/me/myapprepo.git
    merge = refs/heads/master
[remote "staging"]
    url = https://git.heroku.com/adjective-noun-number.git
    fetch = +refs/heads/*:refs/remotes/staging/*
[heroku]
    remote = staging
[push]
    default = tracking

Do I really need to create classes in two places?

Jess Chandler — Sat, 22 Sep 2018 13:29:11 +0000

I have a website for which I've written an API using mongoose models and nodejs.
Now, I am creating an app which will use the same API. Whether I create it in Xcode (just iOS) and Android Studio (just Android) or use a combined framework (like Flutter), I find myself creating classes that duplicate the Mongoose models. For example, I have a mongoose model for User, and I have now, in a separate location, a class for User.

My concern here is maintainability. If I update the API or make a change to the underlying models, I have to do this in two places. While I don't have a big application, I still feel as though I am doing this wrong.

Advice requested. :)

Okay, y'all. I think I just need to get my head around it. For the website, I have written an API that relies on the mongoose models, so I don't end up recreating them in that instance (for the front end). Unfortunately, I set up the API such that it returns the front end pages. That means that I cannot use it for mobile. I think that I can write a separate API for my mobile apps that lives on the same server and then will not have the redirects (and potentially then go back and have one pretty unified API that knows if it is serving a mobile app or the website).
I can create dart classes for Flutter (or do it uniquely for iOS and Android), so I can also have local cache of data.

Mobile Device for testing Android?

Jess Chandler — Fri, 10 Aug 2018 20:32:25 +0000

Y'all, I am deep in the Apple ecosystem, and I've been making iOS applications. I want to extend over to Android, but I am completely ignorant. I cannot find Android devices in local thrift stores, and I don't know what I should be looking for.

What physical device(s) do you use to test your Android applications? What do you recommend?

Making a Simple Link List for Sharing

Jess Chandler — Tue, 07 Aug 2018 17:54:50 +0000

I originally published this with small differences on my own blog

You need a link page for your site!

I see so many Instagram bios for developers that go to a homepage or don't include a quick way to get to where I am most interested in going on their site based on their post. Back in May, I coded up some link lists for two websites - one in Jekyll and the other in EJS. I shared the basic code and appearance on my blog, and now I want to share here to help other devs.

Why another page?

I knoooow, right? Another page. Don't we already have a navbar and a footer, and goodness knows how many other pages. However, it is nice for making a simple navigation for sharing across the increasingly mobile web - and almost essential for Instagram. Okay, I was entirely motivated to start working on this because of Instagram, but then I saw other potential uses.

What we are creating here is just a page with a few links to key areas of your site that people are likely to want to self-direct after seeing something else about you. I'll assume it is your Instagram feed. Just place the link for whatever you end up coding in your Instagram bio as your website. Use the same idea here to add temporary links for discounts or current blog posts, or whatever folks might be looking for. 😃

How to code it up

I whipped this up for two sites, my blog in Jekyll, and my other site using EJS and Express. Since the setup for both was pretty straightforward but very different, I will share both here.

The end result looks something like this on mobile.

Jekyll Markdown

My blog is written in jekyll with markdown. To set up a clean links page, I had to create a new layout and one new page.

I needed a new layout because I did not have any existing layouts that would center everything on the page and not print the header and footer of my typical pages. I created a new layout called plain with no header and no footer.

/layouts/plain.html

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    <div class="page-content">
      <div class="wrapper">
          <header class="post-header center">
            <h1 class="post-title">{{ page.title }}</h1>
            <h5 class="post-description">{{ page.description }}</h5>
          </header>
          <div class="center">
            {{ content }}
          </div>
      </div>
    </div>
  </body>
</html>

The markdown needs to include YAML to indicate that we are using our new plain layout, a title, link and description. I also have a nav tag that is false if the page should now show up in the main navigation. Whether or not you need that depends on how your navbar and header is already coded.

/pages/links.md

---
layout: plain
title: Welcome
permalink: /links/
description: I can see you - just kidding
nav: false
---

[About]({{site.url}}/){: .button .mylink}

[Code]({{site.url}}/code){: .button .mylink}

[Travel]({{site.url}}/travel){: .button .mylink}

[Projects]({{site.url}}/projects){: .button .mylink}

[Blog]({{site.url}}/blog){: .button .mylink}

The trailing {:} code blocks are a way to put .css into markdown. I don't typically have css in my markdown pages, but I could not quite get the button look that I wanted without adding the css. If you use buttons more frequently in your jekyll site or plan to, this links page could go to a layout that loops over each link and creates a button instead. The exact css settings that I have here are:

/* in /_sass/basscss/_base-buttons.scss */

button,
.button {
  font-family: $button-font-family;
  font-size: $button-font-size;
  font-weight: $button-font-weight;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  line-height: $button-line-height;
  padding: $button-padding-y $button-padding-x;
  margin: 0;
  height: auto;
  border: 1px solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
}

::-moz-focus-inner {
  border: 0;
  padding: 0;
}

.button:hover {
  text-decoration: none;
}

/* in /_sass/_me.scss */

.mylink {
    background: $theme-color;
    color: #fff;
    font-size: 1.5em;
    width: 75%;
    align-self: center;
    text-align: center;
}

EJS/HTML/Express

I maintain the Gifts Done site with EJS and HTML with Express. The code for that was a different sort of straightforward. First, create a links page. I'm using EJS with views and pages. I'll not post the long headernonav file but it is just the head meta and the start of the body tag. For this site, I am using Bootstrap 4, so I did not setup any special styles, the links are just part of a list-group.

/views/pages/links.ejs

<% include ../partials/headernonav %>

<div class="tall">
    <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
        <a class="navbar-brand brand-logo" href="/">
        <img src="/images/gifts-done-name.png" alt="gifts-done logo"/></a>
        <p class="lead">Automate your Gifting!</p>
        <div class="container list-group py-3">
            <a href="/" class="list-group-item list-group-item-action">Learn More</a>
            <a href="/about" class="list-group-item list-group-item-action">About Us</a>
            <a href="/users/login" class="list-group-item list-group-item-action">Log In</a>
            <a href="/suppliers" class="list-group-item list-group-item-action">Become a Supplier</a>
            <a href="http://blog.gifts-done.com" class="list-group-item list-group-item-action">Our Blog, The Wrap </a>
            <a href="/faq" class="list-group-item list-group-item-action">FAQs</a>
            <a href="/contact" class="list-group-item list-group-item-action">Contact Us</a>
        </div>
    </div>
</div>

<!-- footer -->
<% include ../partials/footer %>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" ></script>
</body>
</html>

The thing to remember in this situation is that you can't just create the page. You also need to add a route so that when someone goes to http://yoursite/links/ the server will know that you want to serve up the links page that you made.

// routes/index.js
const express = require('express');
const router = express.Router();
const controller = require('../controllers/index');
// IG LINKS
router.get('/links', controller.show_links)
// .. a bunch of other router stuff

// controllers/index.js
// .. other controller stuff
exports.show_links = (req, res, next) => {
    res.render('pages/linkpage',{ page: 'landing'} );
};

Happy Listing - you can see this code in action on my bio from my Instagram Feed

You are not limited to just links on your site Your custom link list page may include your portfolio at github, a collection on codepen, your most recent article here, whatever you can imagine.

Please let me know how you extend this code. I'd love to see your work!

How can I preview emails on Apple Watch without one?

Jess Chandler — Sat, 28 Apr 2018 08:30:52 +0000

I'm testing email sent from my site, and I set up a separate text/watch section as advised. However, I do not have an apple watch. I'd like to see the emails before sending them to users who may have them.

Any ideas?

Ideally, I won't have to use the iOS simulator on my mac, but I will do that if it is the only way.

Should I install the package or use the CDN?

Jess Chandler — Sat, 14 Apr 2018 08:28:55 +0000

I'm thinking particularly about chartjs right now, but it could apply to many things

Is there a sweet spot between SEO and DRY for site headers?

Jess Chandler — Mon, 02 Apr 2018 23:25:45 +0000

Smart peeps - so, I have a question for you. Here's a hypothetical situation:

Situation

You have done it, you have built a website. Cleverly, you have a partials folder with a header and footer and you just include that on every page. But, now every single page has the same meta tags. This makes the search engine algorithms push your site into the land of boring repeat content - not good.

Solutions? <- this is where I want to put your thoughts!!!

NOTE: I will update this Solutions section with great answers from you guys!

Jekyll

I have addressed this in jekyll for static sites by including liquid tags in the header that draws directly from the YAML during the build process. It is smooth and easy.

In the /includes folder, I have a file called 'head.html' that is constructed like so:

<head>
  <!-- other head meta stuffs like width and utf-->

  <title>{{ site.name }}{% if page.title and page.url != "/" %} | {{ page.title }}{% endif %}</title>
  <meta name="description" content="{% if page.description %} | {{ page.description }}{% else %}{{ site.description }}{% endif %}">

   <!-- other head stuffs like twitter and css -->
</head>

This 'head.html' is included as part of most page layouts in the /layouts folder, like so (this is 'default.html':

<!DOCTYPE html>
<html>
  {% include head.html %}
  <body>
    {% include header.html %}

    <div class="page-content">
      <div class="wrapper">
        {{ content }}
      </div>
    </div>
    {% include footer.html %}
  </body>
</html>

And then, in the pages, I can use YAML, like so:

---
layout: default
title: space invaders in the wild
permalink: /spaceinvaders/
description: a gallery of space invaders that I have seen
img: somedir/genericspaceinvader.png
---
## My super duper header
My super duper content

Now, this page will show up (to search engines...and eventually other humans) with the meta like:

  <title>ME: space invaders in the wild</title>
  <meta name="description" content="a gallery of space invaders that I have seen">

Perhaps not the best for SEO, but not the same as all 20,000 other pages showing up as : 'Me' with a description of 'my description' or whatever.

How do you do it for other sites? Is there a similar approach?

Your thoughts on Creating a New User

Jess Chandler — Thu, 01 Mar 2018 02:57:26 +0000

To handle the case when someone becomes a user of a paid web application, "we", as developers, need to take several steps:

add them to the database
verify their email
send them a welcome message <- server
charge them
redirect them
is there something else?

Most dev guides cover "add them to the database" and "redirect them". I have created all of the steps in my application. Naively, I took all of my steps and plopped into the route handler for a new user.

As I stand on the precipice of really-this-matters development, I am wondering:

Does the order of operations matter? (obviously, we don't want to redirect to an authenticated area before we actually make an account and charge them, but should we wait to create the account until they click on the "confirm" email?)
Do you have a story from your experience?
If you verify email through verification service, do you still want to send a verify/confirm email email?
Am I missing something huge?

What is your favorite way to automate new user welcome emails (node)? Why?

Jess Chandler — Wed, 28 Feb 2018 04:24:11 +0000

I've tried sendgrid, and I'm playing with nodemalier. I'm curious what mailers are really making devs happy. What do you like and why?

Explain deploying a web application Like I'm Five

Jess Chandler — Sat, 10 Feb 2018 23:00:05 +0000

Okay, I've deployed a few sites to github and a few others to heroku. But, I see suggestions (example) to deploy the front-end to one place and the back-end somewhere else, and I really do not understand. Do I need to be doing this?