From c6802eeb4cd107c50e54f175e0b0a751d3472e47 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 2 May 2020 11:20:16 +0300 Subject: [PATCH] Integration-tools disintegration --- .travis.yml | 13 - .travis/push.sh | 35 - blog_data/snippetList.json | 328 ------ blog_data/snippets.json | 529 --------- config.js | 8 - package-lock.json | 2243 ------------------------------------ package.json | 23 - 7 files changed, 3179 deletions(-) delete mode 100644 .travis.yml delete mode 100644 .travis/push.sh delete mode 100644 blog_data/snippetList.json delete mode 100644 blog_data/snippets.json delete mode 100644 config.js delete mode 100644 package-lock.json delete mode 100644 package.json diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 0e4294382..000000000 --- a/.travis.yml +++ /dev/null @@ -1,13 +0,0 @@ -language: node_js -cache: - directories: - - node_modules -node_js: -- lts/* -before_install: -- git fetch --depth=10000 -script: -- npm run extractor -after_success: -- chmod +x .travis/push.sh -- .travis/push.sh diff --git a/.travis/push.sh b/.travis/push.sh deleted file mode 100644 index 227a5003d..000000000 --- a/.travis/push.sh +++ /dev/null @@ -1,35 +0,0 @@ -#!/bin/bash -setup_git() { - git config --global user.email "30secondsofcode@gmail.com" - git config --global user.name "30secondsofcode" -} - -commit_website_files() { - if [ $TRAVIS_EVENT_TYPE != "pull_request" ]; then - if [ $TRAVIS_BRANCH == "master" ]; then - echo "Committing to master branch..." - git checkout master - git add * - if [ $TRAVIS_EVENT_TYPE == "cron" ]; then - git commit --message "Travis build: $TRAVIS_BUILD_NUMBER [cron]" - elif [ $TRAVIS_EVENT_TYPE == "api" ]; then - git commit --message "Travis build: $TRAVIS_BUILD_NUMBER [custom]" - else - git commit --message "Travis build: $TRAVIS_BUILD_NUMBER" - fi - fi - fi -} - -upload_files() { - if [ $TRAVIS_EVENT_TYPE != "pull_request" ]; then - if [ $TRAVIS_BRANCH == "master" ]; then - echo "Pushing to master branch..." - git push --quiet "https://${GH_TOKEN}@github.com/30-seconds/30-seconds-blog.git" master > /dev/null 2>&1 - fi - fi -} - -setup_git -commit_website_files -upload_files diff --git a/blog_data/snippetList.json b/blog_data/snippetList.json deleted file mode 100644 index dd4c61db9..000000000 --- a/blog_data/snippetList.json +++ /dev/null @@ -1,328 +0,0 @@ -{ - "data": [ - { - "id": "10-vs-code-extensions-for-js-developers", - "type": "snippetListing", - "title": "10 must-have VS Code extensions for JavaScript developers", - "attributes": { - "text": "Developers will most likely argue for the rest of eternity about the most productive code editor and the best extensions. Here are my personal extension preferences for VS Code as a JavaScript developer:\n\n1. ESLint\n[ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) turns the popular JavaScrpt linter into an extension of VS Code. It automatically reads your linting configuration, identifies problems and even fixes them for you, if you want.\n\n2. GitLens\n[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a very powerful collaboration tool for VS Code. It provides many useful tools for git such as blame, code authorship, activity heatmaps, recent changes, file history and even commit search.\n \n3. Debugger for Chrome\n[Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) allows you to debug your JavaScript code in Chrome or Chromium. Breakpoints, call stack inspection and stepping inside a function are only some of its features.\n\n4. Bracket Pair Colorizer 2\n[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) makes reading code faster as it makes matching brackets the same color. This extension for VS Code improves upon its predecessor by providing improved performance.\n\n5. Bookmarks\n[Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) is one of those extensions that will significantly reduce your time jumping between different files, as it allows you to save important positions and navigate back to them easily and quickly.\n\n6. TODO Highlight\n[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight) simplifies tracking leftover tasks by allowing you to list all of your TODO annotations, as well as adding a handy background highlight to them to make them pop out immediately. \n\n7. Live Server\n[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) gives you an easy way to serve web pages from VS Code, making previewing and debugging a lot easier. One of the core features is the live reload support that many developers are used to.\n\n8. REST Client\n[REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) allows you to send HTTP requests and view the responses directly in VS Code. This extension supports a wide range of formats and authorization and should work with most setups.\n\n9. One Dark Pro\n[One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme) is one of the most popular VS Code themes and with very good reason. It provides a clean theme with a nice palette that has great contrast and is very comfortable to use on a daily basis.\n \n10. Fira Code\n[Fira Code](https://github.com/tonsky/FiraCode) is not a traditional VS Code extension and might take a couple more steps to set up, but it's a superb programming font with ligatures that will help you scan code faster once you get used to it.\n\n**Image credit:** [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "devtools", - "vscode" - ] - }, - "meta": { - "hash": "2dd00656f3a19b08dd10877431101751009c00b0658dc5d3acab61e11fea21e3" - } - }, - { - "id": "4-seo-tips-for-developers", - "type": "snippetListing", - "title": "4 SEO tips for developers", - "attributes": { - "text": "SEO is becoming increasingly relevant as the internet keeps growing. While most web developers usually have little experience with SEO, it is not particularly difficult to handle some of the basics. Here are my top SEO tips for web developers:\n\n1. Craft user-friendly URLs and map the appropriately\nFirst and foremost, start at the very beginning, which is your URL slugs. For URL slugs the rule is that you want them to be human-readable, with words separated by dashes and with no random letters or digits added. Secondly, it's a good idea to make sure that parts of your URLs match to a logical structure in your website (e.g. `/blog/posts/awesome-list-of-seo-tips`). Finally, take the time to build a sitemap and redirect any broken or old URLs to new ones. This will help reduce 404 pages.\n\n2. Use structured data to help Google understand your pages\nStructured data is what Google uses to power its featured snippets, those little cards that appear at the top of certain searches. It's a good idea to set up structured data for your pages, which will help you rank higher in search results and possibly even land a featured snippet every once in a while. Just make sure to find the appropriate structured data type and include it in your page and you should be good to go.\n\n3. Set up Google Analytics and Google Search Console\nThis is hardly a new tip, but I think it deserves a spot on the list, as both of these tools are extremely important. Google Analytics allows you to track user behavior and gather data that can help you identify problems and opportunities, while Google Search Console is helpful for figuring out what users are searching for before landing on your website.\n\n4. Keep an eye on your markup, performance and accessibility\nLast but not least, something that is probably already on your list, is optimizing your code. This includes everything from writing semantic markup and keeping requests to a minimum to optimizing for all device types, making your website accessible and ensuring fast load times. Keep in mind that websites have many moving parts that evolve and change over time, so it's a good idea to audit your website often with a tool like Lighthouse.\n\n**Image credit:** [timJ](https://unsplash.com/@the_roaming_platypus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "seo", - "webdev" - ] - }, - "meta": { - "hash": "ebc2337246ca7925e763034b8f5718f6276afd9252856cad56eff5f6d6ba25f1" - } - }, - { - "id": "6-javascript-regexp-tricks", - "type": "snippetListing", - "title": "6 JavaScript Regular Expression features you can use today", - "attributes": { - "text": "Regular expressions, while very powerful, are notoriously hard to master. Here are 6 useful features that can help you start using them in your JavaScript projects:\n\n**Capturing groups**\n\nCapturing groups allow you to get specific parts of the matched string, simply by wrapping part of the regular expression in parentheses `(...)`:\n\n```js\nconst str = 'JavaScript is a programming language';\n/(JavaScript) is a (.*)/.exec(str);\n/*\n [\n 0: 'JavaScript is a programming language',\n 1: 'JavaScript',\n 2: 'programming language'\n ]\n*/\n```\n\n**Non-capturing groups**\n\nNon-capturing groups are used for matching something without capturing it, like an either/or matching group that you do not really need. They are defined similarly to capturing groups, but prefixed with `?:`:\n\n```js\nconst str = 'JavaScript is a programming language';\n/(?:JavaScript|Python) is a (.+)/.exec(str);\n/*\n [\n 0: 'JavaScript is a programming language',\n 1: 'programming language'\n ]\n*/\n```\n\n**Named capturing groups**\n\nNamed capturing groups allow you to name a capturing group, by prefixing it with ``:\n\n```js\nconst str = 'JavaScript is a programming language';\n/(?.+) is a (?.+)/.exec(str);\n/*\n [\n 0: 'JavaScript is a programming language',\n 1: 'JavaScript',\n 2: 'programming language',\n groups: {\n subject: 'JavaScript,\n description: 'programming language'\n }\n ]\n*/\n```\n\n**Capturing group backreferences**\n\nBackreferences help you write shorter regular expressions, by repeating an existing capturing group, using `\\1`, `\\2` etc. Similarly, you can also repeat named capturing groups using `\\k`:\n\n```js\nconst str = 'JavaScript is a programming language - an awesome programming language JavaScript is';\n/(.+) is a (?.+) - an awesome \\k \\1 is/.exec(str);\n/*\n [\n 0: 'JavaScript is a programming language - an awesome programming language JavaScript is',\n 1: 'JavaScript',\n 2: 'programming language',\n groups: {\n subject: 'JavaScript,\n description: 'programming language'\n }\n ]\n*/\n```\n\n**Lookaheads**\n\nLookaheads allow you to check if something is followed by a certain pattern, without actually matching it. You can create positive lookaheads using `?=` and negative lookaheads using `?!`:\n\n```js\nconst str = 'JavaScript is not the same as Java and you should remember that';\n/Java(?=Script)(.*)/.exec(str);\n/*\n [\n 0: 'JavaScript is not the same as Java and you should remember that',\n 1: 'Script is not the same as Java and you should remember that'\n ]\n*/\n\n/Java(?!Script)(.*)/.exec(str);\n/*\n [\n 0: 'Java and you should remember that',\n 1: ' and you should remember that'\n ]\n*/\n```\n\n**Unicode characters**\n\nFinally, you can match unicode characters, using `/p{...}` and the `/u` flag. Examples include, but are not limited to `{Emoji}`, `{Math_Symbols}` and `{Script=Greek}`:\n\n```js\nconst str = 'Greek looks like this: γεια';\n/\\p{Script=Greek}+/u.exec(str);\n/*\n [\n 0: 'γεια'\n ]\n*/\n```\n\n**Image credit:** [Kace Rodriguez](https://unsplash.com/@kace?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "javascript", - "string", - "regexp" - ] - }, - "meta": { - "hash": "2e6e5d06cb22bf4dfed8489172861f9361129f1fb83cf503d4817b332ae459bf" - } - }, - { - "id": "7-chrome-extensions-for-web-developers", - "type": "snippetListing", - "title": "7 essential Chrome extensions for web developers", - "attributes": { - "text": "Google Chrome's developer tools are nothing short of amazing, but there are a few missing tools that can increase your productivity even further. Here are my personal favorite extensions that I use everyday:\n\n1. CSS Peeper\n[CSS Peeper](https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=en) is an all-in-one tool for CSS inspection that allows you to quickly peek at the styles, fonts, color palettes and assets of any website you want.\n\n2. React Developer Tools\n[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) is the de facto extension when working with React, providing all the necessary inspection tools for your React applications.\n\n3. LastPass\n[LastPass](https://chrome.google.com/webstore/detail/lastpass-free-password-ma/hdokiejnpimakedhajhdlcegeplioahd?hl=en) keeps your accounts and API keys secure, by providing a free password manager complete with password generation and password-protected notes.\n\n4. uBlock Origin\n[uBlock Origin](https://chrome.google.com/webstore/detail/ublock-origin/cjpalhdlnbpafiamejdnhcphjbkeiagm?hl=en) is a simple yet effective ad blocker extension that you can just install and forget about, as it keeps your browsing experience ad-free.\n\n5. VisBug\n[VisBug](https://chrome.google.com/webstore/detail/visbug/cdockenadnadldjbbgcallicgledbeoc?hl=en) allows you to tweak website designs on the fly, using very intuitive controls and tools, without having to delve into any code at all.\n\n6. JSON Viewer\n[JSON Viewer](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=en) provides some much needed syntax highlighting and style customization to JSON responses, which are nowadays very commonplace in most web APIs.\n\n7. EditThisCookie\n[EditThisCookie](https://chrome.google.com/webstore/detail/editthiscookie/fngmhnnpilhplaeedifhccceomclgfbg?hl=en) is a powerful cookie manager extension, that allows you to add, delete, edit and even export and import cookies quickly and efficiently.\n\n**Image credit:** [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "devtools", - "webdev" - ] - }, - "meta": { - "hash": "298a153b85f60c81a96e98bc3823ef580492060a06c65ef17e5c49430a6cfc59" - } - }, - { - "id": "8-tips-for-remote-work", - "type": "snippetListing", - "title": "8 tips for working from home", - "attributes": { - "text": "Working from home (also known as remote work) seems like a great alternative to going to the office every morning, but it comes with its own set of challenges that you need to overcome in order to stay healthy and productive. Here are my tips for achieving just that:\n\n1. Set up your work environment\nWorking from home has its perks, but nothing beats a well-designed office space where everything is set up with only one purpose in mind: working. Figure out your home office, experiment with different settings and understand what works best for you as soon as possible. An ideal working space is comfortable, quiet and has the right equipment for you.\n\n2. Establish ground rules\nMost likely you are not living alone, so you have to establish some ground rules with your roomate or significant other. It's up to you to drive the point home that during working hours you are, for the most part, not home. Sure, you can answer the door if you expect a delivery, but that's pretty much as far as you can go. People should not bother you during working hours, unless absolutely necessary, as small distractions pile up fast.\n\n3. Inform others of your availability\nIt's important to let people know that you are online and working or that you are taking a short break for lunch. Remember that you are still part of a team that requires coordination and others probably depend on your work to some extent. Remember to update your status as necessary to make collaboration easier.\n\n4. Socialize with coworkers\nWorking from home can lead to feelings of loneliness, disconnect, isolation which can quickly spin out of control and lead to depression. Communicate with people on your team as if you were in the same room. A healthy amount of communication will help you feel more like you are all working together rather than each one on their own.\n\n5. Be your best professional self\nNobody might be watching you at home, so you can theoretically slack off as much as you like in your pajamas, but that's not very professional. Try to dress appropriately in case you join a video call and behave professionaly, so no inappropriate websites or hours upon hours of checking social media. Ask yourself if someone in a shared office space would do whatever it is you are doing and, if the answer is no, stop doing it.\n\n6. Plan your daily and weekly tasks\nHaving a coherent working plan helps you organize your time and prioritize important tasks above trivial ones. It also helps to put things into perspective and have a general idea of what other people on the team are working on. Plan ahead of time together with your team and keep each other posted on the progress of each task. Short term plans help you get through the day, long term plans help everyone meet their deadlines.\n\n7. Use the right collaboration tools\nWorking from home has its own challenges and issues, so try to find the right tools for the job. Slack, Skype, Zoom, Hangouts are great for communication. Design tools such as Figma or Sketch cloud help you communicate designs quickly and effectively. GitHub is the perfect tool for code collaboration and VS Code has an extension (Live Share) for sharing your code editors. Communicate with your team, figure out your needs and pick tools that work for you.\n\n8. Maintain regular hours\nIt's as easy to forget about breaks as it is to start working late. Try to set a schedule that sits well with your team and stick to it. If you would work 9 to 5 in a regular office environment, do the same at home. Take regular breaks, do not forget to sign off when put in your daily hours and come back tomorrow. After all, it's business as usual.\n\n**Image credit:** [Goran Ivos](https://unsplash.com/@goran_ivos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "programming", - "jobs", - "webdev" - ] - }, - "meta": { - "hash": "5e48e683f0ef6ae3ae5ea9600b62919041bab9d2e9e00a12a1a8ad78c89542d4" - } - }, - { - "id": "breaking-react", - "type": "snippetListing", - "title": "Breaking React - a common pattern to avoid", - "attributes": { - "text": "I am by no means an expert React engineer, but I have a couple years of experience under my belt. While React is an extremely powerful library for building user interfaces, it is also quite fragile at places. A very common bug I have encountered is caused by direct DOM manipulation in combination with React. This is not exactly an anti-pattern, but under the right circumstances it can break your entire React application and might be hard to debug. \n\nHere's [a minimal example](https://codepen.io/chalarangelo/pen/jOEojVJ?editors=0010) of how one can reproduce this bug, before we dive into explaining the problem and how to fix it:\n\n```jsx\nconst destroyElement = () => \n document.getElementById('app').removeChild(document.getElementById('my-div'));\n\nconst App = () => {\n const [elementShown, updateElement] = React.useState(true);\n \n return (\n
\n \n \n { elementShown ?
I am the element
: null }\n
\n );\n};\n\nReactDOM.render(, document.getElementById('root'));\n```\n\nThis looks like a pretty simple React application, with a container, two buttons and a state variable. However, it will crash if you click the button that calls `destroyElement()` and then click the other button. _Why?_ you might ask. The issue here might not be immediately obvious, but if you look at your browser console you will notice the following exception:\n\n```\nUncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.\n```\n\nThis might still be cryptic, so let me explain what is going on. React uses its own representation of the DOM, called a virtual DOM, in order to figure out what to render. Usually, the virtual DOM will match the current DOM structure and React will process changes in props and state, updating the virtual DOM and then sending the necessary changes to the real DOM. \n\nHowever, in this case React's virtual DOM and the real DOM are different, because of `destroyElement()` removing the `#my-div` element. As a result, when React tries to update the real DOM with the changes from the virtual DOM, the `#my-div` element cannot be removed as it doesn't exist anymore. This results in the above exception being thrown and your application breaking.\n\nThis example is short and easy to resolve, by refactoring `destroyElement()` to be part of the `App` component and interact with its state, yet it showcases how fragile React can be under circumstances. Having a shared codebase, with many developers working on different things, can lead to issues like this being introduced and tracking them down can be rather tricky, which is why you might want to be very careful when directly manipulating the DOM when you use React.\n\n**Image credit:** [Julia Joppien](https://unsplash.com/@vitreous_macula?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "react", - "debugging" - ] - }, - "meta": { - "hash": "633fa8b4636401636d8bcf368f6967b96f50b65be845c9dd923a49e897fba771" - } - }, - { - "id": "code-anatomy-performant-python", - "type": "snippetListing", - "title": "Code Anatomy - Writing high performance Python code", - "attributes": { - "text": "Writing short and efficient Python code is not always easy or straightforward. However, it's often that we see a piece of code and we don't realize the thought process behind the way it was written. We will be taking a look at the [difference](/python/s/difference) snippet, which returns the difference between two iterables, in order to understand its structure.\n\nBased on the description of the snippet's functionality, we can naively write it like this:\n\n```py\ndef difference(a, b):\n return [item for item in a if item not in b]\n```\n\nThe above implementation may work well enough, but doesn't account for duplicates in `b`, making the code take more time than necessary in cases with many duplicates in the second list. To solve this issue, we can make use of the `set()` method, which will only keep the unique values in the list:\n\n```py\ndef difference(a, b):\n return [item for item in a if item not in set(b)]\n```\n\nThis version, while it seems like an improvement, may actually be slower than the previous one. If you look closely, you will see that `set()` is called for every `item` in `a` causing the result of `set(b)` to be evaluated every time. Here's an example where we wrap `set()` with another method to better showcase the problem:\n\n```py\ndef difference(a, b):\n return [item for item in a if item not in make_set(b)]\n\ndef make_set(itr):\n print('Making set...')\n return set(itr)\n\nprint(difference([1, 2, 3], [1, 2, 4]))\n# Making set...\n# Making set...\n# Making set...\n# [3]\n```\n\nThe solution to this issue is to call `set()` once before the list comprehension and store the result to speed up the process:\n\n```py\ndef difference(a, b):\n _b = set(b)\n return [item for item in a if item not in _b]\n```\n\nAnother option worth mentioning when analyzing performance for this snippet is the use of a list comprehension versus using something like `filter()` and `list()`. Implementing the same code using the latter option would result in something like this:\n\n```py\ndef difference(a, b):\n _b = set(b)\n return list(filter(lambda item: item not in _b, a))\n```\n\nUsing `timeit` to analyze the performance of the last two code examples, it's pretty clear that using list comprehension can be up to ten times faster than the alternative, as it's a native language feature that works very similar to a simple `for` loop without the overhead of the extra function calls. This explains why we prefer it, apart from readability.\n\nThis pretty much applies to most mathematical list operation snippets, such as [difference](/python/s/difference), [symmetric_difference](/python/s/symmetric-difference) and [intersection](/python/s/intersection).\n\n**Image credit:** [Kalen Emsley](https://unsplash.com/@kalenemsley?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/code?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)\n", - "tags": [ - "python", - "list", - "performance" - ] - }, - "meta": { - "hash": "40d3da7677547b9f7a7e8dd25fa0217658ecccabc9f794a8b2da416b60a122a0" - } - }, - { - "id": "copy-text-to-clipboard-with-javascript", - "type": "snippetListing", - "title": "How can I copy text to clipboard with JavaScript?", - "attributes": { - "text": "**Core functionality**\n\nA very common need when building websites is the ability to copy text to clipboard with a single button click. Javascript can easily do this in five short steps:hout the user selecting it or hitting the appropriate key combination on their keyboard. Javascript can easily do this in five short steps:\n\n1. Create a`