DEV Community: hariseldon27

Why I care about headless architecture.

hariseldon27 — Sat, 18 Jun 2022 16:40:17 +0000

Why I can't post on social media regularly

In the social media world there is this term, 'Content is King, and consistency is Queen.' I'm not a huge social media user for my own personal needs, and I know that consistency is my biggest issue with it. Unless I plan an entire campaign, and have 90% of it in the can before launching, I'll most likely fall off the posting-wagon.

What helps me keep my social media posting on track? Strategic planning and data management. There are two critical tools needed here: strategic planning requires a notebook and pen (or a text editor), and data management is greatly aided with a content management system (CMS from here out).

Data drives the digital experience

We are in a world of 'infinite information' according to Raygun, the web monitoring company, and that data has to be stored and presented somehow.

Historically the CMS system was more the domain of large enterprise organizations: hospitals, insurance companies, CPG manufacturers, car companies, etc. Part of the reason for this was the ability to keep a tight control on both the data layer, but also the look and feel of the view layer.

image source: Netsource

In a traditional CMS stack the view layer is separate, but tied to the back-end systems that deliver data it.

In headless architecture, however, each element of the CMS Stack is its own service.

Who cares about separation of concerns?

I do!
Headless architecture means that we can disperse our CMS and Front-end systems across the cloud, giving us better reliability and easier access.

More than that, separation of concerns let's us parallel-thread the development process: the front-end team can be making pixel perfect React shopping cart component, while the back-end team can finish up credit card authorization integration. If they had a good architect keeping them in sync, they will both be able to just ensure their API end-points are the same and integration should be a simple process.

What is headless first CMS?

In a headless first CMS data and it's delivery end-points are the single source of truth. By creating a flexible data structure the ability to create custom API end-points to serve a variety of platforms becomes the focal point.

By organizing your offering around the data you are working with, you have the ability to dip in and out of design trends and deployment platforms as the business needs dictate.

Use Cases?

In my experience with medium to small marketing clients in marketing and arts, the ability to create a single piece of content, and then massage it for a number of different platforms is critical.

Use case 1: Dance Company Marketing

