Configure the relative serialization path correctly. In Microsoft NTFS the maximum length is 240. In SCS the content serialization path size limit is defined in the settings, by default, the value is 100.
3. Sequence is most important while defining the module.json – As a rule of thumb with Sitecore, all the dependencies should be defined first, for example before defining the content we have to define the templates, layout and rendering etc.
Unicorn was the most popular plugin for content serialization. It was very straightforward and well managed; all the documents were very descriptive and easy to understand. Now we have Sitecore Content Serialization (SCS), I think we must understand what has changed. Are we losing or gaining any functionality? what changes are required to our existing setup? Re there any changes in terminology etc?
This blog has been split into three parts, and this is part two.
Below is the high-level comparison between Unicorn and SCS.
SCS has an additional Visual Studio plugin to manage Content.
SCS configuration is based on JSON files and Unicorn configuration is based on XML.
The configuration file naming convention is different. The SCS configuration file names contain modules for identification and Unicorn configuration contains serialization – Although this is configurable.
The initial setup is different. For SCS we have to setup the package and to enable the CLI it’s required to install the packages.
Difference in global/shared configuration
Difference in project level configuration.
SCS provides more flexibility for rule based configuration, for each feature we can define a rule and each rule has the option to define the path, scope and allowed PushOperations etc.
There are changes in the configuration.
When using Unicorn we used to define the dependencies and extends options
Sitecore has introduced Sitecore Content Serialization (SCS) as part of version 10. In this blog, I will explain the basic concept of serialization and compare all Unicorn features, followed by steps for the basic setup and best practices.
This blog has split into three parts, and this is part 1.
Let’s first try to understand the definition, Serialization is the process of translating a data structure or object state into a format that can be stored (for example, in a file or memory data buffer) or transmitted (for example, across a computer network) and reconstructed later (possibly in a different computer environment) – Wikipedia
Sitecore Content Serialization (SCS) is a system for serializing, sharing, and deploying content items, as well as keeping them in version control – Sitecore
Now, we know the definition of serialization. I remember with the Sitecore 6.X Serialization guide we had an option to serialize the item tree and restore it, there were additional options to configure the serialization based on the events like item saved, created, deleted etc. and we were using SVN to store those serialized files.
TDS was beneficial to manage the project and item files. I used TDS a lot with Sitecore 6.X versions. We were also using this as part of the deployment process as the underlying TDS was using the MSBuild project file to group the Sitecore items into a deployable project. Additionally to that, it has the below features which are not part of SCS.
File deployment into a local Sitecore instance
Web Deployment Package (WDP) generation
Note – Paid license is required for TDS and the cost was around USD 400
Unicorn is a Sitecore utility and it is open source. It solves the issue of moving templates, renderings, and other database items between Sitecore instances. TDS is a monolithic product with commercial support, and marketing does a lot more than just serialization. Unicorn is relatively simple, free and open-source, and does one thing well.
I prefer using Unicorn instead of TDS. Generating the TDS code was not that easy and always needed to take care of the partial class, unnecessary field generation, etc. We can set up the template class following the helix principals.
SCS will do the out-of-the-box item serialization that lets you automate the synchronization of item changes. It has two options one is using the command-line interface (CLI) and the second Sitecore for Visual Studio (SVS)
Note – for using SVS it’s required to get the license and TDS and SVS are both offered under the same license.
Sitecore has recently introduced a development SDK with ASP.NET Core. In this blog, I will explain why it’s super important for the Business to start thinking about it and how it will change the way of Sitecore development.
In my view, technology is an essential part of running a successful business, and it keeps changing for a better purpose. It’s tough for the Business to make the right decision to choose the right technology and plan for the investment as there are a lot of factors involved like cost, technology choice, stability, future, support, extension, security, machine learning, AI, robotics etc.
Off Couse, every Business would prefer to make a one-time investment and to reuse that investment to cater to any new technology.
Is it possible today to make a one-time investment? I think it’s not, but a company like Microsoft and Sitecore they have been putting all efforts to make it happen and the release of Sitecore with ASP.NET core SDK is a big step towards that dream. In my opinion, The secret of success is to make the right choice at the right time, and don’t devote all energy in fixing the old guys.
Before getting into more details, Let’s understand the key part of the puzzle..
Why Sitecore with ASP.NET Core is so important?
Microsoft has started moving all the focus from the previous development framework (.NET Framework) to .NET Core, Why?, Okay, because .NET Framework 4.8, which was announced on 18th April 2019 will be the last major version of .NET Framework. The visual studio which is the primary IDE for the most of the development is itself is built-in .NET Framework, Although Microsoft will continue to provide the support, as I said in my first few lines, It’s a matter of making the right decision at the right time. below are some key features and needs for the changes.
Cross-platform & container support
Asynchronous via async/await
Unified MVC & Web API frameworks
Multiple environments and development mode
WebSockets & SignalR and Cross-Site Request Forgery (CSRF) Protection
“Self hosted” Web Applications
Globalization and Localization
Swagger OpenAPI built in
Microsoft has already planned roadmap until 2023 releases, so this shows how important it’s that Sitecore goes with the .Net Core platform.
The most important part is, there are a lot of front end technology like Angular, React, Vue.jS, Flutter, Microsoft has launched the new platform called Blazor which will allow C# developer (Sitecore technology) stack to write the web interactive UI through the same language, WOW that’s really amazing, Microsoft has already unified the infrastructure with Azure Cloud provider, development technology with .Net Standard and front end technology through Blazor, so now to develop any complex code that includes Azure, backed like Machine learning , AU and front end all can be done through the same technology and Sitecore has release official SDK for that, so that’s the reason is very important for the business as well as for the development.
Let’s talk about the development and architecture
There are two main parts, One is rendering host front end and second is Sitecore instance backend.
Rendering Host – The rendering host front end is a web app made up of the Sitecore ASP.NET Rendering SDK code and static resources. The job of the rendering host is to respond to visitor requests.
The Sitecore instance– exposes a set of endpoints like web based native rendering hosts or third party integration
Follow these steps in case of any error, Please see the reference in Troubleshooting section in the below page.
Below are simple command to setup the local environment.
dotnet new -i Sitecore.DevEx.Templates --nuget-source https://sitecore.myget.org/F/sc-packages/api/v3/index.json (Install template)
dotnet new sitecore.aspnet.gettingstarted -n MyProject (Create a new project)
.\init.ps1 -InitEnv -LicenseXmlPath "<path to your license.xml file>" -AdminPassword "<your Sitecore administrator password>“ (Prepare the container)
.\up.ps1 – (Download the Sitecore Docker images and install the containers)
Docker-compose up –d and Docker ps -a
Once you follow above steps, You should be able to see the working Sitecore instance running inside docker with ASP.NET core.
2. Below are the steps to setup the JSON rendering.
C:\Program Files\dotnet\sdk\5.0.100\Sdks\Microsoft.NET.Sdk\targets\Microsoft.PackageDependencyResolution.targets(241,5): error NETSDK1005: Assets file ‘C:\build\src\rendering\obj\project.assets.json’ doesn’t have a target for ‘netcoreapp3.1’. Ensure that restore has run and that you have included ‘netcoreapp3.1’ in the TargetFrameworks for your project. [C:\build\src\rendering\renderinghost.csproj]
Initially, I thought it’s related to version, As I had installed both dotnetcore SDK 3.1 and 5.0, but finally had to update above command.
Extension – In case if need any extension like xConnect events and to trigger a goals, there are always a way, We can Instantiate client in a non-Sitecore context, Reference Link and can add interaction like to trigger a goal
Finally, A few development tips.
How to check the files running inside the containers through the VIsual Studio.
Dotnet Sitecore Help command
dotnet sitecore --help
Sitecore login command
dotnet sitecore login
Push the serialized items command – SCS (Sitecore content serialization)
Despite everything 2020 threw our way, over at Aceik, we certainly had a lot to celebrate in 2020, including:
PARTNERSHIPS: We partnered with a number of new clients including McGrath, RACQ and the Australian National Maritime Museum on some exciting new Sitecore projects. And we owe a huge thank you to our customers for your support throughout this year. We know it has been incredibly trying and we are grateful that you had our backs. THANK YOU!
TEAM GROWTH: Our team and capabilities grew with the addition of 14 incredibly talented individuals including our first Chief Operating Officer/Creative Director, Head of HR and Quality Assurance Lead, to name a few.
RECOGNITION: Sitecore promoted Aceik to their top partner tier, Platinum, named two of our team members Sitecore MVPs and awarded us the Sitecore Experience Award Honorable Mention 2020 for our work with RAA.
PRODUCT DEVELOPMENT: Last year we launched our new training practice and in 2020, we added 2 new courses to the program, including Creating and Managing Content in Sitecore 10.x and Marketing Foundations for Sitecore 10.x. We wrote a top ranking blog for deploying Sitecore into Kubernetes as well as improving our existing offering – Sitecore Speedy.
Our 2021 plans are equally exciting and we’d love to share a couple with you:
Aceik is planning to expand our creative offering in our endeavour to provide our customers with a genuine end-to-end proposition.
A rebrand is on the horizon.
Sustainable growth is based on insuring our customer success record. We are planning to continue to grow our team, to enable our growth and offering to our customers. Stay tuned for opportunities to join our team! (reach out to email@example.com if you would like to work for Aceik).
It’s also time to diversify the team and so we’re looking to onboard 3 new pups as office mascots (kidding! But were you still reading?).
I know I say this a lot, but I truly mean it when I say, ‘thank you’. Your support has been invaluable and I’m looking forward to continuing our work together in 2021.
We are excited to share that Leah Di Paola, former Group HR Manager for Incitec Pivot Limited. has joined Aceik as our Head of Human Resources.
The appointment highlights Aceik’s desire to introduce more and more brands to the power of Sitecore, to enable them to drive personalised experiences and positive marketing ROI.
Di Paola has more than 15 years experience in human resources, having worked in industries such as Explosives and Fertiliser Manufacturing with Incitec Pivot and Dyno Nobel, Resourcing with Hudson Global, Procurement with the Charted Institute and Sporting Events with the Melbourne Commonwealth Games.
“I’m thrilled to be joining the multi-award winning Aceik, and am looking forward to contributing to the business’ success by empowering our people, enhancing the employee experience, and acquiring talented resources to support our clients and Sitecore relationships,” said Di Paola.
Jason Horne, Chief Executive Officer at Aceik said, “Aceik’s Sitecore knowledge is vast and our agility is unmatched. We keep up with evolving technology and can change direction more easily than larger companies, giving our clients the most innovative Sitecore solutions to their business problems.
Horne continued, “Helping our clients to realise the full potential of Sitecore’s experience platform is at the centre of everything we do. With Leah’s expertise, we’re looking forward to hiring and fostering talented developers, architects and designers to the team that will create stronger long-term relationships with our clients and Sitecore”.
What makes a remote workshop so different? And how can you make it work for your team? A practical guide for running remote workshops – specifically design workshops – that work and deliver results.
Work from home policies and remote collaboration don’t need to put workshops on hold or detract from their value. But online workshop do you need to be rethought in a few ways to ensure the business outcomes are achieved.
There is plenty of advice available for those looking to run any kind of a virtual workshop but I wanted to talk to the special requirements for a design workshop. Below I will guide you through how to facilitate a remote design workshop so its most effective.
How are remote workshops different?
First, let’s talk about how remote workshops are different to in person workshops.
Reduced depth of conversation: intonation and body language carry significant amounts of meaning but these pretty much vanish during an online workshop. Even with videos turned on and good internet it’s easy to miss visual cues.
Increased levels of distraction: emails, text messages, Slack/Messenger/Teams, your dog in the room and learning new tools are all the result of not having a dedicated workshop space.
Reduced effectiveness of tools and methods: post-it notes and whiteboards take on different forms when online and sometimes these aren’t as effective as in-person.
Reluctance to actively participate: Creative teamwork takes trust and it can be difficult to build trust over a remote connection.
Advice for a successful remote design workshop
I’ve been running design workshops (in-person) for many years now but we recently ran a design workshop for a new client and I wanted to share the extra steps we took to ensure high engagement from all participants. Let’s dive into those now.
Prior to workshops, advise people to be on time, joining midway will derail the agenda for the group and usually ends up causing topics to be repeated.
Organise a workshop assistant to lookout for participants who wish to speak that may be missed by facilitator. Facilitator may miss participant’s body language signs in the video grid while working with the tools, and they may also be unfamiliar with the introverts in the group. The workshop assistant should know all participants and encourage equal contributions from everyone in the group.
I suggest that participants bring and use a mouse and not use trackpads for interactive workshops. We’ve seen some participants having issues with clicking and dragging items around on trackpads.
I highly recommend participants connect to an external larger monitor if they are working on a laptop as it can help with viewing smaller details on the screen.
I’m a huge fan of Miro, a collaborative online whiteboard platform designed for remote and distributed teams. But if you are going to use Miro then I recommend familiarising yourself and other participants with the platform in advance of the design workshop. A few tips to help with this:
Tutorials are required for the first workshop participants.
Conduct an tool-familiarisation exercise to get participants to write their name on a sticky note then move into a designated area in a workspace.
An ice breaker is required for the first workshops to ease participants into doing workshop activities. We love a simple ‘price is right’ guessing game of three items which we prepared in advance. It’s not too hard, provides a little competition and fun without being so technical that some group members won’t be able to participate.
Running a remote workshop requires additional levels of focus and leadership to ensure engagement and participation from all attendees. To summarise:
Set up ice breaking activities
Set ground rules to reduce distractions
Ensure sufficient breaks to maintain engagement
Document using the tools that meet your workshop needs
Don’t see your question on the list below? Pop it across to firstname.lastname@example.org and one of the team will send you a reply and update this post.
Let’s get into our Q&A with Chung Sham.
Q: You mentioned previously exposing design elements in Sketch. How manual is you needing to expose all of that stuff? The button does not have the font and the specific hex codes and all that sort of stuff. Is that something that you would manually do in Sketch?
Chung: No, there is no process or anything additional that we have to do as part of the design. Sketch, because it is a JSON-encoded file, is where it is getting all this information from. We just hit publish and InVision decouples everything. So, it is a smooth process. You can sort of see here with the text label, we have got the font family, the font size, all that sort of stuff, no additional work on our end.
Q: What you shared is an out of the box Sketch set up. Could you make your own core style sheet page and then have your H1s and feed into your design?
Chung: The short answer is yes, you can set up a Sketch file and put all your H1s, H6s or your icons in a Sketch file and then have that in Abstract and push that into InVision.
The longer answer is that there are other tools available that will help with creating a design system, because then, once you have certain design decisions about why an H1 is the way it is or what fonts were chosen, you can put comments around it and expose that in more accessible way for a website or something like that rather than for Abstract, but yes, is the short answer.
Q: Thinking about responsive designs. If you are designing a component, you end up with different versions, one is for desktop tablet and another for mobile. Is that for just one design file? Does it actually have any tools to go? Okay, his container needs to drop it into the next slide. And can you do something like Flexi design or really?
Chung: There are plugins that will allow you to set up Sketch files and build some of those smarts as you change, what we call in Sketch up boards, which is basically the working size of your design. You could start with a desktop, build in some of those smarts using a plugin, for example Anima. And then that will adjust the designs based on the breakpoints that you want. Now, that takes a little bit more work, obviously, because you do have to bake in those designs. So you are not just designing on that up board itself.
Another option is you could have multiple Sketch files at different breakpoints. And just like what you saw with Abstract in the second post, you can have those in different branches. Someone might be working on mobile, someone might be working on desktop. There are a few different ways you could manage that, and every team in every organization is different, but there are ways to do that.
Q: If we end up having multiple Sketch files for different breakpoints because technically, some of those can be not achievable. For example, some designers just go crazy and then just move stuff around in mobile, not making it responsive. This increases the complexity of development. Do you come across any of these challenges and how did you sort of overcome them?
Chung: Yes. So that comes down to, I suppose, the design practice and the designer themselves. What you saw before is the way to manage those design decisions. I think the example would be that you would have three different uploads, freedom files because that just visualizes how certain elements or components should behave down to different breakpoints. And you can share those with the client as well. Whereas if you do bake it in and inside Sketch, you do have to change the artboard within Sketch to be able to see how that behaves. So a lot of times, it is a lot easier for clients to visualize how these three different breakpoints look like and then have comments be placed against it in something like InVision.
Q: Our designers might have ideas around placement. Do you see that more as a collaborative experience between technical and the designer team to go, “Yes, we have worked together to produce this design but there could be technical difficulties and we might need to sort of, it goes kind of both ways.”
Chung: There are a few different deliverables that we designers like. If it is quite a complex component, you might want to start off with a discussion with the developer first, create a wireframe, have a discussion around how that actually behaves before creating a high fidelity version that you would see in Sketch. This is what I’d call design practice for the individual designers, rather than the tools to help solve that.
Q: Let’s say you have a senior designer on the project. Then you bring in more junior designers who are still onboarding and still learning. Do these tools have any provision for you as the lead creative person to place restrictions on things or warnings, let us say? I guess you’d call it an approval workflow but for alerts.
Chung: There is no out-of-the-box function that might facilitate that in Sketch, it will be a lot of basically, communication. But Abstract would be a place where – such as the request review – so if they complete a task, send a request review to whoever the senior lead is and then they can actually see and edit that file if they need to or send it back to the junior designer before merging it back into a brand new milestone.
And we are starting to see plugins for Sketch where if a designer enters a different font, it will say, in real-time, “Hey, this is not part of the design.” But that is still in its infancy, but it is moving towards something like that.
Don’t see your question above?
Pop it across to email@example.com and one of the team will send you a reply and update this post.
Sketch files are managed locally and we still have the problem of how to manage versions on different people’s machines.
For example, you could try design working shifts. You might have Jane, who will work on the website file from nine to twelve and she will make edits to a couple of banners but Jim will work on the website after that from twelve to three because he is going to make changes to the footer. But then Alice might need to work on the main navigation and she will take that from three to six.
This isn’t good enough. We need something that is better able to:
Manage our files.
Work together in parallel. We do not want to work in design shifts.
Preserve the thinking and history of designs because clients might ask for something and we will make a change, but then another designer might be freed up and they will jump on board the project but they might not know the history or the context that they are jumping into and make changes that aren’t based on current information.
Communicate and collaborate
Scale: onboard new team members, preserve team knowledge and have context around all design decisions
This is where Abstract helps
Abstract is one place to manage your design versions and collaborate in the one platform.
We have borrowed certain concepts like branches, you have got master. We also have merge branches as well. And of course there are tools around that offer version history, but in terms of version history and version control, it is not exactly the same.
A quick definition: version history vs version control
Version history is still working on a single timeline, and this sort of goes back to that design shifts problem mentioned in our first design blog post. What we really need is version control where multiple designers can work on different branches and they can’t intermingle with other people’s work. And then, we merge that back into the master file after we have all decided which ones meet the requirements.
Until now, designers have mostly been working with version history. Version control is common for developers but is a very new but powerful concept for designers.
Quick recap of the benefits:
Single source of the truth
All work is located in one place can accidentally be overridden or lost.
Master files, they are all centralized.
Multiple designers can work on the Sketch files without overwriting each other’s works.
Designs are branched, committed and merged.
It is no longer my file. It is our files.
All design work is visible, and you can track progress and changes, as well as see feedback and understand context.
Designs can be reviewed and approved before merging.
Create a smoother transition from design to development.
Today, I’m talking about the tools and processes in a design process, and I’m going to specifically cover the past and present of design processes.
Exposing design tools and processes can improve collaboration, provide a smoother transition from design to development and provide insights into how designers work. Because there’s no point building a bridge from two sides if they don’t align once they reach the middle.
What design used to look like
In the beginning, there was only Adobe Photoshop. A traditional process would have seen a designer send JPEGs to a client because the Photoshop file was too large to share. In response, the client would provide feedback in a Word doc and the designer had to muddle through trying to align the design in Photoshop with the client’s amendments. Versioning and latest files became a problem. As a consequence, the aesthetic output was impacted.
Keep in mind that Photoshop was designed and built around photography rather than graphics. It sort of did the trick when it came to web design, in that you could draw some stuff and put some text into your designs but in reality it wasn’t meant to be a digital design tool. It wasn’t designed first as a digital design tool.
A smarter working environment for designers
What we needed was a smarter working environment built from the ground up specifically for user interface design or digital design.
What designers really needed was:
To expose the structure of design work
More optimised files, faster to open and easier to share
Along comes design tools such as Sketch…
But what is Sketch? An app built for digital design. It is a local application on a Mac. Edits are non-destructive, so that is different to how Photoshop works. If you want to redraw a shape, you would have to start all over again, and you cannot really change things as easily as what you would be able to do in Sketch. Much smaller file sizes; we are talking about megabytes here. You could have files from ten megabytes, twenty, but certainly, we are not talking about five hundred, unless you add large raster graphics or photos in there. The documents are stored as ZIP archives. The Sketch file format is actually just encoded JSON data. That allows for better third-party integration to plugins or other platforms such as InVision. There is a whole bunch of plugins, and Sketch is super-fast compared to Photoshop.
But where does InVision fit in? It is a cloud-based hosting platform for designs. The reason why you would want to combine InVision and Sketch is it allows you to create interactive prototypes.
It is a shared environment for collaboration. You can put comments in context, and we can share these screens out to clients. There is also smart outputs, but why we want that is developers can inspect the actual structure of the designs and also get creative assets like SVGs from the actual design files itself, rather than send it by email or zipping it up as what we used to do back in the day. So, it is one place to host all your designs.
Example 1: No such thing as dumb JPEGs anymore
Let’s say you draw a shape in Sketch. It is 212 pixels wide, and it is 212 pixels high. I can change that to, let us say, 200 pixels and it would just change dynamically. Now, it is smart in a way that these fields are not just inputting values. Sketch recognizes some conditions as well. So, let us say I wanted to make this with an extra 100 pixels wide. I could type in 300 pixels, but instead, there are calculations. I could do +100, and it will make that three hundred. I do not have to actually know what the end result is. I just need to know what I want to add to it. Just like with plus, you can also minus as well.
It also recognises different commands. For example, I might want to add 100 to the left only so I add a letter, say ‘R’ and that locks the Right side. The shape them adds to the Left side only. You can measure and have consistent spacing, which is really good for designers because we do want to have consistent spacing for certain elements to match up to a grid.
These are all decisions that we have been baking into the designs.
This is all living on my local drive but how do I share that?
There is a little plugin that InVision has made called Craft. I have made a prototype called, “Awesome Website,” and I can go and publish. That goes off into the cloud and will publish this image into that project.
For example, I have this component called, “Hero Banner” and I have got the modal in here as well. If I click into the Hero Banner, anyone that has the shareable link will able to see this banner.
But did you know this isn’t just a flat image? We can create an interactive prototype from this file and clients and anyone with the shareable link can start adding their feedback. No more Word docs back and forth! Simply, click on a spot (aka hotspot) and add comments. Now those comments are a part of the project and there is context. In turn, a designer can return to the file, know straight away what is being asked of what, go into build mode and implement the change.
The designer then returns to Comment mode and hits resolve to say, “Yes, that is done.” We can track all the history of this, and all the design decisions.
Quick tip: This is not just a JPEG image for developers as we do have an Inspect mode. You can expose many different design elements, for example:
What is the width
What is the height
What is the grid width columns and the gutters
There is also the colours
If there are any assets available for download
The structure of the pages and the layers on the left here
There is an image, a background, content too
You can also grab the code. It is not just a dumb JPEG image, there is a whole bunch of code that gets pushed up through into the cloud and gets decoupled. You can also change what the code is. For example, you want to use less SAS objective-C Swift code as well. It is all in here. So depending on what the project type is, you can switch that up yourself.
Example 2: No such thing as dumb JPEGs anymore
Let us say we go to any website (but today let’s say that website is Apple.com), grab a screenshot. We’ll then copy/paste the SVG image into Sketch.
Because this is a smart working environment, it is not a static or dumb image. In Sketch you’ll see all of the exposed different elements from the screenshot: colours, texts, font sizes, etc.