teleren/devto huggingface dataset:
compose in styled-system
Tags: javascript, cssinjs, styledsystem, designsystem
Published: 2019-07-31 18:41:42


---
title: compose in styled-system
published: true
cover_image: https://images.unsplash.com/photo-1541415534056-fad380cd68a5?&auto=format&fit=crop&w=2750&q=80&h=1000
description: "What is compose in styled-system ?"
tags: ['JavaScript', 'CSSinJS', 'styled-system', 'design system']
---

As per the [document](https://styled-system.com/api/#compose)

> The compose utility is used to combine multiple style functions together into one. This utility can help improve performance when using multiple style props functions on the same component.

In this post let us build a Button component using the styled-components and styled-system as shown below. Let us build this component using **border, color, shadow, space & typography** functions from the styled-system.

    import styled from 'styled-components';
    import { border, color, shadow, space, typography } from 'styled-system';
    
    const Buttons = styled.div(
        border,
        color,
        shadow,
        space,
        typography
    );
    
    export default Buttons;

So when we use multiple functions like border, color, shadow, space & typography, this will invoke multiple functions on render which will hamper the performance of app. It is even worse when the whole component is wrapped with state.

> Here comes the compose function to the rescue which is the super hero 💠 of styled-system API. The compose function will combine the multiple functions into one, which will invoke only one function on render [saved by the compose function 😊]

    import styled from 'styled-components';
    import { compose, border, color, shadow, space, typography } from 'styled-system';
    
    const Buttons = styled.div(
      compose(
        border,
        color,
        shadow,
        space,
        typography
      )
    );
    
    export default Buttons;

So using the above component, you can define any kind of a `<Button />`

    <Button fontSize={16} borderRadius={5} p={3} color="#fff" bg="#5269e7">Click here</Button>
    
    <Button opacity={.4} color="#fff" bg="#222">Disabled</Button>
My challenge to you and your company! Giving back.
Tags: webdev, challenge, work, community
Published: 2019-07-31 18:26:08

---
title: My challenge to you and your company! Giving back.
published: true
description: A challenge to donate and give back! 
tags: webdev, challenge, work, community
---

At WebPT where I work, I'm on the culture committee team. We did a food drive as one of our events and it was meant as a side event.

Well we pushed for people to join in and we ended up getting the whole company involved! 

So I want to take this one step farther! I challenge you and your company to start a food drive or other type of donation challenge! 


![](https://thepracticaldev.s3.amazonaws.com/i/px3za6qhlff6nia3gdoe.jpg)
![](https://thepracticaldev.s3.amazonaws.com/i/5gtalylwfylyp9t360c7.jpg)

Suggest this to your company and then post the results in the comments. Challenge other friends/companies to it! 

Feel free to message me for tips! 

pretty please tweet this, and share!
General thoughts about Unions
Tags: discuss
Published: 2019-07-31 18:09:02

Did you joined a union?
How do unions work in your country/state/province?
What are the Pros/Cons being unionized there?

In Brazil, all workers are represented by some union, but recent legislation changes diluted the extend and the role of a union on works relations. A mandatory contribution used to exist, and was billed every year on may (may 1st being our labor day) and now is opt-in (by a hand-written solicitation forwarded to HR).

Besides having the right of being represented, unions here won't do much for employees that are not "sindicalizados" (meaning actively joined the union) both because those workers don't see unions as a good thing and because unions choose focus on more engaged working classes.

At the same time, it's pretty frequent to heard about anti-syndicalism (it's illegal here), so most workers interested in unionizing are afraid of losing their jobs.
More often than not, unions only get traction on public sector or in private sectors that does offer some public service (as transportation etc) and strikes as commonly organized by unions.

My point of view is that every workforce should be unionized, as to give the workers a active voice, but it's unfeasible to expect those workers to organize on such conditions where their jobs are on the line.

## Pros/Cons being unionized in Brazil:

Pros:
 - unionized workers tends to get higher wages
 - law support
 - unions provides representatives
 - collective bargains can extends labor rights
 - unions might offer cultural and leisure programms
 - unions might have discount agreements in a myriad of services/products
Cons:
 - Losing your job (major one)
 - anti-syndicalism
 - getting called a communist
 - you might disagree with your union political view
About Brandy Zwicker
Tags: brandyzwicker
Published: 2019-07-31 18:08:37

Brandy Zwicker has five children and enjoys outdoor activities such as hiking, biking, camping, and outdoor fitness opportunities. She enjoys working out to include running, spin cycle, yoga, weight training, basketball, and indoor rock climbing. Brandy hopes to eventually compete in fitness competitions. 


Brandy Zwicker is a Bachelor of Science (BSN) Registered Nurse with ten years of nursing experience. In 2006, Brandy was the recipient of the prestigious Charles M. Bair Memorial Scholarship which is an 8-semester full-ride academic scholarship. Brandy Zwicker attended Montana State University - Billings and completed her pre-nursing coursework and then completed the BSN nursing program at Montana State University - Bozeman. She graduated from Montana State University - Bozeman from the College of Nursing in 2009 with high honors. She is a member of Sigma Theta Tau International Honor Society of Nursing and was on both the Dean’s and President’s Lists while attending Montana State University - Bozeman.  


Brandy Zwicker has a passion to serve others and her career as a Registered Nurse has provided her many opportunities to serve vulnerable populations. She has worked in areas of medical, oncology, cardiac telemetry, critical care step-down, basic care, Director of Nursing, and Quality Assurance Manager. Brandy looks forward to many more years within healthcare and plans to attend a university to pursue her Doctor of Nursing Degree with plans to become a Family Nurse Practitioner.
What are some of the best practices for developing a Spring Boot app?
Tags: sideprojects, discuss, react
Published: 2019-07-31 17:57:11

I am starting a side project which is basically a job portal, just for the sake of learning and adding it to my portfolio. It would be based on some of the technologies that I haven't worked on much including Spring Boot, React, GraphQL, etc.

Just wanted to know what would be some of the best practices to keep in mind when starting such project?
Top 20 CSS..? 😎
Tags: discuss, css
Published: 2019-07-31 17:32:55

_Hey guys!_

After [Top 20 CSS Buttons](https://webdeasy.de/en/top-css-buttons-en/) and [Top 20 CSS Navigation Menus](https://webdeasy.de/en/top-css-navigation-menus-en/) were well received by you meeeegaaa it's time for a successor!

My idea would be **TOP CSS LOADING ANIMATIONS!** 🚀

What do you think or do you have a wish? Let me know in the comments below or on [twitter](https://twitter.com/WebDEasy)!
Which flutter architecture is more adopted today? Is possible to include it as a library in native applications?
Tags: help
Published: 2019-07-31 17:31:53

Im about to start a new module in my work project and i was considering to use Flutter, because it's a simple feature but needs to be applied as a library to an existent app (that is built natively in Android and iOS).

So, i have these two questions:

1. The most used architecture nowadays
2. Is it possible to agregate it as a library in an native built app

Thanks!
Migrate tags in Rails to PostgreSQL array from ActsAsTaggableOn
Tags: rails, postgres, ruby
Published: 2019-07-31 17:24:30

[ActsAsTaggableOn](https://github.com/mbleigh/acts-as-taggable-on) is a swiss army knife solution if you need to add tags to your ActiveRecord model.
Just by adding one gem to your Gemfile and `acts_as_taggable` to the model you get everything you need: adding tags, searching for a model by tag, getting top tags, etc. However, sometimes you don't need all these.

In our project, we used `acts_as_taggable` to store tags for `Note` model. Then we displayed a list of notes on several pages with assigned tags and had autocompleted input for tags on `Note` form. Everything worked well, but since we use PostgreSQL, I decided to store tags as an array in Note model.

First of all, I added `tags Array<String>` column to `Note`, after this migrated acts_as_taggable tags to `notes` table with migration.

```ruby
class MigrateNoteTags < ActiveRecord::Migration[5.2]
  def change
    execute <<-SQL
    UPDATE notes 
    SET tags = grouped_taggings.tags_array 
    FROM
      (
      SELECT
        taggings.taggable_id,
        ARRAY_AGG ( tags.NAME ) tags_array 
      FROM
        taggings
        LEFT JOIN tags ON taggings.tag_id = tags.ID 
      WHERE
        taggable_type = 'Note' 
      GROUP BY
        taggings.taggable_id 
      ) AS grouped_taggings 
    WHERE
      notes.ID = grouped_taggings.taggable_id
    SQL
  end
end
```

To have backward compatibility, I added `Note#tag_list` method:

```ruby
def tag_list
  tags.join(', ')
end
```

The last thing is to add the ability to search for tags. Since there about 500k records in the Notes table, I decided to create an SQL view:

```sql
CREATE OR REPLACE VIEW note_tags AS

SELECT UNNEST
  ( tags ) AS name,
  COUNT ( * ) AS taggings_count 
FROM
  notes 
GROUP BY
  name 
```

That's it! It takes from 100ms to 150ms to search for tags in this view, which is fine for me.

If you have more significant data sets, then the best would be to create `tags` table and add triggers to `notes` table that will update `tags` on INSERT/UPDATE/DELETE.
Why CascadiaJS responds individually to each and every CFP submission
Tags: cascadiajs2019, conferences, cfp, speaking
Published: 2019-07-31 17:11:08

---
title: Why CascadiaJS responds individually to each and every CFP submission
published: true
description: At CascadiaJS, we believe that replying individually to each and every person who submits to our CFP is the right thing to do, and we hope more conferences follow suit.
tags: cascadiajs2019, conferences, cfp, speaking
---
Today I'm sending out 138 individual emails to inform folks about whether or not their submission to the [CascadiaJS CFP](https://2019.cascadiajs.com/cfp) was accepted. 

I thought I'd take a minute to explain our thinking in the hopes that other conferences might consider following our lead. 

## 😊 It makes the CFP process a more positive experience

Speaking as an organizer, sending out "no" emails has been the worst aspect of running a conference. It's completely gut wrenching, and it used to make me feel like not running the conference anymore.

When I explored why I felt so bad, it was because the "no" felt like the end of the road. Someone had put their heart into a talk idea, and we were rejecting it and walking away. And often the idea had promise! They just needed some help.

That's when we the light bulb went off. We realized that if we thought about a "no" as simply a "not now" and the first round of feedback on a journey to eventually succeed in giving a talk, we could make this a more positive experience for everyone!   

## 📊 It de-emphasized vanity metrics

Another reason to "do things that don't scale" is that is de-emphasizes raw numbers of submissions, which are a vanity metric. Conferences like to brag about the raw number of CFP submissions, because it seems like a proxy for popularity and exclusivity.

But CascadiaJS isn't about being exclusive. By changing our focus from quantity to quality, we can focus instead of attracting the best possible submissions. We will probably cap submission counts in the future.

## 💪🏽 Every conference can do this

Finally, it's completely feasible. We pulled together a Talk Review Committee of ~8 people, each of whom helps provide written feedback. Many hands make light work.

I really hope more conferences move in this direction and start making the CFP process a more positive experience for all of the developers who submit to them.
ElmElixir memo
Tags: elixir
Published: 2019-07-31 17:08:01

技術メモ
これを参考にPhoenixAPIを作成します。後日更新予定
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">API通信を伴うThe Elm Architecture を流れをサクっと体験する <a href="https://t.co/SL5JmJntwj">https://t.co/SL5JmJntwj</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a></p>&mdash; VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) <a href="https://twitter.com/ElmElixir/status/1156380740180856832?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ElmでJSON APIを叩く最低限 <a href="https://t.co/AIAhSQrZhk">https://t.co/AIAhSQrZhk</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a></p>&mdash; VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) <a href="https://twitter.com/ElmElixir/status/1156380648317173760?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Building a RESTful API Backend with Authentication using Elixir Phoenix by <a href="https://twitter.com/pamitmo?ref_src=twsrc%5Etfw">@pamitmo</a> <a href="https://t.co/rufX7sNLFJ">https://t.co/rufX7sNLFJ</a></p>&mdash; VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) <a href="https://twitter.com/ElmElixir/status/1156377232413036544?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Elixir + Phoenix でお手軽にJSONを返すWebAPIを構築 - にわとりプログラマーの備忘録 <a href="https://t.co/QvzgZcGAN3">https://t.co/QvzgZcGAN3</a></p>&mdash; VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) <a href="https://twitter.com/ElmElixir/status/1156377012220469248?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Elixir+PhoenixでAPIをつくってReactから使ってみる <a href="https://t.co/A6SO3wakc4">https://t.co/A6SO3wakc4</a> <a href="https://twitter.com/hashtag/Qiita?src=hash&amp;ref_src=twsrc%5Etfw">#Qiita</a></p>&mdash; VA-11 Hall-A 東方算法騎士団(令和版) (@ElmElixir) <a href="https://twitter.com/ElmElixir/status/1156375568247472128?ref_src=twsrc%5Etfw">July 31, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
What, in your opinion, is a perfect video game?
Tags: watercooler, discuss
Published: 2019-07-31 17:07:45

---
title: What, in your opinion, is a perfect video game?
published: true
description: 
tags: watercooler, discuss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/keu40nzoaeq53dimdre6.jpg
---

Any other video gamers out there? What games do you consider perfect?

Mine are:

![](https://thepracticaldev.s3.amazonaws.com/i/8fvaug8qf4aq52u5z4c3.jpg)

[**Horizon: Zero Dawn**](https://www.playstation.com/en-us/games/horizon-zero-dawn-ps4/) (PS4) - A post-apocalyptic open-world sci-fi bow-and-arrow RPG. Just thinking about this game makes my heart flutter. The story is jaw-droppingly good, Aloy is an utterly iconic heroine, the gameplay is smooth and gripping, and every creature in the game presents a fiendishly difficult (but fair) challenge. I *devoured* this game and I'm just incredibly grateful it exists.

![](https://thepracticaldev.s3.amazonaws.com/i/umu1cs8c67hbnb6k5c8t.jpg)

[**SteamWorld Heist**](https://store.steampowered.com/app/322190/SteamWorld_Heist/) (PC, Switch, Wii U, PSN, iOS) - A sidescrolling turn-based precision shooter set in steampunk wild-west outer space. I've played it all the way through multiple times. It runs on my Surface Book without a hitch and everything about it is delightful, from the low-stakes gameplay to the cowboys-and-bandits dialogue.

![](https://thepracticaldev.s3.amazonaws.com/i/wd3fbaqoqv7czqhhyhjg.PNG)

[**0h h1**](https://0hh1.com/) and [**0h n0**](https://0hn0.com/) (Web, Android, iOS) - Simple, colorful puzzle games. I love a good puzzle game and these meet all my requirements: must have a single unique solution, must be solvable through pure logic (no guessing), must be simple enough that I can figure out solving strategies on my own. I've played a lot of mobile puzzle games but these are the two I keep coming back to.

-----

Anyway, those are my top three. There are other games I love but I wouldn't call them perfect.

What are your perfect games?
React Custom Hooks: Scroll Indicator
Tags: react, hook, scroll, javascript
Published: 2019-07-31 16:39:19

---
title: React Custom Hooks: Scroll Indicator
published: true
description: I've created this simple, but versatile React hook that keeps track of user scroll on-page or on a specific element. Can be used for blogs, news sites, etc.
tags: React, hook, scroll, Javascript
---

Hello everyone, this is my first post here. 

I've created this simple, but versatile React hook that keeps track of user's scroll. You can see these elements on blogs or news sites where user can keep track of how much of the article they've read.

 It can keep track of scrolling of the whole page or on a certain element. It returns the percentage of the page or element scrolled (viewed).

You can find the npm package, alongside with the readme, here: https://www.npmjs.com/package/react-use-scroll-indicator

Let me know what you think or if you have any questions or comments.

Edit: I am working on an article on creating the custom React hooks. I will post is as soon as it's out. So if you are looking for a good starting point on learning the tricks of creating custom hooks, watch for my upcoming post. Thank you.
Just don't forget DevOps exists to enable Agile
Tags: devops
Published: 2019-07-31 16:33:53

DevOps is a term that came around 10 years ago evolving from something like "Agile Infrastructure" and "Agile Systems Administration". The idea is to create a culture that brakes the barriers between devs and ops (it doesn't really matter how) in order to be "MORE" agile.

Those two things are tightly connected and sometimes it's actually hard to differentiate between one or another. Your team is good at DevOps only if the "ops" part is collaborating with the "dev" in order to satisfy your customers with continuous delivering of high value and quality software.

That's my point of view and I'd love to read some respectful disagreements : )
What tech have you used in the last few weeks?
Tags: webdev, discuss
Published: 2019-07-31 16:27:49

---
title: What tech have you used in the last few weeks?
published: true
description: give us an insight to the tech stacks you've been using in the last few weeks.
tags: webdev, discuss
---

So I just realized how many different tech stacks (for lack of a better word) I've worked on in the last 2 weeks alone.

I work for a great company and we have been using a lot of current tech for our new products, while still maintaining legacy products.

In the last 2 weeks alone, here is things I've had to work with far as languages/services/processes

Php
Xdebug
Node 
express (typescript)
react (typescript)
terraform
AWS
- k8s
- lambda
- gateway
- IAM
- policy
- role
- dynamodb
- ssm
- etc...
helm
docker/docker-compose
gitlab ci/cd
kubectl
ssh
tls
version one

I feel like I'm forgetting a few, but this list right here shows you just how many things I have to know and use often. Sure I'm stoked that I know a lot but this feels pretty heavy spread of knowledge to just have systems working together. 

What is yours looking like? Don't feel like you have to list a huge list, maybe you have 1 language and you love it. That is great! it's not bragging, it's about sparking discussion.
Image Description: Microinteractions with ReactJS
Tags: codepen, react, javascript, css
Published: 2019-07-31 16:12:22

<p>An experimental interaction for an image description.</p>

<p>When the "i" or information button is clicked, the description for the image will appear.</p>

<p>The "i" button is also animated, that when clicked, it will become an "x" or close button. There is also a short time of animation.</p>

<p>Animations are done just using the "property" component of CSS. The class toggles are done with ReactJS.</p>

{% codepen https://codepen.io/takaneichinose/pen/xvdqmz %}
What are the most successful FinTech startups?
Tags: startup, blockchain
Published: 2019-07-31 16:00:11


Financial technology has gone global at the moment. Tens of thousands of companies worldwide are developing new technologies, creating solutions based on AI, Blockchain, cybersecurity, mobile banking and much more. The variety of emerging teams and value they add to the community is astonishing.

Some startups attract $100+ million in investments from the get-go while others start slow but in the end, solve a huge issue that concerns millions of customers globally and gets snatched by banking giants for legendary money.

The point of this research is to uncover the people behind some of the most exciting technologies that most of us regularly use as well as to show how diverse and geographically independent can any startup be. Fintech has always been an idea over origin, occupation or financial status, and this list of the most successful fintech companies is here to prove it.

We never wanted to copy just the first 10 of FinTech Forbes or those who are now worth billions. This list includes startups that are poles apart in their view on tackling pressing financial technology issues that come from various continents.

To increase the immersion, here’s a chart by Medici Research that shows the dynamic of fintech funding across the globe. The numbers show how important the new ideas and fresh look on the old issues may be.

Fintech Startups With Huge Valuation That Solve Grand Issues
The first part of the list is dedicated to modern giants of fintech. These guys have been on the market for some time and have earned a good reputation as well as landed tons of cash in private investments.

Stripe (United States) - a financial technology platform for global e-commerce
Launched in 2011, this startup instantly aimed at a grand scale. Stripe allows building e-commerce platform for any business from scratch. The company has established a partnership with large banks, payment providers and more to limit the efforts needed from the client of the platform.

Today the company operates on a global level with companies from more than 120 countries as their clients. Here's what the Stripe website tells about their partners.

Sources: https://inveritasoft.com