{"id":323503,"date":"2020-11-02T09:02:40","date_gmt":"2020-11-02T16:02:40","guid":{"rendered":"https:\/\/css-tricks.com\/?p=323503"},"modified":"2020-11-02T09:21:20","modified_gmt":"2020-11-02T16:21:20","slug":"how-to-automate-project-versioning-and-releases-with-continuous-deployment","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-automate-project-versioning-and-releases-with-continuous-deployment\/","title":{"rendered":"How to Automate Project Versioning and Releases with Continuous Deployment"},"content":{"rendered":"\n

Having a semantically versioned<\/a> software will help you easily maintain and communicate changes in your software. Doing this is not easy. Even after manually merging the PR, tagging the commit, and pushing the release, you still have to write release notes. There are a lot of different steps, and many are repetitive and take time.<\/p>\n\n\n\n

Let\u2019s look at how we can make a more efficient flow and completely automating our release process<\/strong> by plugin semantic versioning into a continuous deployment process.<\/p>\n\n\n\n\n\n\n

Semantic versioning<\/h3>\n\n\n
A semantic version is a number that consists of three numbers separated by a period. For example, `1.4.10<\/code> is a semantic version. Each of the numbers has a specific meaning.<\/p>\n\n\n\n`
CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<div class=\"wp-block-group ticss-ee822b66\"><div class=\"wp-block-groupinner-container is-layout-flow wp-block-group-is-layout-flow\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-group ticss-09459c9e has-text-color has-background\" style=\"background-color:#f3d17c;color:#695521\"><div class=\"wp-block-groupinner-container is-layout-flow wp-block-group-is-layout-flow\"><h5 class=\"ticss-41de94b8 wp-block-heading\" id=\"h-major-change\">Major change<\/h5>\n\n\n<p class=\"ticss-87f8b2e5 has-text-color\" style=\"color:#675b26\">The first number is a Major change, meaning it has a breaking change.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-group ticss-d93ba525 has-text-color has-background\" style=\"background-color:#af99eb;color:#463a66\"><div class=\"wp-block-groupinner-container is-layout-flow wp-block-group-is-layout-flow\"><h5 class=\"ticss-9e2402ed wp-block-heading\" id=\"h-minor-change\">Minor change<\/h5>\n\n\n<p class=\"ticss-f9a63e2a\">The second number is a Minor change, meaning it adds functionality.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:30%\">\n<div class=\"wp-block-group ticss-016b6f75 has-text-color has-background\" style=\"background-color:#90c185;color:#294b22\"><div class=\"wp-block-groupinner-container is-layout-flow wp-block-group-is-layout-flow\"><h5 class=\"ticss-b68fb36c wp-block-heading\" id=\"h-patch-change\">Patch change<\/h5>\n\n\n<p class=\"ticss-40045376\">The third number is a Patch change, meaning it includes a bug fix.<\/p>\n<\/div><\/div>\n\n\n\n<p><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n<p class=\"explanation\">It is easier to look at semantic versioning as <code>Breaking . Feature . Fix<\/code>. It is a more precise way of describing a version number that doesn’t leave any room for interpretation.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"commit-format\">Commit format<\/h3>\n\n\n<p>To make sure that we are releasing the correct version \u2014 by correctly incrementing the semantic version number \u2014 we need to standardize our commit messages. By having a standardized format for commit messages, we can know when to increment which number and easily generate a release note. We are going to be using the <a href=\"https:\/\/github.com\/angular\/angular\/blob\/master\/CONTRIBUTING.md#commit\" rel=\"noopener\">Angular commit message convention<\/a>, although we can change this later if you prefer something else.<\/p>\n\n\n\n<p>It goes like this:<\/p>\n\n\n\n<pre rel=\" \" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\"><header>\n<optional body>\n<optional footer><\/code><\/pre>\n\n\n\n<p>Each commit message consists of a <strong>header<\/strong>, a <strong>body<\/strong>, and a <strong>footer<\/strong>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-commit-header\">The commit header<\/h4>\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"817\" height=\"299\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/xye2qRnc.png?resize=817%2C299&ssl=1\" alt=\"\" class=\"wp-image-323507\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/xye2qRnc.png?w=817&ssl=1 817w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/xye2qRnc.png?resize=300%2C110&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/xye2qRnc.png?resize=768%2C281&ssl=1 768w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>The header is mandatory. It has a special format that includes a <strong>type<\/strong>, an optional <strong>scope<\/strong>, and a <strong>subject<\/strong>.<\/p>\n\n\n\n<p>The header\u2019s <strong>type<\/strong> is a mandatory field that tells what impact the commit contents have on the next version. It has to be one of the following types:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>feat<\/strong>: New feature<\/li><li><strong>fix<\/strong>: Bug fix<\/li><li><strong>docs<\/strong>: Change to the documentation<\/li><li><strong>style<\/strong>: Changes that do not affect the meaning of the code (e.g. white-space, formatting, missing semi-colons, etc.)<\/li><li><strong>refactor<\/strong>: Changes that neither fix a bug nor add a feature<\/li><li><strong>perf<\/strong>: Change that improves performance<\/li><li><strong>test<\/strong>: Add missing tests or corrections to existing ones<\/li><li><strong>chore<\/strong>: Changes to the build process or auxiliary tools and libraries, such as generating documentation<\/li><\/ul>\n\n\n\n<p>The <strong>scope<\/strong> is a grouping property that specifies what subsystem the commit is related to, like an API, or the dashboard of an app, or user accounts, etc. If the commit modifies more than one subsystem, then we can use an asterisk (<code>*<\/code>) instead.<\/p>\n\n\n\n<p>The header <strong>subject<\/strong> should hold a short description of what has been done. There are a few rules when writing one:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Use the imperative, present tense (e.g. “change” instead of “changed” or “changes”).<\/li><li>Lowercase the first letter on the first word.<\/li><li>Leave out a period (<code>.<\/code>) at the end.<\/li><li>Avoid writing subjects longer than 80 charactersThe commit body.<\/li><\/ul>\n\n\n\n<p>Just like the header subject, use the imperative, present tense for the body. It should include the motivation for the change and contrast this with previous behavior.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"the-commit-footer\">The commit footer<\/h4>\n\n\n<p>The footer should contain any information about <strong>breaking changes<\/strong> and is also the place to reference issues that this commit closes.<\/p>\n\n\n\n<p>Breaking change information should start with <code>BREAKING CHANGE:<\/code> followed by a space or two new lines. The rest of the commit message goes here.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"enforcing-a-commit-format\">Enforcing a commit format<\/h3>\n\n\n<p>Working on a team is always a challenge when you have to standardize anything that everyone has to conform to. To make sure that everybody uses the same commit standard, we are going to use <a href=\"https:\/\/github.com\/commitizen\/cz-cli\" rel=\"noopener\">Commitizen<\/a>.<\/p>\n\n\n\n<p>Commitizen is a command-line tool that makes it easier to use a consistent commit format. Making a repo <a href=\"https:\/\/github.com\/commitizen\/cz-cli#making-your-repo-commitizen-friendly\" rel=\"noopener\">Commitizen-friendly<\/a> means that anyone on the team can run <code>git cz<\/code> and get a detailed prompt for filling out a commit message.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"2088\" height=\"1256\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=2088%2C1256&ssl=1\" alt=\"\" class=\"wp-image-323508\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?w=2088&ssl=1 2088w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=300%2C180&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=1024%2C616&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=768%2C462&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=1536%2C924&ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=2048%2C1232&ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/yhHmY8SO.png?resize=1000%2C602&ssl=1 1000w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"generating-a-release\">Generating a release<\/h3>\n\n\n<p>Now that we know our commits follow a consistent standard, we can work on generating a release and release notes. For this, we will use a package called <a href=\"https:\/\/github.com\/semantic-release\/semantic-release\" rel=\"noopener\">semantic-release<\/a>. It is a well-maintained package with great support for multiple <a href=\"https:\/\/css-tricks.com\/continuous-integration-the-what-why-and-how\/\">continuous integration<\/a> (CI) platforms.<\/p>\n\n\n\n<p>semantic-release is the key to our journey, as it will perform all the necessary steps to a release, including:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Figuring out the last version you published<\/li><li>Determining the type of release based on commits added since the last release<\/li><li>Generating release notes for commits added since the last release<\/li><li>Updating a <code>package.json<\/code> file and creating a Git tag that corresponds to the new release version<\/li><li>Pushing the new release<\/li><\/ol>\n\n\n\n<p>Any CI will do. For this article we are using <a href=\"https:\/\/github.com\/features\/actions\" rel=\"noopener\">GitHub Action<\/a>, because I love using a platform\u2019s existing features before reaching for a third-party solution.<\/p>\n\n\n\n<p>There are <a href=\"https:\/\/github.com\/semantic-release\/semantic-release\/blob\/master\/docs\/usage\/getting-started.md#getting-started\" rel=\"noopener\">multiple ways to install<\/a> semantic-release but we\u2019ll use <a href=\"https:\/\/github.com\/semantic-release\/cli\" rel=\"noopener\">semantic-release-cli<\/a> as it provides takes things step-by-step. Let\u2019s run <code>npx semantic-release-cli setup<\/code> in the terminal, then fill out the interactive wizard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"2088\" height=\"1256\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=2088%2C1256&ssl=1\" alt=\"\" class=\"wp-image-323509\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?w=2088&ssl=1 2088w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=300%2C180&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=1024%2C616&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=768%2C462&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=1536%2C924&ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=2048%2C1232&ssl=1 2048w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/qrzM7dlj.png?resize=1000%2C602&ssl=1 1000w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>Th script will do a couple of things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>It runs <code>npm adduser<\/code> with the NPM information provided to generate a <code>.npmrc<\/code>.<\/li><li>It creates a GitHub personal token.<\/li><li>It updates <code>package.json<\/code>.<\/li><\/ul>\n\n\n\n<p class=\"explanation\">After the CLI finishes, it wil add semantic-release to the <code>package.json<\/code> but it won\u2019t actually install it. Run <code>npm install<\/code> to install it as well as other project dependencies.<\/p>\n\n\n\n<p>The only thing left for us is to configure the CI via GitHub Actions. We need to manually add a workflow that will run semantic-release. Let\u2019s create a release workflow in <code>.github\/workflows\/release.yml<\/code>.<\/p>\n\n\n\n<pre rel=\"release.yml\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">name: Release\non:\n push:\n branches:\n - main\njobs:\n release:\n name: Release\n runs-on: ubuntu-18.04\n steps:\n - name: Checkout\n uses: actions\/checkout@v2\n - name: Setup Node.js\n uses: actions\/setup-node@v1\n with:\n node-version: 12\n - name: Install dependencies\n run: npm ci\n - name: Release\n env:\n GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}\n # If you need an NPM release, you can add the NPM_TOKEN\n # NPM_TOKEN: ${{ secrets.NPM_TOKEN }}\n run: npm run release<\/code><\/pre>\n\n\n\n<p>Steffen Brewersdorff already does an excellent job covering <a href=\"https:\/\/css-tricks.com\/continuous-deployments-for-wordpress-using-github-actions\/\">CI with GitHub Actions<\/a>, but let\u2019s just briefly go over what\u2019s happening here.<\/p>\n\n\n\n<p>This will wait for the push on the <code>main<\/code> branch to happen, only then run the pipeline. Feel free to change this to work on one, two, or all branches.<\/p>\n\n\n\n<pre rel=\"release.yml\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">on:\n push:\n branches:\n - main<\/code><\/pre>\n\n\n\n<p>Then, it pulls the repo with <code>checkout<\/code> and installs Node so that npm is available to install the project dependencies. A test step could go, if that\u2019s something you prefer.<\/p>\n\n\n\n<pre rel=\"release.yml\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">- name: Checkout\nuses: actions\/checkout@v2\n- name: Setup Node.js\nuses: actions\/setup-node@v1\nwith:\n node-version: 12\n- name: Install dependencies\nrun: npm ci\n# You can add a test step here\n# - name: Run Tests\n# run: npm test<\/code><\/pre>\n\n\n\n<p>Finally, let semantic-release do all the magic:<\/p>\n\n\n\n<pre rel=\"release.yml\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">- name: Release\nrun: npm run release<\/code><\/pre>\n\n\n\n<p>Push the changes and look at the actions:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1456\" height=\"786\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?resize=1456%2C786&ssl=1\" alt=\"The GitHub Actions screen for a project showing a file navigating on the left and the actions it includes on the right against a block background.\" class=\"wp-image-323510\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?w=1456&ssl=1 1456w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?resize=300%2C162&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?resize=1024%2C553&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?resize=768%2C415&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/KtN0UAl4.png?resize=1000%2C540&ssl=1 1000w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n\n<p>Now each time a commit is made (or merged) to a specified branch, the action will run and make a release, complete with release notes.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1461\" height=\"1087\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?resize=1461%2C1087&ssl=1\" alt=\"Showing the GitHub releases screen for a project with an example that shows a version 1.0.0 and 2.0.0, both with release notes outlining features and breaking changes.\" class=\"wp-image-323511\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?w=1461&ssl=1 1461w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?resize=300%2C223&ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?resize=1024%2C762&ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?resize=768%2C571&ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/pRVMk8vz.png?resize=1000%2C744&ssl=1 1000w\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"release-party-\">Release party!<\/h3>\n\n\n<p>We have successfully created a CI\/CD semantic release workflow! Not that painful, right? The setup is relatively simple and there are no downsides to having a semantic release workflow. It only makes tracking changes a lot easier.<\/p>\n\n\n\n<p>semantic-release has a <a href=\"https:\/\/semantic-release.gitbook.io\/semantic-release\/extending\/plugins-list\" rel=\"noopener\">lot of plugins<\/a> that can make an even more advanced automations. For example, there\u2019s even a Slack release bot that can post to a project channel once the project has been successfully deployed. No need to head over to GitHub to find updates!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Having a semantically versioned software will help you easily maintain and communicate changes in your software. Doing this is not […]<\/p>\n","protected":false},"author":274691,"featured_media":323538,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[767,1518,1513,677],"class_list":["post-323503","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-commit","tag-continuous-integration","tag-github-actions","tag-version-control"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/senantic-versioning-github-actions.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":237654,"url":"https:\/\/css-tricks.com\/optimizelys-ui-library-oui-2-of-2\/","url_meta":{"origin":323503,"position":0},"title":"Building & Maintaining OUI (Optimizely’s UI Library): Part 2\/2","author":"Daniel O'Connor","date":"February 3, 2016","format":false,"excerpt":"The following is a guest post by Daniel O'Connor. Daniel shares more about OUI, the UI library by Optimizely Tom Genoni introduced in Part 1. Over a year ago we set out on a mission at Optimizely to unify our product design and get a handle on our ever-increasing CSS\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":257404,"url":"https:\/\/css-tricks.com\/solve-css-versioning-conflicts-new-relic\/","url_meta":{"origin":323503,"position":1},"title":"How We Solve CSS Versioning Conflicts Here at New Relic","author":"Chris Coyier","date":"August 4, 2017","format":false,"excerpt":"At first the title made me think of Git conflicts, but that's not what this is about. It's about namespacing selectors for components. Ultimately, they decided to use a Webpack loader (not open source, it doesn't appear) to prefix every single class with a hashed string representing the version. I\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":286957,"url":"https:\/\/css-tricks.com\/perceived-velocity-through-version-numbers\/","url_meta":{"origin":323503,"position":2},"title":"Perceived Velocity through Version Numbers","author":"Chris Coyier","date":"April 29, 2019","format":false,"excerpt":"HTML5 and CSS3 were big. So big that they were buzzwords that actually meant something and were a massive success story in pushing web technology forward. JavaScript names their big releases now too: ES6, ES7, ES8... and it seems like it will keep going that way. But HTML and CSS\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/html6-css4.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/html6-css4.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/html6-css4.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/html6-css4.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/html6-css4.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":305646,"url":"https:\/\/css-tricks.com\/continuous-deployments-for-wordpress-using-github-actions\/","url_meta":{"origin":323503,"position":3},"title":"Continuous Deployments for WordPress Using GitHub Actions","author":"Steffen Bewersdorff","date":"April 6, 2020","format":false,"excerpt":"Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":268268,"url":"https:\/\/css-tricks.com\/approaches-to-deprecating-code-in-javascript\/","url_meta":{"origin":323503,"position":4},"title":"Approaches to Deprecating Code in JavaScript","author":"Kaloyan Kosev","date":"March 23, 2018","format":false,"excerpt":"Recently, I had to dig into the topic of code deprecation in JavaScript. I feel like this topic gets less coverage even though it may a play key role in certain projects, especially when working in bigger teams or dealing with external APIs. In JavaScript-land, I don't know of any\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/digits.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/digits.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/digits.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/digits.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/digits.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":305112,"url":"https:\/\/css-tricks.com\/consistent-backends-and-ux-how-do-new-algorithms-help\/","url_meta":{"origin":323503,"position":5},"title":"Consistent Backends and UX: How Do New Algorithms Help?","author":"Brecht De Rooms","date":"March 26, 2020","format":false,"excerpt":"Article Series Why should you care?What can go wrong?What are the barriers to adoption?How do new algorithms help? In previous articles, we explained what consistency is, the difference between \"strong\" and \"eventual\" consistency, and why this distinction is more important than ever to modern application developers. We also introduced the\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dbconsistency-4-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dbconsistency-4-featured.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dbconsistency-4-featured.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dbconsistency-4-featured.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/dbconsistency-4-featured.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/274691"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=323503"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323503\/revisions"}],"predecessor-version":[{"id":324990,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/323503\/revisions\/324990"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/323538"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=323503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=323503"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=323503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}