Do you want to save 80% of your bandwidth to your search provider? Do you want to deliver content to your users faster? With this one tr...
Development Elasticsearch DebuggingWe operate in a typical QA -> Production workflow on both our front-end and back-end teams. So, what happnes when your front-end is in...
Development JavaScript Dev Ops Vue Vue.js JekyllIf you’re not familiar, or just haven’t used Sass maps, here’s your chance to dive in. Our latest static site was built on Jekyll using ...
sassIn JavaScript, we are always working with different data types to send to the API or display on the UI. Cloning and altering that clone i...
JavaScriptC# being an Object Oriented Programming (OOP) language, we have access to inheritance. Like any feature of a programming language, you sh...
csharp bugsWe love the combination of SQL and Elasticsearch and believe it is a winning combination for anyone building a modern application. Elasti...
Elasticsearch NEST C#I’ve been watching [DotNetConf][dotnetconf] videos over the weekend, and was most curious about [Mads Torgersen’s][mads] [“What’s Coming ...
c-sharp C# .NETHugo is an amazing static site generator, but getting lost when templating is easier than we’d like. We’ve found a way to evaluate variab...
Hugo JAMStack StaticRegardless of your opinion on Object Relational Mappers (ORM), I think they are a great tool for prototyping ideas. Over time, they can l...
.net core sqlDealing with JSON data in SQL Database introduces several challenges. This post addresses querying json data stored in SQL Database that...
SQL Azure Database developmentWe are in the middle of writing a template engine to define dynamic forms. The user interface can only post to a known model on the serve...
C# developmentWe are living on the bleeding edge that is Hugo’s release cycle. To keep our macOS development environments up to date we wrote this shel...
developmentHugo recently released an amazing asset pipeline, which means you need less external dependencies to build a sweet static site. To take a...
dev buildI could probably rant and rave about Internet Explorer (IE) for a couple of hours, reminiscing about busted box models, janky IE specific...
IE Development JavaScriptVue has been a delightful framework to work with. The first thing I noticed about it was how easy to follow the documentation was and how...
Vue Development JavaScriptWith the news that Microsoft is acquiring GitHub, I thought I would ask the team what their thoughts are on the topic. We utilize the .NE...
Security is an essential part of any application ecosystem, but it can also be a nebulous concept for an organization to grasp. During ou...
developmentLet’s say you are developing a new Infinity War SQL stored procedure. Thanos, your boss, has explicity told you to add validation to a st...
development c# sqlData can often be messy and cleaning it up falls on the shoulders of you, the developer. It’s also easy to search StackOverflow for compl...
developmentReferencing nested objects in your LINQ to SQL query does some pretty neat magic “behind the scenes”. But, there are occasions when its m...
EF SQLIn today’s front-end ecosystem we are breaking down code into separate files and importing them. This helps us separate out code and reuse it more effectively. Vue does this in components similar to the way React does it. We have been using Vue in our projects lately and we love it so far because it’s progressive in nature. We can do a variety of things from plugging it into existing applications to add new features and give the user a smoother experience to creating full blown SPAs with it. We have run into a few snags, not completely the fault of Vue. Importing components from obscure locations is something that has been around for some time. Dealing with relative paths is not a problem for smaller projects but can become an issue as the project grows. With a little tweaking to our webpack file we can implement a “root path” into our Vue applications.
When you need to import a component that is three or four directories away. For example,
-src
- Calendar
- Components
-Day.vue (current)
- CalendarComponent.vue
- Filters
- DateConversion.js
To import DateConversion.js in the Day.vue component would include the import like the line below,
import TimeConversion from '../../Filters/DateConversion'
We are going to use Vue vue-cli tools to generate a web app. This way we have a folder structure that is standard for everyone. After you are done with your setup the folder structure should look similar too,
In the build/webpack.conf.js folder we are going to find the resolve object and add
modules: [
path.resolve('./src'),
path.resolve('./node_modules')
]
The first item in the array is where we are going to set the “root path” for our application. I chose the src folder because by default this is where our application lives. If you change the folder structure in your own development, don’t forget to update it here. Using the folder structure above and with our modules set, we can now import
Filters/DateConversion
This can clean up our code as the application continues to grow and reduces mistakes when trying to import long relative paths. This doesn’t remove the option for relative path imports either, so now we have the best of both worlds.
