Don’t let Jekyll hide files from you anymore
Jekyll automatically handles wrapping and compiling Sass into CSS. That would be fine if it did not delete the source map and made it completely impossible to navigate back - Let’s see how to fix this!
In Praqma, we develop our websites using Jekyll with Sass files. We love it and it mostly work great for us. But Jekyll is sometimes a bit too clever for us.
When using Sass, all the code fragments are compiled and translated into one complex and unordered CSS file
main.css that is interpreted by the browser.
To help navigate back to the original Sass source files - when using code inspector - a source map is being generated and updated together with every Sass-to-CSS update. It is represented by two files:
When running Jekyll - it automatically does the job of wrapping and compiling Sass into CSS itself. Unfortunately in a way that it becomes impossible to navigate to the original Sass source files. By running Jekyll, those two files that were just generated are being overwritten and deleted - by Jekyll.
So, in the developer console, instead of linking us to the right Sass file with the right fragments of the code, we are being directed to the complex and unordered CSS file, that is hard to display.
Therefore, we need to prevent Jekyll (temporarily) from deleting those two files. To do so, we need to exclude CSS and Sass from Jekyll’s activity.
When we do this, the source map remains and we can easily navigate to the source, fix the issues and get it back to its previous state.
First, we need these two steps done in the code:
_config.ymladd the following directive
exclude: [css, _sass]
Second, we set up the service that keeps watching out for updates and keeps updating the whole chain of those two files. So anytime a change is made in any .sass file, it is linked into the main Sass file, and from there compiled into the CSS file. In your command line, execute a command like this:
sass -I _sass --watch css/main.scss:_site/css/main.css
And we are ready to go! Serve Jekyll in your line as usual
That should give us a good working environment for updating the interface, keep us on track and easily navigate within the stylesheets. Notice however, that once our changes are done and tested, it is important to reverse the two steps in the code.
css/main.scssuncomment/put back the front matter dashes
_config.ymlcomment out the exclude code snippet
That’s it! Happy debugging!
Do you have a tendency to use the backlog as an eternal placeholder? If so, you probably have a lot of clutter that’s creating a lot of frustrations for your end-users. In this post we’ll show you how to clean up your Jira issues and reduce the backlog with some basic JQL queries.
Tips to improve project management in the Atlassian suite
How to test Kubernetes artifacts like Helm charts and YAML manifests in your CI pipelines with a low-overhead, on-demand Kubernetes cluster deployed with KIND - Kubernetes in Docker.
Low overhead, on-demand Kubernetes clusters deployed on CI Workers Nodes with KIND
Had enough of sluggish polling? With instant Artifactory event triggers you can give responsiveness in Jenkins a real boost. Here’s an easy way to set it up.
A super easy configuration guide
With the arrival of microservices code is becoming disposable. Does this mean that we no longer need maintainable code? Is it the end of refactoring?
Still relevant or increasingly redundant?
In software development tight coupling is one of our biggest enemies. On the function level it makes our application hard to change and fragile. Unfortunately, tight coupling is like the entropy of software development, so we have always have to be working to reduce it.
How to safely introduce modular architecture to legacy software
I am an Atlassian certified trainer and over the years I have been spending much time with clients and their Jiras. In this blogpost, I have collected some small tips and tricks that will make your Jira usage better.
Jira Software is a powerful tool deployed in so many organizations, yet in day to day usage people are missing out on improvements, big and small.
In this post, I’ll take a closer look at the version of Jenkins X using Tekton, to give you an idea of how the general development, build, test, deploy flow looks like with Jenkins X. How does it feel to ship your code to production using a product coming from the Jenkins community that has very little Jenkins in it?
A crash course in Jenkins X and how to test it out on a local Kubernetes cluster
In this blog I will show you how to create snapshots of Persistent volumes in Kubernetes clusters and restore them again by only talking to the api server. This can be useful for either backups or when scaling stateful applications that need “startup data”.
Sneak peak at CSI Volume snapshotting Alpha feature
When I read Fowler’s new ‘Refactoring’ book I felt sure the example from the first chapter would make a good Code Kata. However, he didn’t include the code for the test cases. I can fix that!
Writing tests for ‘Theatrical Players’
Nicole Forsgren and the Accelerate DORA team has just released the newest iteration of the State of DevOps report. The report investigates what practices make us better at delivering valuable software to our users as measured by business outcomes. Read on for our analysis of the report, and how it can be best put to use.
The latest drivers of software delivery performance
Hear about upcoming events in Scandinavia, latest tech blogs, and training in the field of Continuous Delivery and DevOps