[{"data":1,"prerenderedAt":471},["ShallowReactive",2],{"DefaultLayouten":3,"language-blog-slug-13-command-line-tools-to-up-your-front-end-game-i18n-slugs":134,"language-blog-slug-en-13-command-line-tools-to-up-your-front-end-game":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png","B Corp logo",404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135],{"locale":136,"value":137},"en","13-command-line-tools-to-up-your-front-end-game",{"page":139},{"slug":137,"i18nSlugs":140,"social":142,"title":147,"subtitle":79,"isArchived":148,"headerIllustration":149,"date":150,"authors":151,"introTitle":160,"items":161,"pivots":458,"relatedBlogPosts":469,"tags":470,"onMountedScript":154,"onUnmountedScript":154},[141],{"locale":136,"value":137},{"title":143,"description":144,"image":145},"13 command line tools to up your front-end game","Use these tools to become faster & more effective as a front-end developer! Also, it makes you look like you live inside a movie",{"url":146},"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1523365390-crt.jpg","13 command line tools to up your Front-end Game",false,null,"2018-04-10T02:00:00.000+02:00",[152],{"name":153,"lastName":154,"slug":155,"image":156},"Anand","","anand",{"url":157,"alt":149,"width":158,"height":159},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,"Here’s your chance to go from Zero Cool to Crash Override",[162,166,176,179,183,188,191,195,198,202,205,208,211,214,217,221,224,227,231,234,238,241,244,247,249,252,255,258,260,264,267,270,272,275,278,282,285,287,290,293,296,298,301,304,307,310,313,316,319,323,326,328,331,334,337,339,342,346,349,353,356,359,362,366,369,372,375,378,381,385,388,390,393,396,400,403,405,408,411,414,417,421,424,427,430,433,436,440,449,452,455],{"__typename":163,"id":164,"title":154,"body":165},"TextSectionRecord","458501","\u003Cp>We're going to use a set of command line tools to see how they can help a (front-end) developer. Most of the tools are cross-platform available and some of them are specific to MacOS.\u003C\u002Fp>",{"__typename":167,"id":168,"image":169,"caption":173,"fullWidth":174,"captionPosition":175},"ImageRecord","176452781",{"url":170,"alt":171,"width":172,"height":105},"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1523365764-cli.gif","Animation of old fashioned computer screen with green letters on black background",720,"Hacking in progress...",true,"right",{"__typename":163,"id":177,"title":154,"body":178},"401382","\u003Cp>\u003Ca href=\"https:\u002F\u002Fhyper.is\u002F\">Hyper\u003C\u002Fa>, \u003Ca href=\"https:\u002F\u002Fbrew.sh\u002F\">Homebrew\u003C\u002Fa> and \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fget-npm\">npm\u003C\u002Fa> are used throughout this article:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fhyper.is\u002F\">Hyper\u003C\u002Fa> as the terminal since that is a much more feature rich terminal than Mac OS own native terminal. You can also use \u003Ca href=\"http:\u002F\u002Fiterm2.com\u002F\">iTerm2\u003C\u002Fa> or your OS native terminal.\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fbrew.sh\u002F\">Homebrew\u003C\u002Fa> to easily install packages on your Mac.\u003C\u002Fli>\n\u003C\u002Ful>",{"__typename":163,"id":180,"title":181,"body":182},"401383","TLDR","\u003Cp>\u003Cstrong>Simplified and community-driven man pages\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"http:\u002F\u002Ftldr.sh\u002F\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew install tldr\u003C\u002Fcode> (other clients also available)\u003C\u002Fp>\n\u003Cp>Suppose you need to copy a folder recursively. You forgot the arguments and need some quick and simple examples. Using the man page of cp with \u003Ccode>$ man cp\u003C\u002Fcode> will give you a very comprehensive page without any examples. A search on the internet also takes some time. Using \u003Cstrong>tldr\u003C\u002Fstrong>:\u003C\u002Fp>",{"__typename":184,"id":185,"language":186,"body":187},"CodeBlockRecord","401397","markup","$ tldr cp",{"__typename":163,"id":189,"title":154,"body":190},"401398","\u003Cp>Outputs:\u003C\u002Fp>",{"__typename":184,"id":192,"language":193,"body":194},"401399","bash","cp\n\n  Copy files and folders.\n\n  - Copy a file to another location:\n    cp path\u002Fto\u002Ffile.ext path\u002Fto\u002Fcopy.ext\n\n  - Copy a file into another folder, keeping the filename:\n    cp path\u002Fto\u002Ffile.ext path\u002Fto\u002Ftarget\u002Fparent\u002Ffolder\n\n  - Copy a folder recursively to another location:\n    cp -r path\u002Fto\u002Ffolder path\u002Fto\u002Fcopy\n\n  - Copy a folder recursively into another folder, keeping the folder name:\n    cp -r path\u002Fto\u002Ffolder path\u002Fto\u002Ftarget\u002Fparent\u002Ffolder\n\n  - Copy a folder recursively, in verbose mode (shows files as they are copied):\n    cp -vr path\u002Fto\u002Ffolder path\u002Fto\u002Fcopy\n\n  - Copy the contents of a folder into another folder:\n    cp -r path\u002Fto\u002Fsource\u002Ffolder\u002F* path\u002Fto\u002Ftarget\u002Ffolder\n\n  - Copy text files to another location, in interactive mode (prompts user before overwriting):\n    cp -i *.txt path\u002Fto\u002Fsource\u002F",{"__typename":163,"id":196,"title":154,"body":197},"401400","\u003Cp>You can use \u003Cstrong>tldr\u003C\u002Fstrong> with all of the tools below, for extra comprehension!\u003C\u002Fp>",{"__typename":163,"id":199,"title":200,"body":201},"401401","Z","\u003Cp>\u003Cstrong>Jump to your most used directories\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Frupa\u002Fz\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>$ brew install z\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Add \u003Ccode>. \u002Fusr\u002Flocal\u002Fetc\u002Fprofile.d\u002Fz.sh\u003C\u002Fcode> to your \u003Ccode>.bash_profile\u003C\u002Fcode>for Bash and run \u003Ccode>source .bash_profile\u003C\u002Fcode> to reload all your settings in this file.\u003C\u002Fli>\n\u003Cli>Cd into some directories. Z will now track your used directories based on recency and frequency and gives each directory a ranking.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The most commonly used task in a terminal would probably be going to specific folders. Luckily with z you can go to a folder instantly. It tracks your most used directory and gives each a ranking. The more you visit a folder, the higher the ranking.\u003C\u002Fp>\n\u003Cp>Show all the rankings of directories that z has tracked so far:\u003C\u002Fp>",{"__typename":184,"id":203,"language":186,"body":204},"401406","$ z",{"__typename":163,"id":206,"title":154,"body":207},"401407","\u003Cp>To go to the folder \u003Ccode>~\u002FDocuments\u002Fexamples\u002FsomeProjectA\u002F\u003C\u002Fcode>:\u003C\u002Fp>",{"__typename":184,"id":209,"language":186,"body":210},"401408","$ z projecta",{"__typename":163,"id":212,"title":154,"body":213},"401409","\u003Cp>If you want to go to a \u003Ccode>\u002Fsrc\u003C\u002Fcode> folder in one of your projects you can do:\u003C\u002Fp>",{"__typename":184,"id":215,"language":186,"body":216},"401410","$ z projecta src",{"__typename":163,"id":218,"title":219,"body":220},"401411","HTTPie","\u003Cp>\u003Cstrong>A CLI, cURL-like tool for humans\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fhttpie.org\u002F\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>$ brew install httpie\u003C\u002Fcode> (other clients available)\u003C\u002Fp>\n\u003Cp>\u003Cstrong>HTTPie\u003C\u002Fstrong> is an HTTP client which goal is to make CLI interaction with web services as human-friendly as possible. It can be used or testing, debugging, and generally interacting with HTTP servers. It's so powerful that replacing cURL for HTTPie is an obvious choice.\u003C\u002Fp>",{"__typename":184,"id":222,"language":186,"body":223},"401412","$ http http:\u002F\u002Fhttpbin.org\u002Fheaders",{"__typename":163,"id":225,"title":154,"body":226},"401413","\u003Cp>\u003Cspan>Outputs:\u003C\u002Fspan>\u003C\u002Fp>",{"__typename":184,"id":228,"language":229,"body":230},"401889","json","HTTP\u002F1.1 200 OK\nAccess-Control-Allow-Credentials: true\nAccess-Control-Allow-Origin: *\nConnection: keep-alive\nContent-Length: 175\nContent-Type: application\u002Fjson\nDate: Mon, 09 Apr 2018 08:54:00 GMT\nServer: meinheld\u002F0.6.1\nVia: 1.1 vegur\nX-Powered-By: Flask\nX-Processed-Time: 0\n\n{\n    \"headers\": {\n        \"Accept\": \"*\u002F*\",\n        \"Accept-Encoding\": \"gzip, deflate\",\n        \"Connection\": \"close\",\n        \"Host\": \"httpbin.org\",\n        \"User-Agent\": \"HTTPie\u002F0.9.9\"\n    }\n}",{"__typename":163,"id":232,"title":154,"body":233},"401415","\u003Cp>This simple example doesn't do any justice of what HTTPie can do. \u003Ca href=\"https:\u002F\u002Fhttpie.org\u002Fdoc\">Checkout the docs\u003C\u002Fa> for a comprehensive writeup of all the possibilities.\u003C\u002Fp>",{"__typename":163,"id":235,"title":236,"body":237},"401416","jq","\u003Cp>\u003Cstrong>JSON processor\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fstedolan.github.io\u002Fjq\u002F\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew install jq\u003C\u002Fcode> (other clients available)\u003C\u002Fp>\n\u003Cp>With \u003Cstrong>jq\u003C\u002Fstrong> you can slice, filter, map and transform structured data with ease.\u003C\u002Fp>\n\u003Cp>We're going to use \u003Cstrong>HTTPie\u003C\u002Fstrong> to make a request to the JSON Placeholder API. The output from the \u003Ccode>http\u003C\u002Fcode> command will be send to the \u003Ccode>jq\u003C\u002Fcode> command with the pipe symbol (|). Here \u003Ccode>jq\u003C\u002Fcode> is used with the expression \u003Ccode>.\u003C\u002Fcode>, which takes the input and outputs it unchanged. This shows a \u003Ca href=\"https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fusers\">list of 10 users\u003C\u002Fa>:\u003C\u002Fp>",{"__typename":184,"id":239,"language":186,"body":240},"401417","$ http https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fusers | jq '.'",{"__typename":163,"id":242,"title":154,"body":243},"401419","\u003Cp>To get the first user:\u003C\u002Fp>",{"__typename":184,"id":245,"language":186,"body":246},"401420","$ http https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fusers | jq '.[0]'",{"__typename":163,"id":248,"title":154,"body":190},"401421",{"__typename":184,"id":250,"language":229,"body":251},"401890","{\n  \"id\": 1,\n  \"name\": \"Leanne Graham\",\n  \"username\": \"Bret\",\n  \"email\": \"Sincere@april.biz\",\n  \"address\": {\n    \"street\": \"Kulas Light\",\n    \"suite\": \"Apt. 556\",\n    \"city\": \"Gwenborough\",\n    \"zipcode\": \"92998-3874\",\n    \"geo\": {\n      \"lat\": \"-37.3159\",\n      \"lng\": \"81.1496\"\n    }\n  },\n  \"phone\": \"1-770-736-8031 x56442\",\n  \"website\": \"hildegard.org\",\n  \"company\": {\n    \"name\": \"Romaguera-Crona\",\n    \"catchPhrase\": \"Multi-layered client-server neural-net\",\n    \"bs\": \"harness real-time e-markets\"\n  }\n}",{"__typename":163,"id":253,"title":154,"body":254},"401423","\u003Cp>To get the latitude coordinate:\u003C\u002Fp>",{"__typename":184,"id":256,"language":186,"body":257},"401425","$ http https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fusers | jq '.[0] .address.geo.lat'",{"__typename":163,"id":259,"title":154,"body":190},"401428",{"__typename":184,"id":261,"language":262,"body":263},"401429","javascript","\"-37.3159\"",{"__typename":163,"id":265,"title":154,"body":266},"401430","\u003Cp>To get the username, email and company name in a custom object:\u003C\u002Fp>",{"__typename":184,"id":268,"language":186,"body":269},"401431","$ http https:\u002F\u002Fjsonplaceholder.typicode.com\u002Fusers | jq '.[0] | {username: .username, email: .email, company: .company.name}'",{"__typename":163,"id":271,"title":154,"body":190},"401891",{"__typename":184,"id":273,"language":229,"body":274},"401892","{\n  \"username\": \"Bret\",\n  \"email\": \"Sincere@april.biz\",\n  \"company\": \"Romaguera-Crona\"\n}",{"__typename":163,"id":276,"title":154,"body":277},"401893","\u003Cp>Check out these 2 tutorials about \u003Ccode>jq\u003C\u002Fcode> that go in further detail:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Frobots.thoughtbot.com\u002Fjq-is-sed-for-json\">https:\u002F\u002Frobots.thoughtbot.com\u002Fjq-is-sed-for-json\u003C\u002Fa>\u003C\u002Fli>\n\u003Cli>\u003Ca href=\"https:\u002F\u002Fstedolan.github.io\u002Fjq\u002Ftutorial\u002F\">https:\u002F\u002Fstedolan.github.io\u002Fjq\u002Ftutorial\u002F\u003C\u002Fa>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Note:\u003C\u002Fstrong> \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsimeji\u002Fjid\">Jid\u003C\u002Fa> has similar functionality as jq, but you can use it interactively at the command line. Another similar tool is \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftomnomnom\u002Fgron\">Gron\u003C\u002Fa>, written in Go.\u003C\u002Fp>",{"__typename":163,"id":279,"title":280,"body":281},"401951","fzf","\u003Cp>\u003Cstrong>A command line fuzzy finder\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fjunegunn\u002Ffzf\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>$ brew install fzf\u003C\u002Fcode> (other clients available)\u003C\u002Fp>\n\u003Cp>\u003Cstrong>fzf\u003C\u002Fstrong> is a fast and powerful fuzzy finder. It's an interactive Unix filter for command-line that can be used with any list; files, command history, processes, hostnames, bookmarks, git commits, etc.\u003C\u002Fp>\n\u003Cp>Search in current directory for directory names and files:\u003C\u002Fp>",{"__typename":184,"id":283,"language":186,"body":284},"401952","$ fzf",{"__typename":163,"id":286,"title":154,"body":226},"401953",{"__typename":184,"id":288,"language":186,"body":289},"401954"," 549\u002F549\n> Dockerfile\n  app.config.js\n  dato.config.js\n  docker\u002FMongo.Dockerfile\n  docker\u002FProxy.Dockerfile\n  docker\u002Fnginx.conf\n  docker-compose.yml\n  docs\u002Fdeployment.md\n  docs\u002Fenvironment.md\n  docs\u002Ffront-end-setup.md\n  docs\u002Ffront-end-tooling.md\n  docs\u002Fi18n.md\n  ...",{"__typename":163,"id":291,"title":154,"body":292},"401955","\u003Cp>By default \u003Ccode>fzf\u003C\u002Fcode> shows the total number of files and below all the files sorted alphabetically. The \u003Ccode>>\u003C\u002Fcode> is the prompt.\u003C\u002Fp>\n\u003Cp>We're going to search in a directory \u003Ccode>_base\u003C\u002Fcode> for all \u003Ccode>.svg\u003C\u002Fcode> files that use a dash:\u003C\u002Fp>",{"__typename":184,"id":294,"language":186,"body":295},"401956","> _base - .svg",{"__typename":163,"id":297,"title":154,"body":190},"401957",{"__typename":184,"id":299,"language":186,"body":300},"401958","5\u002F549\nsites\u002F_base\u002Fpublic\u002Fimages\u002Fmb-net.svg\nsites\u002F_base\u002Fpublic\u002Ficons\u002Fcheck-circle.svg\nsites\u002F_base\u002Fpublic\u002Ficons\u002Fshopping-bag.svg\nsites\u002F_base\u002Fpublic\u002Ficons\u002Fapp-store-badge.svg\nsites\u002F_base\u002Fpublic\u002Ficons\u002Fgoogle-play-badge.svg",{"__typename":163,"id":302,"title":154,"body":303},"401959","\u003Cp>Searching for \u003Ccode>> - .svg _base\u003C\u002Fcode> would return the same results.\u003C\u002Fp>\n\u003Cp>Search in all git commits for the term \"header\":\u003C\u002Fp>",{"__typename":184,"id":305,"language":186,"body":306},"401960","$ git log | fzf -q \"header\"",{"__typename":163,"id":308,"title":154,"body":309},"401961","\u003Cp>\u003Ccode>fzf\u003C\u002Fcode> needs an application that does the traversing of the file system. By default it uses the \u003Ccode>find\u003C\u002Fcode> command. The \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsharkdp\u002Ffd\">fd\u003C\u002Fa> command is a fast alternative and has several advantages over \u003Ccode>find\u003C\u002Fcode>, including ignoring patterns from your \u003Ccode>.gitignore\u003C\u002Fcode>. To use \u003Ccode>fd\u003C\u002Fcode>:\u003C\u002Fp>",{"__typename":184,"id":311,"language":186,"body":312},"401962","$ brew install fd\n$ export FZF_DEFAULT_COMMAND='fd --type f'",{"__typename":163,"id":314,"title":154,"body":315},"401963","\u003Cp>You can also save the export command to your \u003Ccode>.bash_profile\u003C\u002Fcode> and it will remember the setting.\u003C\u002Fp>\n\u003Cp>By default, \u003Ccode>fzf\u003C\u002Fcode> search results show up at the top. You can reverse this as in the screenshots. Put in your \u003Ccode>.bash_profile\u003C\u002Fcode> to remember this option or execute it directly from the terminal:\u003C\u002Fp>",{"__typename":184,"id":317,"language":186,"body":318},"401964","export FZF_DEFAULT_OPTS='--reverse'",{"__typename":163,"id":320,"title":321,"body":322},"401965","The Silver Searcher","\u003Cp>\u003Cstrong>Lightning fast full text search\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fggreer\u002Fthe_silver_searcher\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew install the_silver_searcher\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>When you need a very quick text search, opening up your Code Editor can take too long. Using the find command is awful, if that's not your thing. Using the Silver Searcher is simple and extremely fast. The command name is \u003Ccode>ag\u003C\u002Fcode>, which is the chemical symbol for silver (Ag). It also respects the entries in your \u003Ccode>.gitignore\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>Searching for the text \u003Ccode>'<\u002Fform>'\u003C\u002Fcode> recursively in all directories:\u003C\u002Fp>",{"__typename":184,"id":324,"language":186,"body":325},"401966","$ ag '\u003C\u002Fform>'",{"__typename":163,"id":327,"title":154,"body":190},"401967",{"__typename":184,"id":329,"language":186,"body":330},"401968","sites\u002F_base\u002Fcomponents\u002Fproduct-filters\u002Fproduct-filters.js\n61:   \u003C\u002Fform>\n\nsites\u002F_base\u002Fcomponents\u002Fproduct-lens-tier\u002Fproduct-lens-tier.js\n63:   \u003C\u002Fform>\n\nsites\u002F_base\u002Fcomponents\u002Fsearch-form\u002Fsearch-form.js\n40:  \u003C\u002Fform>",{"__typename":163,"id":332,"title":154,"body":333},"401969","\u003Cp>Search for the text '' recursively in all directories where the filenames must match 'search':\u003C\u002Fp>",{"__typename":184,"id":335,"language":186,"body":336},"401970","$ ag '\u003C\u002Fform>' -G search",{"__typename":163,"id":338,"title":154,"body":190},"401971",{"__typename":184,"id":340,"language":186,"body":341},"401972","sites\u002F_base\u002Fcomponents\u002Fsearch-form\u002Fsearch-form.js\n40:  \u003C\u002Fform>",{"__typename":163,"id":343,"title":344,"body":345},"401973","trash-cli","\u003Cp>\u003Cstrong>Move files and folders to the trash\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsindresorhus\u002Ftrash-cli\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>npm install --global trash-cli\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>In contrast to \u003Ccode>rm\u003C\u002Fcode>, which \u003Cem>permanently\u003C\u002Fem> deletes files, \u003Cstrong>trash\u003C\u002Fstrong> moves all files and folders to the trash. If you’re interested about how \u003Ccode>rm\u003C\u002Fcode> works and the dangers it brings with it: \u003Ca href=\"https:\u002F\u002Fdocstore.mik.ua\u002Forelly\u002Funix3\u002Fupt\u002Fch14_03.htm\">read more about rm\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Remove the folder \u003Ccode>build\u003C\u002Fcode> and all the files and folders containing it and move it to the trash:\u003C\u002Fp>",{"__typename":184,"id":347,"language":186,"body":348},"401974","$ trash build",{"__typename":163,"id":350,"title":351,"body":352},"401975","npx","\u003Cp>\u003Cstrong>Execute npm package\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fnpx\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>npx\u003C\u002Fcode> is bundled with \u003Ccode>npm\u003C\u002Fcode> so there's no need to install it globally\u003C\u002Fp>\n\u003Cp>\u003Cstrong>npx\u003C\u002Fstrong> is very convenient for one off execution commands. Say you want to quickly fire up a local server in a directory. You could use the npm package \u003Ccode>serve\u003C\u002Fcode> and install it globally, or locally and execute from \u003Ccode>.\u002Fnode_modules\u002F.bin\u002Fserve\u003C\u002Fcode>. Sounds tedious.\u003C\u002Fp>\n\u003Cp>\u003Ccode>npx\u003C\u002Fcode> removes all the hassle:\u003C\u002Fp>",{"__typename":184,"id":354,"language":186,"body":355},"401976","$ npx serve",{"__typename":163,"id":357,"title":154,"body":358},"401977","\u003Cp>This will after a few moments serve up the current folder on localhost:5000.\u003C\u002Fp>\n\u003Cp>With \u003Ccode>npx\u003C\u002Fcode> you can even execute a gist immediately (this will output \u003Ccode>yay gist\u003C\u002Fcode>):\u003C\u002Fp>",{"__typename":184,"id":360,"language":186,"body":361},"401978","$ npx https:\u002F\u002Fgist.github.com\u002Fzkat\u002F4bc19503fe9e9309e2bfaa2c58074d32",{"__typename":163,"id":363,"title":364,"body":365},"401979","JSON Server","\u003Cp>\u003Cstrong>Run a mock API from the command line\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Ftypicode\u002Fjson-server\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>npm install -g json-server\u003C\u002Fcode> or \u003Ccode>npx json-server\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>Sometimes you're writing frontend code that needs to consume data from an API which isn't ready yet. In this case you can mock your own API.\u003C\u002Fp>\n\u003Cp>Create a \u003Ccode>db.json\u003C\u002Fcode> file:\u003C\u002Fp>",{"__typename":184,"id":367,"language":229,"body":368},"401980","{\n  \"posts\": [\n    { \"id\": 1, \"title\": \"command line tools article\", \"author\": \"john doe\" }\n  ],\n  \"comments\": [\n    { \"id\": 1, \"body\": \"nice\", \"postId\": 1 }\n  ],\n  \"profile\": { \"name\": \"john doe\" }\n}",{"__typename":163,"id":370,"title":154,"body":371},"401981","\u003Cp>Start JSON Server:\u003C\u002Fp>",{"__typename":184,"id":373,"language":186,"body":374},"401982","$ npx json-server --watch db.json",{"__typename":163,"id":376,"title":154,"body":377},"401983","\u003Cp>Now if you go to \u003Ca href=\"http:\u002F\u002Flocalhost:5000\u002Fposts\u002F1\">http:\u002F\u002Flocalhost:5000\u002Fposts\u002F1\u003C\u002Fa>, you'll get:\u003C\u002Fp>",{"__typename":184,"id":379,"language":229,"body":380},"401984","{ \"id\": 1, \"title\": \"command line tools article\", \"author\": \"john doe\" }",{"__typename":163,"id":382,"title":383,"body":384},"401985","ngrok","\u003Cp>\u003Cstrong>SSH tunnel to your development machine\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fngrok.com\u002F\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew cask install ngrok\u003C\u002Fcode>, \u003Ccode>npm install -g ngrok\u003C\u002Fcode>or download from \u003Ca href=\"https:\u002F\u002Fngrok.com\u002Fdownload\">https:\u002F\u002Fngrok.com\u002Fdownload\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>\u003Ccode>ngrok\u003C\u002Fcode> allows you to create secure tunnels to localhost and make it available through a secure URL. There are lots of use cases (also see ngrok.com):\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Public URLs for sending previews to clients.\u003C\u002Fli>\n\u003Cli>Public URLs for demoing your own machine.\u003C\u002Fli>\n\u003Cli>Public URLs for testing on mobile devices.\u003C\u002Fli>\n\u003Cli>Public URLs for building webhook integrations.\u003C\u002Fli>\n\u003Cli>Public URLs for SSH access to your Raspberry Pi.\u003C\u002Fli>\n\u003Cli>Public URLs exposing your local web server.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Your local web server running on port 5000:\u003C\u002Fp>",{"__typename":184,"id":386,"language":186,"body":387},"401986","$ ngrok http 5000",{"__typename":163,"id":389,"title":154,"body":190},"401987",{"__typename":184,"id":391,"language":186,"body":392},"401988","Session Status                online                                                                           \nSession Expires               7 hours, 56 minutes                                                              \nVersion                       2.2.8                                                                            \nRegion                        United States (us)                                                               \nWeb Interface                 http:\u002F\u002F127.0.0.1:4040                                                            \nForwarding                    http:\u002F\u002F0a629ef8.ngrok.io -> localhost:5000                                       \nForwarding                    https:\u002F\u002F0a629ef8.ngrok.io -> localhost:5000\n",{"__typename":163,"id":394,"title":154,"body":395},"401989","\u003Cp>The development server at port 5000 is now available at http(s):\u002F\u002F0a629ef8.ngrok.io, including a web interface. The amount of connections to your \u003Ccode>ngrok\u003C\u002Fcode> URL is limited, but there are paid tiers that open up a lot of possibilities.\u003C\u002Fp>",{"__typename":163,"id":397,"title":398,"body":399},"401990","git-standup","\u003Cp>\u003Cstrong>Review yesterday’s commits\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fkamranahmedse\u002Fgit-standup\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew install git-standup\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>When it's time for a standup and it's a bit of a blur what you did on your last working day, \u003Cstrong>git-standup\u003C\u002Fstrong> can save your day. To quickly generate an overview of what you did yesterday:\u003C\u002Fp>",{"__typename":184,"id":401,"language":186,"body":402},"401991","$ git standup",{"__typename":163,"id":404,"title":154,"body":190},"401992",{"__typename":184,"id":406,"language":186,"body":407},"401993","ea2483c - fix(cookie-notification): added site container (10 days ago) \u003CJohn Doe>\n8a1dc1e - (fix\u002Ffull-width-background) refactor: moved site container into the image gallery component to fix issues (11 days ago) \u003CJohn Doe>\n2f64d57 - (origin\u002Ffix\u002Ffull-width-background) refactor: added site container to the breadcrumb on the product detail page (11 days ago) \u003CJohn Doe>",{"__typename":163,"id":409,"title":154,"body":410},"401994","\u003Cp>To check what you did 3 days ago:\u003C\u002Fp>",{"__typename":184,"id":412,"language":186,"body":413},"401995","$ git standup -d 3",{"__typename":163,"id":415,"title":154,"body":416},"401996","\u003Cp>Using the same command in a directory with multiple repositories will show you the commits of multiple projects. This will list all your commits since the last working day in all the repositories inside.\u003C\u002Fp>",{"__typename":163,"id":418,"title":419,"body":420},"401997","caffeinate","\u003Cp>\u003Cstrong>Never sleep\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>\u003Cem>\"Mac only\"\u003C\u002Fem>\u003C\u002Fp>\n\u003Cp>On certain moments, you don't want your Mac to go to sleep. E.g. when you give a presentation or copy a large file:\u003C\u002Fp>",{"__typename":184,"id":422,"language":186,"body":423},"401998","$ caffeinate",{"__typename":163,"id":425,"title":154,"body":426},"401999","\u003Cp>This command will indefinitely be active, until you press \u003Ccode>CTRL+C\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>To prevent your Mac from sleeping for one hour (3,600 seconds):\u003C\u002Fp>",{"__typename":184,"id":428,"language":186,"body":429},"402000","$ caffeinate -u -t 3600",{"__typename":163,"id":431,"title":154,"body":432},"402001","\u003Cp>To prevent your Mac from sleeping until the copy command completes:\u003C\u002Fp>",{"__typename":184,"id":434,"language":186,"body":435},"402002","$ caffeinate -s cp src\u002Flargefile destination\u002Flargefile",{"__typename":163,"id":437,"title":438,"body":439},"402003","exa","\u003Cp>\u003Cstrong>LS, but with colors\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cp>📝 \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fogham\u002Fexa\">Source\u003C\u002Fa>\u003Cbr \u002F>👩‍💻 Installation: \u003Ccode>brew install exa\u003C\u002Fcode>\u003C\u002Fp>\n\u003Cp>\u003Ccode>exa\u003C\u002Fcode> is a small and fast alternative for \u003Ccode>ls\u003C\u002Fcode>. It uses colors to accentuate files & folders, but also file owner, group, permissions, size, date modified, etc...\u003C\u002Fp>",{"__typename":167,"id":441,"image":442,"caption":447,"fullWidth":148,"captionPosition":448},"402004",{"url":443,"alt":444,"width":445,"height":446},"https:\u002F\u002Fwww.datocms-assets.com\u002F2850\u002F1523356161-exa.png","exa command line",1237,1272,"exa.png","bottom",{"__typename":163,"id":450,"title":154,"body":451},"402005","\u003Cp>If you find it a good alternative for ls, you can create an alias, e.g.:\u003C\u002Fp>",{"__typename":184,"id":453,"language":186,"body":454},"402006","alias l=\"exa --all --long --color=always --group-directories-first\"",{"__typename":163,"id":456,"title":154,"body":457},"402007","\u003Cp>That’s it! If you like this and have tools to share with us, why not \u003Ca href=\"https:\u002F\u002Ftwitter.com\u002Fintent\u002Ftweet?text=.@devoorhoede%20Awesome%20blog%20post!%20Here%E2%80%99s%20my%20%23cli%20tip:%20\">send us a tweet\u003C\u002Fa> :)\u003C\u002Fp>",[459],{"title":460,"body":461,"links":462,"mailchimpValue":154,"mailchimpName":154,"mailchimpId":154,"formType":154,"contactPerson":149},"Also in love with the web?","\u003Cp>For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?\u003C\u002Fp>\n",[463],{"__typename":464,"id":465,"title":466,"link":467},"InternalLinkRecord","163140992","Join our team",{"__typename":44,"slug":468},"jobs",[],[],1776256150509]