<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Sam Winter</title>
    <description>The latest articles on Forem by Sam Winter (@sewinter).</description>
    <link>https://forem.com/sewinter</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F502031%2F000ffe9a-6940-4325-90e1-36de7bbd4b80.png</url>
      <title>Forem: Sam Winter</title>
      <link>https://forem.com/sewinter</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/sewinter"/>
    <language>en</language>
    <item>
      <title>8 Best Python Libraries for Algorithmic Trading</title>
      <dc:creator>Sam Winter</dc:creator>
      <pubDate>Sat, 28 Nov 2020 16:49:01 +0000</pubDate>
      <link>https://forem.com/sewinter/8-best-python-libraries-for-algorithmic-trading-1af8</link>
      <guid>https://forem.com/sewinter/8-best-python-libraries-for-algorithmic-trading-1af8</guid>
      <description>&lt;p&gt;Even as someone with significant experience in software engineering and some knowledge of data science, I underwent a learning curve when I started algorithmic trading. Feeling productive took some time. I found myself writing my own Bollinger bands, or scouring for trading calendars, or using each cryptocurrency exchange's idiosyncratic APIs instead of an abstraction over all of them. These are the Python libraries I wish I'd known when I began chasing alpha. They'll help you make money faster.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. FinTA
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/peerchemist/finta"&gt;FinTA&lt;/a&gt; (Financial Technical Analysis) implements over eighty trading indicators in Pandas. Unlike many other trading libraries, which try to do a bit of everything, FinTA only ingests dataframes and spits out trading indicators. Even the comments above each method are instructive, e.g., this &lt;a href="https://github.com/peerchemist/finta/blob/master/finta/finta.py#L511-L523"&gt;comment&lt;/a&gt; annotating MACD. You'll likely see some indicators you don't even recognize, and the breadth of technical analysis encourages experimentation.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Zipline
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/quantopian/zipline"&gt;Zipline&lt;/a&gt; is the best of the generalist trading libraries. It has almost 13k stars (see my article on using data to evaluate software packages &lt;a href="https://thecarrots.io/blog/how-to-evaluate-npm-packages"&gt;here&lt;/a&gt;) and powers &lt;a href="https://www.quantopian.com/"&gt;Quantopian&lt;/a&gt;, one of the most popular quant-finance communities, at least until Robinhood recently acquired it. Zipline allows you to ingest data from the command line (or a Jupyter notebook) and comes built-in with methods to facilitate writing complex strategies and backtesting them.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. CCXT
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/ccxt/ccxt"&gt;CCXT&lt;/a&gt; (CryptoCurrency eXchange Trading) is a lifesaver if you programmatically trade cryptocurrency. No more will you have to write custom logic for each exchange. CCXT abstracts away differences between individual exchange APIs with a unified interface. It supports more than 120 exchanges. If you're not a Pythonist, you can even use the JavaScript and PHP implementations of CCXT (though you should get better taste in programming languages).&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Freqtrade
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/freqtrade/freqtrade"&gt;Freqtrade&lt;/a&gt; is another crypto trading library that supports many exchanges. It facilitates backtesting, plotting, machine learning, performance status, reports, etc. You might be sighing at this point. How many cryptocurrency trading libraries does one algorithmic trading enthusiast need? What's amazing about Freqtrade is that you can control it with &lt;a href="https://telegram.org/"&gt;Telegram&lt;/a&gt;. That's right: you can henceforth DM your robot investment manager. Here are some of its awesome Telegram commands:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;/status [table]&lt;/code&gt;: lists all open trades;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/profit&lt;/code&gt;: lists cumulative profit;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/forcesell &amp;lt;trade_id&amp;gt;|all&lt;/code&gt;: sells the given trade;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/performance&lt;/code&gt;: performance of each finished trade grouped by pair;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/balance&lt;/code&gt;: account balance per currency;&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;/daily &amp;lt;n&amp;gt;&lt;/code&gt;: profit or loss per day, over the last n days.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you want to power up your Freqtrade trading bot and turn it into a Gundam ready to ravage financial markets on your behalf, check out &lt;a href="https://github.com/freqtrade/freqtrade-strategies"&gt;Freqtrade Strategies&lt;/a&gt;, which is what its name suggests.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. YFinance
&lt;/h2&gt;

&lt;p&gt;If you've been trading for long, you've likely heard of Yahoo! Finance. &lt;a href="https://github.com/ranaroussi/yfinance"&gt;YFinance&lt;/a&gt; allows you to reliably and efficiently download market data from Yahoo! Finance. The library arose from a dire need when Yahoo decommissioned their historical data API. The library's creator wrote a helpful tutorial &lt;a href="https://aroussi.com/post/python-yahoo-finance"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Backtrader
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/backtrader/backtrader"&gt;Backtrader&lt;/a&gt; is a popular Python framework for backtesting and trading that includes data feeds, resampling tools, trading calendars, etc. What sets Backtrader apart aside from its features and reliability is its &lt;a href="https://community.backtrader.com/"&gt;active community&lt;/a&gt; and &lt;a href="https://www.backtrader.com/blog"&gt;blog&lt;/a&gt;. Backtrader's community could fill a need given Quantopian's recent shutdown.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. TensorTrade
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://github.com/tensortrade-org/tensortrade"&gt;TensorTrade&lt;/a&gt; is a framework for building trading algorithms that use deep reinforcement learning. It provides abstractions over &lt;code&gt;numpy&lt;/code&gt;, &lt;code&gt;pandas&lt;/code&gt;, &lt;code&gt;gym&lt;/code&gt;, &lt;code&gt;keras&lt;/code&gt;, and &lt;code&gt;tensorflow&lt;/code&gt; to accelerate development. TensorTrade is still in beta, but it's quickly gaining traction and will likely become a mainstay in the quant community. Adam King, the creator of Tensor Trade, wrote an excellent &lt;a href="https://towardsdatascience.com/trade-smarter-w-reinforcement-learning-a5e91163f315"&gt;tutorial&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Trump2Cash
&lt;/h2&gt;

