#filter');-webkit-filter:blur(1rem);filter:blur(1rem);transition:filter 400ms, -webkit-filter 400ms}.blur.lazyloaded{-webkit-filter:blur(0);filter:blur(0)}.dark-bg{background-color:#313237}.hidden{display:none;visibility:hidden}.container{padding:0 20px;margin:0 auto;max-width:100%}@media only screen and (min-width: 36em){.container{margin:0 auto;max-width:540px}}@media only screen and (min-width: 48em){.container{margin:0 auto;max-width:720px}}@media only screen and (min-width: 62em){.container{margin:0 auto;max-width:960px}}@media only screen and (min-width: 75em){.container{margin:0 auto;max-width:1170px}}.header{background-color:#fff;color:#343851;position:fixed;z-index:4;width:100%;top:0;left:0;will-change:transform;-webkit-transition:background-color 0.5s ease, -webkit-transform .3s;transition:background-color 0.5s ease, -webkit-transform .3s;transition:transform .3s, background-color 0.5s ease;transition:transform .3s, background-color 0.5s ease, -webkit-transform .3s;-webkit-transform:translateY(0%);transform:translateY(0%)}.header a{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-bottom:0}.header__logo{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;overflow:hidden;padding:19px 0;margin-right:1.25rem;outline:0;border-bottom:0;color:#313237}.header__logo:hover{color:#313237;border-bottom:0}.header__logo .header__logo--container{width:58px}.header__logo .header__logo--container .logo{fill:currentColor}.header__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:3.75em;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.header__links-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;height:100%;padding:0}.header__links{position:static;padding:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;width:auto;height:100%;top:3.75em;left:0;background:#fff}.header__link{color:#343851;border-top:1px solid #ededed;position:relative;padding:.938rem 1rem;border:0;height:100%}.header__link::after{content:"";display:block;position:absolute;left:0;bottom:0;height:3px;width:100%;-webkit-transform:scaleX(0);transform:scaleX(0);background:#1F74e2;-webkit-transition:color 0.2s ease-in-out, -webkit-transform .2s ease-in-out;transition:color 0.2s ease-in-out, -webkit-transform .2s ease-in-out;transition:color 0.2s ease-in-out, transform .2s ease-in-out;transition:color 0.2s ease-in-out, transform .2s ease-in-out, -webkit-transform .2s ease-in-out}.header__link:hover{color:#124689}.header__link:hover::after,.header__link :active::after,.header__link :focus::after{-webkit-transform:scaleX(1);transform:scaleX(1);color:#124689;-webkit-transition:-webkit-transform .2s ease-in-out;transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out, -webkit-transform .2s ease-in-out}.header__overlay{position:fixed;top:0;left:0;width:0;height:0;opacity:0;background-color:rgba(0,0,0,0.75);z-index:2;-webkit-transition:opacity 1s ease 0.1s;transition:opacity 1s ease 0.1s}.header__overlay.--open{width:100%;height:120%;opacity:1}footer{padding:2.8125rem 0;border-top:1px solid #f0f0f0;text-align:center;font-size:0.875rem;color:#595959}footer a{color:#595959;border-bottom:0}footer a:hover,footer a:focus{color:#1F74e2;border-bottom:0}.social{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:200px;margin:0 auto 25px}.social__link:not(:last-child){margin-right:1.5rem}.social__icon{fill:currentColor;height:1.5rem;width:1.5rem}.btn,input[type="submit"],input[type="reset"],input[type="button"]{position:relative;display:inline-block;padding:18px 30px;font-size:11px;font-family:inherit;line-height:1.5;letter-spacing:0.2em;text-decoration:none;text-transform:uppercase;white-space:nowrap;cursor:pointer;color:#fff;background-color:#222325;text-align:center;border:0;border-radius:0;-webkit-transition:all 0.45s cubic-bezier(0.25, 1, 0.33, 1);transition:all 0.45s cubic-bezier(0.25, 1, 0.33, 1);outline:0}.btn::after,input[type="submit"]::after,input[type="reset"]::after,input[type="button"]::after{display:none}.btn:hover,.btn :focus,.btn :active,input[type="submit"]:hover,input[type="submit"] :focus,input[type="submit"] :active,input[type="reset"]:hover,input[type="reset"] :focus,input[type="reset"] :active,input[type="button"]:hover,input[type="button"] :focus,input[type="button"] :active{color:#fff;background-color:#44464a;outline:0}.btn+.btn{margin-top:2em}@media only screen and (min-width: 350px){.btn+.btn{margin-top:0;margin-left:2em}}button:disabled{cursor:not-allowed;opacity:.65;-webkit-transition:background-color .2s ease;transition:background-color .2s ease}button:disabled:hover,button:disabled :focus{background-color:#222325}.post-card{display:block;position:relative;width:100%;min-height:250px;border-radius:4px;overflow:hidden;background-color:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.08);box-shadow:0 1px 3px rgba(0,0,0,0.08);margin-bottom:2.25rem;border-bottom:0;-webkit-transition:-webkit-box-shadow .25s ease;transition:-webkit-box-shadow .25s ease;transition:box-shadow .25s ease;transition:box-shadow .25s ease, -webkit-box-shadow .25s ease}.post-card:hover,.post-card:focus{border-bottom:0;-webkit-box-shadow:0 2px 40px 0 rgba(153,155,168,0.3);box-shadow:0 2px 40px 0 rgba(153,155,168,0.3)}@media only screen and (min-width: 48em){.post-card{width:48.4375%;margin-right:3.125%}.post-card:last-of-type,.post-card:nth-child(2n+2){margin-right:0}}@media only screen and (min-width: 75em){.post-card{width:31.25%;margin-right:3.125%}.post-card:nth-child(2n+2){margin-right:3.125%}.post-card:last-of-type,.post-card:nth-child(3n+3){margin-right:0}}.post-card__label{position:absolute;top:1.5rem;left:1.5rem;z-index:2}.post-card__inner{display:block;position:relative;padding:1.875rem 1.25rem 0.625rem;width:100%;color:#595959;border-bottom:0}.post-card__inner:focus,.post-card__inner:hover{color:#595959;border-bottom:0}.post-card__header{margin-bottom:0.75rem}.post-card__meta{font-size:0.875rem}.post-card__thumb{margin:0;background:#fff;position:relative;overflow:hidden}.post-card__thumb::after{content:"";display:block;height:0;width:100%;padding-bottom:56.25%}.post-card__thumb>*{position:absolute;top:0;left:0;width:100%;height:100%;display:block}.label{padding:0px 10px;margin-bottom:1rem;display:inline-block;line-height:20px;font-size:.75rem;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,0.8);border:2px solid rgba(255,255,255,0.5);border-radius:100px;-webkit-transition:all 0.2s ease;transition:all 0.2s ease}.label:focus,.label:hover{color:#fff;background-color:#1F74e2;border:2px solid #1F74e2}.pagination{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:1.25rem auto}table{display:table;width:100%;overflow-x:scroll;margin-bottom:1.25rem;border-collapse:collapse;border-spacing:0;border:1px solid #ededed;border-radius:4px;font-size:14.5px}table th{background-color:#f9f9f9}table th,table td{padding:6px 13px;border:1px solid #ededed}.highlight .hll{background-color:#ffffcc}.highlight{background:#f8f8f8}.highlight .c{color:#6a737d}.highlight .k{color:#d33645}.highlight .ch{color:#6a737d}.highlight .cm{color:#6a737d}.highlight .cp{color:#d33645}.highlight .cpf{color:#032f62}.highlight .c1{color:#6a737d}.highlight .cs{color:#6a737d}.highlight .gd{color:#b31d28;background-color:#ffeef0}.highlight .gh{color:#005cc5}.highlight .gi{color:#22863a;background-color:#f0fff4}.highlight .gs{font-weight:bold}.highlight .gu{color:#6f42c1;font-weight:bold}.highlight .gt{color:#0044DD}.highlight .kc{color:#005cc5}.highlight .kd{color:#d33645}.highlight .kn{color:#d33645}.highlight .kp{color:#d33645}.highlight .kr{color:#d33645}.highlight .kt{color:#d33645}.highlight .m{color:#666666}.highlight .s{color:#032f62}.highlight .nb{color:#005cc5}.highlight .nc{color:#6f42c1}.highlight .no{color:#005cc5}.highlight .nd{color:#6f42c1}.highlight .ni{color:#005cc5}.highlight .ne{color:#005cc5}.highlight .nf{color:#6f42c1}.highlight .nl{color:#005cc5}.highlight .nn{color:#6f42c1}.highlight .nt{color:#22863a}.highlight .nv{color:#24292e}.highlight .ow{color:#d33645}.highlight .w{color:#bbbbbb}.highlight .mb{color:#005cc5}.highlight .mf{color:#005cc5}.highlight .mh{color:#005cc5}.highlight .mi{color:#005cc5}.highlight .mo{color:#005cc5}.highlight .sa{color:#d33645}.highlight .sb{color:#032f62}.highlight .sc{color:#032f62}.highlight .dl{color:#d33645}.highlight .sd{color:#032f62}.highlight .s2{color:#032f62}.highlight .se{color:#032f62}.highlight .sh{color:#032f62}.highlight .si{color:#005cc5}.highlight .sx{color:#032f62}.highlight .sr{color:#032f62}.highlight .s1{color:#032f62}.highlight .ss{color:#005cc5}.highlight .bp{color:#005cc5}.highlight .fm{color:#005cc5}.highlight .vc{color:#24292e}.highlight .vg{color:#24292e}.highlight .vi{color:#24292e}.highlight .vm{color:#005cc5}.highlight .il{color:#005cc5}.hero{margin:3.75rem auto 0;min-height:16.25rem;width:100%;position:relative;background-color:#000}@media only screen and (min-width: 36em){.hero{margin:0 auto;height:24em}}.hero img{width:100%;height:100%;max-height:24em;min-height:260px;-o-object-fit:cover;object-fit:cover}@media only screen and (min-width: 48em){.hero img{min-height:384px}}.hero::before{position:absolute;display:block;content:"";top:0;left:0;width:100%;height:100%;background:rgba(52,56,81,0.8);z-index:1}.hero--small{margin:3.75rem auto 0;min-height:8.75rem;width:100%;position:relative;background-color:#313237}@media only screen and (min-width: 62em){.hero--small{height:12.5em}}.hero--small::before{position:absolute;display:block;content:"";top:0;left:0;width:100%;height:100%;background:rgba(52,56,81,0.8);z-index:1}.hero__wrap{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);text-align:center;color:rgba(255,255,255,0.8);width:100%;max-width:90%;z-index:1}@media only screen and (min-width: 48em){.hero__wrap{max-width:40em}}.hero__wrap .hero__title{font-size:1.8em;color:#fff}@media only screen and (min-width: 48em){.hero__wrap .hero__title{padding:1rem 0;font-size:2.625em;line-height:3.125rem}}.page-content{max-width:52.5rem;margin:0 auto;padding:2.5em 0}@media only screen and (min-width: 48em){.page-content{padding:3.75rem 0}}.inner-container{padding-top:5em}.post-list{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto}.person{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:20px}.person div{min-width:320px;padding-left:20px}@media only screen and (min-width: 48em){.person div{max-width:70%}}.person img{width:130px;height:130px;border-radius:10%}.influencers{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:16px}.influencers>div{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:16px}.influencers>div div:first-child{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-ms-flex-negative:0;flex-shrink:0;gap:0}.influencers>div img{width:160px;height:160px;-o-object-fit:cover;object-fit:cover}.post-content{max-width:52.5rem;margin:0 auto}.comments{padding:50px 0;background-color:#fafafa}.controls__inner{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1.375rem 0 1.25rem;border-top:1px solid #ededed}.controls__inner .prev{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;text-align:left}.controls__inner .next{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;text-align:right}.controls__item{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.controls__item span{font-size:0.875rem;color:#595959}.controls__item a{color:#313237;font-weight:bold;border-bottom:0}.controls__item a svg{-webkit-transition:all .2s linear;transition:all .2s linear}.controls__item a:hover{color:#1F74e2;border-bottom:0}.controls__item a:hover svg{fill:#1F74e2}
My name is
Steve Haar . As a
Staff Software Engineer @
Cruise , I lead technical initiatives to build scalable, reliable systems for autonomous vehicles. I am an expert in frontend web technologies and specialize in empowering engineers to build with speed and confidence.
JS Library 6/7: Maintenance Branches 16 Jan 2022 · 3 min read
Note : Check out the entire supplemental source code for this blog series .
After releasing a new major version of our public library, we may still need to continue to push new bug fixes or other changes to older versions of the library. This will be easy to do using semantic-release and maintenance branches.
Let’s suppose that our library was on version v1.1.1. Next, we do a major release with a breaking change to bump our library to v2.0.0. With semantic-release, we can still push a new feature or fix to v1 of our library by creating a 1.x
branch and opening a pull request against it.
In order to make this work there are a few things we should set up. First, we’ll need to create a 1.x
branch:
git checkout -b 1.x
git reset --hard v1.1.1
git push -u origin 1.x
Next, we’ll have to add maintenance branch support to semantic-release by modifying our .releaserc.js
config file:
./.releaserc.js
...
branches: [
'main',
'+([0-9]).x'
],
...
Note that semantic-release uses micromatch notation to match branches.
Also, we will need to tell our Release workflow to run on pushes to maintenance branches:
./.github/workflows/release.yml
...
on:
push:
branches:
- 'main'
- '[0-9]+.x'
...
Finally, we should protect our 1.x
branch by enabling branch protection for it. One trick we can use is to specify *
for the branch name pattern. This is a wildcard, but it won’t match /
. So this will protect all our branches without a /
. This can be very useful, because we can always open pull requests under topic branches such as topic/new-feature
, or topic/bug-fix
and they won’t be protected.
Now, when we merge a pull request into our new 1.x
branch, semantic release will automatically deploy v1.2.0 or v1.1.2 (depending on if it’s a feat or fix, respectively).
Next, we’ll look at how to setup pre-releases and nightly releases with semantic-release and github actions.