The Rival Tribe dance company is about to present their evening length ballet, and needs to put a strategic marketing plan in place.
They have a front-end website (React let's say), Social media channels and a scheduling app, a CRM for data collection (maybe Hubspot?), and an email campaign service (like Mailchimp).
Each of these delivery channels has a different format, different copy needs, and especially different media formatting needs.
If Rival Tribe is using a headless CMS with custom built integrations, they will be able to easily create content on the CMS and deliver it via API to their website, create and send a custom email campaign, and integrate it with their email list. All of this is possible because the marketing material - the data source of truth - is coming from the custom CMS API.

Use case 2: Point of Sale and Event Marketing

Motorsports Experience Inc., a motor sports event production company, works with a variety of athlete and racing industry influencers to promote events. They need to find a way to deliver that video content to new audiences.*

We live in a world of screens, and Motorsports Experience Inc wants to have their promotional content on all of them - but for now, they will settle for the video screens at gas-station pumps. It goes straight to an audience who is interacting their product (vehicles) and it will have a high impact because it's a captive audience (in spite of how much we all loathe those screens). But, how do they get their mainly social media content, onto those screens?

Enter the headless CMS API: Motorsports Experience Inc., has been using a CMS to keep their influencer campaigns organized. Thankfully once the campaigns are built in the CMS, custom fields or custom end-points can be added as need to support delivery.

What this means is that the legal department will spend more time hammering out agreements than the developers will spent creating data delivery methods.

I like big orchestras

There is a real beauty in the way complex systems interact with themselves and the systems around them. Monolithic architecture was fine for tight control, but headless allows for more creativity and the introduction of new services without traditional pains of spinning them up.

Coda

As always, if you see something wrong here let me know - we can always do better!

Using Javascript to fix Wordpress annoyances in a wordpress-y way

hariseldon27 — Mon, 04 Apr 2022 23:14:51 +0000

This post was originally titled: "Give up on platforms, not users: or why Javascript gives me hope"

Photo by Jimmy Jin on Unsplash

Wordpress: Whoas & Woes

I started my professional journey in the tech world as a content manager for a Wordpress site. This gave me lots of opportunities to see how fragile and cumbersome Wordpress can be. But, way back in 2009 in a pre-Squarespace world it was a good way for a Liberal Arts kid without a ton of code skills to put together a decent looking website with lots of functionality.

Ever since I started to learn about Wordpress, especially its quirks and frustrations, I've been wanting a more stable solution for myself and my clients. But, as we all know change takes time.

As I headed into the final four weeks of the Flatiron School Software Engineering Bootcamp I was contacted by a long time client for some adjustments and additions to her Wordpress site.

The client is a journalist, we update content every few weeks, depending on her work load. The site is simple, based on a commercial theme, and rather minimal. As such, it doesn't allow for multiple authors to be listed on one post; and modifying the theme files (even child themes) always leads to update issues.

Well, back in February she co-wrote a Washington Post article which required we place four authors on the by-line.

During my time at Flatiron my minimal amount of client work occurs on weekends, preferably Saturday morning over coffee. Which means, about the last thing I want to do is build a new Wordpress theme feature.

Annoyance.

Frustration.

Desire to tear the beating heart out of the Wordpress core.

Vanilla Javascript to the rescue

I finished my coffee while uploading new stories, and it occurred to me: I made this site, so I can break it!

I made this site, so I can break it

In truth, I realized that nothing is sacred and sometimes a job done is better than a job done perfectly. With this new found freedom I opted to combine a very Wordpress-y solution, with a Javscript solution.

Wordpress Plugins are the worst

In spite of this ^ being true, they are still an important part of the Wordpress ecosystem. I opted for one that would let me just inject custom Javscript or CSS into the footer. Since this client is on a GoDaddy shared hosting (I know, I know...) it's a royal pain to edit theme files safely in production. Thus, a plugin.

Simple Custom CSS/JS is a pretty simple plugin, and it offers an easy way to just inject JS into the footer or header.

Okay, so now that we've got a tiny window into mucking about with the theme how can we add 4 author names instead of just one?

As simple as .append and .prepend

In order to make our adjustment we needed to first find the place where it should be injected. The top-matter where the Author attribution in our post looks like this:

<aside class="post-author">
  <em>by</em>
  <span itemprop="author">
    <a href="/author-bio" title="Posts by Author">
      Author Name
    </a>
  </span>
</aside>

That <span> sure looks like a good element for us to target! What if we target .post-author span ? that should get us to the right spot, then we can add in some new elements dynamically.

So, if our Javascript looks like this:

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)

That connects us to the element in the HTML, and then creates a new span, and appends that span next to our author text. Now, we just need to set the text of the span we created to the text we want.

const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"

Stick that into the plugin, and boom! You are pretty much all set! Well, except for the fact that it'll do that to every single post!

Notice that the plugin just injects site-wide. Hmm, if only there was a way for us to target just just that post, and just that span.

Thank goodness for Wordpress permalinks

Yeah, the permalink setup can be a pain at times - but it's helpful in this case!

if (window.location.pathname === "/2022/02/20/post-name") {
const authorSpan = document.querySelector(".post-author span")
const newspan = document.createElement("span")
authorSpan.prepend(newspan)
newspan.innerText = " Awesome Author, Rad Reader, Sweet Signature"
}

Much better - a tiny bit of conditional rendering based on the URL. Now, after GoDaddy finally clears our cache we can see that the site is cleared of extra authors, and the post we wanted to touch up is looking smart!

Conclusion

Wordpress stinks, if you're here you know that. But, it's been around for a long time and was an entry way for many of us! Thankfully, even just a little code knowledge can make a huge difference in the development process.

my code coda
1) Thanks for reading, if I got something wrong let me know!

2) There are always things to improve - what could we do better here?

ActiveRecord Dependent Options

hariseldon27 — Tue, 22 Mar 2022 13:49:39 +0000

Header image by Lightscape on Unsplash

Validations, Relational Databases, Happiness and Fulfillment

