What is Sass?
Who uses Sass?
Why developers like Sass?
Here are some stack decisions, common use cases and reviews by companies and developers who chose Sass in their tech stack.
For markup and style, I used Pug and Sass, since they’re the perfect match to me. I love the clean and strict syntax of both of them and even more that their structure is almost similar. Also, both of them come with an expanded functionality such as mixins, loops and so on related to their “siblings” (HTML and CSS). Both of them require nesting and prevent untidy code, which can be a huge advantage when working in teams. I used JSON to store data (since the data quantity on my website is moderate) – JSON works also good in combo with Pug, using for loops, based on the JSON Objects for example.
To send my contact form I used PHP, since sending emails using PHP is still relatively convenient, simple and easy done.
DevOps: Of course, I used Git to do my version management (which I even do in smaller projects like my website just have an additional backup of my code). On top of that I used GitHub since it now supports private repository for free accounts (which I am using for my own). I use Babel to use ES6 functionality such as arrow functions and so on, and still don’t losing cross browser compatibility.
Side note: I used npm for package management. 🎉
At labinator.com, we use HTML5, CSS 3, Sass, Vanilla.JS and PHP when building our premium WordPress themes and plugins. When writing our codes, we use Sublime Text and Visual Studio Code depending on the project. We run Manjaro and Debian operating systems in our office. Manjaro is a great desktop operating system for all range of tasks while Debian is a solid choice for servers.
WordPress became a very popular choice when it comes to content management systems and building websites. It is easy to learn and has a great community behind it. The high number of plugins as well that are available for WordPress allows any user to customize it depending on his/her needs.
For development, HTML5 with Sass is our go-to choice when building our themes.
Main Advantages Of Sass:
- It's CSS syntax friendly
- It offers variables
- It uses a nested syntax
- It includes mixins
- Great community and online support.
- Great documentation that is easy to read and follow.
As for PHP, we always thrive to use PHP 7.3+. After the introduction of PHP 7, the WordPress development process became more stable and reliable than before. If you a developer considering PHP 7.3+ for your project, it would be good to note the following benefits.
The Benefits Of Using PHP:
- Open Source.
- Highly Extendible.
- Easy to learn and read.
- Platform independent.
- Compatible with APACHE.
- Low development and maintenance cost.
- Great community and support.
- Detailed documentation that has everything you need!
Why PHP 7.3+?
- Flexible Heredoc & Nowdoc Syntaxes - Two key methods for defining strings within PHP. They also became easier to read and more reliable.
- A good boost in performance speed which is extremely important when it comes to WordPress development.
I use Laravel because it's the most advances PHP framework out there, easy to maintain, easy to upgrade and most of all : easy to get a handle on, and to follow every new technology ! PhpStorm is our main software to code, as of simplicity and full range of tools for a modern application.
Google Analytics Analytics of course for a tailored analytics, Bulma as an innovative CSS framework, coupled with our Sass (Scss) pre-processor.
To deploy, we set up Buddy to easily send the updates on our nginx / Ubuntu server, where it will connect to our GitHub Git private repository, pull and do all the operations needed with Deployer .
CloudFlare ensure the rapidity of distribution of our content, and Let's Encrypt the https certificate that is more than necessary when we'll want to sell some products with our Stripe api calls.
Asana is here to let us list all the functionalities, possibilities and ideas we want to implement.
When we rebooted our front-end stack earlier this year, we wanted to have a consolidated and friendly developer experience. Up to that point we were using Sass and BEM. There was a mix of HAML views, React components and Angular. Since our ongoing development was going to be exclusively in React, we wanted to shift to an inline styling library so the "wall of classnames" could be eliminated. The ever-shifting landscape of inline CSS libraries for React is sometimes difficult to navigate.
We decided to go with Glamorous for a few reasons:
As you may or may not know, Glamorous has ceased active development and been mostly superseded by Emotion. We are planning to migrate to either Emotion or @styled-components in the near future, and I'll write another Stack Decision when we get there!
This is my stack in Application & Data
My Utilities Tools
Google Analytics Postman Elasticsearch
My Devops Tools
Git GitHub GitLab npm Visual Studio Code Kibana Sentry BrowserStack
My Business Tools
ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling
import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.
React Helmet was chosen to handle
<head> content, because it works universally, making it easy to throw back the correct
<title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.
<style> tags when using #StyledComponents.
React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.
Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.