DEV Community: edytawrobel

Buffett's Take On Generative AI - another genie's out of the bottle

edytawrobel — Sat, 11 May 2024 01:51:35 +0000

If you know me, you know it's pretty rare for any single event to keep my attention locked for five minutes, let alone for four hours straight. Yet year after year, I make an exception for the annual Berkshire Hathaway shareholders meeting.

Maybe it's the chance to hear an investing legend's unfiltered words of wisdom. Or maybe it's the profound sense of gratitude that fills me, realizing the privilege of witnessing Warren Buffett's genius during my own lifetime.

What's most bewildering, though, is how this incredible fount of financial wisdom and life lessons is available for anyone in the world to tap into for free, just by having an internet connection.

It makes me wonder - could generative AI one day democratize knowledge creation and dissemination in the same transformative way the internet democratized access to information?

As he effortlessly fields questions from the audience, his charismatic humor and personable demeanor only add to the experience. In all of this, there's a valuable leadership lesson too. There might be a future article coming solely focusing on that topic.

Meanwhile, Warren Buffett soberly warns about the "genie" of artificial intelligence that has been unleashed upon the world. He described his experience of being introduced to his own deepfake version, commenting that neither his wife nor children would be able to distinguish between the fake and the real. The 93-year-old investing legend drew parallels between today's transformative AI boom and the 20th century's harnessing of nuclear power - a breakthrough technology holding boundless potential for benefiting humanity, but also grave risks if not carefully constrained. Just as nuclear gave us the terrible weapons we've seen, it gave us also nuclear energy plants that can power entire cities for decades. AI is a disruptive force that can create abundance or scarcity depending on how it is developed and governed.

I felt a sense of relief hearing Buffett's viewpoint. I had feared he might default to the typical 'Invest Only in What You Truly Understand' mantra and not say anything beyond that.
His commitment to his 'circle of competence' philosophy led him to steer clear of highly successful tech giants like Google and Microsoft in their early stages, despite acknowledging their innovative offerings. Generative AI transcends the dot-com bubble and traditional internet realms; and it really needed some cautionary commentary.

Generative AI pervasive influence parallels the advent of electricity in the 19th and 20th centuries. However, unlike electricity, its potential for harm is exponentially greater. While electricity itself isn't inherently dangerous, mishandling it can lead to severe consequences, including shocks, fires, and accidents. Guardrails must be established to mitigate these risks, encompassing proper installation, maintenance, and usage of electrical systems and equipment. By implementing stringent safety measures, we can navigate the transformative power of generative AI responsibly and avert potential hazards. Yet, is this analogy too simplistic perhaps? It overlooks the unsettling reality that generative AI is often likened to a mysterious black box, its capabilities and consequences not fully known nor understood. As it operates on vast computational power, resembling AGI more closely with each advancement, could it potentially run wild, completely unchecked?

So yes, it's reassuring to me that Buffett voiced existential concerns about the potential for advanced AI systems to pursue goals and objectives that may conflict with human ethics and values. I found Buffett's stance reflects Berkshire's enduring culture of integrity and values, emphasizing a unique approach to investing rooted in long-term and responsible stewardship.

As I watch Buffett's teachings stream directly to my device, I can't help but feel immensely fortunate to live in an era where invaluable insights from one of history's most successful investors are so accessible and uncapped. It's both humbling and empowering. However, will I be able to say the same about the technological advancements in 10 years from now?

React State Management Status. It Is Complicated.

edytawrobel — Mon, 22 Jun 2020 07:18:48 +0000

Managing state in our applications is one of the hardest parts about React because if not carefully thought-through, it has the potential to get complicated.

There are many various techniques and tools for state management. From the local component state through more native to React solutions such as Context to the full-fledged libraries such as Redux, and of course the latest kid on the block, a kind of a hybrid, Recoil.

This post will provide an overview of various available tools to manage your React app's state as of today. It won't provide any answers, however, regarding which one you should choose for your application.

Redux

A Predictable State Container for JS Apps

For some, it is still the number one choice when developing apps with React. In my opinion, it gained popularity by centralizing the state and making it accessible by any component. And such it solved the prop drilling problem (passing data from a parent through every single child to the component that actually needs that piece of state, down in React tree). As such it reduced the number of repetitions and time spent figuring out where the props came from.

It also gave the developers the patterns and structure to follow that you can't easily diverge from. Although it may have a rather steep learning curve, once you've learnt the concepts such as: store (one object that holds all the application state), actions (events, the only way data gets to store), reducers (pure functions that take the current state and an action as arguments and return a new state value) and especially if you are familiar with the functional programming paradigm, you will find yourself at ease working with Redux.

Redux Store is a global immutable object where the state and logic of your entire application lives. This state tree cannot be changed directly. A new object is created every time a change happens.

The problem with Redux is that it it makes you write a lot of boilerplate code, and so the logic can be hard to follow. Updating the state requires the use of actions and dispatch calls, interacting with reducers, all of them in different files. Tracing the flow of data requires heavy cognitive load. I found the teams that had a very strict folder organization rules and the prescribed ways of working with Redux were much happier with it overall.