So you're having a hot and heavy time with your ActiveRecord backed app, Hot Hot Happy Hour, the newest Happy Hour gathering planning app: everything is coming up Martini's and Rosé: all your tables have clean data, nothing is null, and you haven't had any lost records, yet!

But, what if your product manager comes to you saying,
"We need a new feature that will let the hosts of Hot Hot Happy Hours back out after they made the event. We keep having hosts get cold feet and delete their accounts after they get a big crowd signed up for the event! Currently, events are deleted if the host deletes their account! We need to have the events stay online even if the host deletes their account! That's easy enough, right?"

Easy enough...right.

Well, actually - it might be! Especially if you're currently connecting the join table of the Happy Hour Event records with the users table and employing dependent: :destroy to ensure that if a host backs out, or deletes their account that the event itself gets removed.

ActiveRecord associations - with great power...

ActiveRecord associations create so many powerful connections that we need to ensure we are handling it all correctly. Ensuring data tied to another piece of data, such as our Hot Hot Happy Hour events being tied to our event hosts and users, means that when one piece of data is manipulated or destroyed, the associated data should similarly be. The Rails docs say:

has_many, has_one, and belongs_to associations support the :dependent option. This allows you to specify that associated records should be deleted when the owner is deleted.

Our ERD...

What is the `:dependent` option?

Rails provides a nice option for handling the removal of associated data with the :dependent option. According to the Rails documentation the :dependent option:

Controls what happens to the associated objects when their owner is destroyed.

We are currently implementing this as such


 ruby
class Hot_Hot_User < ApplicationRecord
   has_many :hot_hot_events, dependent: :destroy
end

So, in our case with Hot Hot Happy Hour we potentially have users who are creating an event in the join table, then deleting their accounts after the event has gotten too big.

Because we are using dependent: :destroy, when the user deletes their account it also deletes the associated data with it - including any events they have created, but haven't happened yet. Big bummer for the Hot Hot Happy Hour community.

Options to the rescue!

Something cool about Rails and ActiveRecord is that is offers a seriously robust set of tools to handle errors and validations. The :dependent option feels like just such a tool!

In our case we don't want to destroy the events immediately, in fact we'd prefer they stay around and we can just replace the host. Heck, maybe we could automate an invitation out the most active users who are associated with that event to be the new host! Assuming we like the course of automation, let's use this idea as our guiding star and see what our options are.

The options `:dependent` offers our associated data!

Borrowed directly from the Rails Documentation:

nil do nothing (default).

:destroy causes all the associated objects to also be destroyed.

:destroy_async destroys all the associated objects in a background job. WARNING: Do not use this option if the association is backed by foreign key constraints in your database. The foreign key constraint actions will occur inside the same transaction that deletes its owner.

:delete_all causes all the associated objects to be deleted directly from the database (so callbacks will not be executed).

:nullify causes the foreign keys to be set to NULL. Polymorphic type will also be nullified on polymorphic associations. Callbacks are not executed.

:restrict_with_exception causes an ActiveRecord::DeleteRestrictionError exception to be raised if there are any associated records.

:restrict_with_error causes an error to be added to the owner if there are any associated objects.

To reiterate: we want an option that will allow our app to quietly have an error, then handle it with some cool new feature...darn that Product Manager and their good ideas...

Looks like there are a few ways we could go about this.

ActiveRecord & Rails as safety net

I'm a big fan of options. I'm also a big fan of best practices...and when you're first getting started more options can make it harder to establish and follow best practices. But, hopefully we'll be able to find a happy middle ground here.

Remember, our goal is to remove a record that has data associated with it while leaving the associated data in place and capable of being further manipulated.

Let's look at the options and do a bit of psuedo-code!

nil do nothing - this is the default if no option is specified.
Use Case: Host user deletes account, but event still exists, so no one is there to raise the first glass - or ensure that the bartenders don't stink. This will negatively impact users. And probably have other consequences such as error handling and further validation.
:destroy remove all associated data with the :destroy command, running callbacks as needed
:nullify sets associated fields to null
Use Case: I like this as an option, gives us a clear reference - and if we have a helper function that runs on a regular basis to flag any null fields in the db - even better!
:restrict_with_exception causes an ActiveRecord::DeleteRestrictionError exception
Use Case: this seems pretty helpful, we could use that error to automatically flag that we need a new host and instead of deleting the event, maybe it locks new users for RSVPing until a new host is associated with the event.
:restrict_with_error causes an error to be added to the owner if there are any associated objects
Use Case: could also offer an avenue of escape, but may be more useful in the generation and handling of messages than in automating the replacement of our event host.

