teleren/devto huggingface dataset:
Everything you need to get started with UXP and React JS in one package!
Tags: react, ux, uxdesign, javascript
Published: 2023-05-02 15:06:52

If you are a **developer ** looking to create Adobe UXP plugins with React JS, then you might be interested in checking out "Adobe UXP Plugins Development with React JS" by Davide Barranca. This comprehensive guide is designed to help you learn the best practices for developing powerful and efficient Adobe UXP plugins using React JS.

Featuring a foreword by **Kerri Shotts**, UXP Principal Product Manager at Adobe Inc., this book is a must-read for anyone looking to expand their knowledge of Adobe extensibility. Davide's extensive experience and expertise in the field of Adobe UXP plugins shines through in every page, making it clear that you're learning from someone who knows what they're talking about.

**The book comes with 290 pages of PDF content** that is always up-to-date with the latest version, ensuring that you have access to the most current and relevant information. Additionally, there are 16 demo plugins with commented code, giving you a hands-on approach to learning.

To further enhance your learning experience, the book also comes with **17 recordings**, for a total of 5:30 hours of video content. This comprehensive package provides you with everything you need to get started with Adobe UXP plugin development using React JS.

If you're interested in taking your Adobe UXP plugin development skills to the next level, then this book is definitely worth [checking out](https://davidebarranca.gumroad.com/l/FrlXB?a=551409363)
?? in JavaScript: the nullish coalescing operator.
Tags: javascript, beginners, programming
Published: 2023-05-02 14:55:54

```js
0 ?? "default";
// 0

false ?? "default";
// false

[] ?? "default"
// []

/** ⚠️ Pay attention.  */

null ?? "default";
// "default"

undefined ?? "default";
// "default"
```

The [`??` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing) can be translated as: "return the value on the left UNLESS it's `null` or `undefined`. If the value is `null` or `undefined`, then use the value on the left of the `??`.

```jsx
<Avatar img={profilePicUrl ?? placeholder}/>
```
Design Your Stunning Personal Portfolio with Figma: A Step-by-Step Tutorial
Tags: figma, uidesign, ux, tutorial
Published: 2023-05-02 14:49:26

{% youtube 5LlHKnLEWqI %}
Looking to create an impressive personal portfolio that showcases your skills and talents? Look no further than Figma, the popular design tool used by professionals around the world. In this step-by-step tutorial, you'll learn how to use Figma to design a stunning personal portfolio that captures your unique style and personality. From selecting the perfect color palette to arranging your work samples in an eye-catching layout, this tutorial will guide you through the entire process of creating a portfolio that will impress potential employers and clients alike. With Figma's intuitive interface and powerful design features, you'll be able to bring your portfolio to life in no time. So why wait? Start designing your dream portfolio today with Figma!
Digtial Transformation
Tags: digtial, transformation, data, strategy
Published: 2023-05-02 14:48:46

Digital transformation is a crucial strategy for any organization that seeks to stay competitive in today's market. It's a process that involves leveraging digital technologies to create value and enhance customer experiences. There are three key pillars of transformation: digital, data, and talent, all centered around delivering value to customers.

Using data effectively is critical to digital transformation. Some guiding principles for using data include capturing customer transactions daily, investing in promotions to drive habitual usage, and exploring new revenue models. To improve analytics, organizations can implement a feature store, better modeling techniques, and diverse experience of the team, among others.

In banking, digital transformation can mean personalization, scalability, and efficiency. There are different types of digital banks in the market, including challenger banks, offshore digital banks, banking as a service players, and digitized hybrid banks.

To differentiate, digital banks can leverage hyper-personalization, data-driven engagement, and personalized parameters. Organization should focus on continuous learning and building new skills, and they should be clear about the journey's strategic intent.

For successful digital transformation, sponsorship and culture are key, as well as a willingness to change operating models. Commercial governance is also critical to embed into the transformation process.

In conclusion, digital transformation is all about creating value. By leveraging digital platforms, data, and talent, organizations can improve customer experiences, stay competitive, and grow their businesses.
Why you should use WP-CLI
Tags: wpcli, wordpress, wordpressdevelopment, php
Published: 2023-05-02 14:44:34