&lt;p&gt;I saved the memeiest library for last. &lt;a href="https://github.com/maxbbraun/trump2cash"&gt;Trump2Cash&lt;/a&gt; monitors Donald Trump's tweets. When he mentions publicly traded companies, it analyzes the tweet's sentiment and executes trades accordingly. The library even includes a utility to benchmark its &lt;a href="https://github.com/maxbbraun/trump2cash/blob/master/benchmark.md"&gt;historical performance&lt;/a&gt;. I'm not making any kind of recommendation, but the algorithm has been surprisingly successful.&lt;/p&gt;

&lt;p&gt;Even supposing that Trump's ability to influence financial markets will soon wane, the source code is easily adaptable to other Twitter accounts. If you're interested in Twitter sentiment as a feature for a trading strategy, the repo is more than worth a look.&lt;/p&gt;

&lt;h3&gt;
  
  
  About Us
&lt;/h3&gt;

&lt;p&gt;At &lt;a href="https://thecarrots.io"&gt;Carrots&lt;/a&gt; we're building a hiring platform specifically for software engineers. You can connect your GitHub, Stack Overflow, and more to go beyond your resume. Our algorithm shows where you rank among world-class talent and surfaces your profile to top companies. Check out our &lt;a href="https://t.me/softwaredevjobs"&gt;Telegram channel&lt;/a&gt; for a live feed of developer jobs.&lt;/p&gt;

</description>
      <category>python</category>
      <category>programming</category>
      <category>productivity</category>
      <category>beginners</category>
    </item>
    <item>
      <title>How to Evaluate NPM Packages</title>
      <dc:creator>Sam Winter</dc:creator>
      <pubDate>Thu, 19 Nov 2020 17:28:45 +0000</pubDate>
      <link>https://forem.com/sewinter/how-to-evaluate-npm-packages-519k</link>
      <guid>https://forem.com/sewinter/how-to-evaluate-npm-packages-519k</guid>
      <description>&lt;p&gt;I recently wrote an &lt;a href="https://thecarrots.io/blog/10-ways-to-speed-up-react-development" rel="noopener noreferrer"&gt;article&lt;/a&gt; on how to speed up React development, advising to, among other things, use packages instead of reinventing the wheel. You'll almost certainly want to use a modal library, for example, instead of building your own implementation. (I say "almost certainly" to include masochists and sadistic instructors.)&lt;/p&gt;

&lt;p&gt;Here follows a qualification to my prior recommendation. Using third-party software carries risk. Malicious packages make the news almost every week. Millions of developer hours have been spent migrating from a deprecated library.&lt;/p&gt;

&lt;p&gt;As an example, I'll compare several popular React component libraries along various mostly quantitative axes that assess risks to sustainability, performance, and security. I won't delve into subjective concerns such as APIs and UI, though these are certainly major factors in choosing a package. Even among this lofty tier of open source software, the difference in risk profiles is stark:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://chakra-ui.com" rel="noopener noreferrer"&gt;Chakra UI&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://evergreen.segment.com" rel="noopener noreferrer"&gt;Evergreen&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://ant.design" rel="noopener noreferrer"&gt;Antd&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://baseweb.design" rel="noopener noreferrer"&gt;Base Web&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Longevity
&lt;/h2&gt;

&lt;p&gt;Developers love stars. They're the de facto measure of a repository's quality. But they're an incomplete and at times misleading metric of potential to be evergreen (I couldn't resist the pun on Segment's component library). Other common indicators are how many repositories use this project, how many contributors there are, and which if any organizations sponsor the project. Here's how our component libraries stack up:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Package&lt;/th&gt;
&lt;th&gt;Stars&lt;/th&gt;
&lt;th&gt;Used By&lt;/th&gt;
&lt;th&gt;Contributors&lt;/th&gt;
&lt;th&gt;Corporate Sponsor&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Chakra UI&lt;/td&gt;
&lt;td&gt;12.4k&lt;/td&gt;
&lt;td&gt;638&lt;/td&gt;
&lt;td&gt;246&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Evergreen&lt;/td&gt;
&lt;td&gt;10.3k&lt;/td&gt;
&lt;td&gt;1626&lt;/td&gt;
&lt;td&gt;105&lt;/td&gt;
&lt;td&gt;Segment&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Antd&lt;/td&gt;
&lt;td&gt;64.8k&lt;/td&gt;
&lt;td&gt;5000+&lt;/td&gt;
&lt;td&gt;1305&lt;/td&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Base Web&lt;/td&gt;
&lt;td&gt;5.6k&lt;/td&gt;
&lt;td&gt;1012&lt;/td&gt;
&lt;td&gt;177&lt;/td&gt;
&lt;td&gt;Uber&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;All of these libraries are established, though Antd stands well above the rest. It's certainly not in danger of deprecation. A caveat to Antd's clear superiority is its age. It gained popularity long before these other libraries even had a &lt;code&gt;package.json&lt;/code&gt; and hence acquired more stars, users, and so on. Its only major competitor for years was Material UI.&lt;/p&gt;

&lt;p&gt;Before installing any package, I typically check its star history using &lt;a href="https://github.com/timqian" rel="noopener noreferrer"&gt;Tim Qian&lt;/a&gt;'s fantastic &lt;a href="https://star-history.t9t.io/" rel="noopener noreferrer"&gt;tool&lt;/a&gt;. Antd's advantage is clear:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fstar-comparison-all.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fstar-comparison-all.png" alt="Star History Comparison"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Antd almost breaks the scale of our chart, so let's take a closer look at our newcomers:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fantless-star-comparison.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fantless-star-comparison.png" alt="Star History Comparison Sans Antd"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here we see drastically different trajectories. From star count alone, one might assume that Chakra UI and Evergreen are about equal in terms of adoption, but Chakra UI is clearly outstripping its competitors. All of these libraries received an initial burst of stars, yet only Chakra has sustained its growth for the past year.&lt;/p&gt;

