Adding Social Share Links in Eleventy / / No Comments One common feature of content sites (including this one), is links/buttons/etc to share a piece of content on social media. Typically this is Twitter, but many sites will include ways to share links on Facebook, LinkedIn, and more. A reader asked me a few days ago about how this could be done in Eleventy and I thought I’d share a quick example. Raymond Camden… more → Posted in: JavaScript Tagged with: Adding, Eleventy, links, share, Social
git Force Push / / No Comments Rebasing is a frequent task for anyone using git. We sometimes use rebasing to branch our code from the last changes or even just to drop commits from a branch. Oftentimes when trying to push after a rebase, you’ll see something like the following: hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. Commonly developers will use the --force or -f flags during a push to force pushing code changes: git push origin my-branch --force # or git push origin my-branch -f I was recently... more → Posted in: JavaScript Tagged with: Force, Push
Specify Node Versions with .nvmrc / / No Comments I’ve heavily promoted nvm, a Node.js version manager, over the years. Having a tool to manage multiple versions of a language interpreter has been so useful, especially due to the complexity of Node.js package management. One tip I like to give new developers is adding a .nvmrc file to their repositories. The file contents is just a simple string representing the version of Node.js the project requires: v16 A project with this .nvmrc is specifying that Node.js v16 should be used. Any developer could then run nvm use to download, install, and switch to that version. A nvm install call would then install dependencies in line with that version. The post Specify Node Versions with .nvmrc... more → Posted in: JavaScript Tagged with: .nvmrc, Node, Specify, Versions
Building a Web-Based Badge Scanner / / No Comments I’m at a conference now working a booth (well, at least when I started writing this), and I really didn’t realize how much I enjoyed this part of the job. While I’ve attended a few conferences post COVID (err, well, "post" may be too strong of a word), this is the first booth I’ve worked at in years. One of the first things I did when I arrived was check and see how we were going to get contacts via badge scanning. Not surprisingly, the conference organizers suggested a native app. Me being me – I immediately thought of how the app’s features could be accomplished via the web. There’s nothing wrong with the... more → Posted in: JavaScript Tagged with: Badge, building, scanner, Webbased
How to Migrate from Lunr to Algolia – a Technical Guide / / No Comments Search is an incredibly important aspect of any site hosting even a small amount ofcontent. How quickly your site can provide search results and how well your resultsmatch the user’s intent is critical. There are multiple search options available fordevelopers, and so sometimes in the pursuit of speed and relevance, a site will migratefrom one service to another. In this article, I’m going to present a use case for why a sitemay move from a self-hosted solution like Lunr to a server-based solution like Algolia. I want to stress that this is not meant to be an attack on Lunr, but more where it would beappropriate for a site and what the benefits... more → Posted in: JavaScript Tagged with: Algolia, from, Guide, Lunr, Migrate, Technical
How Plugins Enhance The WYSIWYG Editing Experience (Sponsored) / / No Comments Image by JK_Studio from Pixabay WYSIWYG editors are one of the core components of any content management system (CMS). A well-coded, feature-filled WYSIWYG HTML editor can distinguish between a CMS users love and one they can’t stand. While all WYSIWYG editors have a set of basic functionality, the power of plugins enhances the editing experience. Plugins allow WYSIWYG editors to do more and provide advanced features to users. Therefore it is important to look at some of the plugins that make some WYSIWYG editors rise above others. It’s also essential to check how easily you can add these plugins. In this article, we’ll be taking you through the world of WYSIWYG editors... more → Posted in: JavaScript Tagged with: editing, Enhance, Experience, Plugins, Sponsored, WYSIWYG
JavaScript Event.defaultPrevented / / No Comments Whether you started with the old on_____ property or addEventListener, you know that events drive user experiences in modern JavaScript. If you’ve worked with events, you know that preventDefault() and stopPropagation() are frequently used to handle events. One thing you probably didn’t know: there’s a defaultPrevented proptery on events! Consider the following block of code: // Specific to a link const link = document.querySelector('#my-link'); link.addEventListener('click', e =e.preventDefault()); // A larger document scope document.addEventListener('click', documentClickHandler); function documentClickHandler(event) { if (event.defaultPrevented) {// Using the property... more → Posted in: JavaScript Tagged with: Event.defaultPrevented, JavaScript
Generating Zips in an Eleventy Site / / No Comments Here’s an interesting question. Given an Eleventy site that has dynamic resources of some kind, how could you provide a way to get those resources in one simple zip file? Here’s how I solved that problem. Raymond Camden… more → Posted in: JavaScript Tagged with: Eleventy, Generating, Site, Zips