[WP-CLI](https://wp-cli.org/) provides a command-line interface for many actions you might perform in the WordPress admin with **no need to be logged in to the dashboard** and navigate through the pages, as an admin user. That can be really useful if you working at an agency for example, and have to perform tasks for any client's project. 

It would be a little awkward to keep asking the client's user and password don't you think? This way, **WP-CLI comes in very handy**. With WP-Cli you will need to have the root access to the server and that's it.

For example, you can manage plugins and themes, including installs, activations, and updates, you can manage users along with their roles, capabilities, and meta, and also can add, remove, and list the capabilities of a user role. There are **lots of possibilities!**

Yet, is advisable that some of the tasks above are performed using WP-CLI, as **it is a faster and more efficient alternative** that the dashboard. For WordPress developers and administrators working on the command line, WP-CLI is a great tool.

A **full list of available commands** you can find on the [official documentation](https://make.wordpress.org/cli/handbook/) and you always can type `wp help` to find out all the things you can do with a specific subcommand.

Enjoy and increase your productivity with this really amazing tool!
Render HTML and script in React
Tags: script, html, hobspot
Published: 2023-05-02 14:36:36

I have HubSpot call-to-action embed code. I would like to inject it in my React page.

The code call-to-action embed code is:

```
<!--HubSpot Call-to-Action Code --><span class="hs-cta-wrapper" id="*******"><span class="*******" id="********"><!--[if lte IE 8]><div id="hs-cta-ie-element"></div><![endif]--><a href="********" target="_blank" rel="noopener"><img class="hs-cta-img" id="**********" style="border-width:0px;" height="20" width="20" src="**************"  alt="New call-to-action"/></a></span><script charset="utf-8" src="https://js.hscta.net/cta/current.js"></script><script type="text/javascript"> hbspt.cta.load(*****, '********', {"useNewLoader":"true","region":"na1"}); </script></span><!-- end HubSpot Call-to-Action Code -->
```

I want to embded code in React.

**Attempts**:

I use dangerouslysetinnerhtml but this does not seem working for script.

```
const cta = " embed code here ";

```
Then I use dangerouslySetInnerHTML attribute on an HTML element to add an CTA HTML string inside its content as follow:

```
 dangerouslySetInnerHTML={{__html: cta}}

```
Using dangerouslySetInnerHTML, it does not work for script tag.

How can I achieve this, rendering the above embed code without missing any part of it?
Migration Files(Laravel Example)
Tags: database, webdev, php, laravel
Published: 2023-05-02 14:36:25

Long post, read it if you're interested in delving deeper into understanding Laravel migration files and their function in general.

It's really important to understand the technology you're using as much as you're able to use it. So what does migration mean? In Laravel or in any other framework, why do we use it, or what's the benefit of using it?

Back in the days of the dinosaurs, when we worked on a project and made changes to the database or created new databases for the first time on the server, we had to bring in the SQL commands and spread them everywhere or import them.

And every time we made a change locally, we had to execute the command on the server, for example. Or when we worked in a team and programmer A made changes to the database, he had to send the entire command or database to programmer B to see the changes.
In addition to the complexity of SQL, this is where the main task of migration comes in, which allows us to save our modifications to PHP files and upload them with the project in a comprehensible language. As an example of its use, I made changes to the user table in a migration file. My colleague does a pull, and he pulls the changes and does the command:
php artisan migrate
Which pulls our files in order by date and bypasses the commands that have already been executed before, so his database matches mine, as well as the server.

Of course, the connection process to the data with these files is through the Migration class, which the files extend, and it provides us with a large helper library through the Schema class and the larger builder class that is translated through the Blueprint class.

It makes writing SQL easy for us. In addition to this, you can write SQL natively through DB::statement inside any migration file, and the command will be applied normally.

Obviously, we can't write about migration without explaining the two main functions in it: up and down.

The up function runs the command that is translated from this file to the SQL language, and the down function rolls back to the last command that was executed.

That's it, folks!
Kotlin test automation. Chapter 0 — First steps.
Tags: testing, qa, testautomation, kotlinbeginners
Published: 2023-05-12 19:25:58

---
title: Kotlin test automation. Chapter 0 — First steps.
published: true
date: 2023-05-02 14:23:55 UTC
tags: testing,qa,testautomation,kotlinbeginners
canonical_url: https://medium.com/@Farida_online/kotlin-test-automation-chapter-0-first-steps-feed3cf33ac3
---

### Kotlin test automation. Chapter 0 — First steps.

Hello everyone!

Today I’d like to start a huge activity on describing how to start test automation using Kotlin language.

Why Kotlin?

- I saw a lot of courses made for learning Kotlin but most of them — about language itself or about app development. Almost nothing about test automation and frameworks.
- Kotlin is easy enough to start in comparison with other programming languages.
- It is multiplatform and now also a recommended by Google language to use on mobile development.

### 🧳Let’s settle an environment first

- We need to go [here](https://www.oracle.com/java/technologies/downloads/) and download JDK. I’m using SDK 15 in this tutorial.
- Then choose and download preferable IDE which support Kotlin lang. In my opinion — InteliJ Idea is ideal for Kotlin and Java so I’ll use it in descriptions too.
- And customise to make it convenient for you: install required plugins, create a remote repo etc.

Seems like we’re all set!

Create a new project in IDEA, name it as you wish but, please, notice that it is a good practice to name projects/ classes/ variables in Kotlin in camelCase.

Choose in project parameters — Gradle builder and specify Java version.

![](https://cdn-images-1.medium.com/max/1024/1*k0CZFwdhZ0oVt-BhlbN8uA.png)
_Example of a project parameters_

Also you’ll need to build your project to manage dependencies via Gradle builder. Just press on the cycled arrows icon.

![](https://cdn-images-1.medium.com/max/1024/1*GN_Y-84qLS9NrGph3k8Whw.png)
_Building project_

Ok, now you have tree of folders. We need to add Kotlin class in “test” folder. Let’s name it “SampleTest”. Choose “Kotlin Class/ File” in creation options. Then open this class.

![](https://cdn-images-1.medium.com/max/948/1*Xy6Ey6r2Frwq_xWxVNN70Q.png)
_File and folders tree_

So, we’re all set!

Now let’s go to the Chapter 1 and write some code.
caught TypeError: store.getState is not a function
Published: 2023-05-02 14:12:14

When I try to run this code it returns caught TypeError: store.getState is not a function. I have read many articles regarding this topic but none of them solved my problem. What is the problem and how can I fix it?

This is the Redux code:

```
import { configureStore, createSlice } from "@reduxjs/toolkit";

let initialState = {
  name: "",
  password: "",
};

const loginReducer = createSlice({
  name: "login",
  initialState: initialState,
  reducers: {
    nameChanger(state, action) {
      state.name = action.payload;
    },
    passwordChanger(state, action) {
      state.password = action.payload;
    }
  },
});

const store = configureStore({
  reducer: { login: loginReducer.reducer },
});

export const loginAction = loginReducer.actions;
export default store;
```


The App.js:


```
import './App.css';

import HomePage from './pages/HomePage';
import Login from './pages/Login';
import store from './redux/Redux-store';

import { Provider } from 'react-redux';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';

function App() {
  const router = createBrowserRouter([
    {
      path: "/",
      element: <HomePage />,
    },
    {
      path: '/login',
      element: <Login />,
    }
  ]);

  return (
    <Provider store={store}>
      <RouterProvider router={router} />
    </Provider>
  );
}

export default App;
```


what do you think the problem is. Any help is appreciated?
5 Articles every WebDev should read this week (#18)
Tags: javascript, webdev, tutorial, programming
Published: 2023-05-02 13:54:17


A curated list of the top five web development must-reads from last week. Don't miss out on the latest web development stories and insights. Read all about the cutting edge in web development, working in tech and the new tools and frameworks while learning a few new tricks.

---

## What is new in Next.js 13.3
> Next.js 13.3 adds popular community-requested features, including: File-Based Metadata API, Dynamic Open Graph Images, Static Export for App Router, Parallel Routes and Interception
<https://next-site-git-next-13-3.vercel.sh/blog/next-13-3>


## What is new in Chrome 113 beta
> Chrome 113 brings new CSS media features, the linear() easing function, and WebGPU. Chrome 113 is beta as of 6 April, 2023. You can download the latest on Google.com for desktop or on Google Play Store on Android.
<https://developer.chrome.com/blog/new-in-devtools-113/>


## What is new in Angula 16?
> At the time of writing this article, angular just published its first release candidate version of v16. There are a lot of features/changes coming with this version. Much more than we have seen in any previous major release (of course, not considering angular to angular 2). Angular is seeing a kind of renaissance, and v16 is just the beginning. These are some of the prominent changes coming in this release.
<https://itnext.io/angular-16-is-huge-67288a3ff58b>

## Frontend Web Performance Checklist
> Improving performance of web applications will always be sexy. We want the page to load faster, smoother, and without too many layout shifts (Core Web Vitals, I am looking at you 😉). In this article I wanted to summarize all this knowledge into one single source of truth (with respect to article authors).
<https://dev.to/jacobandrewsky/frontend-web-performance-checklist-2o9j>

## Learn Design Patterns in Depth
> The term "Design pattern" comes into play here. Design patterns, in basic words, are tried-and-true solutions to common programming problems. For instance, creational design patterns address object creation issues.
<https://dev.to/javinpaul/my-favorite-free-courses-to-learn-design-patterns-in-depth-5dp5>

---

[![MODERN FULLSTACK DEVELOPMENT by Martin Krause](https://www.usemodernfullstack.dev/assets/marketing-banner_583-110-dev-to.png)](https://nostarch.com/modern-full-stack)

---

Read ["MODERN FULL STACK DEVELOPMENT"](https://nostarch.com/modern-full-stack) to kickstart your career as a full-stack developer. 

It's a hands-on introduction to creating web applications with today's full-stack developers' most popular tools, libraries, and frameworks. It covers Modern JavaScript, TypeScript, React.js, Next.js, MongoDB, Mongoose, REST APIs, GraphQL, OAuth, Docker and JEST.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr).

Photo by [Alex Kulikov](https://unsplash.com/@burntime) on [Unsplash](https://unsplash.com)
 
---
Elixir data types Part 1
Tags: elixir, beginners
Published: 2023-05-02 13:53:01

## Introduction:
When it comes to programming in Elixir, understanding the different data types is crucial. We'll cover the main data types in Elixir and how to work with them effectively. In this first part, we'll explore atoms and booleans, two of the simplest yet most fundamental data types in Elixir.

## Atoms
Atoms are constants that represent names or values. They start with a colon (:) followed by a sequence of alphanumeric characters, underscores, or @. For example, `:hello`, `:ok`, `:user_id`, and `:@name` are all valid atoms.

Atoms are useful for naming things, such as keys in maps or messages in processes. Atoms are also used to represent the result of some operations, such as `true` and `false` for boolean expressions, or `:error` and `:ok` for error handling.

Atoms are also very efficient, as they are internally represented by an integer and are globally unique. This means that two atoms with the same name will always refer to the same value, regardless of where they are defined or used.

At first this data type may seem not useful, but in future posts you will sure see how powerful this data type is.

## Booleans
Booleans are a special kind of atom that can only have two possible values: `true` and `false`. Booleans are used to represent logical conditions, such as comparisons or predicates.

Booleans can be combined with logical operators, such as `and`, `or`, and `not`, to form more complex expressions. For example:

```elixir
true and false # false
true or false # true
not true # false
```

Booleans can also be used in control flow constructs (more of this in a next post), such as `if`, `case`, and `cond`, to execute different branches of code based on some condition. For example:

```elixir
if true do
  "Positive"
else
  "Negative"
end
```

## Summary
In this article, we learned about two of the basic data types in Elixir: atoms and booleans. We saw how atoms are constants that represent names or values, and how booleans are a special kind of atom that represent logical conditions. We also saw how atoms and booleans can be used in various ways in Elixir programs.

I hope this article was helpful for you. If you want to learn more about Elixir data types, you can check out these sources:

Basic types - [The Elixir programming language](https://elixir-lang.org/getting-started/basic-types.html)
Typespecs and behaviours - [The Elixir programming language](https://elixir-lang.org/getting-started/typespecs-and-behaviours.html)
Elixir - [Data Types](https://www.tutorialspoint.com/elixir/elixir_data_types.htm)
Typespecs — [Elixir v1.12.3](https://hexdocs.pm/elixir/1.12/typespecs.html)

---
Thanks for reading! My goal is to make Elixir accessible and easy to understand for everyone. If you have any questions or feedback, please don't hesitate to reach out. And be sure to check back regularly for more articles on https://dev.to/calbertora, as I strive to make each post as clear and readable as possible.
When Granularity in React Goes Wrong: A Cautionary Tale
Tags: react, webdev, overengineer, javascript
Published: 2023-05-02 13:43:41

React developers love to talk about the importance of creating granular, reusable components, and I get it. It's a very useful practice! But what happens when you take it too far? In this article, we'll explore the dark side of granular components and the pitfalls that can arise when you break everything down into the smallest possible pieces.

## The Danger of Over-Engineering

Picture this: you're working on a React project, and you've just created a component to display a user's profile. But wait, why stop there? Why not break it down into three separate components—one for the profile picture, one for the name, and one for the bio? Sounds great, right? Well, not necessarily. Creating too many small, single-purpose components can lead to over-engineering, where you end up with a bunch of unnecessary abstractions that just add complexity to your code.

## The Curse of Complexity

Another problem with being too granular is that it can lead to increased complexity. Sure, having a lot of small components might make sense in theory, but it can quickly become overwhelming in practice. With dozens of files to manage, it's easy to lose track of how everything fits together. It's like trying to find Waldo in a sea of tiny, almost-identical components—except instead of finding a red and white shirt, you're trying to debug a specific issue.

## Context is King

So, what's the solution? Do we abandon granular components altogether? Not necessarily. Instead, it's important to focus on context and hierarchy. Rather than breaking everything down into the smallest possible pieces, think about how each component fits into the larger architecture of your application. This can help you avoid unnecessary complexity and ensure that your code is maintainable over time.

## So what am I saying

At the end of the day, there's nothing inherently wrong with granular components, in fact it's actually a very good practice in the correct time and place. But it's important to remember that more isn't always better. By focusing on context and hierarchy, you can avoid the pitfalls of over-engineering and complexity, and build applications that are both modular and maintainable. And if all else fails, just remember: sometimes it's better to be a little bit coarse than too fine-grained.