But there is another issue. Some people have a tendency to over-use it; moving all the state to the store, even the local component state. Make sure you have a valid case to moving your state out from local component according with the design principles.

All the restrictions mentioned above might make you want look elsewhere, but they are the same reasons why Redux has become so popular in the first place.

It is important to note that Redux can be used with other view libraries, like Angular or Vue.

MobX

The philosophy behind MobX is very simple:
Anything that can be derived from the application state, should be derived. Automatically.

In trying to solve the problem of decoupling the state from the individual components as well as sharing the data between them, MobX is similar to Redux. Both rely on the concept of the store for data. However, with MobX you can have multiple mutable stores; the data can be updated directly there. As it is based on the Observable Pattern: [the subject, maintains a list of its dependents, called observers, and notifies them automatically of any state changes. It allows you to track the updates to your data automatically. While the components are being rendered, MobX builds the dependency graph to track which ones need to re-render when an observable variable changes.

This solution might be for you if you are familiar with the transparent functional reactive programming principles. To read more on why you might want to use MobX versus Redux, I recommend this post by Michel Weststrate, the author of MobX.

React Context API

The interesting part of this solution is that it was there from the very beginning. In all fairness though, it wasn't that long time ago when it became fully supported by React API. Also the modern React additions, such as hooks made it all so much easier to put together. Plus, if you are missing Redux, you can use useReducer hook 😉

It enables sharing data between multiple components and keeping the data close to where they are needed. By looking at your tree, you pick the lowest level common parent and wrap the context provider around it.
Provider passes data directly to the consumer without having to drill through every level of the tree via props. Best part of this solution is that it only affects certain parts of the React tree, and the rest of the components may not even know that anything is happening.

One word of caution, do not reach for context too soon. Keep your data locally if the data is not needed in any other component. Also, let's not forget that passing props has always been integral part of React. There is nothing wrong in using it when your app is small and if it is just a couple of layers down. React documentation points out that a lot of problems stem from the incorrect composition.

It is one of my preferred way of managing state in the React applications. Mostly because no additional libraries are needed. Once you've learnt React - there is no added learning curve. And most of all, it is easy to share the state between the un-related leaves in the React tree without having to lift your state up.

In order to make it all stick a little bit more, let's implement Theme Switcher as an example of how you can do this.

Theme Switcher functionality will allow you to toggle between 'light' and 'dark' mode in the application:

You start with creating context for the state you want to share between your components. In our case, we want to share the theme mode. We also create Provider and Consumer to then plug into the components actually using this data:

Since most of our application will use the same theme, we will wrap the whole app in our provider:

Any component that needs to use that state will be wrapped in the consumer. Note we omitted Header from this wrapper:

💥 What if I want one of my components to be of a different theme than the rest of the app?

Pass the theme via props instead! The Header example below also implements its own button to change the state just to illustrate the point, but of course in real life it is an overkill 😁

In my app's case, I want my Header to always be in the light mode, so it uses the default theme:

You can notice that clicking on Change Theme button, changes the theme for the whole app, but not Header.

React Context allows you to have a Provider at the top of the tree and consumers that are listening to it. This is great as it allows us to pass the state between the parts of the React tree that are not connected in any way, without much extra code.

However, that might be not enough for more complicated problems. Say you want to generate a list of items on the fly and you don't know how many items you will end up having, how do you insert the Providers then?

Luckily, that's been solved now with using the latest addition to the React world i.e. Recoil.

Recoil

Recoil works and thinks like React. Add some to your app and get fast and flexible shared state.

It is said to be very minimal and adding "extra little ingredients to React". It focuses on solving flexibility and performance limits.

As an example, let's think of an application where you needed to share your users' name between Header and Body. You will keep one useState hook in your Header component and the second one in your Body component. With Recoil, however, we can share this state without having to keep it in sync in two different places.

That is enabled by the concept of Atoms, a piece of state that other components can subscribe to. Any change with an atom will cause a re-render in all components subscribed to it:

This graph has been stolen directly from Dave's conference talk. I recommend you watch it in order to understand the building blocks as well the use-case for Recoil.

With Recoil, the leaves in the React tree can co-operate with each other without having to go through their common ancestor or having to create any reducers. Recoil allows for the application wide state observation.

In his presentation, Dave explains in great detail the advantages of this solution. Additionally, if you are familiar with hooks, the learning curve will be minimal for you. if you are building an application where performance is a key, you may want to check out this library. I can see a lot of us reaching for this solution in future, especially for more complex data management problems.

If you would like to give it a try, head over to getting-started guide of the Recoil documentation where you can learn how to implement a to-do application using the new concepts.

Please note I have not used Recoil in production yet, so these conclusions are based on the research, not application.

All in all, it may seem overwhelming and hard to grasp why there is so many choices for the state management. And if you are new to React, and have not been following the journey of how it's been changing over the years, I understand your frustration. However, I strongly believe that all the recent additions and changes have made the lives of developers much easier after the initial phase of dismay over yet another React library or a concept to learn.

Good luck with making your choice!

Please note: this post has originally appeared on my blog

Main Photo by Michael Dziedzic, thanks for sharing your work on Unsplash.

Learn Modern React in 2020

edytawrobel — Mon, 25 May 2020 19:23:16 +0000

You took upon yourself to learn React during these lockdown months. I applaud you for choosing to make this investment in yourself.

React is a JavaScript library for building user interfaces. Currently, it is one of the most popular front-end frameworks, with no view of changing in the near future. Thus, if you are looking for a front-end job, or frankly any web development position in 2020, knowing React is a huge asset if not a must-have.

But do not just take my word for it. Let’s check my opinion against the data from a few respectable sources. On the graph below taken from State of JS Survey, you can see that although there are other JS frameworks that gained popularity in the recent years, such as Vue or Svelte, React is still by far the most popular framework:

The same survey also provides the overview of Usage by Company Size as well as the Salary Range:

With that in mind, we can compare it now against the preferences of the developers themselves. We can get that data from npm stats. Npm is a package manager or in a more layman’s terms a repository of various packages that we as developers can use in our projects. I plotted a chart to show the popularity of four front-end frameworks in the last 3 years:

You can see that React is clearly a winner here.

That is also confirmed in Developer Survey Results from 2019 conducted by Stack Overflow. React is the first on the list of the most loved web frameworks.

Hopefully, all this data provided enough insights to confirm that you made the right decision to learn React. I assume you already have some decent JS skills, as it is definitely a prerequisite in order to master React.

Your Roadmap to Master React

Without further ado, let’s design a roadmap for you to learn React in the next couple of months.

The following resources have been picked after a lot of research as well as trial and error. Please note there is no affiliation involved here. There are a lot of other great tutorials that I completed when learning React for the first time over a year ago. However, since React has changed a lot since it emerged, I believe the list below will equip you with the most up to date skills.

If you follow the four tutorials listed below, you should get a great foundation and understanding of the most important concepts, as well as to pick up the most up-to-date trends and best practices that emerged in the last couple of years. If you really take this task seriously, you will go from the beginner to professional in no time:

ReactJS.org Tutorial

React has excellent documentation and many tutorials written by the developers who work on the framework day to day. I’d recommend you thoroughly examine that site, but since this task itself can be quite daunting, the best place to start is the Intro to React Tutorial. By building your own implementation of tic-tac-toe game you will be ready to dive deeper into React in a day or two. It will answer your questions about what React is, provide overview of foundational concepts and will give you a fun and practical way to experiment with the framework itself.

This tutorial was written by the React team. I highly recommend you follow all of them, but especially blog of Dan Abramov. It is dedicated to React and I cannot recommend it highly enough if you really want to understand all the React concepts in detail when you are a little further along your React journey.

A Beginners Guide to React Introduction

Kent C. Dodds is one of the most influential people in the React world. He has many tutorials, workshops, talks and it is one of the people, whose work you should really follow closely. You can find out more about him on his blog as well as find some other great tutorials.

This egghead.io tutorial from Kent is, in my humble opinion, the most succinct and yet detailed course out there. If I were to pick just one tutorial for you to make sure you get all the foundations as well as overview of the most recent techniques, it would be this one. Plus, it is completely free.

The Road to React

I love this site. You will find here absolutely everything related to React, from the basic concepts, through testing and becoming advanced in React. It has the whole roadmap designed and ready for you to follow. It is a paid book, but you can choose from various options from just The Bare Essentials to The Professional. A lot of industry leaders are recommending it, and I do think it is worth your money. But it is third on my list, because frankly you do not have to spend any money to learn React if you do not want to.

The React Handbook by Flavio Copes

I recommend you subscribe to Flavio’s newsletter. I really like the structure of his tutorials. They are always to the point, practical and well… short! One concept at a time. He writes about all kind of stuff, but with most focus on the JavaScript world. He has various Handbooks that are free for you to follow, and there is one dedicated to React too.

React on Scrimba

This one has only recently made onto my list. I absolutely love that it is free and the way it is structured. The fact it is beautifully designed is also a plus. In 58 relatively short videos it teaches you how to write modern day react, explain all the concepts and shows you where to go next. It is a must-do and definitely won’t regret picking this one up.

Having all these resources in front of you now, I hope I saved you some time searching the web to figure out which tutorial is best. I would follow these tutorials in the order provided. If you are short on time, you can pick just two of them and you will be on your way to take the next step in your React learning journey, i.e. building your own applications. There is no substitute for applying your skills onto the real projects. So do get your hands dirty on some suitable projects on platforms such as Helpful Engineering or freeCodeCamp.org.

All you need to do now is to create a schedule and timeline for yourself. Create a Trello board. Make deadlines to keep yourself accountable. Find a place to keep all your notes and perhaps set up a couple of mind maps to enhance your learning.

Best of luck on your journey! 🤞🤞🤞

Please note this article was originally written for my blog.