&lt;p&gt;Say you prioritize corporate sponsorship when evaluating packages and have narrowed your choice to Segment's Evergreen and Uber's Base Web. Evergreen might seem like a clear winner given its much higher star count and adoption. Where Evergreen falls short is in the distribution of its contributors and its commit frequency. Here's the &lt;a href="https://github.com/segmentio/evergreen/graphs/contributors" rel="noopener noreferrer"&gt;activity&lt;/a&gt; from its top six contributors:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fevergreen-contributors.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fevergreen-contributors.png" alt="Evergreen Top Contributors"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There have been few significant contributors to Evergreen outside of the top three developers. Even more alarming is that two of those three core contributors haven't been active in well over a year. Here's how Base Web &lt;a href="https://github.com/uber/baseweb/graphs/contributors" rel="noopener noreferrer"&gt;compares&lt;/a&gt;:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fbaseweb-contributors.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fbaseweb-contributors.png" alt="Base Web Top Contributors"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Although Base Web also has a somewhat top-heavy distribution of contributions, it's more equal than Evergreen's, and its top contributors are still active. Meanwhile, the entire weight of Evergreen seems to rest on &lt;a href="https://github.com/mshwery" rel="noopener noreferrer"&gt;mshwery&lt;/a&gt;'s shoulders.&lt;/p&gt;

&lt;p&gt;The code frequency charts tell a similar story. Contributions to Base Web have been much more consistent:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/segmentio/evergreen/graphs/code-frequency" rel="noopener noreferrer"&gt;Evergreen&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fevergreen-code-frequency.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fevergreen-code-frequency.png" alt="Evergreen Code Frequency"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/uber/baseweb/graphs/code-frequency" rel="noopener noreferrer"&gt;Base Web&lt;/a&gt;&lt;br&gt;
&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fbaseweb-code-frequency.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fmedia.thecarrots.io%2Fblog%2Fhow-to-evaluate-npm-packages%2Fbaseweb-code-frequency.png" alt="Base Web Code Frequency"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While libraries backed by successful tech companies tend to be more enduring (React itself is a prime example), they carry their own risks. Sometimes one or only a few engineers champion an open-source library within the company. When those advocates leave, the project can wither without institutional buy-in. More decentralized packages such as Antd and Chakra UI are resistant to political indifference.&lt;/p&gt;
&lt;h2&gt;
  
  
  Performance
&lt;/h2&gt;

&lt;p&gt;Two pieces of software that do the same thing might radically differ in size. &lt;a href="https://momentjs.com/" rel="noopener noreferrer"&gt;Moment.js&lt;/a&gt; is the most popular date manipulation library, with over twelve million downloads per week, yet it doesn't tree shake well and will add 300kB to your project. &lt;a href="https://day.js.org/" rel="noopener noreferrer"&gt;Day.js&lt;/a&gt; has almost the exact same API and is only 2kB. In fact, Moment.js now &lt;a href="https://momentjs.com/docs/#/-project-status/" rel="noopener noreferrer"&gt;recommends&lt;/a&gt; using Day.js and other date libraries as alternatives.&lt;/p&gt;

&lt;p&gt;Here's the cost of each component library according to the indispensable &lt;a href="https://bundlephobia.com/" rel="noopener noreferrer"&gt;Bundlephobia&lt;/a&gt;:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Package&lt;/th&gt;
&lt;th&gt;Minified Size&lt;/th&gt;
&lt;th&gt;Tree Shakable&lt;/th&gt;
&lt;th&gt;Side Effects&lt;/th&gt;
&lt;th&gt;Dependencies&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://bundlephobia.com/result?p=@chakra-ui/react@1.0.0" rel="noopener noreferrer"&gt;Chakra UI&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;363.3kB&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;44&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://bundlephobia.com/result?p=evergreen-ui@5.1.2" rel="noopener noreferrer"&gt;Evergreen&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;795.3kB&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;17&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://bundlephobia.com/result?p=antd@4.8.4" rel="noopener noreferrer"&gt;Antd&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;1.2MB&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;45&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;a href="https://bundlephobia.com/result?p=baseui@9.105.0" rel="noopener noreferrer"&gt;Base Web&lt;/a&gt;&lt;/td&gt;
&lt;td&gt;60.9kB&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;22&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Antd is the obvious loser in terms of performance. By the way, Moment.js accounts for about 20% of its size. To download the entire Antd package would take almost seven seconds on emerging 3G. The fact that Antd has side effects is equally concerning. Side effects (code that performs some behavior external to its module) hinders treeshaking. A bundler cannot safely remove a module with side effects because it could have external effects that are required.&lt;/p&gt;

&lt;p&gt;The data that Bundlephobia provides is instructive but incomplete. A package's impact on your application's size might be limited if much of that package is tree shaken. To accurately assess its size in the context of your application, use a tool like &lt;a href="https://github.com/webpack-contrib/webpack-bundle-analyzer" rel="noopener noreferrer"&gt;Webpack Bundle Analyzer&lt;/a&gt;, which generates a treemap visualization of bundle content:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcloud.githubusercontent.com%2Fassets%2F302213%2F20628702%2F93f72404-b338-11e6-92d4-9a365550a701.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcloud.githubusercontent.com%2Fassets%2F302213%2F20628702%2F93f72404-b338-11e6-92d4-9a365550a701.gif" alt="Webpack Bundle Analyzer in Action"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Security
&lt;/h2&gt;

&lt;p&gt;The most secure packages are popular, well maintained, and require minimal downstream dependencies. Even if a library has millions of downloads, its risk is higher when it doesn't meet these additional criteria (as when the original, inactive maintainer of &lt;code&gt;event-stream&lt;/code&gt; gave publishing rights to someone who &lt;a href="https://snyk.io/blog/malicious-code-found-in-npm-package-event-stream/" rel="noopener noreferrer"&gt;added a malicious downstream dependency&lt;/a&gt;). If a package is popular, there are more users to quickly identify a security issue; if it's well maintained, there are more developers to patch it; and if it has few dependencies, there's less risk in the first place.&lt;/p&gt;