Keep it hot

The reason all your users love Hot Hot Happy Hour so much is that the events are all liminal experiences beyond what humans thought possible. Which is why creating an event, and then having it cancelled at the last minute is such a bummer. You never know when your last minute will be.

Can we devise a plan to save our events?

Our new model might look like this:



class Hot_Hot_User < ApplicationRecord
   has_many :hot_hot_events, dependent: :nullify
end

My approach to start would be to go with :nullify and then create a helper function to alert our Customer Service department that an event lost its host. This can then allow a new host to be chosen from the currently available list of participants. If the event host is null it should still be accessible in the database, and all the rest of the data should be intact and healthy. Once we replace the single null field with a new host, we should be good to go!

Lost data is nothing to shrug off, and good validations can make your life much easier! So - keep that data clean kids, and make sure to tie your shoe laces.

my code coda
1) Thanks for reading, if I got something wrong let me know!

2) There are always things to improve - what could we do better here?

.localeCompare() and sorting in Javascript

hariseldon27 — Wed, 23 Feb 2022 23:04:13 +0000

Cover art: Brett Zeck on Unsplash

This blog post is about sorting things in Javascript, simple things like arrays or objects. This isn't about Big-O, complex algorithmic sorting, or anything more than we can test out in the terminal with node.

Why write about sorting

Sorting is one of those fundamental functions of front end design that is so ubiquitous that it's easy to overlook. I realized I wasn't sure how to best sort a simple set of data while the user waits, so I decided I'd make some practical notes on tackling simple sorting tasks in Javascript. Then I took it a step further and went down a rabbit hole, and here we both are. Welcome!

What else is out there?

Did you get here by way of search results? Nicely done! I doubt this will be on the first page because there are already excellent articles out there the aspects of .sort() a good place to start - as always - is MDN.

Some other worthy reading if this is your first stop:

Sorting out Javascript Sort

Why Localecompare can't deal with decimal numbers

Localecompare and speed issues - collator method

Did you leave to do some research and come back? I bet you did. Do you have a better idea of how the standard .sort() works now?

localeCompare and the Intl.Collator

What is `.localeCompare()` ?

String.prototype.localeCompare() is a method which returns a number indicating whether a reference string comes before, after, or is the same as the given string in order. MDN.

The basic syntax is:

localeCompare(compareString)
localeCompare(compareString, locales)
localeCompare(compareString, locales, options)

What is the Intl.Collator?

The Intl.Collator object enables language sensitive string comparison. MDN

For the purposes of this article suffice to say .localeCompare() can be your entry point to the world of the Intl.Collator - there is cool stuff in there.

The collator allows for specific language and character set variations (locales). [see note 1 below]

What's that mean for sorting? Well, it lets us sort strings and take into account language and character set variations. Let's look at a couple examples.

Default Sorting

First, remember that the standard string sorting functions evaluate based on unicode values, and sort based on those. So - let's look at those too:

Char	Unicode
a	0061
A	0041
ä	0228
n	006E
N	004E
ñ	00F1

Don't forget! ... capitals and lower case letters also have different unicode values. Which means an uppercase A comes before a, which comes before ä.

What happens if we use array.prototype.sort() on these and sort in place?

arryA = [ 'a', 'A', 'ä' ]
//=> [ 'a', 'A', 'ä' ]
arryA.sort()
//=> [ 'A', 'a', 'ä' ]
arryN = [ 'n', 'N', 'ñ' ]
//=> [ 'n', 'N', 'ñ' ]
arryN.sort()
//=> [ 'N', 'n', 'ñ' ]

We can see it is simply organizing our characters by unicode value. What about making our sort a bit more...well travelled? A bit more...sensitive to different locales...

