SketchyBar/assets/js/dc9b5e88.4c6b5c4b.js

"use strict";(self.webpackChunksketchybar_site=self.webpackChunksketchybar_site||[]).push([[882,884],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return m}});var r=n(7294);function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var l=r.createContext({}),s=function(e){var t=r.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},p=function(e){var t=s(e.components);return r.createElement(l.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},d=r.forwardRef((function(e,t){var n=e.components,o=e.mdxType,a=e.originalType,l=e.parentName,p=c(e,["components","mdxType","originalType","parentName"]),d=s(n),m=o,h=d["".concat(l,".").concat(m)]||d[m]||u[m]||a;return n?r.createElement(h,i(i({ref:t},p),{},{components:n})):r.createElement(h,i({ref:t},p))}));function m(e,t){var n=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var a=n.length,i=new Array(a);i[0]=d;var c={};for(var l in t)hasOwnProperty.call(t,l)&&(c[l]=t[l]);c.originalType=e,c.mdxType="string"==typeof e?e:o,i[1]=c;for(var s=2;s<a;s++)i[s]=n[s];return r.createElement.apply(null,i)}return r.createElement.apply(null,n)}d.displayName="MDXCreateElement"},4612:function(e,t,n){n.r(t);var r=n(4578),o=n(7294),a=(n(3935),n(9941)),i=n(713),c=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={displayColorPicker:!1,color:{r:"241",g:"112",b:"19",a:"1"}},t.handleClick=function(){t.setState({displayColorPicker:!t.state.displayColorPicker})},t.handleClose=function(){t.setState({displayColorPicker:!1})},t.handleChange=function(e){t.setState({color:e.rgb}),document.getElementById("color").innerHTML="0x"+("0"+Math.round(255*e.rgb.a).toString(16)).slice(-2)+("0"+Math.round(e.rgb.r).toString(16)).slice(-2)+("0"+Math.round(e.rgb.g).toString(16)).slice(-2)+("0"+Math.round(e.rgb.b).toString(16)).slice(-2)},t}return(0,r.Z)(t,e),t.prototype.render=function(){var e=(0,a.ZP)({default:{color:{width:"36px",height:"14px",borderRadius:"2px",background:"rgba("+this.state.color.r+", "+this.state.color.g+", "+this.state.color.b+", "+this.state.color.a+")"},swatch:{padding:"5px",background:"#fff",borderRadius:"1px",boxShadow:"0 0 0 1px rgba(0,0,0,.1)",display:"inline-block",cursor:"pointer"},popover:{position:"absolute",zIndex:"2"},cover:{position:"fixed",top:"0px",right:"0px",bottom:"0px",left:"0px"}}});return o.createElement("div",null,o.createElement("div",{style:e.swatch,onClick:this.handleClick},o.createElement("div",{style:e.color})),o.createElement("div",{id:"color"},"Try the Picker!"),this.state.displayColorPicker?o.createElement("div",{style:e.popover},o.createElement("div",{style:e.cover,onClick:this.handleClose}),o.createElement(i.xS,{color:this.state.color,onChange:this.handleChange})):null)},t}(o.Component);t.default=c},5598:function(e,t,n){n.r(t),n.d(t,{assets:function(){return u},contentTitle:function(){return s},default:function(){return h},frontMatter:function(){return l},metadata:function(){return p},toc:function(){return d}});var r=n(7462),o=n(3366),a=(n(7294),n(3905)),i=n(4612),c=["components"],l={id:"tricks",title:"Tips & Tricks",sidebar_position:1},s=void 0,p={unversionedId:"config/tricks",id:"config/tricks",title:"Tips & Tricks",description:"Batching of configuration commands",source:"@site/docs/config/Tricks.md",sourceDirName:"config",slug:"/config/tricks",permalink:"/SketchyBar/config/tricks",tags:[],version:"current",sidebarPosition:1,frontMatter:{id:"tricks",title:"Tips & Tricks",sidebar_position:1},sidebar:"docs",previous:{title:"Type Nomenclature",permalink:"/SketchyBar/config/types"},next:{title:"Credits",permalink:"/SketchyBar/credits"}},u={},d=[{value:"Batching of configuration commands",id:"batching-of-configuration-commands",level:2},{value:"Color Picker",id:"color-picker",level:2},{value:"Performance optimizations",id:"performance-optimizations",level:2}],m={toc:d};function h(e){var t=e.components,n=(0,o.Z)(e,c);return(0,a.kt)("wrapper",(0,r.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,a.kt)("h2",{id:"batching-of-configuration-commands"},"Batching of configuration commands"),(0,a.kt)("p",null,"It is possible to batch commands together into a single call to sketchybar, this can be helpful to\nkeep the configuration file a bit cleaner and also to reduce startup times.\nAssume 5 individual configuration calls to sketchybar:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"sketchybar --bar position=top\nsketchybar --bar margin=5\nsketchybar --add item demo left\nsketchybar --set demo label=Hello\nsketchybar --subscribe demo system_woke\n")),(0,a.kt)("p",null,"after each configuration command the bar is redrawn (if needed), thus it is more perfomant to append these calls into a single command like so:"),(0,a.kt)("pre",null,(0,a.kt)("code",{parentName:"pre",className:"language-bash"},"sketchybar --bar position=top           \\\n                 margin=5               \\\n           --add item demo left         \\\n           --set demo label=Hello       \\\n           --subscribe demo system_woke\n")),(0,a.kt)("p",null,"The backslash at the end of the first 4 lines is the default bash way to join lines together and should not be followed by a whitespace.  "),(0,a.kt)("h2",{id:"color-picker"},"Color Picker"),(0,a.kt)("p",null,"SketchyBar uses the argb hex color format, which means: ",(0,a.kt)("inlineCode",{parentName:"p"},"0xAARRGGBB")," encodes a\ncolor."),(0,a.kt)(i.default,{mdxType:"SketchExample"}),(0,a.kt)("h2",{id:"performance-optimizations"},"Performance optimizations"),(0,a.kt)("p",null,(0,a.kt)("em",{parentName:"p"},"SketchyBar")," can be configured to have a ",(0,a.kt)("em",{parentName:"p"},"very")," small performance footprint. In the following I will highlight some optimizations that can be used to reduce the footprint further. "),(0,a.kt)("ul",null,(0,a.kt)("li",{parentName:"ul"},"Batch together configuration commands where ever possible."),(0,a.kt)("li",{parentName:"ul"},"Set items to be ",(0,a.kt)("em",{parentName:"li"},"lazy"),", e.g. I have an alias component in my bar that updates every ",(0,a.kt)("em",{parentName:"li"},"2")," seconds, thus I set all ",(0,a.kt)("em",{parentName:"li"},"non-reactive")," items to ",(0,a.kt)("em",{parentName:"li"},"lazy=on"),",\nand only the ones that should react to change instantaneously to ",(0,a.kt)("em",{parentName:"li"},"lazy=off"),"."),(0,a.kt)("li",{parentName:"ul"},"Set ",(0,a.kt)("em",{parentName:"li"},"updates=when_shown")," for items that do not need to run their script if they are not rendered."),(0,a.kt)("li",{parentName:"ul"},"Reduce the ",(0,a.kt)("em",{parentName:"li"},"update_freq")," of ",(0,a.kt)("em",{parentName:"li"},"scripts")," and ",(0,a.kt)("em",{parentName:"li"},"aliases")," and use event-driven scripting when ever possible."),(0,a.kt)("li",{parentName:"ul"},"Do not add ",(0,a.kt)("em",{parentName:"li"},"aliases")," to apps that are not always running, otherwise sketchybar searches for them continously.")))}h.isMDXComponent=!0}}]);