&lt;p&gt;While all of the component libraries we've examined are probably secure, the numerous dependencies of Chakra UI and Antd make them more vulnerable. After downloading a dependency, you should perform an audit with &lt;code&gt;yarn audit&lt;/code&gt; or &lt;code&gt;npm audit&lt;/code&gt;. These CLI commands identify security vulnerabilities in your packages and recommend patches. Ideally, you would also include &lt;code&gt;yarn audit&lt;/code&gt; or &lt;code&gt;npm audit&lt;/code&gt; in your continuous integration pipeline to check dependencies against known vulnerabilities with every pull request. &lt;code&gt;yarn audit&lt;/code&gt; did in fact reveal a low-risk issue in Evergreen:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;┌───────────────┬──────────────────────────────────────────────────────────────┐
│ low           │ Denial of Service                                            │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ node-fetch                                                   │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ &amp;gt;=2.6.1 &amp;lt;3.0.0-beta.1|| &amp;gt;= 3.0.0-beta.9                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ evergreen-ui                                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ evergreen-ui &amp;gt; glamor &amp;gt; fbjs &amp;gt; isomorphic-fetch &amp;gt; node-fetch │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://www.npmjs.com/advisories/1556                        │
└───────────────┴──────────────────────────────────────────────────────────────┘
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The above advisory was published on September 10th, and Evergreen's latest version was released on September 28th. The issue is likely inconsequential, but the fact that Evergreen did not fix it in that release or any subsequent commit might reflect poorly on their attention to security.&lt;/p&gt;

&lt;p&gt;If software has eaten the world, then open-source software propels it forward. When evaluating packages, carefully select your chariot so that you find yourself astride a sleek, nimble unicorn instead of on your sofa on a Saturday night submitting pull requests for the ancient library upon which your entire application depends while praying for a review from a maintainer who's somewhere off the coast of Bermuda.&lt;/p&gt;

&lt;h3&gt;
  
  
  About Us
&lt;/h3&gt;

&lt;p&gt;At &lt;a href="https://thecarrots.io" rel="noopener noreferrer"&gt;Carrots&lt;/a&gt; we're building a hiring platform specifically for software engineers. You can connect your GitHub, Stack Overflow, and more to show off so much more than your resume. Our algorithm shows where you rank among world-class talent and surfaces your profile to top companies.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>node</category>
      <category>programming</category>
      <category>webdev</category>
    </item>
    <item>
      <title>10 Ways to Speed Up React Development</title>
      <dc:creator>Sam Winter</dc:creator>
      <pubDate>Mon, 16 Nov 2020 17:37:12 +0000</pubDate>
      <link>https://forem.com/sewinter/10-ways-to-speed-up-react-development-3111</link>
      <guid>https://forem.com/sewinter/10-ways-to-speed-up-react-development-3111</guid>
      <description>&lt;p&gt;As much as I love writing React applications, I'd prefer not to. I'd rather have finished hours ago so I can spend time either on a beach outside my computer or in a videogame within it. In the spirit of laziness, here are ten ways to accelerate your React development.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. Use a Framework
&lt;/h2&gt;

&lt;p&gt;Frameworks remove degrees of freedom from the developer. You have fewer decisions because thousands of brilliant open-source developers have made them for you. At least nine times out of ten their decisions are better than yours would have been, unless you're Dan Abramov (if you are Dan Abramov, notice me, senpai). Follow the roadmap the framework sets forth to save time and write more consistent and robust code.&lt;/p&gt;

&lt;p&gt;My favorite React framework is &lt;a href="https://github.com/vercel/next.js"&gt;Next.js&lt;/a&gt;. You get SSR, built-in routing, automatic codesplitting, CSS-in-JS support, and more. You can even write lambdas that share business logic (such as types and validation) with your client-side code. If you host a Next.js app on &lt;a href="https://vercel.com"&gt;Vercel&lt;/a&gt;, you can deploy a free, infinitely scalable application just by pushing to GitHub.&lt;/p&gt;

&lt;p&gt;Other great frameworks include &lt;a href="https://github.com/gatsbyjs/gatsby"&gt;Gatsby.js&lt;/a&gt; and &lt;a href="https://remix.run/"&gt;Remix&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Even if you decide not to use a framework, you should at least use a boilerplate generator such as &lt;a href="https://github.com/facebook/create-react-app"&gt;create-react-app&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Use ESLint
&lt;/h2&gt;