Basic alpha sort with `.localeCompare()`

The construction of .localeCompare() is different than .sort() because it is comparing a string against another string. Compared to .sort() which sorts an array in place.

'a'.localeCompare('ä')
//=> -1
'a'.localeCompare('a')
//=> 0
'a'.localeCompare('A')
//=> 1

Without any options .localeCompare() is doing the same as the basic sort. Let's add in some sensitivity options:

'a'.localeCompare('ä', undefined, {sensitivity: 'base'})
//=> 0
'a'.localeCompare('a', undefined, {sensitivity: 'base'})
//=> 0
'a'.localeCompare('A', undefined, {sensitivity: 'base'})
//=> 0

Let's look at each piece of the .localCompare() call and talk about what is going on.

'string1'.localeCompare('string2', 'en', {sensitivity: 'base'} )

string1 and string2 are our strings to compare
'en' is English, for the language set to use for our comparison
{sensitivity: 'base'} is the level of sensitivity that javascript will apply to the comparison. 'base' allows for letters of the same base to be evaluated equivalently, disregarding things like umlauts or capitalization - an A is an a is an ä (in this specific case at least). There are a few other sensitivity options, see all the options here.

Ok, so we're seeing that you can use .localeCompare() to smooth out alphabetical sorting, but ... what about numbers?

Numbers are totally international!

Weirdly enough, trying to use .localeCompare() for numeric sorting is what send me down this road in the first place. My initial research said it wasn't possible, but what I learned is: it works, and it's pretty cool! So, why the hubbub? Well, remember this is String.prototype.localeCompare() meaning that it's really only wants to work on strings, not numbers. But, thanks to the right settings you can worry no more about having numbers in your strings (I'm thinking street addresses).

// top examples establish how the comparison works
"a".localeCompare("b")   
//=> -1   // "a" comes before "b"
"1".localeCompare("2")   
//=> -1   // "1" comes before "2"
"1".localeCompare("1")
//=> 0   // "1" is equal to "1"
"1".localeCompare("0")
//=> 1   // "2" comes before "1"
"1".localeCompare("01")
//=> 1   // "01" comes before "1"  // huh, that's weird
// depending on your situation this might be ok, or problematic.
//
// Add in the numeric option
"1".localeCompare("01", undefined, {numeric: true})
//=> 0
"11".localeCompare("11", undefined, {numeric: true})
//=> 0
"11".localeCompare("011", undefined, {numeric: true})
//=> 0

Conclusion

Using .localeCompare() for standard string comparison works nicely, and it even works if you're mixing numbers into your strings. I know that I'll be keeping these sorting options available to me if I'm working with anything with the possibility of international addresses!

The Intl.Collator is outside of the scope of this article, but if you're working with data that needs to account for language variations I'd recommend checking it out!

my code coda

1) Thanks for reading, if I got something wrong let me know!

2) There are always things to improve - what could we do better here?

notes

1 The Intl.Collator yields great performance value over using localeCompare() on its own when working with large datasets - I'd urge you take a deep dive into it if you're working with large datasets.

2 - in German a and ä have the same base letter, the same goes for Spanish with n and ñ - which means they evaluate to the same value with sensitivity. In languages like Swedish which have differing base letters for ä and a they are evaluated separately.

Custom Loading Animation on Fetch Call in Vanilla Javascript / CSS / HTML 5

hariseldon27 — Mon, 07 Feb 2022 14:01:34 +0000

Do you have an API call that is sorta slow, and you want to keep your user occupied while it loads and you're not quite sure how to do it? Well, it's easier than you'd think!

Why a custom loading animation for vanilla javascript? Meh...why not?

This blog post comes out of the project that I co-created for the first phase of the Flatiron School Software Engineer Program. We built a game that called the Met Museum API, which was really neat! Unfortunately, it had to make 4-7 API calls per game-round to make sure it got enough clean data. Eventually it all worked, but it took as much as 5-seconds for the API calls to return and the Dom to update.

Seeing those gross loading times puts us in a good place to explore where to go next.

User Experience

The biggest UX issue we have is that when you finish a round the game appears to be frozen while it's waiting for the new data to load.

