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 Eficode 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!
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
A major challenge of software development is that our work is by and large invisible. This makes our folklore essential in business matters. Some of our commonly used arguments and visualizations are digital urban legends rather than solid foundations for informed decisions. Here, we’ll go through a few examples and some measures to address our misconceptions.
How the stories we tell influence our decisions
When you embark on your cloud native journey there will be important choices to make about cloud providers, continuous deployment, environments’ setup and separation. This guide will help you make the right choices by sharing lessons learnt from running cloud native apps in production.
Kubernetes has become the de facto container orchestration platform. When we help clients of different sizes and domains start their cloud native journeys in Kubernetes, we assist them in making sound decisions and technology choices. There is no one-size-fits-all solution when it comes to choosing cloud providers, CI tools, continuous deployment pipelines etc., so it is important to make the right decisions at the start. Failing to do so can be very costly in terms of lost time and money.
How to make the right technical choices on your cloud native journey
Learn how Docker and Kubernetes work and the key benefits they bring. Using real demos, I show how Docker is a great packaging and distribution technology, and how Kubernetes provides a powerful runtime for containerized applications.
Watch this introduction to Docker and Kubernetes at the Trondheim Developer Conference (TDC)
In the world of Agile and DevOps we use many figures, charts and diagrams to argue and reason about our world and how we prioritize and make choices. However, at all levels of the organization, we misuse and misinterpret figures. It’s time to be explicit, measure the right things and act on them. Watch this talk from DevOpsDays Zurich in May 2019.
Watch this talk from DevOpsDays Zurich
Summer is a great time to catch up on reading, whether you’re at the beach, in a summer house, or cozy at home. If your book backlog is on the short side, don’t worry! We compiled a list of great books for summer reading.
Inspiration for your summer reading list
At Eficode Praqma we believe in knowledge sharing, and we love to teach our technical expertise. Watch this series of videos to learn how traefik reverse proxy works step by step.
A video seminar to learn how Traefik works
What testing steps should you include in your Continuous Delivery pipeline? Don’t just string together existing manual processes - use simple, collaborative tools to design something better!
A new card game to design Continuous Delivery pipelines
Hear about upcoming events in Scandinavia, latest tech blogs, and training in the field of Continuous Delivery and DevOps