&lt;p&gt;I hope you're already using &lt;a href="https://www.github.com/eslint/eslint"&gt;ESLint&lt;/a&gt;. There's no excuse to not use extremely configurable code that alerts you when you make mistakes. Two ESLint plugins are particularly helpful (and I'd argue essential) for React:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://github.com/yannickcr/eslint-plugin-react"&gt;eslint-plugin-react&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://github.com/jsx-eslint/eslint-plugin-jsx-a11y"&gt;eslint-plugin-jsx-a11y&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  3. Use Prettier
&lt;/h2&gt;

&lt;p&gt;Similarly to ESLint, you should use &lt;a href="https://prettier.io/"&gt;Prettier&lt;/a&gt;, an opinionated code formatter. Prettier integrates with most editors to automatically format your code on save, ensuring a consistent style. I'm all for our robot overlords taking away our freedom to get creative about trivialities.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Use AI-Driven Autocomplete
&lt;/h2&gt;

&lt;p&gt;I hope that the first three suggestions were unsurprising. Using a framework, ESLint, and Prettier are par for the course if you're a JavaScript developer in 2020. This next suggestion is still a bit under the radar. It's my favorite developer tool to spring on friends to show I can still consort with JS hipsters.&lt;/p&gt;

&lt;p&gt;Fully give in to the aforementioned robot overlords and use AI-driven autocomplete. My favorite so far is &lt;a href="https://www.tabnine.com"&gt;TabNine&lt;/a&gt;. You're probably rolling your eyes at the tech buzzwords, but try it and get back to me. You'll be impressed.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Superpower your CLI
&lt;/h2&gt;

&lt;p&gt;Go a step beyond only empowering your JavaScript and plunge into the wonderful world of CLI tools. I recommend a few in particular:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://ohmyz.sh/"&gt;Oh My Zsh&lt;/a&gt;: augment your Zsh configuration with thousands of helpful functions, helpers, plugins, themes, etc.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/galElmalah/scaffolder"&gt;Scaffolder&lt;/a&gt;: painlessly generate boilerplate code.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/agkozak/zsh-z"&gt;ZSH-z&lt;/a&gt;: quickly jump to directories you've recently visited.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  6. Use a React Component Library
&lt;/h2&gt;

&lt;p&gt;Unless you work for a giant company that already has an internal component library, you'll almost certainly want to use one that's pre-built. I can no longer bear the thought of writing tomes of &lt;code&gt;div&lt;/code&gt;s and &lt;code&gt;p&lt;/code&gt;s instead of endlessly configurable &lt;code&gt;Box&lt;/code&gt;s and &lt;code&gt;Text&lt;/code&gt;s. Admire the intuitive elegance of Chakra UI (taken from their website):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Box&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Image&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Flex&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Badge&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Text&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;@chakra-ui/core&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;MdStar&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;react-icons/md&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="k"&gt;default&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nx"&gt;Example&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Box&lt;/span&gt; &lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;5&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;maxW&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;320px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;borderWidth&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;1px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Image&lt;/span&gt; &lt;span class="nx"&gt;borderRadius&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;md&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;https://bit.ly/2k1H1t6&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Flex&lt;/span&gt; &lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;baseline&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;mt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Badge&lt;/span&gt; &lt;span class="nx"&gt;colorScheme&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pink&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Plus&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Badge&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt;
          &lt;span class="nx"&gt;ml&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;
          &lt;span class="nx"&gt;textTransform&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;uppercase&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;fontSize&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;fontWeight&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
          &lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;pink.800&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
        &lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nx"&gt;Verified&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt;&lt;span class="nx"&gt;bull&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;Cape&lt;/span&gt; &lt;span class="nx"&gt;Town&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Flex&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt; &lt;span class="nx"&gt;mt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;fontSize&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;xl&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;fontWeight&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;semibold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;lineHeight&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;short&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nx"&gt;Modern&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Chic&lt;/span&gt; &lt;span class="nx"&gt;Penthouse&lt;/span&gt; &lt;span class="kd"&gt;with&lt;/span&gt; &lt;span class="nx"&gt;Mountain&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;City&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;Sea&lt;/span&gt; &lt;span class="nx"&gt;Views&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt; &lt;span class="nx"&gt;mt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;$119&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt;&lt;span class="nx"&gt;night&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Flex&lt;/span&gt; &lt;span class="nx"&gt;mt&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;align&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;center&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Box&lt;/span&gt; &lt;span class="k"&gt;as&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;MdStar&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;color&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;orange.400&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="o"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;Text&lt;/span&gt; &lt;span class="nx"&gt;ml&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="nx"&gt;fontSize&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;sm&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;b&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="mf"&gt;4.84&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/b&amp;gt; &lt;/span&gt;&lt;span class="se"&gt;(&lt;/span&gt;&lt;span class="sr"&gt;190&lt;/span&gt;&lt;span class="err"&gt;)
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Text&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Flex&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/Box&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Chakra UI is my favorite component library and is accelerating in popularity. Others include &lt;a href="https://github.com/rebassjs/rebass"&gt;Rebass&lt;/a&gt; and &lt;a href="https://github.com/uber/baseweb"&gt;Base Web&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Use a CSS-in-JS library
&lt;/h2&gt;

&lt;p&gt;Even when using a component library, you might need to write CSS. It's like JavaScript's mostly inescapable stepsibling. Your best option is to write CSS in JavaScript, which allows for tighter scoping of styles to components, explicit dependencies, less cascading, and other benefits. A lot of the cool kids have started to use &lt;a href="https://github.com/callstack/linaria"&gt;Linaria&lt;/a&gt;. Linaria doesn't carry the performance costs of other CSS-in-JS libraries because it extracts CSS files during buildtime, resulting in zero runtime.&lt;/p&gt;

&lt;p&gt;Other devs enjoy &lt;a href="https://github.com/emotion-js/emotion"&gt;Emotion&lt;/a&gt;, &lt;a href="https://github.com/callstack/linaria"&gt;Styled Components&lt;/a&gt;, and &lt;a href="https://github.com/cssinjs/jss"&gt;JSS&lt;/a&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Use Storybook
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://storybook.js.org/"&gt;Storybook&lt;/a&gt; allows you to quickly prototype React components in isolation from the app's business logic. You can mock different configurations of props to determine how your component will render. An underappreciated benefit of Storybook is that it enforces a clearly delineated architecture. I typically build as much of my application as possible within storybook, mocking increasingly complex components and even pages. By the time I start on the business logic, a wrapper component will be responsible only for providing props to my presentational ones. My smart components are completely separate from my dumb ones. If you haven't yet, read this classic &lt;a href="https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0"&gt;article&lt;/a&gt; on smart versus dumb components.&lt;/p&gt;

&lt;h2&gt;
  
  
  9. Don't Write Your Own Forms
&lt;/h2&gt;

&lt;p&gt;Learning to write forms in vanilla React is important. It forces the developer to recognize the difference between controlled and uncontrolled components, master state management, etc. When writing production code, however, you'll almost certainly want to use a library. A good form library will not only save you time, but it will also be less prone to bugs.&lt;/p&gt;

&lt;p&gt;You may be thinking, "Aha, but I want to asynchronously validate user input," or, "What if one input depends on another?" No, there's a form library for these and 99% of all other use cases. I recommend &lt;a href="https://formik.org/"&gt;Formik&lt;/a&gt;, but &lt;a href="https://github.com/final-form/react-final-form"&gt;React Final Form&lt;/a&gt; and &lt;a href="https://github.com/react-hook-form/react-hook-form"&gt;React Hook Form&lt;/a&gt; are other favorites.&lt;/p&gt;

&lt;h2&gt;
  
  
  10. Don't Reinvent the Wheel
&lt;/h2&gt;

&lt;p&gt;React is a godsend to lazy programmers. All of the most complicated generalizable components are already written! If you find yourself writing a table, or an autocomplete component, or animation utilities, or if you're importing SVGs for icons, stop writing &lt;code&gt;const Table =&lt;/code&gt; and search for a library. These are some of my favorites:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://www.framer.com/motion/"&gt;Framer Motion&lt;/a&gt;: for animations;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/tannerlinsley/react-table"&gt;React Table&lt;/a&gt;: for tables;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://react-icons.github.io/react-icons/"&gt;React Icons&lt;/a&gt;: for icons;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/STRML/react-draggable"&gt;React Draggable&lt;/a&gt;: for making elements draggable;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/moroshko/react-autosuggest"&gt;React Autosuggest&lt;/a&gt;: for autocomplete;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/Hacker0x01/react-datepicker/"&gt;React Datepicker&lt;/a&gt;: for datepicking.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  About Us
&lt;/h3&gt;

&lt;p&gt;At &lt;a href="https://thecarrots.io"&gt;Carrots&lt;/a&gt; we're building a hiring platform specifically for software engineers. You can connect your GitHub, Stack Overflow, and more to go beyond your resume. Our algorithm shows where you rank among world-class talent and surfaces your profile to top companies. Check out our &lt;a href="https://t.me/softwaredevjobs"&gt;Telegram channel&lt;/a&gt; for a live feed of developer jobs.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>react</category>
      <category>webdev</category>
      <category>productivity</category>
    </item>
    <item>
      <title>JavaScript WTF: Six of the Language’s Gravest Design Flaws</title>
      <dc:creator>Sam Winter</dc:creator>
      <pubDate>Mon, 09 Nov 2020 17:49:18 +0000</pubDate>
      <link>https://forem.com/sewinter/javascript-wtf-46bo</link>
      <guid>https://forem.com/sewinter/javascript-wtf-46bo</guid>
      <description>&lt;p&gt;Some of us have a perhaps misguided affection for JavaScript; others loathe the idiosyncrasies of a language created in ten days. Either way we're stuck with the parlance of web browsers, the idiom whose very name its creator called a &lt;a href="https://www.youtube.com/watch?v=XOmhtfTrRxc&amp;amp;t=2m5s"&gt;"marketing scam."&lt;/a&gt; JavaScript makes us yell. It makes us laugh. Above all, it makes us cry a barbaric &lt;code&gt;NaN&lt;/code&gt; over the mechanical keyboards of the world.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;==&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;In the beginning was&lt;/em&gt; &lt;code&gt;1&lt;/code&gt;&lt;em&gt;, and&lt;/em&gt; &lt;code&gt;1&lt;/code&gt; &lt;em&gt;was with&lt;/em&gt; &lt;code&gt;true&lt;/code&gt;&lt;em&gt;, and&lt;/em&gt; &lt;code&gt;1 == true&lt;/code&gt;&lt;em&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Equality lies at the heart of logic, mathematics, and democratic society. JavaScript's equality operator (&lt;code&gt;==&lt;/code&gt;) breaks the equivalence relation of mathematics in that it performs type coercion when evaluating equality. Yes, &lt;code&gt;1&lt;/code&gt; is equal to &lt;code&gt;1&lt;/code&gt; in JavaScript, but it's also equal to &lt;code&gt;true&lt;/code&gt; and &lt;code&gt;"1"&lt;/code&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; true&lt;/span&gt;
&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; false&lt;/span&gt;
&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;0&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; true&lt;/span&gt;
&lt;span class="mi"&gt;0&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; true&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To rectify this original sin of unequal equality, JavaScript also offers the strict equality operator &lt;code&gt;===&lt;/code&gt;, which considers both type and value. Even the strict equality operator isn't without its quirks (or faults): &lt;code&gt;NaN === NaN // =&amp;gt; false&lt;/code&gt;. In JavaScript some equality operators are more equal than others.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;this&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;A junior developer said, What is&lt;/em&gt; &lt;code&gt;this&lt;/code&gt;&lt;em&gt;?, pointing to his monitor with wide eyes; How could I answer the junior developer? … I do not know what it is anymore than he.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The JavaScript keyword &lt;code&gt;this&lt;/code&gt; is much like English homograph "set." Its meanings are manifold and depend on context. There are as many ways to bind the value of &lt;code&gt;this&lt;/code&gt; as there are days in the American programmer's work week, as much as we might wish there were fewer:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;within a method, &lt;code&gt;this&lt;/code&gt; is the calling object;&lt;/li&gt;
&lt;li&gt;within a constructor, &lt;code&gt;this&lt;/code&gt; is the newly created object;&lt;/li&gt;
&lt;li&gt;in the global scope, &lt;code&gt;this&lt;/code&gt; refers to the global object (or is &lt;code&gt;undefined&lt;/code&gt; in &lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode"&gt;strict mode&lt;/a&gt;);&lt;/li&gt;
&lt;li&gt;in event handlers, &lt;code&gt;this&lt;/code&gt; is the &lt;code&gt;currentTarget&lt;/code&gt; of the &lt;code&gt;event&lt;/code&gt;;&lt;/li&gt;
&lt;li&gt;within a function bound with the &lt;code&gt;call&lt;/code&gt;, &lt;code&gt;apply&lt;/code&gt;, or &lt;code&gt;bind&lt;/code&gt; methods of &lt;code&gt;Function.prototype&lt;/code&gt;, &lt;code&gt;this&lt;/code&gt; refers to the first argument of the binding method.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;For a language that draws an unusually nuanced distinction between types of nothingness in &lt;code&gt;null&lt;/code&gt; and &lt;code&gt;undefined&lt;/code&gt;, the ambiguity of &lt;code&gt;this&lt;/code&gt; is a curious choice. The global &lt;code&gt;this&lt;/code&gt; in particular is utterly useless at best and often hazardous, hence its removal in strict mode.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;hasOwnProperty&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;The runtime opened the object at once, while S. and JavaScript watched. It was stuffed with properties, and when it was opened two large prototypes fell out, tied up as you might tie up bundles of firewood. The runtime flinched in alarm. "Try higher up, higher up," said JavaScript, directing operations from above. The runtime, gathering up the properties in memory, obediently cleared everything out of the object to get to the properties up the chain. The runtime's memory was already half full of properties. "Oh, there’s been a lot of definition done," said JavaScript, nodding, "and this is only a small part of it. I keep the larger part of what I have here up the chain."&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;JavaScript is the only popular programming language using &lt;a href="https://wikipedia.org/wiki/Prototype-based_programming"&gt;prototypal inheritance&lt;/a&gt;, often contrasted with &lt;a href="https://wikipedia.org/wiki/Class-based_programming"&gt;classical or class-based inheritance&lt;/a&gt;. While prototypal inheritance isn't as classy as its counterpart, it's a more powerful paradigm. One can easily build classical inheritance from prototypal, and prototypal inheritance is more naturally suited to &lt;a href="https://wikipedia.org/wiki/Composition_over_inheritance"&gt;composition over inheritance&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Unfortunately, the &lt;code&gt;for in&lt;/code&gt; loop unexpectedly traverses an object's entire prototype chain, not only the object itself. If one were to iterate over the properties of a Goomba, the minutiae of the Nintendo Corporation would follow (provided these minute Nintendoan properties weren't defined with &lt;code&gt;Object.defineProperty&lt;/code&gt;, added in ES5). To iterate through a Goomba and a Goomba alone, one need check &lt;code&gt;if goomba.hasOwnProperty(property)&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;property&lt;/span&gt; &lt;span class="k"&gt;in&lt;/span&gt; &lt;span class="nx"&gt;goomba&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;goomba&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;hasOwnProperty&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;property&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;property&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;code&gt;hasOwnProperty&lt;/code&gt; isn't an original sin like &lt;code&gt;==&lt;/code&gt; or a source of bewilderment like &lt;code&gt;this&lt;/code&gt;. It's a guardrail to unintuitive and usually unwanted behavior.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;typeof&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;There is no variable one can declare that is not filled with angst and ambivalence, that is not, in one of those values, the mighty&lt;/em&gt; &lt;code&gt;typeof&lt;/code&gt; &lt;em&gt;an&lt;/em&gt; &lt;code&gt;object&lt;/code&gt;&lt;em&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The operator &lt;code&gt;typeof&lt;/code&gt; is the most worthless feature in all of JavaScript. With the precision of a software developer returning from a long vacation and trying to determine where she left off, &lt;code&gt;typeof&lt;/code&gt;'s return values are often misleading and uninformative:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="p"&gt;{};&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="kc"&gt;null&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="sr"&gt;/abc/&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="nb"&gt;Math&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;String&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;abc&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Date&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Boolean&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kc"&gt;false&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Number&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; object&lt;/span&gt;
&lt;span class="k"&gt;typeof&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nb"&gt;Function&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// =&amp;gt; function ;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The highest purpose of &lt;code&gt;typeof&lt;/code&gt; is to check whether a variable is &lt;code&gt;undefined&lt;/code&gt;, e.g., &lt;code&gt;typeof actuallyNotAnObject === "undefined"&lt;/code&gt;. To reference the variable otherwise would result in a &lt;code&gt;ReferenceError&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;eval&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Then, with inviolate curve, forsake our eyes&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;As apparitional as sails that cross&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Some string of text to be&lt;/em&gt; &lt;code&gt;eval&lt;/code&gt;&lt;em&gt;ed away;&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;- Till with untrusted code ourselves betray ...&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;The &lt;code&gt;eval&lt;/code&gt; function is JavaScript's four-letter word. It executes any string of code passed to it with the privileges of the caller. When a malicious party has influenced that string, &lt;code&gt;eval&lt;/code&gt; poses a tremendous security risk. It's not even performant given that it has to invoke the JavaScript interpreter—particularly expensive when interfacing with machine code as in variable lookup.&lt;/p&gt;

&lt;p&gt;JavaScript developers may not realize that they're using &lt;code&gt;eval&lt;/code&gt; "under the hood" when they pass a string of code as an event-listener callback or as an argument to &lt;code&gt;setTimeout&lt;/code&gt; or &lt;code&gt;setInterval&lt;/code&gt;. Barring build tools and the onanism of metaprogrammers, code ought to be written as code, not strings.&lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;code&gt;;&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;The Semicolon has not left me and I don't believe it will leave me so soon; but I no longer have to bear it, it is no longer an illness or a passing fit: it is I.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Like a well-intentioned simpleton under cover of night, the JavaScript parser covertly inserts semicolons when it encounters syntactic errors due to missing semicolons, often inadvertently changing the code's behavior. (The official &lt;a href="http://www.ecma-international.org/ecma-262/6.0/index.html#sec-rules-of-automatic-semicolon-insertion"&gt;rules&lt;/a&gt; of automatic semicolon insertion read like &lt;a href="https://wikipedia.org/wiki/GPT-3"&gt;GPT-3&lt;/a&gt;'s attempt at computer-scientific legalese.)&lt;/p&gt;

&lt;p&gt;The parser papers over what ought to be errors rather than constraining syntax by design. This degree of freedom causes the semicolon-forgetful JavaScript developer's code to break in surprising ways. The developer only discovers this sort of &lt;a href="https://github.com/twbs/bootstrap/issues/3057#issue-4106844"&gt;nerdwar-precipitating bug&lt;/a&gt; at runtime, if at all:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;clearMenus&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="o"&gt;!&lt;/span&gt;&lt;span class="nx"&gt;isActive&lt;/span&gt; &lt;span class="o"&gt;&amp;amp;&amp;amp;&lt;/span&gt; &lt;span class="nx"&gt;$parent&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;toggleClass&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;open&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Semicolons are tedious; they lack understated beauty; yet with parser so devious, semicolons are one's duty.&lt;/p&gt;

&lt;h3&gt;
  
  
  About Us
&lt;/h3&gt;

&lt;p&gt;At &lt;a href="https://thecarrots.io"&gt;Carrots&lt;/a&gt; we're building a hiring platform specifically for software engineers. You can connect your GitHub, Stack Overflow, and more to show off so much more than your resume. Our algorithm shows where you rank among world-class talent and surfaces your profile to top companies.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>computerscience</category>
      <category>node</category>
    </item>
    <item>
      <title>25 Best GitHub Repos for Python Developers</title>
      <dc:creator>Sam Winter</dc:creator>
      <pubDate>Fri, 30 Oct 2020 16:38:17 +0000</pubDate>
      <link>https://forem.com/sewinter/25-best-github-repos-for-python-developers-5419</link>
      <guid>https://forem.com/sewinter/25-best-github-repos-for-python-developers-5419</guid>
      <description>&lt;p&gt;According to StackOverflow's &lt;a href="https://insights.stackoverflow.com/survey/2020"&gt;2020 Developer Survey&lt;/a&gt;, Python is &lt;a href="https://insights.stackoverflow.com/survey/2020#most-loved-dreaded-and-wanted"&gt;one of the most loved languages in the world&lt;/a&gt; behind only Rust and TypeScript. Even more amazingly, Python is the language developers &lt;a href="https://insights.stackoverflow.com/survey/2020#most-loved-dreaded-and-wanted"&gt;most want to try at their jobs&lt;/a&gt;. If you're one of the lucky many who use Python and want to up their game or the other lucky many who want to learn Python, you're come to the right place. These are 25 of the best Python repositories on GitHub:&lt;/p&gt;

&lt;h2&gt;
  
  
  'Awesome' Python Lists:
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/vinta/awesome-python"&gt;Awesome Python&lt;/a&gt;: a curated list of awesome Python frameworks, libraries, software and resources.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/trananhkma/fucking-awesome-python"&gt;Fucking Awesome Python&lt;/a&gt;: for when you want a curated list of Python frameworks, libraries, software and resources that's even more awesome.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/trananhkma/fucking-awesome-python"&gt;Awesome Python Applications&lt;/a&gt;: almost 400 open-source Python applications arranged by topic, with links to repositories, docs, and more, generated from &lt;a href="https://github.com/mahmoud/awesome-python-applications/blob/master/projects.yaml"&gt;structured data&lt;/a&gt; using &lt;a href="https://github.com/mahmoud/apatite"&gt;apatite&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/bharathgs/Awesome-pytorch-list"&gt;Awesome Pytorch&lt;/a&gt;: libraries related to Pytorch, the famous machine learning framework for tensors and dynamic neural networks.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/timofurrer/awesome-asyncio"&gt;Awesome Asyncio&lt;/a&gt;: a carefully curated list of awesome Python asyncio frameworks, libraries, software and resources.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/markusschanta/awesome-jupyter"&gt;Awesome Jupyter&lt;/a&gt;: a curated list of awesome &lt;a href="http://jupyter.org/"&gt;Jupyter&lt;/a&gt; projects, libraries and resources. Jupyter allows you to create and share Python documents that contain live code, equations, visualizations, text, and more.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/Junnplus/awesome-python-books"&gt;Awesome Python Books&lt;/a&gt;: the best directory for books related to Python!&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Books
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/realpython/python-guide"&gt;Hitchhiker's Guide to Python&lt;/a&gt;: a best practice handbook to the installation, configuration, and usage of Python on a daily basis, including pip, numpy, virtualenv, and more.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/swaroopch/byte-of-python"&gt;Byte of Python&lt;/a&gt;: a tutorial for beginners; you only need know how to save a text file.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/cosmicpython/book"&gt;Cosmic Python&lt;/a&gt;: pythonic application architecture patterns for managing complexity; a free O'Reilly book!&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/rasbt/python-machine-learning-book-3rd-edition"&gt;Python Machine Learning&lt;/a&gt;: this repo includes code notebooks for the classic machine learning textbook.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Interview Questions
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/StBogdan/CTCI_python"&gt;Cracking the Coding Interview Solutions&lt;/a&gt;: solutions in Python to the classic &lt;em&gt;Cracking the Coding Interview&lt;/em&gt;; try not to cheat!&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/donnemartin/interactive-coding-challenges"&gt;Interactive Coding Challenges in Python([]&lt;/a&gt;): 120+ continually updated, interactive, and test-driven coding challenges, with &lt;a href="https://github.com/donnemartin/interactive-coding-challenges#anki-flashcards-coding-and-design"&gt;Anki flashcards&lt;/a&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/sigmavirus24/python-interview-questions"&gt;Python Interview Questions&lt;/a&gt;: questions you're likely to come across during an interview for a Python job.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/learning-zone/python-interview-questions"&gt;Even More Python Interview Questions&lt;/a&gt;: when you need 300+ more questions than the ones above.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Data Structures and Algorithms
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/keon/algorithms"&gt;Pythonic Data Structures and Algorithms&lt;/a&gt;: minimal and clean implementations of data structures and algorithms in Python 3 (18k+ stars)!&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/jmportilla/Python-for-Algorithms--Data-Structures--and-Interviews"&gt;Udemy's Algorithms, Data Structures, and Interviews Course&lt;/a&gt;: this repo contains notebooks accompanying the course to help you prepare for your interviews.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/prakhar1989/Algorithms"&gt;Algorithms in Python&lt;/a&gt;: implementations of a few algorithms and data structures for fun and profit!&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Python Resources
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/trending/python"&gt;GitHub's Python Trending List&lt;/a&gt;: trending Python GitHub repositories.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/treyhunner/pep8"&gt;PEP 8—Python Style Guide Checker&lt;/a&gt;: this tool checks your Python code against &lt;a href="http://www.python.org/dev/peps/pep-0008/"&gt;PEP 8&lt;/a&gt; style conventions.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/google/styleguide"&gt;Google Style Guides&lt;/a&gt;: Google's &lt;a href="https://google.github.io/styleguide/pyguide.html"&gt;recommendations&lt;/a&gt; for Pythonic style.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/python/peps"&gt;Python Enhancement Proposals&lt;/a&gt;: the official index of Python Enhancement Proposals or PEPs.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Learn Python
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://github.com/gregmalcolm/python_koans"&gt;Python Koans&lt;/a&gt;: an interactive tutorial for learning Python by making tests pass (and a good primer on Test-Driven Development).&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/tuvtran/project-based-learning#python"&gt;Project-Based Learning&lt;/a&gt;: a list of programming tutorials that are project-oriented, including building web scrapers, applications, bots, etc.&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://github.com/jerry-git/learn-python3"&gt;Learn Python 3 Through Jupyter Notebooks&lt;/a&gt;: a collection of interactive Jupyter notebooks that teach you Python 3.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;em&gt;Originally published at &lt;a href="https://thecarrots.io/blog/25-best-github-repos-for-python-developers"&gt;Carrots&lt;/a&gt;.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Tucker Triggs' &lt;a href="https://www.tuckertriggs.com/blog/github-repos-for-javascript-developers"&gt;list&lt;/a&gt; of JavaScript repos shamelessly inspired this post.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>python</category>
      <category>webdev</category>
      <category>beginners</category>
      <category>tutorial</category>
    </item>
  </channel>
</rss>