UX is more than just making things pretty - it's about making the experience more responsive to the user's needs

Even though the final version of the game implements a few modal windows to occupy the user, we wanted to really cover the loading time with some branded loading animation. As it turned out it was pretty straight forward to hook a loading animation into the asynchronous fetch call.

Now, let's be straight: there's lots of ways to implement a loading spinner - this way is fine for small special applications. Is it what I'd use in any kind of larger deployment, even a vanilla javascript one? No, no I probably wouldn't But, this is a cool little trick to get things going in a single page application.

What are we doing for a loading animation?

Our loading animation is pretty simple, we're going to embed an animated SVG in a hidden div, and when we call it with Javascript it goes from hidden to visible. Pretty easy - let's see how it's done!

Animated SVG in a Hidden Div

^Sounds like the title of a Russian fairy tale.

So, how about that animated SVG I keep talking about, what's that all about? Let's see:
SVG stands for Scalable Vector Graphics, and it's basically an inbuilt vector rendering engine that is XML based. So, what it takes to get it going is the same as everything else around here, a bit of code.

Try this one below, it comes from Mozilla MDN and is a lovely example.



<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <path fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  <circle r="5" fill="red">
   <animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
  </circle>
</svg>

What the heck, let's use that as part of our example. Put that svg into a Div at the bottom of your body section, set it to display:none and then set a few more options to get the background to cover the page. And the easy way to do it is to simply change the display: none to a display: block (or whatever you need) when the right moment occurs in your script.

See it in action on repl.it here:

Hooking it to the Fetch Request

Yeah yeah yeah - okay we get it - it's easy as pie to make a hidden div appear. And yeah, we get it - maybe it isn't the cleanest way to do it, but if when push comes to shove and you can only have one file it's a worthwhile tool to have around.

So how do we go about hooking the appearance of our cool new loading animation that we ~~stole~~ borrowed from MDN? Well, it's pretty easy actually. But, it's worth talking a little about about how to ensure you are making an asynchronous fetch request first.

Async Await / Fetch - a toast to the happy couple

In order to improve the user experience of sites that rely on calls to servers or APIs for information, Javascript gives us a neat way to manage what code is running when.

Under normal circumstances our code runs in more or less a linear fashion in Javascript - aside from neat features like function hoisting and scope. However, we can ask Javascript to treat a function asynchronously from the other code that it's being asked to execute. This also means we can ask other functions to await that asynchronous code to finish before it tries to complete its task. We will make use of this in our fetch call, especially with our loader in mind.

To move your fetch function into the asynchronous pile put async before the function declaration like so:



 async function goFetch(data) {
   fetch("apiurl.com/endpoint")
   .then((resp) => resp.json())
   .then((data) => doSomething(data))
}

Then in our callback function we can simply remind it that it needs to await that fetch to complete before it tries to run.



await function doSomething(data) {
    console.log(data)
}

So where do we hook in the loading animation? Well, we've already got our fancy-schmancy show/hide functions in JS if you remember.



const loadingDiv = document.getElementById("loading");
loadingDiv.addEventListener('click', hideSpinner)

function showSpinner() {
  loadingDiv.style.display = 'block';
}

function hideSpinner() {
  loadingDiv.style.display = 'none';
}

Those showSpinner() and hideSpinner() functions can just go at the points where it makes sense: show it right after the fetch, and hide it right after we finish populating the dom with data.

In our Met Guess game we fire the showSpinner() function right after our very first fetch request, and we don't run the hideSpinner() function until after the API returns data. What could we have done better? Well, look at the console logs and see if you can guess! If you said, have the spinner appear immediately and then stay up until the DOM render completed, you're right...always room for improvement around here!

See that cool codepen here:

Conclusion

In this post we've talked about why we might want to use a loading animation, we looked at one sorta janky way to implement it, and more importantly we looked at a way to hook your loading animation into the fetch call of your Javascript.

Have questions? Me too! Let's talk.

I respond to any and all responses!

Starting Week 1

hariseldon27 — Tue, 18 Jan 2022 16:41:16 +0000

