Skip to main content

Posts

Showing posts from March, 2020

Sitecore with VueJS: Reserved Attributes and Ignored Elements

VueJS Strips Reserved Attributes on Ignored Elements Experience Editor is what makes Sitecore EXTRA amazing as a CMS. Don't get me wrong it has alot to offer but the "oohhh ahhh WWoooWws" happen when it starts showing off what it can do through the experience editor. One of the gotchas I ran into when connecting Sitecore and VueJS (and I'm sure its the same for any framework that crawls the DOM to figure out what it should be doing) is that sometimes attributes can conflict with each other. In VueJS world it thinks its a vuejs attribute and will remove it from the dom and try to use it. Unfortunately even on ignored elements it will still strip its reserved attributes... Which breaks the experience editor with sitecore... The Problem VueJS removes Sitecore's attributes like "key" from the DOM even on elements that are marked to be ignored. There could be other conflicts but this is the one that got me. The Solution To make these conflict...

Soft Skills: Communicate on Another Level

Communicate on Another Level Over the years I've dedicated a lot of energy into being able to communicate and understand Project Managers, Product Owners, Programmers with various skill levels and specializations, and APIs. However, that list doesn't include anyone with a broader level of concerns. The past couple years I've noticed I've had to communicate more and more with Executives, Business Owners, and Managers of various levels more and more as my responsibilities increase and my impact on projects become greater. So the goal is to learn to communicate with people who care less about the inside workings of the project at hand and more about funding, timeline, overall health, and impact of multiple projects. Ground Level I am a software engineer. I understand how code works and how to take an end goal and break it down into smaller tasks for success including the fine intricate details. I can organize code and explain how code works with other sets of code or...

Sitecore with VueJS: Html Fragment Module

Sitecore Module for VueJS I recently worked on a Sitecore 9.1 project where we got the chance to use a front end framework called VueJS. If you haven't had the chance to work with VueJS you should check them out  https://vuejs.org/ . It was very nice to work with once we got through some of the kinks. One of those issues was that VueJS is driven by javascript (duh!)...not HTML....You know what likes to spit out HTML though? Sitecore! The Challenge How do we make it so we can use Sitecore's placeholders and Sitecore's render methods with all of the nesting glory that can be done with them into a VueJS template? The Solution To make a VueJS component that accepts the same formats Sitecore uses of course! Under the hood, Sitecore renders a begin tag element and an end tag element. What we know: The most basic render method just takes those two properties and slaps them together to form a whole html element. VueJS utilizes a simple tree structure for components ...

Featured

Sitecore with VueJS: Reserved Attributes and Ignored Elements

VueJS Strips Reserved Attributes on Ignored Elements Experience Editor is what makes Sitecore EXTRA amazing as a CMS. Don't get me wrong it has alot to offer but the "oohhh ahhh WWoooWws" happen when it starts showing off what it can do through the experience editor. One of the gotchas I ran into when connecting Sitecore and VueJS (and I'm sure its the same for any framework that crawls the DOM to figure out what it should be doing) is that sometimes attributes can conflict with each other. In VueJS world it thinks its a vuejs attribute and will remove it from the dom and try to use it. Unfortunately even on ignored elements it will still strip its reserved attributes... Which breaks the experience editor with sitecore... The Problem VueJS removes Sitecore's attributes like "key" from the DOM even on elements that are marked to be ignored. There could be other conflicts but this is the one that got me. The Solution To make these conflict...

Other Articles

Sitecore with VueJS: Reserved Attributes and Ignored Elements

VueJS Strips Reserved Attributes on Ignored Elements Experience Editor is what makes Sitecore EXTRA amazing as a CMS. Don't get me wrong it has alot to offer but the "oohhh ahhh WWoooWws" happen when it starts showing off what it can do through the experience editor. One of the gotchas I ran into when connecting Sitecore and VueJS (and I'm sure its the same for any framework that crawls the DOM to figure out what it should be doing) is that sometimes attributes can conflict with each other. In VueJS world it thinks its a vuejs attribute and will remove it from the dom and try to use it. Unfortunately even on ignored elements it will still strip its reserved attributes... Which breaks the experience editor with sitecore... The Problem VueJS removes Sitecore's attributes like "key" from the DOM even on elements that are marked to be ignored. There could be other conflicts but this is the one that got me. The Solution To make these conflict...

Soft Skills: Communicate on Another Level

Communicate on Another Level Over the years I've dedicated a lot of energy into being able to communicate and understand Project Managers, Product Owners, Programmers with various skill levels and specializations, and APIs. However, that list doesn't include anyone with a broader level of concerns. The past couple years I've noticed I've had to communicate more and more with Executives, Business Owners, and Managers of various levels more and more as my responsibilities increase and my impact on projects become greater. So the goal is to learn to communicate with people who care less about the inside workings of the project at hand and more about funding, timeline, overall health, and impact of multiple projects. Ground Level I am a software engineer. I understand how code works and how to take an end goal and break it down into smaller tasks for success including the fine intricate details. I can organize code and explain how code works with other sets of code or...

Sitecore with VueJS: Html Fragment Module

Sitecore Module for VueJS I recently worked on a Sitecore 9.1 project where we got the chance to use a front end framework called VueJS. If you haven't had the chance to work with VueJS you should check them out  https://vuejs.org/ . It was very nice to work with once we got through some of the kinks. One of those issues was that VueJS is driven by javascript (duh!)...not HTML....You know what likes to spit out HTML though? Sitecore! The Challenge How do we make it so we can use Sitecore's placeholders and Sitecore's render methods with all of the nesting glory that can be done with them into a VueJS template? The Solution To make a VueJS component that accepts the same formats Sitecore uses of course! Under the hood, Sitecore renders a begin tag element and an end tag element. What we know: The most basic render method just takes those two properties and slaps them together to form a whole html element. VueJS utilizes a simple tree structure for components ...