What a week! After living my whole life around code, today marks the first seven days of actually dedicating time and resources to learning code full time. It is exhausting.

I'm loving every console.log('Hello World') and fetch request. Week one of the 15 week Flatiron Software Engineering course got me through DOM manipulation and JSON parsing.

Finishing week 1 on JSON data felt like a good place: there is something magical about a nicely formatted data set.

I expect that I'll have more data-related posts in the future, for now I'll leave with something I was thinking about while walking the dog this weekend:

Array and frame of reference within in a delimited space: If we are shifting and unshifting data around in an array, in relationship a single piece of data what are we doing? Are we moving the data around within the array, or are we shifting the array's frame of reference. This question arises for me when thinking about shifting data around in an array as if it were a playing board (tetris or chess for example). If I move a piece one slot left, is the piece moving or are we moving the whole frame of reference for the array.

Would a more efficient way would be to swap positions for the data with the element next to it rather than actually moving all the data around it?

More to come, specific examples. For now, on to week 2 and our first code challenge.

New beginnings

hariseldon27 — Mon, 10 Jan 2022 05:15:35 +0000

Twilight on the start of the next chapter

It's 8:50pm on Sunday January 9th, 2022. Tomorrow I am starting the Flatiron full time 15-week Software Engineering intensive program. I'm both excited and nervous - as one would expect. I'm genuinely excited to be diving in and learning some new languages. I think what I'm most excited about is the chance to put some of the more academic logic that I've learned to work in a formal programming setting. That is very very appealing to me. Abstraction has always sort of been my thing any way...

Humble Beginnings

It's weird to think that I've literally been around computers for as long as I can remember. Before it was normal to have a computer in your room, I had a huge hulking box humming away in the corner of my childhood bedroom. We flirted with 386's and 486's as kiddos, and by the time I was in high school it was Pentium's and the sinking too much money into video cards. It feels like a shocking oversight that I haven't seriously tried to get into tech previously.

Honest Goals

Since I really don't know what to expect out of the coming weeks and months I can't really set any specific goals, but I do want to be true to my career thus far: to keep exploring storytelling through new media; to be professional and expect the best of your colleagues; and to create space in projects to hold up the unique experiences of my collaborators.

Here we go

It's been a sort of wacky few years, with lots of false starts. I truly hope that this isn't another one.

DEV Community: hariseldon27

Why I care about headless architecture.

Why I can't post on social media regularly

Data drives the digital experience

Who cares about separation of concerns?

What is headless first CMS?

Use Cases?

Use case 1: Dance Company Marketing

Use case 2: Point of Sale and Event Marketing

I like big orchestras

Coda

Using Javascript to fix Wordpress annoyances in a wordpress-y way

Wordpress: Whoas & Woes

Vanilla Javascript to the rescue

Wordpress Plugins are the worst

As simple as .append and .prepend

Thank goodness for Wordpress permalinks

Conclusion

ActiveRecord Dependent Options

Validations, Relational Databases, Happiness and Fulfillment

ActiveRecord associations - with great power...

Our ERD...

What is the :dependent option?

Options to the rescue!

The options :dependent offers our associated data!

ActiveRecord & Rails as safety net

Keep it hot

.localeCompare() and sorting in Javascript

Why write about sorting

What else is out there?

Some other worthy reading if this is your first stop:

localeCompare and the Intl.Collator

What is .localeCompare() ?

What is the Intl.Collator?

Default Sorting

Basic alpha sort with .localeCompare()

Numbers are totally international!

Conclusion

my code coda

notes

Custom Loading Animation on Fetch Call in Vanilla Javascript / CSS / HTML 5

Why a custom loading animation for vanilla javascript? Meh...why not?

User Experience

What are we doing for a loading animation?

Animated SVG in a Hidden Div

Hooking it to the Fetch Request

Async Await / Fetch - a toast to the happy couple

Conclusion

Starting Week 1

New beginnings

Twilight on the start of the next chapter

Humble Beginnings

Honest Goals

Here we go

What is the `:dependent` option?

The options `:dependent` offers our associated data!

What is `.localeCompare()` ?

Basic alpha sort with `.localeCompare()`