Popular New Releases in Frontend Framework
vue
react
18.0.0 (March 29, 2022)
next.js
v12.1.6-canary.6
storybook
vite
create-vite@2.9.2
Popular Libraries in Frontend Framework
by vuejs 
javascript
192954 MIT
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
by facebook javascript
186685 MIT
A declarative, efficient, and flexible JavaScript library for building user interfaces.
by vercel javascript
85621 MIT
The React Framework
by storybookjs typescript
70458 MIT
📓 The UI component explorer. Develop, document, & test React, Vue, Angular, Web Components, Ember, Svelte & more!
by yangshun javascript
68501 MIT
💯 Curated interview preparation materials for busy engineers
by gothinkster shell
65374 MIT
"The mother of all demo apps" — Exemplary fullstack Medium.com clone powered by React, Angular, Node, Django, and many more 🏅
by angular javascript
59499 MIT
AngularJS - HTML enhanced for web apps!
by sveltejs typescript
57249 MIT
Cybernetically enhanced web apps
by vitejs typescript
40832 MIT
Next generation frontend tooling. It's fast!
Trending New libraries in Frontend Framework
by vitejs typescript
40832 MIT
Next generation frontend tooling. It's fast!
by type-challenges typescript
16090 MIT
Collection of TypeScript type challenges with online judge
by remotion-dev typescript
12674 NOASSERTION
🎥 Create videos programmatically in React
by rustdesk rust
11657 GPL-3.0
Yet another remote desktop software
by blitz-js javascript
11217 MIT
⚡️The Fullstack React Framework — built on Next.js
by mantinedev typescript
9911 MIT
React components library with native dark theme support
by TuSimple typescript
8568 MIT
A Vue 3 Component Library. Fairly Complete. Theme Customizable. Uses TypeScript. Fast.
by Asabeneh javascript
8139
30 Days of React challenge is a step by step guide to learn React in 30 days. It requires HTML, CSS, and JavaScript knowledge. You should be comfortable with JavaScript before you start to React. If you are not comfortable with JavaScript check out 30DaysOfJavaScript. This is a continuation of 30 Days Of JS. This challenge may take more than 100 days, follow your own pace.
by sveltejs javascript
8027 MIT
The fastest way to build Svelte apps
Top Authors in Frontend Framework
1
123 Libraries
3697
2
72 Libraries
1211
3
70 Libraries
80710
4
68 Libraries
55051
5
62 Libraries
15437
6
56 Libraries
18488
7
53 Libraries
9997
8
52 Libraries
116508
9
52 Libraries
4484
10
52 Libraries
3003
1
123 Libraries
3697
2
72 Libraries
1211
3
70 Libraries
80710
4
68 Libraries
55051
5
62 Libraries
15437
6
56 Libraries
18488
7
53 Libraries
9997
8
52 Libraries
116508
9
52 Libraries
4484
10
52 Libraries
3003
Trending Kits in Frontend Framework
Google maps is a powerful and complex application. To integrate it into the React app “google-map-react” package is used. Any React component on Google Maps can be rendered by this package, which is a component written atop a tiny portion of the Google Maps API. It is actively maintained and simple enough to use. It is entirely isomorphic. Even without the Google Maps API being loaded, it can render map components in the browser. Every item on the map may be hovered using an internal, adjustable hover algorithm.
Since google-map-react allows the user to render any React component on the map, a specific component can be designed that shows a pin icon and text. One can use Iconify library (a collection of free SVG icons) for the icons.
One should be aware of a few prerequisites for the purpose:
- JavaScript ES6
- Searching for Location in Google Map
- React.js library
To know more about the integration of Google Maps, refer to the code given below.
Fig 1: Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React library.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
- Open the terminal from IDE.
- npm start to run the file.
Note: Create your own API KEY and paste it in the place of 'YOUR_API_KEY' in the code snippet.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for "how to embed an exact place in google map in Reactjs" in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
Using this solution, we are able to embed an place in google map with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to embed an exact place in google map in Reactjs.
Dependent Libraries
You can also search for any dependent library on kandi like 'react'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
A color picker is another application of react that enables the users to pick colors from a palette or a color wheel. In online applications, color pickers are frequently used for tasks like choosing a text color, a background color, or a color for a graphical element. React color picker components are provided by several libraries, including react-color and react-color-picker.
- react-color-picker: This library provides components that enable the users to include a color- choosing interface in their application.
- react-color: A wide range of color picker components, including SketchPicker, ChromePicker, and HuePicker, are included in this library.
react-color is a more comprehensive library that includes a variety of color picker components with different styles unlike react-color-picker, which is a much simpler library, including a single-color picker component, and customization options are provided by props. There are several more props available for modifying the default color, the format of the selected color, and the layout of the color picker, among other aspects of the ColorPicker component's look and performance.
For more information about customizing color picker in React, refer to the code given below
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and Styled-components library.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm i styled-components.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js) and refer demo for styles.css file.
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'create color picker in react' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Styled-components version-6.0.0.
Using this solution, we are able to customize color picker in React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to customize color picker in React.
Dependent Library
You can also search for any dependent libraries on kandi like 'react' and 'styled-components'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Use the react-player or video-react libraries to integrate a YouTube video into a React project. React Player allows you to embed audio and video players.
It supports various media kinds and sources, including YouTube, Vimeo, SoundCloud, and local files, and offers a straightforward, programmable interface for playing media files. Another library for playing audio and video in React applications is called Video-React. It offers comparable user experience for manipulating audio and video players in your React components and is built on top of the well-known video.js package. Like React Player, Video-react offers support for various media formats and sources. With a large user base and vibrant developer communities, React Player and Video-react are well-liked choices for integrating audio and video features into React apps. Consider each library's features and options, the level of customization and control you require, and the compatibility and integration with other tools and libraries you are using when choosing which library to employ in your project.
Here is an example of how you embed a YouTube video into a React project:
Fig 1: Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and ReactPlayer libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install react-player.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
- Remove the first line(import statement).
- Import React library by using the command -> import React from 'react';
- Import ReactPlayer library by using the command -> import ReactPlayer from 'react-player';
- Replace ReactVideo as ReactPlayer which is present inside the div tag.
- Open the terminal from IDE.
- npm start to run the file.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'youtube video on react page' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- ReactPlayer version: current.
Using this solution, we are able to create an youtube video on react page with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create an youtube video on react page.
Dependent Libraries
You can also search for any dependent libraries on kandi like 'react' and 'react-player'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
One of the most intellectual indoor games which keep the player engaged is Sudoku. Sudoku is a classic logic-based puzzle game. It requires a keen focus of mind and a logical vision. It is a number-placement game where you will be given a 9*9 grid which contains sub-grids of nine 3*3 matrices. The ultimate goal is to fill a grid with numbers from 1 to 9 in such a way each of its rows and columns contains each number exactly once. The outgrowth of technology in the last decade brought this intriguing game online. How about you creating this brilliant Sudoku game? How about building this complex game in a single-page application like React? Sounds interesting! Isn't it? Let's get into it with the help of the following libraries. This kit aids the development of Sudoku games using React by following the below steps. 1. Choose a development environment 2. Create a 2D array 3. Set up a track to look into the game's progress 4. Set up a track to determine the number of conflicts left 5. Create a component to indicate the connection between cells 6. Write a script to indicate connections using signals 7. Manage user's input 8. Create a component to drag and drop the numbers 9. Set up the tools to perform operations 10. Do the scripting to track the history of actions done
Development Environment
React is used for development. With React, it becomes easy and simple to develop an interactive UI. The state management in React makes the process of developing an application more flexible.
Graphical user interface
GUIs act as intermediaries to communicate with your device through UI components. In React, building UI components gets easy with the aid of CSS. React can be used for desktop applications and mobile applications as well.
Puzzle Solver
The puzzle-solving is simplified by creating cell components that throw signals indicating the relationship or connection between similar cell components using different colors.
Puzzle generator
Generating a puzzle is one of the key steps in creating a logic-based game. State management in React optimizes the puzzle generation.
Dynamic Forms are nothing but one of the crucial parts of a web app. It plays a vital role in collecting data or information about the users. Developers are responsible to validate those input data in the form fields in order to provide a good user experience.
There are two types of forms inputs in React,
- Uncontrolled Component
- Controlled Component
To add multiple input fields dynamically in JavaScript,
- Creating a copy of a field group to be used as a template.
- Getting the container of the input fields.
- Set input fields id is based on the total number of form groups in the parent.
- addinput() - make sure this method adds to the button.
- At the end insert the input form before the end of the parent form.
The main purpose of the forms is to collect the required information or data in a meaningful fashion and logically for communication and pass to another entity. It is advisable to have a JavaScript function that handles the form submission and also has access to the form's user data. The traditional way to do this technique is called 'controlled components'. The benefits of forms are increased efficiency of employees and reduced volume of work. Instead of manually putting the data into the databases, we can automate the process by directing the data from the forms to the databases.
Here is an example of how you can add form fields dynamically in ReactJS:
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and Reactstrap libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm i reactstrap.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js).
- Open the terminal from IDE.
- npm start to run the file.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'how to add form fields dynamically in reactjs' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Reactstrap version-9.0.2.
Using this solution, we are able to add form fields dynamically in reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to add form fields dynamically in reactjs.
Dependent Libraries
You can also search for any dependent libraries on kandi like 'react' and 'reactstrap'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Bar graphs are pictorial representations of data. They display numerical or categorical data. The data in bar charts are represented as vertical or horizontal bars, where the bar's length depicts the measure of data. Bar charts are mostly used in Sales Management, Inventory Management or to compare frequencies, etc. We can use an array or a list of data items as the source for creating a bar chart.
For creating a bar chart in React, we use React-charts. They include:
- Chart
- Series Type Components
- Curve Functions
- Position Constants
- Grouping Constants
A standard and highly adaptable data model proposed on arrays of series and arrays of datums is used by React Charts. To materialize this structure, you may directly use data accessors or the model defaults.
- Series: It is a collection of related data points
- Datums: Datums is a set of react components used for display and input of attributes
For more information about bar charts using react-charts in ReactJS, refer to the code given below.
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we are using React, moment and React charts libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm i moment and npm i react-charts --force.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file.
- Command or remove the import statement of styles file.
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'Bar chart using react-charts in ReactJs' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Moment version-current.
- React-charts version-0.8.0.
Using this solution, we are able to create bar chart using react charts in reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create bar chart using react charts in reactjs.
Dependent Library
You can also search for any dependent libraries on kandi like 'react', 'moment' and 'react-charts'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Fetching JSON array data from an API using React can be used in various contexts where you need to retrieve and display data from an external API in a React application. Some examples might include the following:
- a dashboard or reporting tool that makes use of a REST API to present data
- An application for data visualization or charting that shows current or past data
- An application for social networking or messaging that shows user data
- a retail or e-commerce website that displays product information or inventory from an API
You can use the fetch function, a built-in function for making HTTP queries, or a library like Axios to complete the request to fetch data from a JSON array from an API in a React application.
This pre-written code snippet will show you how to fetch data from a JSON file easily and consume it in your React project.
Steps-
- Declare a state in React to hold API data
- To retrieve API data and store the result, use a JS function
- On page load, add useEffect to the fetch API
Here's an example of how you might implement this:
Fig 1: Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and Axios library.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install axios.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
- Import libraries.
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'display data from jsonplaceholder api using react'in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Axios library version-0.26.1.
Using this solution, we are able to fetch Json array data from API using React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to fetch Json array data from API using React.
Dependent Library
You can also search for any libraries on kandi like 'react' and 'axios'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Pagination refers to breaking up a list of things into multiple pages that can be accessed via navigation links on a website or application. Pagination is a common technique for organizing and making it simpler to browse through displays containing vast numbers of objects.
Pagination can be implemented in several ways, such as client-side or server-side pagination. Client-side pagination requires loading all the data and then breaking it into pages on the client side. In contrast, server-side pagination includes requesting the server to obtain a specific data page. Pagination can be implemented in web applications using various components and libraries, such as the React Ultimate-Pagination component. A JavaScript package called React Ultimate-Pagination is used for pagination in React apps. It offers a pagination component that is adaptable, adjustable, and simple to add to a React app.
Here is how you can set up react ultimate pagination component using react pagination libraries.
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and React-ultimate-pagination libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm i react-ultimate-pagination.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js).
- Add export default statement at end of the code(like 'export default App;').
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'implementing pagination in react' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- React-Ultimate-Pagination version-current
Using this solution, we are able to set-up react ultimate pagination component with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to set-up react ultimate pagination component.
Dependent Libraries
You can also search for any dependent libraries on kandi like 'react' and 'react-ultimate-pagination'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
We can change the font color based on the background color in react by few different ways:
- We can use a library that offers practical functions, including color contrast and brightness, to choose the best font color based on the background color.
- We may manually determine the contrast ratio between the background color and the text’s color. If the contrast ratio is below a certain threshold, you can choose a different font color to improve the contrast and readability of the text. This can be done by using a library ‘contrast.js.’
- contrast.js: This is a library that helps in measuring the contrast between two colors. The contrast ratio gauges how simple it is to see text against a specific background color.
- We can use CSS ‘color’ function.
- color: This function allows you to use operations like lightening, darkening, and mixing to provide a color value that is generated from one or more other colors.
For more information about changing font color based on the background color in React, refer to the code given below
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and styled-component library.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js) and refer demo for additional one file called style.js file.
- Add export default statement at end of the code(like 'export default App;').
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'change the font color based on background color in React' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Styled-components version-6.0.0.
Using this solution, we are able to change the font color based on background color in React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to change the font color based on background color in React.
Dependent Library
You can also search for any dependent libraries on kandi like 'react' and 'styled-component'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
To create pie charts in a React application, you can use the react-highcharts library, which provides a React wrapper for the Highcharts library. Pie charts are a common way to present a brief composition summary or comparison. They continue to be a popular option for tiny datasets, even though they can be more challenging to read than column charts.
Highcharts is a popular library for creating interactive charts and graphs on the web. To create pie charts in a React application, you can use the react-highcharts library, which provides a React wrapper for the Highcharts library. There are several different charts available on Highcharts. Examples include bar charts, pie charts, line charts, spline charts, area charts, and so forth. Pies in highcharts can also be hollow, known as a donut chart. Additionally, this pie features an inside chart, creating a hierarchical picture. Pie chart with clickable individual slices that display more specific information.
Here is an example of how you can include a pie chart with ReactJS in your application:
Fig 1: Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React library.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install --save highcharts
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in index.js file(remove the earlier code from index.js).
- Open the terminal from IDE.
- npm start to run the file.
Also you can refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for "Pie Charts in Reactjs" in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- Highcharts version-16.0.2.
Using this solution, we are able to view pie charts in Reactjs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to view pie charts in Reactjs.
Dependent Libraries
You can also search for any dependency on kandi like 'react' and 'highcharts'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Hooks in React are essential functions of JavaScript that we often use to separate the reusable part of a program from some of the more common components.
- useState in React can be defined as a hook that will allow you to have local/state variables to functional components (i.e.the, more common components). React uses callback functions to push the resourceful functions away so they will not execute on every render.
React does not allow us to use the callback function directly in the useState hook. For this purpose, we use a third hook called “useEffect.” It accepts two arguments:
- the first one is “<function>”
- and the second one is “<dependency>”
Dependency is an optional argument. Once all the changes are made in DOM (Document Object Model), the useEffect hook invokes the callback function if any value in the dependencies array has been altered. To use a callback function with useState, we use useEffect to hook those checks if there is any change in the dependencies array and then call the function.
Here is an example of how to use callback with useState hook in react;
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and use-state-with-callback.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install use-state-with-callback.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
- There are two code snippets both are almost same you can use any one.
- Import React and use-state-with-callback libraries.
- Add export default statement at end of the code(like 'export default SomeOtherComponent;').
- Open the terminal from IDE.
- npm start to run the file.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'how to use callback with usestate hook in react' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- useState-with-callback version-3.0.2.
Using this solution, we are able to use callback with usestate hook in React with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to use callback with usestate hook in React.
Dependent Libraries
You can also search for any dependent library on kandi like 'react' and 'useState-with-callback'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
React can be used passing data from a parent component to a child component in various contexts where you must share data between components in a React application.
There are several ways you can pass data from a parent component to a child component in React. Here are a few options:
- Pass the data as props: You can transfer data as props from the parent component to the child component (short for "properties"). When rendering the child component, you can provide the data from the parent component as an attribute, and the child component can access the data as a prop.
- Use the context API: Instead of manually passing props at each level, you may utilize the context API to convey data through the component tree.
- Use a state management library: To store and communicate data throughout your application, you can use a state management library like Redux or MobX. Using these libraries, you can retrieve your data from any program component and store it in a global store.
Your approach will rely on your unique requirements and application design.
Using React, the following code shows how to pass data as props from a parent component to a child component:
Fig 1: Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and React-uikit-button libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install react-uikit-button --save.
- Open the folder in IDE.
- Copy the code using "copy" button above then create a file in the name of parent.js and paste it in parent.js file.(refer demo for additional files).
- Open the terminal from IDE.
- npm start to run the file.
You can also refer this url 'DEMO' for getting the above output.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for 'how to pass data from parent to child component using ReactJs' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- React-uikit-button version: current.
Using this solution, we are able to pass the data from parent to child component using ReactJs with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to pass the data from parent to child component using ReactJs.
Dependent Libraries
You can also search for any dependent libraries on kandi like 'react' and 'react-uikit-button'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Infinite Scrolling is nothing but a listing page design approach that loads content continuously as the user scrolls up and down and it eliminates the need for pagination breaking content up into multiple pages.
One of the simplest ways to use a library like react-infinite-scroll-component and this library provides a component that will trigger an event when the user scrolls to the bottom of the page. We can then use this event to load more content or information. Using built-in functions that React provides is also another way to implement this operation. Infinite scroll engages the users by boosting their performance and keeping viewers on the page for as long as possible. Users don't want to wait for pages to load because infinite scrolling can provide a better experience for the users. For example, the first page is only loaded at the time we entered the first time but the next page is loaded as soon as the user scrolls down through content or information.
React also has some built-in methods that we can use to implement an infinite scroll. In those built-in methods, componentDidUpdate is the first method. Then Rect calls this method after its updated a component. We can use this method to check if the user has scrolled to the bottom of the content or page and if so, load more data.
Here is an example of how you can implement Infinite Scrolling in a scrollable component on the page:
Fig : Preview of the output that you will get on running this code from your IDE.
Code
In this solution we're using React and Infinitescroll libraries.
Instructions
Follow the steps carefully to get the output easily.
- Install the Node.js and React on your IDE(preferable Visual Studio Code).
- Create React Application using npx create-react-app foldername.
- cd foldername.
- Install npm install infinite-scroll.
- Open the folder in IDE.
- Copy the code using "copy" button above and paste it in app.js file(remove the earlier code from app.js).
- Import libraries.
- Open the terminal from IDE.
- npm start to run the file.
I hope you found this useful. I have added the link to dependent libraries, version information in the following sections.
I found this code snippet by searching for ''implementing infinitescroll in react' in kandi. You can try any such use case!
Environment Tested
I tested this solution in the following versions. Be mindful of changes when working with other versions.
- The solution is created in Visual Studio Code 1.73.1.
- The solution is tested on node v18.12.1 and npm v8.19.2.
- React version-18.2.0.
- InfiniteScroll version-current.
Using this solution, we are able to create infinitescroll in a scrollable component on a page in react with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create infinitescroll in a scrollable component on a page in react.
Dependent Library
You can also search for any dependent libraries on kandi like 'react' and 'infinitescroll'.
Support
- For any support on kandi solution kits, please use the chat
- For further learning resources, visit the Open Weaver Community learning page.
Here are some famous React Animation Bot Libraries. Some of the use cases of React Animation Libraries include Creating custom page transitions, animating user interface elements, animating data visualisations, Animating complex user interfaces.
React animation libraries are JavaScript libraries that provide a set of tools to animate components in a React application. These libraries make it easy to animate various components such as buttons, dropdowns, modals, and other user interface elements. They provide powerful APIs that allow developers to create complex animations with minimal code.
Let us look at the libraries in detail below.
react-spring
- Utilizes physical equations and damping functions to create realistic and natural animations.
- Integrates with any other animation library.
- Highly optimized for performance, making it a great choice for complex animations.
react-native-reanimated
- Support for both imperative and declarative APIs.
- Support for interpolation and value transformations.
- Ability to use native platform-specific animations (e.g., spring animations on iOS).
animated
- Provides a comprehensive and flexible API for declarative and imperative animation control.
- Only library to offer React Native support.
- Allows developers to animate components directly from the React Native bridge.
react-anime
- Modular structure allows developers to create custom animations from individual components.
- Allows developers to create smooth transitions between different states of their animation.
- Offers unique easing functions to create a variety of animation styles.
react-animation
- Supports both CSS and JavaScript animations, making it easy to customize and animate components.
- Offers a wide variety of animations such as sliding, fading, and scaling.
- Allows developers to chain multiple animations together to create complex sequences.
moti
- Advanced features such as timeline-based animation sequencing.
- Supports both native and JavaScript-based animations.
- Includes an extensive library of pre-built animations.
Resonance
- Offers a robust set of tools to customize and manage animations.
- Designed to be performant, meaning that animations run smoothly on all devices.
- Provides an easy way to create complex animations, along with a variety of interpolation methods and easing functions.
react-animation-comparison
- Provides a comprehensive suite of tools and features.
- Powerful animation library and an intuitive GUI.
- Has a built-in timeline and animation editor.
renature
- Lightweight library that is designed to make animations easy to implement.
- It offers a wide range of animation options.
- Provides an animation editor that allows users to generate animations quickly and easily.
Lottie-react
- Completely open-source, allowing developers to customize and extend the library as they see fit.
- Extremely lightweight and fast-loading.
- Declarative API for easily adding complex animations to React components.
Here are some of the famous React PDF Viewer Libraries. React PDF Viewer Libraries can be used in Education, Business, Healthcare, Legal, and Government for various purposes.
React PDF viewer libraries allow developers to display PDF files within a React application. These libraries provide features such as page selection, links, bookmarks, search, annotations, and support for various document formats.
Let us have a look at some React PDF viewer libraries in detail.
pdf.js
- Does not rely on any third-party libraries or plugins.
- Supports text search and navigation, text selection, text rotation, and more.
- Supports PDF annotations, including highlighting, drawing, and note taking.
react-pdf
- Built using a lightweight virtual DOM and aims to provide fast rendering performance.
- Support for multiple languages.
- Supports the ability to add annotations.
react-pdf-viewer
- Has features like text selection, page navigation, full-text search, and thumbnail previews.
- Supports many file formats, such as PDF, EPUB, PPTX, and more.
- Has a fully customizable toolbar with buttons for zooming, printing, downloading, and more.
react-pdf-highlighter
- Support for undo/redo functionality for annotations and comments.
- Ability to export annotations and comments as text.
- Support for multiple selection modes, including text, area, and paragraph selections.
react-pdf-js
- Enhanced security.
- High-quality rendering.
- Cross-platform support.
reactjs-pdf-reader
- Allows users to jump directly to a page from a table of contents.
- Features thumbnail view of pages and supports page navigation.
- Allows users to add bookmarks and annotations to a PDF.
react-pdf-render
- Has an easy-to-use interface, allowing users to quickly and easily view PDF documents.
- Allows interactive features like page navigation, text search, and page zooming.
- Provides fast loading times and smooth page transitions.
FAQ:
1. Is it possible to use Create React App to create a new PDF document?
Create React App (CRA) is primarily designed for creating web applications using React. Although it's not designed to make PDFs, you can still use it to build a web tool. This tool can generate PDFs or make a form that collects and turns data into a PDF.
Here is how you might approach it:
- Collect Data in a Form: Create a React component using the Create React App. It allows users to input the necessary data for your PDF document. It could be text, images, or any other relevant information.
- Generate PDF Content: Use a third-party library to generate the content for your PDF.
- Display or Download PDF: Once you generate the PDF, you can offer users the option to display or download it. You can use standard React components and HTML elements for this purpose.
2. What is the Document component, and how does it work when using React-PDF?
The 'Document' component is important for displaying PDF documents in React apps. It allows you to define the structure of the PDF document you want to display. It includes its pages and content. It stores the PDF document and helps organize and display the contents.
Here is how the 'document' component works when using 'react-pdf':
- Installation and import: First, you should install the 'react-pdf' library in your project. You can do this using a package manager like yarn or npm. Next, import the required components from the library in your React component.
- Usage of the 'Document' component: You use the 'Document' component to define the structure of the PDF document. It accepts a 'file' prop which specifies the PDF URL you want to render. You can also use 'onLoadSuccess' and 'onLoadError' to handle loading events.
- Using 'Page' and other components: Inside the 'Document' component, you define individual pages using the 'Page' component. Each 'page' component displays the content that should be on that page. You can include various elements within a 'Page' like 'Images or 'Text.'
- Rendering the PDF: Finally, you can render the 'PDFViewer' component within your application. The 'react-pdf' library will display the PDF document according to your defined structure.
PDF.js makes it easier to display PDFs in browsers with its 'Document,' 'Page,' and other parts. They offer a convenient way to work with PDF documents. You can make PDF views that are dynamic and interactive in your React apps.
3. Can any other related React components use the Document component?
The 'react-pdf' library offers React components that work with the 'Document' component. These components help you create advanced PDF views in your React app. These components allow you to add various types of content to your PDF documents.
Here are some of the key components:
- 'Page' Component: It represents an individual page within the PDF document. You can use it to organize and structure the content of each page.
- 'Text' Component: It allows you to add text content to your PDF. You can customize font sizes, alignment, color, and styles.
- 'Link' Component: It allows you to create hyperlinks within your PDF document. These links can navigate to other pages within the same document or external URLs.
- 'Image' Component: It will embed images within your PDF document. You can specify the source URL, dimensions, and other properties.
- 'Canvas' Component: It lets you draw custom content directly onto the PDF page, like shapes and graphics.
- 'Layer' Component: It allows you to create layers within your PDF document. You can use layers to show or hide specific content based on user interactions.
- 'Outline' Component: It represents an outline or table of contents for your PDF document. It allows users to navigate to specific sections of the document.
- 'Viewer' Component: It wraps up the 'Document' component. You can use it to control how the PDF viewer looks and works.
- 'Note' Component: It enables you to add annotations or notes to your PDF pages. These notes can be interactive and provide additional information.
- 'Font' Component: It provides the option to use custom fonts in your PDF document. It allows you to maintain consistent typography with your application's design.
4. Where will you find its output folder after creating a document file?
The PDF isn't saved to your computer when you use the 'react-pdf' library in a React app. Instead, the browser shows the PDF content within the React app. The application generates the PDF dynamically. It is not saved to a file on the server or the client's local machine by default.
Here is how it works:
- Dynamic Rendering: If you use the 'react-pdf' library, the PDF document becomes a group of React components. It represents the document's structure and content.
- No Physical Output: The PDF appears in the browser without making a physical file. The application's JavaScript and the browser's rendering engine control the PDF content.
- Browser Display: A viewer inside the user's browser shows the PDF content. Users can view the PDF document without downloading or using external software.
5. When should I use jsPdf or pdfMake instead of just React-PDF?
Both 'react-pdf' and external libraries like 'pdfMake' and 'jsPDF' serve different purposes. You can use it in different scenarios based on your requirements.
Here is when you might consider using an external library in addition to or instead of 'react-pdf':
- Complex PDF Generation: Suppose you want to make custom PDFs with unique designs and interactive features. You can use graphs, tables, and charts for the features. If you want, you can use external libraries like 'jsPDF' or 'pdfMake.' These libraries offer fine-grained control over PDF content creation and layout.
- Server-Side Generation: An external library might be preferable if you need to generate PDFs on the server side. You can create PDFs in various locations, such as web browsers and servers. You can do this by using libraries like jsPDF and pdfMake.
- Client-Side Interactivity: If you need to add interactive elements to a PDF, such as forms or digital signatures, react-pdf won't work. It would help if you considered using a library like jsPDF or pdfMake.
- Custom Layouts and Components: External libraries often provide better support for custom layouts and components. If you want more design choices for your PDF with react-pdf, you can use another library to customize it.
- Existing Integration: If you already use a library like jsPDF or pdfMake, it's wise to keep using it for PDFs.
- Performance Considerations: One library may perform better than another library, depending on how you use it. When choosing a library, compare how fast it renders and how much memory it uses. Find one that fits your needs.
- Community and Documentation: Libraries such as jsPDF and pdfMake have been around for a long time. They have a large community and well-established documentation. If the features of an external library better match your needs, it's a good reason to choose it.
To summarize, react-pdf is good for displaying PDF content in a React app. You can create PDFs with interactive features using libraries like jsPDF and pdfMake. They provide more flexibility and customization options. Think about what your project needs and the abilities of each library before you decide.
Here are some famous Vue Loader Libraries. Some of the Vue Loader Libraries' use cases include Transforming Single File Components, Building Component Libraries, Automated Testing, and Code Splitting.
Vue Loader is a webpack loader that allows you to write your components in a format called Single-File Components (SFCs). It enables you to write your components in an HTML-like syntax, using special tags and attributes to describe the component’s data, structure, and behaviors. It can also be used to pre-process other languages and libraries.
Let us have a look at these libraries in detail below.
vue-loader
- Rapidly develop your application by automatically reloading your code when changes are made.
- Allows you to split your code into multiple bundles, allowing you to serve only the necessary parts to the client.
- Supports pre-processors such as SASS and TypeScript.
vue-svg-loader
- Ability to specify multiple SVG loading and rendering options.
- Ability to easily optimize SVGs for improved performance.
- Supports automatic code-splitting for improved performance.
vue-hot-reload-api
- Hot reloading of files without a browser refresh, allowing developers to keep their focus on a task.
- Ability to detect changes in component data and reactively update the UI.
- Ability to work with single-file components and component libraries.
vue-template-loader
- Supports precompiling of templates, making them faster to render.
- Supports hot reloading out of the box.
- Supports conditional compilation, allowing developers to compile different pieces of code depending on the environment they are running in.
vux -loader
- Supports server-side rendering, making it easier to create SEO-friendly applications.
- Provides a plugin and command line tool to help developers quickly scaffold and build Vue applications.
- Offers a "hot reload" feature that allows developers to quickly see changes to their code without having to reload the entire application.
vue-jsx-hot-loader
- Provides support for JSX, making it easier to write code that is both readable and efficient.
- Provides the ability to hot reload components and styles without having to restart the app.
- Includes support for source maps, making it easier to debug code and find errors quickly.
vue-loader-plugin
- Supports pre-processors like Pug, Stylus, and Sass.
- Enables developers to write components in a single file.
- Supports code splitting, which allows developers to split their code into separate bundles.
Here are some of the famous Vue Modal Libraries. Some use cases of Vue Modal Libraries include Creating a popup window for user input, Presenting additional information, Creating a login screen, and Creating a confirmation dialog.
Vue modal libraries are libraries of pre-built modal components for the Vue.js JavaScript framework. These libraries provide an easy way to create and customize modals that can be used to display messages, forms, and other types of content in an attractive and user-friendly way.
Let us have a look at some of the famous Vue Modal Libraries in detail below.
tingle
- Fully responsive and works on all modern browsers.
- An auto-closing feature that allows the modal to close automatically if the user does not interact with it.
- An optional backdrop element that can be used to dim the page content behind the modal.
vue-final-modal
- Allows developers to update the content of a modal after it has been opened.
- Includes accessibility features such as focus trapping and keyboard navigation.
- Offers various options to position modals, including center, top, or bottom.
Ply
- Designed to be easy to use, so developers can quickly and easily create modal windows in their applications.
- Comes with a range of features, including animations, stacking, and drag-and-drop support.
- Allows developers to customize the look, feel, and behavior of their modal windows with a few simple lines of code.
vue-modal-dialogs
- Focus on usability and accessibility ensures that all users can take advantage of the library.
- Support for dynamic content makes it easy to update a dialog’s content without reloading the page.
- Built-in animations provide an attractive and interactive user experience.
vuetify-dialog
- Provides several options for customizing the look and feel of the dialog, including color schemes, size, and position.
- Allows dynamic content to be added to the dialog, such as images, videos, and custom code snippets.
- Provides a robust and powerful API allowing developers to create custom dialogs easily.
v-dialogs
- Includes a set of built-in transitions for modal dialogs, such as sliding, fading, and scaling.
- Has built-in support for accessibility features like focus trapping, keyboard navigation, and screen reader support.
- Offers advanced features such as support for multiple modals, stackable modals, and dynamic modals.
vue-modal
- Supports custom transitions, allowing users to create unique user experiences.
- Provides a built-in scroll lock feature, ensuring that the user’s view remains focused on the modal.
- Supports lazy loading, allowing users to load content only when the modal is opened.
Here are some famous Vue Progress Bar Libraries. Some of the Vue Progress Bar Libraries' use cases include Displaying the progress of a task, Showing the progress of a quiz, Displaying the progress of a game, Showing the progress of a survey, and Showing the progress of a video or audio file.
Vue progress bar libraries are a set of components and plugins built to help developers easily create interactive, animated progress bars and loading indicators for their web applications built with Vue.js. These libraries offer a range of features, such as multiple themes, automatic animation, and a wide range of customization options. They are designed to be easy to use and integrate into any existing Vue.js project.
Let us have a look at some of the famous Vue Progress Libraries in detail below.
vue-progressbar
- Allows you to stack multiple progress bars on top of each other.
- Offers an easy-to-understand configuration that allows you to quickly create complex progress bars.
- Offers progress notifications, allowing you to be notified when your progress bar reaches a certain percentage.
vue-loading-overlay
- Allows you to programatically control the loading overlay by setting a timer.
- Takes only a few lines of code to get the loading overlay up and running.
- Used for various scenarios such as loading data, submitting forms, processing payments, etc.
progress-stream
- Only Vue progress bar library that allows you to create animated progress bars.
- Offers a variety of other features such as the ability to customize the start and end of the progress bar.
- Allows you to create multiple progress bars on the same page and have them interact with each other.
vue-progress
- Has a very small footprint and is incredibly lightweight.
- Automatically detects when a user's progress has reached its end and will automatically stop the progress bar.
- Designed to be responsive, allowing progress bars to appear correctly regardless of the device or screen size.
vue-scroll-progress-bar
- Ability to track scrolling progress across multiple routes.
- Ability to use the progress bar to display messages or other data.
- Support for multiple browsers, including Internet Explorer and Safari.
vue-progress-indicator
- Small in size, making it easy to integrate into any existing Vue project.
- Designed to provide a smooth and efficient animation experience when displaying progress.
- Allows developers to customize the design of the progress indicator to match the look and feel of their application.
vue-progress-bar
- Supports different transition effects such as “slide”, “fade” and “zoom”.
- Supports right-to-left (RTL) languages, making it suitable for global applications.
- Allows you to create multiple instances of progress bars in the same app.
Here are some famous Vue UI Libraries. Vue UI Libraries' use cases include Developing Single Page Applications, Creating Reusable Components, Building Responsive Applications, and Creating Cross-Platform Applications.
Vue UI libraries/frameworks refer to a set of tools, components, and libraries that help developers build user interfaces (UI) with the Vue.js framework. These libraries and frameworks provide pre-defined components and functions that can be quickly and easily integrated into an application, resulting in a powerful and feature-rich UI.
Let us look at these libraries in detail below.
vuetify
- Offers a wide range of pre-made UI components.
- Designed to follow the Material Design guidelines and provides a comprehensive library of UI components.
- Designed to work on all major devices, from desktop to mobile, providing a consistent user experience across all platforms.
quasar
- Has a robust theming system.
- Abstracts away the complexities of the DOM.
- Developers can customize and extend the library without having to pay for a commercial license.
bootstrap-vue
- Fully compatible with Bootstrap 4 and offers easy access to the standard Bootstrap components.
- Unique directives allow developers to quickly and easily create components like tabs, modals, and popovers.
- Includes an extensive set of utility classes and components.
Keen-UI
- Doesn’t impose any styling or coding conventions on the user.
- Modular, allowing you to include only the components you need.
- Wide range of components, from basic form elements to more complex components like a multi-select.
vuikit
- Offers a flexible layout system that allows developers to create complex applications quickly.
- Built to be cross-browser compatible, allowing developers to create applications that work on all major web browsers.
- Highly customizable, allowing developers to create applications that look and feel unique.
iview
- Provides an extensive library of components, including tables, inputs, buttons, forms, and more.
- Easy customization of themes to match the desired look and feel of your project.
- Provides advanced features such as server-side rendering, progressive web apps, and code splitting.
KendoUI-VueJS
- Provides support for internationalization.
- Supports declarative syntax, making it easy to create complex and highly interactive user interfaces.
- Comprehensive support for responsive design.
Here are the best libraries for creating and handling tables using Vue.js. These libraries are useful for sending notifications to users and letting them know how their function is progressing.
Vue is a JavaScript framework for creating user interfaces. It provides a declarative and component-based programming approach that enables you to create user interfaces, whether straightforward or sophisticated, quickly. It relies upon the foundations of conventional HTML, CSS, and JavaScript. With the help of tables, you can logically organize and present a sizable amount of data. Using Vue libraries, the creation of tables becomes even more convenient.
The best Vue table libraries are listed here to assist engineers with easing their task of table manipulation.
table-
- A library with full control over the markup and styles.
- Sorting, grouping, aggregation, selection is possible.
- Build tables/data grids for Vue-Table and others like React-table, Solid-Table, etc.
handsontable-
- A spreadsheet-style JavaScript data grid.
- It supports CRUD operations, data binding, validation of data, preprocessing, and grouping.
- Supports React, Angular, and Vue.
bootstrap-table -
- Extended bootstrap table.
- Can be integrated with any CSS framework.
- Responsive and scrollable tables with more features supporting Vue.js.
ag-grid -
- The ideal JavaScript Data Table for developing business applications.
- Completely functional and hugely versatile.
- Data can be easily exported into a CSV or XLX file.
vue-easytable-
- A robust data table built with vuejs.
- It may be used as a data grid with Google Sheets or Microsoft Excel.
- It allows for simulated scrolling, cell editing, etc.
heyui -
- A UI components library.
- Supports advanced plugins and forms apart from table.
- Built with Vue and Javascript.
vuetable-2-
- Data table component for Vue.
- Does not rely on a component that has been globally created.
- Action buttons can be provided for each instance of a data table.
vue-good-table -
- A simple, effective data table for VueJS.
- Includes features like sorting, column filtering, and pagination.
- It has advanced customizations.
Trending Discussions on Frontend Framework
ERROR: function jsonb_array_elements_text(jsonb[]) does not exist
Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?
How to connect Django Rest API to a html CSS JS frontend
Override CORS policy in java springboot
How do I move an image background inside of a container, without moving the container itself?
How to host a React app in Nodejs without using Express?
image tag - how to put on an ICON (not string - NOT URL) in case of url failure?
Javascript Dynamic Data binding code not working
Frontend framework change
Can ReactJS run without node in Symfony 5.3 using their Webpack Encore Bundle
QUESTION
ERROR: function jsonb_array_elements_text(jsonb[]) does not exist
Asked 2022-Apr-11 at 15:51Having a hard time traversing and querying elements from a jsonb[] row.
1CREATE TABLE foo (
2 id uuid PRIMARY KEY,
3 work_experience jsonb[] NOT NULL
4);
5
6INSERT INTO foo (id, work_experience)
7VALUES (
8 'b4e942a0-49b4-4fa7-8f7a-5fbf0541d1c9',
9 E'{"{\\"id\\": \\"7cd74bae-ff5b-4f58-ab20-0218f820ffff\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"React\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"686af7e4-6d58-4148-b227-3bf65ff10273\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Backend frameworks & libraries\\", \\"level3\\": \\"Node.js\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"c4e54726-7bd5-44bb-8597-a05eb2272e2b\\", \\"level3_id\\": \\"cda4441f-dba6-495c-9e2e-7429bd5e0465\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}], \\"end_date\\": null, \\"position\\": \\"Senior Software Engineer + Team Lead\\", \\"start_date\\": \\"2019-10-01T00:00:00\\", \\"description\\": \\"Draper, Utah, United States\\\\n• Architected Expert Portal* from the ground up using a Node/Typescript\\\\nbackend, a\\\\nPostgreSQL database, a GraphQL API layer, a Webpack build process, with a\\\\nTypescript/React front-end and XState for state management\\\\n• Enforced coding best practices with linting rules and code formatters by\\\\nautomating it in\\\\ngit workflow\\\\n• Automated deployment Expert Portal* to EC2 instances and the @pluralsight\\\\nNPM\\\\nartifactory using Github, TeamCity, and Octopus\\\\n• Improved product team workflow by building a browser extention to add\\\\nLeanKit card\\\\ntemplate functionality\\\\n• Consumed and published data through Kafka streams and RabbitMQ\\\\nmessages\\\\n• Interviewed, onboarded, and trained junior to mid-level engineers\\", \\"company_name\\": \\"Pluralsight\\"}","{\\"id\\": \\"9e2c2b44-39a4-4369-b237-c51fd938e61d\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2019-10-01T00:00:00\\", \\"position\\": \\"Software Engineer II\\", \\"start_date\\": \\"2017-11-01T00:00:00\\", \\"description\\": \\"Greater Salt Lake City Area\\\\nWorked on the KSL Jobs Classifieds team as a full-stack developer. Following\\\\nthe scrum methodology, I added new features and maintained all things\\\\npowered by KSL Jobs.\\\\n• Built and deployed a \\\\\\"white label\\\\\\" version of KSL Jobs for the Silicon Slopes\\\\nbrand. (https://siliconslopes.ksl.com)\\\\n• Rewrote major sections of the current KSL Jobs site in React.js\\\\n• Automated querying data for reports and analytic purposes through Node and\\\\nPHP scripts\\\\n• Provided rich data tracking through Google Tag Manager, Google Analytics,\\\\nand BigQuery\\\\n• Migrated Solr search engine to ElasticSearch with a GraphQL API\\", \\"company_name\\": \\"Deseret Digital Media\\"}","{\\"id\\": \\"efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2019-08-01T00:00:00\\", \\"position\\": \\"Full Stack Developer\\", \\"start_date\\": \\"2017-01-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Appritech LLC to modernize their legacy software and add new\\\\nfeatures to automate their business processes.\\\\n• Building new call handler from the ground up using JavaScript ES6,\\\\nBootstrap, SASS for\\\\nfront-end, and PHP7/Laravel for back-end\\\\n• Implemented real-time call management system and built reporting API.\\\\nImproved call agent\\\\nproductivity by 70%\\\\n• Upgraded deprecated PHP legacy code to PHP 7\\\\n• Synchronized follow up calls with Twilio API functionality for SMS message\\\\nforwarding\\\\n• Installed and setup Apache server for an after hours call center\\", \\"company_name\\": \\"Appritech Software\\"}","{\\"id\\": \\"2db60c6c-c214-4d9b-9034-baba676203a8\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2017-09-01T00:00:00\\", \\"position\\": \\"Web Developer\\", \\"start_date\\": \\"2017-02-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Redcore LLC to build entrepreneurial tools, marketing tools, and\\\\nadding new functionality to the current Wordpress-integrated website and\\\\nCMS.\\\\n• Built Brand Management website from the ground up using Bootstrap and\\\\nJavaScript on the\\\\nfront end, with PHP and MySQL on the back-end\\\\n• Automated managerial and accounting tasks, such as invoice generation,\\\\nand transactions using Stripe API\\\\n• Debugged and perfected current web applications to enrich UX\\\\n• Doubled clientele by expanding Redcore services offered to include website\\\\ncreation and\\\\nmanagement\\", \\"company_name\\": \\"Redcore LLC\\"}","{\\"id\\": \\"c3f1d5b2-5586-477d-ae4c-e2927463244e\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2017-03-01T00:00:00\\", \\"position\\": \\"Software and Web Developer\\", \\"start_date\\": \\"2016-12-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nThis internship was focused on building core website and software for\\\\nCentaurific using the LAMP stack.\\\\n• Created dynamic landing pages for products to generate leads\\\\n• Designed a MySQL database to organize data and generate excel reports\\\\n• Revitalized marketing efforts through analytics and a social media sharing\\\\npage\\", \\"company_name\\": \\"Centaurific\\"}"}'
10);
11(Here is what that work_experience row looks like in JSON:)
1CREATE TABLE foo (
2 id uuid PRIMARY KEY,
3 work_experience jsonb[] NOT NULL
4);
5
6INSERT INTO foo (id, work_experience)
7VALUES (
8 'b4e942a0-49b4-4fa7-8f7a-5fbf0541d1c9',
9 E'{"{\\"id\\": \\"7cd74bae-ff5b-4f58-ab20-0218f820ffff\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"React\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"686af7e4-6d58-4148-b227-3bf65ff10273\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Backend frameworks & libraries\\", \\"level3\\": \\"Node.js\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"c4e54726-7bd5-44bb-8597-a05eb2272e2b\\", \\"level3_id\\": \\"cda4441f-dba6-495c-9e2e-7429bd5e0465\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}], \\"end_date\\": null, \\"position\\": \\"Senior Software Engineer + Team Lead\\", \\"start_date\\": \\"2019-10-01T00:00:00\\", \\"description\\": \\"Draper, Utah, United States\\\\n• Architected Expert Portal* from the ground up using a Node/Typescript\\\\nbackend, a\\\\nPostgreSQL database, a GraphQL API layer, a Webpack build process, with a\\\\nTypescript/React front-end and XState for state management\\\\n• Enforced coding best practices with linting rules and code formatters by\\\\nautomating it in\\\\ngit workflow\\\\n• Automated deployment Expert Portal* to EC2 instances and the @pluralsight\\\\nNPM\\\\nartifactory using Github, TeamCity, and Octopus\\\\n• Improved product team workflow by building a browser extention to add\\\\nLeanKit card\\\\ntemplate functionality\\\\n• Consumed and published data through Kafka streams and RabbitMQ\\\\nmessages\\\\n• Interviewed, onboarded, and trained junior to mid-level engineers\\", \\"company_name\\": \\"Pluralsight\\"}","{\\"id\\": \\"9e2c2b44-39a4-4369-b237-c51fd938e61d\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2019-10-01T00:00:00\\", \\"position\\": \\"Software Engineer II\\", \\"start_date\\": \\"2017-11-01T00:00:00\\", \\"description\\": \\"Greater Salt Lake City Area\\\\nWorked on the KSL Jobs Classifieds team as a full-stack developer. Following\\\\nthe scrum methodology, I added new features and maintained all things\\\\npowered by KSL Jobs.\\\\n• Built and deployed a \\\\\\"white label\\\\\\" version of KSL Jobs for the Silicon Slopes\\\\nbrand. (https://siliconslopes.ksl.com)\\\\n• Rewrote major sections of the current KSL Jobs site in React.js\\\\n• Automated querying data for reports and analytic purposes through Node and\\\\nPHP scripts\\\\n• Provided rich data tracking through Google Tag Manager, Google Analytics,\\\\nand BigQuery\\\\n• Migrated Solr search engine to ElasticSearch with a GraphQL API\\", \\"company_name\\": \\"Deseret Digital Media\\"}","{\\"id\\": \\"efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2019-08-01T00:00:00\\", \\"position\\": \\"Full Stack Developer\\", \\"start_date\\": \\"2017-01-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Appritech LLC to modernize their legacy software and add new\\\\nfeatures to automate their business processes.\\\\n• Building new call handler from the ground up using JavaScript ES6,\\\\nBootstrap, SASS for\\\\nfront-end, and PHP7/Laravel for back-end\\\\n• Implemented real-time call management system and built reporting API.\\\\nImproved call agent\\\\nproductivity by 70%\\\\n• Upgraded deprecated PHP legacy code to PHP 7\\\\n• Synchronized follow up calls with Twilio API functionality for SMS message\\\\nforwarding\\\\n• Installed and setup Apache server for an after hours call center\\", \\"company_name\\": \\"Appritech Software\\"}","{\\"id\\": \\"2db60c6c-c214-4d9b-9034-baba676203a8\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2017-09-01T00:00:00\\", \\"position\\": \\"Web Developer\\", \\"start_date\\": \\"2017-02-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Redcore LLC to build entrepreneurial tools, marketing tools, and\\\\nadding new functionality to the current Wordpress-integrated website and\\\\nCMS.\\\\n• Built Brand Management website from the ground up using Bootstrap and\\\\nJavaScript on the\\\\nfront end, with PHP and MySQL on the back-end\\\\n• Automated managerial and accounting tasks, such as invoice generation,\\\\nand transactions using Stripe API\\\\n• Debugged and perfected current web applications to enrich UX\\\\n• Doubled clientele by expanding Redcore services offered to include website\\\\ncreation and\\\\nmanagement\\", \\"company_name\\": \\"Redcore LLC\\"}","{\\"id\\": \\"c3f1d5b2-5586-477d-ae4c-e2927463244e\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2017-03-01T00:00:00\\", \\"position\\": \\"Software and Web Developer\\", \\"start_date\\": \\"2016-12-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nThis internship was focused on building core website and software for\\\\nCentaurific using the LAMP stack.\\\\n• Created dynamic landing pages for products to generate leads\\\\n• Designed a MySQL database to organize data and generate excel reports\\\\n• Revitalized marketing efforts through analytics and a social media sharing\\\\npage\\", \\"company_name\\": \\"Centaurific\\"}"}'
10);
11[
12 {
13 "id": "7cd74bae-ff5b-4f58-ab20-0218f820ffff",
14 "skills": [
15 {
16 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
17 "level1": "Programming languages",
18 "level2": "Scripting languages",
19 "level3": "TypeScript",
20 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
21 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
22 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
23 },
24 {
25 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273",
26 "level1": "Software frameworks & libraries",
27 "level2": "Frontend frameworks & libraries",
28 "level3": "React",
29 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
30 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
31 "level3_id": "686af7e4-6d58-4148-b227-3bf65ff10273"
32 },
33 {
34 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465",
35 "level1": "Software frameworks & libraries",
36 "level2": "Backend frameworks & libraries",
37 "level3": "Node.js",
38 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
39 "level2_id": "c4e54726-7bd5-44bb-8597-a05eb2272e2b",
40 "level3_id": "cda4441f-dba6-495c-9e2e-7429bd5e0465"
41 },
42 {
43 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
44 "level1": "Software frameworks & libraries",
45 "level2": "Frontend frameworks & libraries",
46 "level3": "TypeScript",
47 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
48 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
49 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
50 }
51 ],
52 "end_date": null,
53 "position": "Senior Software Engineer + Team Lead",
54 "start_date": "2019-10-01T00:00:00",
55 "description": "Draper, Utah, United Statesn• Architected Expert Portal* from the ground up using a Node/Typescriptnbackend, anPostgreSQL database, a GraphQL API layer, a Webpack build process, with anTypescript/React front-end and XState for state managementn• Enforced coding best practices with linting rules and code formatters bynautomating it inngit workflown• Automated deployment Expert Portal* to EC2 instances and the @pluralsightnNPMnartifactory using Github, TeamCity, and Octopusn• Improved product team workflow by building a browser extention to addnLeanKit cardntemplate functionalityn• Consumed and published data through Kafka streams and RabbitMQnmessagesn• Interviewed, onboarded, and trained junior to mid-level engineers",
56 "company_name": "Pluralsight"
57 },
58 {
59 "id": "9e2c2b44-39a4-4369-b237-c51fd938e61d",
60 "skills": [
61 {
62 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
63 "level1": "Programming languages",
64 "level2": "Scripting languages",
65 "level3": "JavaScript",
66 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
67 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
68 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
69 }
70 ],
71 "end_date": "2019-10-01T00:00:00",
72 "position": "Software Engineer II",
73 "start_date": "2017-11-01T00:00:00",
74 "description": "Greater Salt Lake City AreanWorked on the KSL Jobs Classifieds team as a full-stack developer. Followingnthe scrum methodology, I added new features and maintained all thingsnpowered by KSL Jobs.n• Built and deployed a "white label" version of KSL Jobs for the Silicon Slopesnbrand. (https://siliconslopes.ksl.com)n• Rewrote major sections of the current KSL Jobs site in React.jsn• Automated querying data for reports and analytic purposes through Node andnPHP scriptsn• Provided rich data tracking through Google Tag Manager, Google Analytics,nand BigQueryn• Migrated Solr search engine to ElasticSearch with a GraphQL API",
75 "company_name": "Deseret Digital Media"
76 },
77 {
78 "id": "efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef",
79 "skills": [
80 {
81 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
82 "level1": "Programming languages",
83 "level2": "High-level languages",
84 "level3": "PHP",
85 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
86 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
87 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
88 }
89 ],
90 "end_date": "2019-08-01T00:00:00",
91 "position": "Full Stack Developer",
92 "start_date": "2017-01-01T00:00:00",
93 "description": "Provo, Utah AreanWorked with Appritech LLC to modernize their legacy software and add newnfeatures to automate their business processes.n• Building new call handler from the ground up using JavaScript ES6,nBootstrap, SASS fornfront-end, and PHP7/Laravel for back-endn• Implemented real-time call management system and built reporting API.nImproved call agentnproductivity by 70%n• Upgraded deprecated PHP legacy code to PHP 7n• Synchronized follow up calls with Twilio API functionality for SMS messagenforwardingn• Installed and setup Apache server for an after hours call center",
94 "company_name": "Appritech Software"
95 },
96 {
97 "id": "2db60c6c-c214-4d9b-9034-baba676203a8",
98 "skills": [
99 {
100 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
101 "level1": "Programming languages",
102 "level2": "High-level languages",
103 "level3": "PHP",
104 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
105 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
106 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
107 }
108 ],
109 "end_date": "2017-09-01T00:00:00",
110 "position": "Web Developer",
111 "start_date": "2017-02-01T00:00:00",
112 "description": "Provo, Utah AreanWorked with Redcore LLC to build entrepreneurial tools, marketing tools, andnadding new functionality to the current Wordpress-integrated website andnCMS.n• Built Brand Management website from the ground up using Bootstrap andnJavaScript on thenfront end, with PHP and MySQL on the back-endn• Automated managerial and accounting tasks, such as invoice generation,nand transactions using Stripe APIn• Debugged and perfected current web applications to enrich UXn• Doubled clientele by expanding Redcore services offered to include websitencreation andnmanagement",
113 "company_name": "Redcore LLC"
114 },
115 {
116 "id": "c3f1d5b2-5586-477d-ae4c-e2927463244e",
117 "skills": [
118 {
119 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
120 "level1": "Programming languages",
121 "level2": "Scripting languages",
122 "level3": "JavaScript",
123 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
124 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
125 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
126 }
127 ],
128 "end_date": "2017-03-01T00:00:00",
129 "position": "Software and Web Developer",
130 "start_date": "2016-12-01T00:00:00",
131 "description": "Provo, Utah AreanThis internship was focused on building core website and software fornCentaurific using the LAMP stack.n• Created dynamic landing pages for products to generate leadsn• Designed a MySQL database to organize data and generate excel reportsn• Revitalized marketing efforts through analytics and a social media sharingnpage",
132 "company_name": "Centaurific"
133 }
134]
135I'd like to query out the structure. I tried this and a few other variants of it to no avail:
1CREATE TABLE foo (
2 id uuid PRIMARY KEY,
3 work_experience jsonb[] NOT NULL
4);
5
6INSERT INTO foo (id, work_experience)
7VALUES (
8 'b4e942a0-49b4-4fa7-8f7a-5fbf0541d1c9',
9 E'{"{\\"id\\": \\"7cd74bae-ff5b-4f58-ab20-0218f820ffff\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"React\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"686af7e4-6d58-4148-b227-3bf65ff10273\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Backend frameworks & libraries\\", \\"level3\\": \\"Node.js\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"c4e54726-7bd5-44bb-8597-a05eb2272e2b\\", \\"level3_id\\": \\"cda4441f-dba6-495c-9e2e-7429bd5e0465\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}], \\"end_date\\": null, \\"position\\": \\"Senior Software Engineer + Team Lead\\", \\"start_date\\": \\"2019-10-01T00:00:00\\", \\"description\\": \\"Draper, Utah, United States\\\\n• Architected Expert Portal* from the ground up using a Node/Typescript\\\\nbackend, a\\\\nPostgreSQL database, a GraphQL API layer, a Webpack build process, with a\\\\nTypescript/React front-end and XState for state management\\\\n• Enforced coding best practices with linting rules and code formatters by\\\\nautomating it in\\\\ngit workflow\\\\n• Automated deployment Expert Portal* to EC2 instances and the @pluralsight\\\\nNPM\\\\nartifactory using Github, TeamCity, and Octopus\\\\n• Improved product team workflow by building a browser extention to add\\\\nLeanKit card\\\\ntemplate functionality\\\\n• Consumed and published data through Kafka streams and RabbitMQ\\\\nmessages\\\\n• Interviewed, onboarded, and trained junior to mid-level engineers\\", \\"company_name\\": \\"Pluralsight\\"}","{\\"id\\": \\"9e2c2b44-39a4-4369-b237-c51fd938e61d\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2019-10-01T00:00:00\\", \\"position\\": \\"Software Engineer II\\", \\"start_date\\": \\"2017-11-01T00:00:00\\", \\"description\\": \\"Greater Salt Lake City Area\\\\nWorked on the KSL Jobs Classifieds team as a full-stack developer. Following\\\\nthe scrum methodology, I added new features and maintained all things\\\\npowered by KSL Jobs.\\\\n• Built and deployed a \\\\\\"white label\\\\\\" version of KSL Jobs for the Silicon Slopes\\\\nbrand. (https://siliconslopes.ksl.com)\\\\n• Rewrote major sections of the current KSL Jobs site in React.js\\\\n• Automated querying data for reports and analytic purposes through Node and\\\\nPHP scripts\\\\n• Provided rich data tracking through Google Tag Manager, Google Analytics,\\\\nand BigQuery\\\\n• Migrated Solr search engine to ElasticSearch with a GraphQL API\\", \\"company_name\\": \\"Deseret Digital Media\\"}","{\\"id\\": \\"efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2019-08-01T00:00:00\\", \\"position\\": \\"Full Stack Developer\\", \\"start_date\\": \\"2017-01-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Appritech LLC to modernize their legacy software and add new\\\\nfeatures to automate their business processes.\\\\n• Building new call handler from the ground up using JavaScript ES6,\\\\nBootstrap, SASS for\\\\nfront-end, and PHP7/Laravel for back-end\\\\n• Implemented real-time call management system and built reporting API.\\\\nImproved call agent\\\\nproductivity by 70%\\\\n• Upgraded deprecated PHP legacy code to PHP 7\\\\n• Synchronized follow up calls with Twilio API functionality for SMS message\\\\nforwarding\\\\n• Installed and setup Apache server for an after hours call center\\", \\"company_name\\": \\"Appritech Software\\"}","{\\"id\\": \\"2db60c6c-c214-4d9b-9034-baba676203a8\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2017-09-01T00:00:00\\", \\"position\\": \\"Web Developer\\", \\"start_date\\": \\"2017-02-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Redcore LLC to build entrepreneurial tools, marketing tools, and\\\\nadding new functionality to the current Wordpress-integrated website and\\\\nCMS.\\\\n• Built Brand Management website from the ground up using Bootstrap and\\\\nJavaScript on the\\\\nfront end, with PHP and MySQL on the back-end\\\\n• Automated managerial and accounting tasks, such as invoice generation,\\\\nand transactions using Stripe API\\\\n• Debugged and perfected current web applications to enrich UX\\\\n• Doubled clientele by expanding Redcore services offered to include website\\\\ncreation and\\\\nmanagement\\", \\"company_name\\": \\"Redcore LLC\\"}","{\\"id\\": \\"c3f1d5b2-5586-477d-ae4c-e2927463244e\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2017-03-01T00:00:00\\", \\"position\\": \\"Software and Web Developer\\", \\"start_date\\": \\"2016-12-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nThis internship was focused on building core website and software for\\\\nCentaurific using the LAMP stack.\\\\n• Created dynamic landing pages for products to generate leads\\\\n• Designed a MySQL database to organize data and generate excel reports\\\\n• Revitalized marketing efforts through analytics and a social media sharing\\\\npage\\", \\"company_name\\": \\"Centaurific\\"}"}'
10);
11[
12 {
13 "id": "7cd74bae-ff5b-4f58-ab20-0218f820ffff",
14 "skills": [
15 {
16 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
17 "level1": "Programming languages",
18 "level2": "Scripting languages",
19 "level3": "TypeScript",
20 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
21 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
22 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
23 },
24 {
25 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273",
26 "level1": "Software frameworks & libraries",
27 "level2": "Frontend frameworks & libraries",
28 "level3": "React",
29 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
30 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
31 "level3_id": "686af7e4-6d58-4148-b227-3bf65ff10273"
32 },
33 {
34 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465",
35 "level1": "Software frameworks & libraries",
36 "level2": "Backend frameworks & libraries",
37 "level3": "Node.js",
38 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
39 "level2_id": "c4e54726-7bd5-44bb-8597-a05eb2272e2b",
40 "level3_id": "cda4441f-dba6-495c-9e2e-7429bd5e0465"
41 },
42 {
43 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
44 "level1": "Software frameworks & libraries",
45 "level2": "Frontend frameworks & libraries",
46 "level3": "TypeScript",
47 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
48 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
49 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
50 }
51 ],
52 "end_date": null,
53 "position": "Senior Software Engineer + Team Lead",
54 "start_date": "2019-10-01T00:00:00",
55 "description": "Draper, Utah, United Statesn• Architected Expert Portal* from the ground up using a Node/Typescriptnbackend, anPostgreSQL database, a GraphQL API layer, a Webpack build process, with anTypescript/React front-end and XState for state managementn• Enforced coding best practices with linting rules and code formatters bynautomating it inngit workflown• Automated deployment Expert Portal* to EC2 instances and the @pluralsightnNPMnartifactory using Github, TeamCity, and Octopusn• Improved product team workflow by building a browser extention to addnLeanKit cardntemplate functionalityn• Consumed and published data through Kafka streams and RabbitMQnmessagesn• Interviewed, onboarded, and trained junior to mid-level engineers",
56 "company_name": "Pluralsight"
57 },
58 {
59 "id": "9e2c2b44-39a4-4369-b237-c51fd938e61d",
60 "skills": [
61 {
62 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
63 "level1": "Programming languages",
64 "level2": "Scripting languages",
65 "level3": "JavaScript",
66 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
67 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
68 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
69 }
70 ],
71 "end_date": "2019-10-01T00:00:00",
72 "position": "Software Engineer II",
73 "start_date": "2017-11-01T00:00:00",
74 "description": "Greater Salt Lake City AreanWorked on the KSL Jobs Classifieds team as a full-stack developer. Followingnthe scrum methodology, I added new features and maintained all thingsnpowered by KSL Jobs.n• Built and deployed a "white label" version of KSL Jobs for the Silicon Slopesnbrand. (https://siliconslopes.ksl.com)n• Rewrote major sections of the current KSL Jobs site in React.jsn• Automated querying data for reports and analytic purposes through Node andnPHP scriptsn• Provided rich data tracking through Google Tag Manager, Google Analytics,nand BigQueryn• Migrated Solr search engine to ElasticSearch with a GraphQL API",
75 "company_name": "Deseret Digital Media"
76 },
77 {
78 "id": "efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef",
79 "skills": [
80 {
81 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
82 "level1": "Programming languages",
83 "level2": "High-level languages",
84 "level3": "PHP",
85 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
86 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
87 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
88 }
89 ],
90 "end_date": "2019-08-01T00:00:00",
91 "position": "Full Stack Developer",
92 "start_date": "2017-01-01T00:00:00",
93 "description": "Provo, Utah AreanWorked with Appritech LLC to modernize their legacy software and add newnfeatures to automate their business processes.n• Building new call handler from the ground up using JavaScript ES6,nBootstrap, SASS fornfront-end, and PHP7/Laravel for back-endn• Implemented real-time call management system and built reporting API.nImproved call agentnproductivity by 70%n• Upgraded deprecated PHP legacy code to PHP 7n• Synchronized follow up calls with Twilio API functionality for SMS messagenforwardingn• Installed and setup Apache server for an after hours call center",
94 "company_name": "Appritech Software"
95 },
96 {
97 "id": "2db60c6c-c214-4d9b-9034-baba676203a8",
98 "skills": [
99 {
100 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
101 "level1": "Programming languages",
102 "level2": "High-level languages",
103 "level3": "PHP",
104 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
105 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
106 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
107 }
108 ],
109 "end_date": "2017-09-01T00:00:00",
110 "position": "Web Developer",
111 "start_date": "2017-02-01T00:00:00",
112 "description": "Provo, Utah AreanWorked with Redcore LLC to build entrepreneurial tools, marketing tools, andnadding new functionality to the current Wordpress-integrated website andnCMS.n• Built Brand Management website from the ground up using Bootstrap andnJavaScript on thenfront end, with PHP and MySQL on the back-endn• Automated managerial and accounting tasks, such as invoice generation,nand transactions using Stripe APIn• Debugged and perfected current web applications to enrich UXn• Doubled clientele by expanding Redcore services offered to include websitencreation andnmanagement",
113 "company_name": "Redcore LLC"
114 },
115 {
116 "id": "c3f1d5b2-5586-477d-ae4c-e2927463244e",
117 "skills": [
118 {
119 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
120 "level1": "Programming languages",
121 "level2": "Scripting languages",
122 "level3": "JavaScript",
123 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
124 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
125 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
126 }
127 ],
128 "end_date": "2017-03-01T00:00:00",
129 "position": "Software and Web Developer",
130 "start_date": "2016-12-01T00:00:00",
131 "description": "Provo, Utah AreanThis internship was focused on building core website and software fornCentaurific using the LAMP stack.n• Created dynamic landing pages for products to generate leadsn• Designed a MySQL database to organize data and generate excel reportsn• Revitalized marketing efforts through analytics and a social media sharingnpage",
132 "company_name": "Centaurific"
133 }
134]
135SELECT workexp
136FROM foo,
137jsonb_array_elements(work_experience) workexp;
138And I get this error message:
1CREATE TABLE foo (
2 id uuid PRIMARY KEY,
3 work_experience jsonb[] NOT NULL
4);
5
6INSERT INTO foo (id, work_experience)
7VALUES (
8 'b4e942a0-49b4-4fa7-8f7a-5fbf0541d1c9',
9 E'{"{\\"id\\": \\"7cd74bae-ff5b-4f58-ab20-0218f820ffff\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"React\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"686af7e4-6d58-4148-b227-3bf65ff10273\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Backend frameworks & libraries\\", \\"level3\\": \\"Node.js\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"c4e54726-7bd5-44bb-8597-a05eb2272e2b\\", \\"level3_id\\": \\"cda4441f-dba6-495c-9e2e-7429bd5e0465\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}], \\"end_date\\": null, \\"position\\": \\"Senior Software Engineer + Team Lead\\", \\"start_date\\": \\"2019-10-01T00:00:00\\", \\"description\\": \\"Draper, Utah, United States\\\\n• Architected Expert Portal* from the ground up using a Node/Typescript\\\\nbackend, a\\\\nPostgreSQL database, a GraphQL API layer, a Webpack build process, with a\\\\nTypescript/React front-end and XState for state management\\\\n• Enforced coding best practices with linting rules and code formatters by\\\\nautomating it in\\\\ngit workflow\\\\n• Automated deployment Expert Portal* to EC2 instances and the @pluralsight\\\\nNPM\\\\nartifactory using Github, TeamCity, and Octopus\\\\n• Improved product team workflow by building a browser extention to add\\\\nLeanKit card\\\\ntemplate functionality\\\\n• Consumed and published data through Kafka streams and RabbitMQ\\\\nmessages\\\\n• Interviewed, onboarded, and trained junior to mid-level engineers\\", \\"company_name\\": \\"Pluralsight\\"}","{\\"id\\": \\"9e2c2b44-39a4-4369-b237-c51fd938e61d\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2019-10-01T00:00:00\\", \\"position\\": \\"Software Engineer II\\", \\"start_date\\": \\"2017-11-01T00:00:00\\", \\"description\\": \\"Greater Salt Lake City Area\\\\nWorked on the KSL Jobs Classifieds team as a full-stack developer. Following\\\\nthe scrum methodology, I added new features and maintained all things\\\\npowered by KSL Jobs.\\\\n• Built and deployed a \\\\\\"white label\\\\\\" version of KSL Jobs for the Silicon Slopes\\\\nbrand. (https://siliconslopes.ksl.com)\\\\n• Rewrote major sections of the current KSL Jobs site in React.js\\\\n• Automated querying data for reports and analytic purposes through Node and\\\\nPHP scripts\\\\n• Provided rich data tracking through Google Tag Manager, Google Analytics,\\\\nand BigQuery\\\\n• Migrated Solr search engine to ElasticSearch with a GraphQL API\\", \\"company_name\\": \\"Deseret Digital Media\\"}","{\\"id\\": \\"efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2019-08-01T00:00:00\\", \\"position\\": \\"Full Stack Developer\\", \\"start_date\\": \\"2017-01-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Appritech LLC to modernize their legacy software and add new\\\\nfeatures to automate their business processes.\\\\n• Building new call handler from the ground up using JavaScript ES6,\\\\nBootstrap, SASS for\\\\nfront-end, and PHP7/Laravel for back-end\\\\n• Implemented real-time call management system and built reporting API.\\\\nImproved call agent\\\\nproductivity by 70%\\\\n• Upgraded deprecated PHP legacy code to PHP 7\\\\n• Synchronized follow up calls with Twilio API functionality for SMS message\\\\nforwarding\\\\n• Installed and setup Apache server for an after hours call center\\", \\"company_name\\": \\"Appritech Software\\"}","{\\"id\\": \\"2db60c6c-c214-4d9b-9034-baba676203a8\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2017-09-01T00:00:00\\", \\"position\\": \\"Web Developer\\", \\"start_date\\": \\"2017-02-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Redcore LLC to build entrepreneurial tools, marketing tools, and\\\\nadding new functionality to the current Wordpress-integrated website and\\\\nCMS.\\\\n• Built Brand Management website from the ground up using Bootstrap and\\\\nJavaScript on the\\\\nfront end, with PHP and MySQL on the back-end\\\\n• Automated managerial and accounting tasks, such as invoice generation,\\\\nand transactions using Stripe API\\\\n• Debugged and perfected current web applications to enrich UX\\\\n• Doubled clientele by expanding Redcore services offered to include website\\\\ncreation and\\\\nmanagement\\", \\"company_name\\": \\"Redcore LLC\\"}","{\\"id\\": \\"c3f1d5b2-5586-477d-ae4c-e2927463244e\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2017-03-01T00:00:00\\", \\"position\\": \\"Software and Web Developer\\", \\"start_date\\": \\"2016-12-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nThis internship was focused on building core website and software for\\\\nCentaurific using the LAMP stack.\\\\n• Created dynamic landing pages for products to generate leads\\\\n• Designed a MySQL database to organize data and generate excel reports\\\\n• Revitalized marketing efforts through analytics and a social media sharing\\\\npage\\", \\"company_name\\": \\"Centaurific\\"}"}'
10);
11[
12 {
13 "id": "7cd74bae-ff5b-4f58-ab20-0218f820ffff",
14 "skills": [
15 {
16 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
17 "level1": "Programming languages",
18 "level2": "Scripting languages",
19 "level3": "TypeScript",
20 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
21 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
22 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
23 },
24 {
25 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273",
26 "level1": "Software frameworks & libraries",
27 "level2": "Frontend frameworks & libraries",
28 "level3": "React",
29 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
30 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
31 "level3_id": "686af7e4-6d58-4148-b227-3bf65ff10273"
32 },
33 {
34 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465",
35 "level1": "Software frameworks & libraries",
36 "level2": "Backend frameworks & libraries",
37 "level3": "Node.js",
38 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
39 "level2_id": "c4e54726-7bd5-44bb-8597-a05eb2272e2b",
40 "level3_id": "cda4441f-dba6-495c-9e2e-7429bd5e0465"
41 },
42 {
43 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
44 "level1": "Software frameworks & libraries",
45 "level2": "Frontend frameworks & libraries",
46 "level3": "TypeScript",
47 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
48 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
49 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
50 }
51 ],
52 "end_date": null,
53 "position": "Senior Software Engineer + Team Lead",
54 "start_date": "2019-10-01T00:00:00",
55 "description": "Draper, Utah, United Statesn• Architected Expert Portal* from the ground up using a Node/Typescriptnbackend, anPostgreSQL database, a GraphQL API layer, a Webpack build process, with anTypescript/React front-end and XState for state managementn• Enforced coding best practices with linting rules and code formatters bynautomating it inngit workflown• Automated deployment Expert Portal* to EC2 instances and the @pluralsightnNPMnartifactory using Github, TeamCity, and Octopusn• Improved product team workflow by building a browser extention to addnLeanKit cardntemplate functionalityn• Consumed and published data through Kafka streams and RabbitMQnmessagesn• Interviewed, onboarded, and trained junior to mid-level engineers",
56 "company_name": "Pluralsight"
57 },
58 {
59 "id": "9e2c2b44-39a4-4369-b237-c51fd938e61d",
60 "skills": [
61 {
62 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
63 "level1": "Programming languages",
64 "level2": "Scripting languages",
65 "level3": "JavaScript",
66 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
67 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
68 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
69 }
70 ],
71 "end_date": "2019-10-01T00:00:00",
72 "position": "Software Engineer II",
73 "start_date": "2017-11-01T00:00:00",
74 "description": "Greater Salt Lake City AreanWorked on the KSL Jobs Classifieds team as a full-stack developer. Followingnthe scrum methodology, I added new features and maintained all thingsnpowered by KSL Jobs.n• Built and deployed a "white label" version of KSL Jobs for the Silicon Slopesnbrand. (https://siliconslopes.ksl.com)n• Rewrote major sections of the current KSL Jobs site in React.jsn• Automated querying data for reports and analytic purposes through Node andnPHP scriptsn• Provided rich data tracking through Google Tag Manager, Google Analytics,nand BigQueryn• Migrated Solr search engine to ElasticSearch with a GraphQL API",
75 "company_name": "Deseret Digital Media"
76 },
77 {
78 "id": "efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef",
79 "skills": [
80 {
81 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
82 "level1": "Programming languages",
83 "level2": "High-level languages",
84 "level3": "PHP",
85 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
86 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
87 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
88 }
89 ],
90 "end_date": "2019-08-01T00:00:00",
91 "position": "Full Stack Developer",
92 "start_date": "2017-01-01T00:00:00",
93 "description": "Provo, Utah AreanWorked with Appritech LLC to modernize their legacy software and add newnfeatures to automate their business processes.n• Building new call handler from the ground up using JavaScript ES6,nBootstrap, SASS fornfront-end, and PHP7/Laravel for back-endn• Implemented real-time call management system and built reporting API.nImproved call agentnproductivity by 70%n• Upgraded deprecated PHP legacy code to PHP 7n• Synchronized follow up calls with Twilio API functionality for SMS messagenforwardingn• Installed and setup Apache server for an after hours call center",
94 "company_name": "Appritech Software"
95 },
96 {
97 "id": "2db60c6c-c214-4d9b-9034-baba676203a8",
98 "skills": [
99 {
100 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
101 "level1": "Programming languages",
102 "level2": "High-level languages",
103 "level3": "PHP",
104 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
105 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
106 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
107 }
108 ],
109 "end_date": "2017-09-01T00:00:00",
110 "position": "Web Developer",
111 "start_date": "2017-02-01T00:00:00",
112 "description": "Provo, Utah AreanWorked with Redcore LLC to build entrepreneurial tools, marketing tools, andnadding new functionality to the current Wordpress-integrated website andnCMS.n• Built Brand Management website from the ground up using Bootstrap andnJavaScript on thenfront end, with PHP and MySQL on the back-endn• Automated managerial and accounting tasks, such as invoice generation,nand transactions using Stripe APIn• Debugged and perfected current web applications to enrich UXn• Doubled clientele by expanding Redcore services offered to include websitencreation andnmanagement",
113 "company_name": "Redcore LLC"
114 },
115 {
116 "id": "c3f1d5b2-5586-477d-ae4c-e2927463244e",
117 "skills": [
118 {
119 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
120 "level1": "Programming languages",
121 "level2": "Scripting languages",
122 "level3": "JavaScript",
123 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
124 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
125 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
126 }
127 ],
128 "end_date": "2017-03-01T00:00:00",
129 "position": "Software and Web Developer",
130 "start_date": "2016-12-01T00:00:00",
131 "description": "Provo, Utah AreanThis internship was focused on building core website and software fornCentaurific using the LAMP stack.n• Created dynamic landing pages for products to generate leadsn• Designed a MySQL database to organize data and generate excel reportsn• Revitalized marketing efforts through analytics and a social media sharingnpage",
132 "company_name": "Centaurific"
133 }
134]
135SELECT workexp
136FROM foo,
137jsonb_array_elements(work_experience) workexp;
138ERROR: function jsonb_array_elements_text(jsonb[]) does not exist
139LINE 3: jsonb_array_elements(work_experience) workexp;
140 ^
141HINT: No function matches the given name and argument types. You might need to add explicit type casts.
142Everything I look up has documentation on traversing and querying jsonb rows, but not jsonb[] ones. How can I query for the "skills"."id"s?
EDIT -- SOLUTION:
All of the solutions given were helpful but I selected Ramin Faracov for suggesting to use unnest. Thank you!
This is the query that I came up with:
1CREATE TABLE foo (
2 id uuid PRIMARY KEY,
3 work_experience jsonb[] NOT NULL
4);
5
6INSERT INTO foo (id, work_experience)
7VALUES (
8 'b4e942a0-49b4-4fa7-8f7a-5fbf0541d1c9',
9 E'{"{\\"id\\": \\"7cd74bae-ff5b-4f58-ab20-0218f820ffff\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"React\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"686af7e4-6d58-4148-b227-3bf65ff10273\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Backend frameworks & libraries\\", \\"level3\\": \\"Node.js\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"c4e54726-7bd5-44bb-8597-a05eb2272e2b\\", \\"level3_id\\": \\"cda4441f-dba6-495c-9e2e-7429bd5e0465\\"}, {\\"id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\", \\"level1\\": \\"Software frameworks & libraries\\", \\"level2\\": \\"Frontend frameworks & libraries\\", \\"level3\\": \\"TypeScript\\", \\"level1_id\\": \\"84dff39f-2ed6-408c-a188-14cf55a09c5b\\", \\"level2_id\\": \\"e13b48c1-fd0f-4ecc-89de-58e9312b9435\\", \\"level3_id\\": \\"fd3c41b8-8c15-47e2-a80d-cf3683b2d0da\\"}], \\"end_date\\": null, \\"position\\": \\"Senior Software Engineer + Team Lead\\", \\"start_date\\": \\"2019-10-01T00:00:00\\", \\"description\\": \\"Draper, Utah, United States\\\\n• Architected Expert Portal* from the ground up using a Node/Typescript\\\\nbackend, a\\\\nPostgreSQL database, a GraphQL API layer, a Webpack build process, with a\\\\nTypescript/React front-end and XState for state management\\\\n• Enforced coding best practices with linting rules and code formatters by\\\\nautomating it in\\\\ngit workflow\\\\n• Automated deployment Expert Portal* to EC2 instances and the @pluralsight\\\\nNPM\\\\nartifactory using Github, TeamCity, and Octopus\\\\n• Improved product team workflow by building a browser extention to add\\\\nLeanKit card\\\\ntemplate functionality\\\\n• Consumed and published data through Kafka streams and RabbitMQ\\\\nmessages\\\\n• Interviewed, onboarded, and trained junior to mid-level engineers\\", \\"company_name\\": \\"Pluralsight\\"}","{\\"id\\": \\"9e2c2b44-39a4-4369-b237-c51fd938e61d\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2019-10-01T00:00:00\\", \\"position\\": \\"Software Engineer II\\", \\"start_date\\": \\"2017-11-01T00:00:00\\", \\"description\\": \\"Greater Salt Lake City Area\\\\nWorked on the KSL Jobs Classifieds team as a full-stack developer. Following\\\\nthe scrum methodology, I added new features and maintained all things\\\\npowered by KSL Jobs.\\\\n• Built and deployed a \\\\\\"white label\\\\\\" version of KSL Jobs for the Silicon Slopes\\\\nbrand. (https://siliconslopes.ksl.com)\\\\n• Rewrote major sections of the current KSL Jobs site in React.js\\\\n• Automated querying data for reports and analytic purposes through Node and\\\\nPHP scripts\\\\n• Provided rich data tracking through Google Tag Manager, Google Analytics,\\\\nand BigQuery\\\\n• Migrated Solr search engine to ElasticSearch with a GraphQL API\\", \\"company_name\\": \\"Deseret Digital Media\\"}","{\\"id\\": \\"efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2019-08-01T00:00:00\\", \\"position\\": \\"Full Stack Developer\\", \\"start_date\\": \\"2017-01-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Appritech LLC to modernize their legacy software and add new\\\\nfeatures to automate their business processes.\\\\n• Building new call handler from the ground up using JavaScript ES6,\\\\nBootstrap, SASS for\\\\nfront-end, and PHP7/Laravel for back-end\\\\n• Implemented real-time call management system and built reporting API.\\\\nImproved call agent\\\\nproductivity by 70%\\\\n• Upgraded deprecated PHP legacy code to PHP 7\\\\n• Synchronized follow up calls with Twilio API functionality for SMS message\\\\nforwarding\\\\n• Installed and setup Apache server for an after hours call center\\", \\"company_name\\": \\"Appritech Software\\"}","{\\"id\\": \\"2db60c6c-c214-4d9b-9034-baba676203a8\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"High-level languages\\", \\"level3\\": \\"PHP\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"f45abc59-1e7e-4853-a498-999fcf12d498\\", \\"level3_id\\": \\"4b266297-6e25-4443-90ec-248bded4225a\\"}], \\"end_date\\": \\"2017-09-01T00:00:00\\", \\"position\\": \\"Web Developer\\", \\"start_date\\": \\"2017-02-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nWorked with Redcore LLC to build entrepreneurial tools, marketing tools, and\\\\nadding new functionality to the current Wordpress-integrated website and\\\\nCMS.\\\\n• Built Brand Management website from the ground up using Bootstrap and\\\\nJavaScript on the\\\\nfront end, with PHP and MySQL on the back-end\\\\n• Automated managerial and accounting tasks, such as invoice generation,\\\\nand transactions using Stripe API\\\\n• Debugged and perfected current web applications to enrich UX\\\\n• Doubled clientele by expanding Redcore services offered to include website\\\\ncreation and\\\\nmanagement\\", \\"company_name\\": \\"Redcore LLC\\"}","{\\"id\\": \\"c3f1d5b2-5586-477d-ae4c-e2927463244e\\", \\"skills\\": [{\\"id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024\\", \\"level1\\": \\"Programming languages\\", \\"level2\\": \\"Scripting languages\\", \\"level3\\": \\"JavaScript\\", \\"level1_id\\": \\"c8a5328d-87ba-419d-802f-80b1d940bb68\\", \\"level2_id\\": \\"313384d2-486d-4b7f-ba33-76b1cd696f0a\\", \\"level3_id\\": \\"012abcd1-3a6a-4803-a47e-42f46b402024\\"}], \\"end_date\\": \\"2017-03-01T00:00:00\\", \\"position\\": \\"Software and Web Developer\\", \\"start_date\\": \\"2016-12-01T00:00:00\\", \\"description\\": \\"Provo, Utah Area\\\\nThis internship was focused on building core website and software for\\\\nCentaurific using the LAMP stack.\\\\n• Created dynamic landing pages for products to generate leads\\\\n• Designed a MySQL database to organize data and generate excel reports\\\\n• Revitalized marketing efforts through analytics and a social media sharing\\\\npage\\", \\"company_name\\": \\"Centaurific\\"}"}'
10);
11[
12 {
13 "id": "7cd74bae-ff5b-4f58-ab20-0218f820ffff",
14 "skills": [
15 {
16 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
17 "level1": "Programming languages",
18 "level2": "Scripting languages",
19 "level3": "TypeScript",
20 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
21 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
22 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
23 },
24 {
25 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|686af7e4-6d58-4148-b227-3bf65ff10273",
26 "level1": "Software frameworks & libraries",
27 "level2": "Frontend frameworks & libraries",
28 "level3": "React",
29 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
30 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
31 "level3_id": "686af7e4-6d58-4148-b227-3bf65ff10273"
32 },
33 {
34 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|c4e54726-7bd5-44bb-8597-a05eb2272e2b|cda4441f-dba6-495c-9e2e-7429bd5e0465",
35 "level1": "Software frameworks & libraries",
36 "level2": "Backend frameworks & libraries",
37 "level3": "Node.js",
38 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
39 "level2_id": "c4e54726-7bd5-44bb-8597-a05eb2272e2b",
40 "level3_id": "cda4441f-dba6-495c-9e2e-7429bd5e0465"
41 },
42 {
43 "id": "84dff39f-2ed6-408c-a188-14cf55a09c5b|e13b48c1-fd0f-4ecc-89de-58e9312b9435|fd3c41b8-8c15-47e2-a80d-cf3683b2d0da",
44 "level1": "Software frameworks & libraries",
45 "level2": "Frontend frameworks & libraries",
46 "level3": "TypeScript",
47 "level1_id": "84dff39f-2ed6-408c-a188-14cf55a09c5b",
48 "level2_id": "e13b48c1-fd0f-4ecc-89de-58e9312b9435",
49 "level3_id": "fd3c41b8-8c15-47e2-a80d-cf3683b2d0da"
50 }
51 ],
52 "end_date": null,
53 "position": "Senior Software Engineer + Team Lead",
54 "start_date": "2019-10-01T00:00:00",
55 "description": "Draper, Utah, United Statesn• Architected Expert Portal* from the ground up using a Node/Typescriptnbackend, anPostgreSQL database, a GraphQL API layer, a Webpack build process, with anTypescript/React front-end and XState for state managementn• Enforced coding best practices with linting rules and code formatters bynautomating it inngit workflown• Automated deployment Expert Portal* to EC2 instances and the @pluralsightnNPMnartifactory using Github, TeamCity, and Octopusn• Improved product team workflow by building a browser extention to addnLeanKit cardntemplate functionalityn• Consumed and published data through Kafka streams and RabbitMQnmessagesn• Interviewed, onboarded, and trained junior to mid-level engineers",
56 "company_name": "Pluralsight"
57 },
58 {
59 "id": "9e2c2b44-39a4-4369-b237-c51fd938e61d",
60 "skills": [
61 {
62 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
63 "level1": "Programming languages",
64 "level2": "Scripting languages",
65 "level3": "JavaScript",
66 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
67 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
68 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
69 }
70 ],
71 "end_date": "2019-10-01T00:00:00",
72 "position": "Software Engineer II",
73 "start_date": "2017-11-01T00:00:00",
74 "description": "Greater Salt Lake City AreanWorked on the KSL Jobs Classifieds team as a full-stack developer. Followingnthe scrum methodology, I added new features and maintained all thingsnpowered by KSL Jobs.n• Built and deployed a "white label" version of KSL Jobs for the Silicon Slopesnbrand. (https://siliconslopes.ksl.com)n• Rewrote major sections of the current KSL Jobs site in React.jsn• Automated querying data for reports and analytic purposes through Node andnPHP scriptsn• Provided rich data tracking through Google Tag Manager, Google Analytics,nand BigQueryn• Migrated Solr search engine to ElasticSearch with a GraphQL API",
75 "company_name": "Deseret Digital Media"
76 },
77 {
78 "id": "efbf68f4-7bdc-4ab6-bba9-fbf7ec38aeef",
79 "skills": [
80 {
81 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
82 "level1": "Programming languages",
83 "level2": "High-level languages",
84 "level3": "PHP",
85 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
86 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
87 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
88 }
89 ],
90 "end_date": "2019-08-01T00:00:00",
91 "position": "Full Stack Developer",
92 "start_date": "2017-01-01T00:00:00",
93 "description": "Provo, Utah AreanWorked with Appritech LLC to modernize their legacy software and add newnfeatures to automate their business processes.n• Building new call handler from the ground up using JavaScript ES6,nBootstrap, SASS fornfront-end, and PHP7/Laravel for back-endn• Implemented real-time call management system and built reporting API.nImproved call agentnproductivity by 70%n• Upgraded deprecated PHP legacy code to PHP 7n• Synchronized follow up calls with Twilio API functionality for SMS messagenforwardingn• Installed and setup Apache server for an after hours call center",
94 "company_name": "Appritech Software"
95 },
96 {
97 "id": "2db60c6c-c214-4d9b-9034-baba676203a8",
98 "skills": [
99 {
100 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|f45abc59-1e7e-4853-a498-999fcf12d498|4b266297-6e25-4443-90ec-248bded4225a",
101 "level1": "Programming languages",
102 "level2": "High-level languages",
103 "level3": "PHP",
104 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
105 "level2_id": "f45abc59-1e7e-4853-a498-999fcf12d498",
106 "level3_id": "4b266297-6e25-4443-90ec-248bded4225a"
107 }
108 ],
109 "end_date": "2017-09-01T00:00:00",
110 "position": "Web Developer",
111 "start_date": "2017-02-01T00:00:00",
112 "description": "Provo, Utah AreanWorked with Redcore LLC to build entrepreneurial tools, marketing tools, andnadding new functionality to the current Wordpress-integrated website andnCMS.n• Built Brand Management website from the ground up using Bootstrap andnJavaScript on thenfront end, with PHP and MySQL on the back-endn• Automated managerial and accounting tasks, such as invoice generation,nand transactions using Stripe APIn• Debugged and perfected current web applications to enrich UXn• Doubled clientele by expanding Redcore services offered to include websitencreation andnmanagement",
113 "company_name": "Redcore LLC"
114 },
115 {
116 "id": "c3f1d5b2-5586-477d-ae4c-e2927463244e",
117 "skills": [
118 {
119 "id": "c8a5328d-87ba-419d-802f-80b1d940bb68|313384d2-486d-4b7f-ba33-76b1cd696f0a|012abcd1-3a6a-4803-a47e-42f46b402024",
120 "level1": "Programming languages",
121 "level2": "Scripting languages",
122 "level3": "JavaScript",
123 "level1_id": "c8a5328d-87ba-419d-802f-80b1d940bb68",
124 "level2_id": "313384d2-486d-4b7f-ba33-76b1cd696f0a",
125 "level3_id": "012abcd1-3a6a-4803-a47e-42f46b402024"
126 }
127 ],
128 "end_date": "2017-03-01T00:00:00",
129 "position": "Software and Web Developer",
130 "start_date": "2016-12-01T00:00:00",
131 "description": "Provo, Utah AreanThis internship was focused on building core website and software fornCentaurific using the LAMP stack.n• Created dynamic landing pages for products to generate leadsn• Designed a MySQL database to organize data and generate excel reportsn• Revitalized marketing efforts through analytics and a social media sharingnpage",
132 "company_name": "Centaurific"
133 }
134]
135SELECT workexp
136FROM foo,
137jsonb_array_elements(work_experience) workexp;
138ERROR: function jsonb_array_elements_text(jsonb[]) does not exist
139LINE 3: jsonb_array_elements(work_experience) workexp;
140 ^
141HINT: No function matches the given name and argument types. You might need to add explicit type casts.
142SELECT
143 id expert_id,
144 we_sk->>'id' work_exp_skill_id
145FROM (
146 SELECT
147 id,
148 unnest(work_experience)->'skills' we
149 FROM foo_json
150) sk,
151jsonb_array_elements(sk.we) we_sk;
152ANSWER
Answered 2022-Apr-09 at 06:24In PostgreSQL all jsonb array functions only for using JSONB types, not JSONB[].
First-way you can use
unnestfunction to convert arrays to rows, after then you can usejsonb_array_elements.Second-way change type
JSONB[]toJSONin your table. Don't worry, you can still insert your JSON string data which is written above intoJSONBfield without any problems. Inside theJSONandJSONBstrings, we can use arrays using formatted strings.Jsonb array functionsonly for arrays written inside JSON string.
QUESTION
Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?
Asked 2022-Mar-11 at 15:51I was trying to crop videos with cropper.js, but from what I understand that it is impossible and only works for photos. I've looked everywhere for resources to do such, but I couldn't find anything. If you don't know what I am talking about I would like something like this https://codesandbox.io/s/react-easy-crop-for-videos-lfhme but uses JavaScript instead of React. The reason I don't want to switch to a frontend framework is because I am using Django for my backend, and am not comfortable with switching to APIs, and using React or Vue, since I am really far into my project. I also want to avoid using a hybrid architecture if possible. If anyone knows of any libraries or repositories I can check out that might help me that would be much appreciated.
Just in case I can use videos in cropper.js here is my source code.
1 // file-box is the id of the div element that will store our cropping file preview
2 const filebox = document.getElementById('file-box')
3 // crop-btn is the id of button that will trigger the event of change original file with cropped file.
4 const crop_btn = document.getElementById('crop-btn')
5 // id_file is the id of the input tag where we will upload the file
6 const input = document.getElementById('id_file')
7
8 // When user uploads the file this event will get triggered
9 input.addEventListener('change', ()=>{
10 // Getting file file object from the input variable
11 const img_data = input.files[0]
12 // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
13 // The new object URL represents the specified File object or Blob object.
14 const url = URL.createObjectURL(img_data)
15
16 // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
17 filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
18 // Storing that cropping view file in a variable
19 const file = document.getElementById('file')
20
21 // Displaying the file box
22 document.getElementById('file-box').style.display = 'block'
23 // Displaying the Crop buttton
24 document.getElementById('crop-btn').style.display = 'block'
25 // Hiding the Post button
26 document.getElementById('confirm-btn').style.display = 'none'
27
28 // Creating a croper object with the cropping view file
29 // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
30 // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
31 const cropper = new Cropper(file, {
32 autoCropArea: 1,
33 aspectRatio: 1/1,
34 viewMode: 1,
35 scalable: false,
36 zoomable: false,
37 movable: false,
38 minCropBoxWidth: 200,
39 minCropBoxHeight: 200,
40 })
41
42 // When crop button is clicked this event will get triggered
43 crop_btn.addEventListener('click', ()=>{
44 // This method coverts the selected cropped file on the cropper canvas into a blob object
45 cropper.getCroppedCanvas().toBlob((blob)=>{
46
47 // Gets the original file data
48 let fileInputElement = document.getElementById('id_file');
49 // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
50 let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
51 // Create a new container
52 let container = new DataTransfer();
53 // Add the cropped file file to the container
54 container.items.add(file);
55 // Replace the original file file with the new cropped file file
56 fileInputElement.files = container.files;
57
58 // Hide the cropper box
59 document.getElementById('file-box').style.display = 'none'
60 // Hide the crop button
61 document.getElementById('crop-btn').style.display = 'none'
62 // Display the Post button
63 document.getElementById('confirm-btn').style.display = 'block'
64
65 });
66 });
67 });
68ANSWER
Answered 2022-Mar-05 at 20:48You didn't explain your use case in much detail, but if you just want to crop videos with a few known aspect ratio options, you can do this pretty easily do this with vanilla HTML, CSS, and JavaScript.
HTML:
1 // file-box is the id of the div element that will store our cropping file preview
2 const filebox = document.getElementById('file-box')
3 // crop-btn is the id of button that will trigger the event of change original file with cropped file.
4 const crop_btn = document.getElementById('crop-btn')
5 // id_file is the id of the input tag where we will upload the file
6 const input = document.getElementById('id_file')
7
8 // When user uploads the file this event will get triggered
9 input.addEventListener('change', ()=>{
10 // Getting file file object from the input variable
11 const img_data = input.files[0]
12 // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
13 // The new object URL represents the specified File object or Blob object.
14 const url = URL.createObjectURL(img_data)
15
16 // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
17 filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
18 // Storing that cropping view file in a variable
19 const file = document.getElementById('file')
20
21 // Displaying the file box
22 document.getElementById('file-box').style.display = 'block'
23 // Displaying the Crop buttton
24 document.getElementById('crop-btn').style.display = 'block'
25 // Hiding the Post button
26 document.getElementById('confirm-btn').style.display = 'none'
27
28 // Creating a croper object with the cropping view file
29 // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
30 // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
31 const cropper = new Cropper(file, {
32 autoCropArea: 1,
33 aspectRatio: 1/1,
34 viewMode: 1,
35 scalable: false,
36 zoomable: false,
37 movable: false,
38 minCropBoxWidth: 200,
39 minCropBoxHeight: 200,
40 })
41
42 // When crop button is clicked this event will get triggered
43 crop_btn.addEventListener('click', ()=>{
44 // This method coverts the selected cropped file on the cropper canvas into a blob object
45 cropper.getCroppedCanvas().toBlob((blob)=>{
46
47 // Gets the original file data
48 let fileInputElement = document.getElementById('id_file');
49 // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
50 let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
51 // Create a new container
52 let container = new DataTransfer();
53 // Add the cropped file file to the container
54 container.items.add(file);
55 // Replace the original file file with the new cropped file file
56 fileInputElement.files = container.files;
57
58 // Hide the cropper box
59 document.getElementById('file-box').style.display = 'none'
60 // Hide the crop button
61 document.getElementById('crop-btn').style.display = 'none'
62 // Display the Post button
63 document.getElementById('confirm-btn').style.display = 'block'
64
65 });
66 });
67 });
68<div class="crop-container aspect-ratio-16x9">
69 <video id="the-video" autoplay>
70 <source src="https://vid.ly/5u4h3e?content=video" type="video/mp4">
71 </video>
72</div>
73CSS:
1 // file-box is the id of the div element that will store our cropping file preview
2 const filebox = document.getElementById('file-box')
3 // crop-btn is the id of button that will trigger the event of change original file with cropped file.
4 const crop_btn = document.getElementById('crop-btn')
5 // id_file is the id of the input tag where we will upload the file
6 const input = document.getElementById('id_file')
7
8 // When user uploads the file this event will get triggered
9 input.addEventListener('change', ()=>{
10 // Getting file file object from the input variable
11 const img_data = input.files[0]
12 // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
13 // The new object URL represents the specified File object or Blob object.
14 const url = URL.createObjectURL(img_data)
15
16 // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
17 filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
18 // Storing that cropping view file in a variable
19 const file = document.getElementById('file')
20
21 // Displaying the file box
22 document.getElementById('file-box').style.display = 'block'
23 // Displaying the Crop buttton
24 document.getElementById('crop-btn').style.display = 'block'
25 // Hiding the Post button
26 document.getElementById('confirm-btn').style.display = 'none'
27
28 // Creating a croper object with the cropping view file
29 // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
30 // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
31 const cropper = new Cropper(file, {
32 autoCropArea: 1,
33 aspectRatio: 1/1,
34 viewMode: 1,
35 scalable: false,
36 zoomable: false,
37 movable: false,
38 minCropBoxWidth: 200,
39 minCropBoxHeight: 200,
40 })
41
42 // When crop button is clicked this event will get triggered
43 crop_btn.addEventListener('click', ()=>{
44 // This method coverts the selected cropped file on the cropper canvas into a blob object
45 cropper.getCroppedCanvas().toBlob((blob)=>{
46
47 // Gets the original file data
48 let fileInputElement = document.getElementById('id_file');
49 // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
50 let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
51 // Create a new container
52 let container = new DataTransfer();
53 // Add the cropped file file to the container
54 container.items.add(file);
55 // Replace the original file file with the new cropped file file
56 fileInputElement.files = container.files;
57
58 // Hide the cropper box
59 document.getElementById('file-box').style.display = 'none'
60 // Hide the crop button
61 document.getElementById('crop-btn').style.display = 'none'
62 // Display the Post button
63 document.getElementById('confirm-btn').style.display = 'block'
64
65 });
66 });
67 });
68<div class="crop-container aspect-ratio-16x9">
69 <video id="the-video" autoplay>
70 <source src="https://vid.ly/5u4h3e?content=video" type="video/mp4">
71 </video>
72</div>
73.crop-container {
74 overflow:hidden;
75 display:flex;
76 align-items: center;
77 justify-content: center;
78 height: 0;
79 position: relative;
80}
81
82.crop-container video {
83 position: absolute;
84 top: 50%;
85 left: 50%;
86 transform: translate(-50%, -50%);
87 height: 100%;
88}
89
90.aspect-ratio-16x9 {
91 padding-top: calc(9 / 16 * 100%);
92}
93
94.aspect-ratio-4x3 {
95 padding-top: calc(3 / 4 * 100%);
96}
97The aspect ratio is always the height divided by the width * 100%.
And then you can apply the the classes however you want, for example:
1 // file-box is the id of the div element that will store our cropping file preview
2 const filebox = document.getElementById('file-box')
3 // crop-btn is the id of button that will trigger the event of change original file with cropped file.
4 const crop_btn = document.getElementById('crop-btn')
5 // id_file is the id of the input tag where we will upload the file
6 const input = document.getElementById('id_file')
7
8 // When user uploads the file this event will get triggered
9 input.addEventListener('change', ()=>{
10 // Getting file file object from the input variable
11 const img_data = input.files[0]
12 // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
13 // The new object URL represents the specified File object or Blob object.
14 const url = URL.createObjectURL(img_data)
15
16 // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
17 filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
18 // Storing that cropping view file in a variable
19 const file = document.getElementById('file')
20
21 // Displaying the file box
22 document.getElementById('file-box').style.display = 'block'
23 // Displaying the Crop buttton
24 document.getElementById('crop-btn').style.display = 'block'
25 // Hiding the Post button
26 document.getElementById('confirm-btn').style.display = 'none'
27
28 // Creating a croper object with the cropping view file
29 // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
30 // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
31 const cropper = new Cropper(file, {
32 autoCropArea: 1,
33 aspectRatio: 1/1,
34 viewMode: 1,
35 scalable: false,
36 zoomable: false,
37 movable: false,
38 minCropBoxWidth: 200,
39 minCropBoxHeight: 200,
40 })
41
42 // When crop button is clicked this event will get triggered
43 crop_btn.addEventListener('click', ()=>{
44 // This method coverts the selected cropped file on the cropper canvas into a blob object
45 cropper.getCroppedCanvas().toBlob((blob)=>{
46
47 // Gets the original file data
48 let fileInputElement = document.getElementById('id_file');
49 // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
50 let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
51 // Create a new container
52 let container = new DataTransfer();
53 // Add the cropped file file to the container
54 container.items.add(file);
55 // Replace the original file file with the new cropped file file
56 fileInputElement.files = container.files;
57
58 // Hide the cropper box
59 document.getElementById('file-box').style.display = 'none'
60 // Hide the crop button
61 document.getElementById('crop-btn').style.display = 'none'
62 // Display the Post button
63 document.getElementById('confirm-btn').style.display = 'block'
64
65 });
66 });
67 });
68<div class="crop-container aspect-ratio-16x9">
69 <video id="the-video" autoplay>
70 <source src="https://vid.ly/5u4h3e?content=video" type="video/mp4">
71 </video>
72</div>
73.crop-container {
74 overflow:hidden;
75 display:flex;
76 align-items: center;
77 justify-content: center;
78 height: 0;
79 position: relative;
80}
81
82.crop-container video {
83 position: absolute;
84 top: 50%;
85 left: 50%;
86 transform: translate(-50%, -50%);
87 height: 100%;
88}
89
90.aspect-ratio-16x9 {
91 padding-top: calc(9 / 16 * 100%);
92}
93
94.aspect-ratio-4x3 {
95 padding-top: calc(3 / 4 * 100%);
96}
97function switchAspectRatio(ratio) {
98 const el = document.querySelector('.crop-container');
99
100 // Remove any previous aspect ratios
101 for (let i = el.classList.length - 1; i >= 0; i--) {
102 const className = el.classList[i];
103 if (className.startsWith('aspect-ratio-')) {
104 el.classList.remove(className);
105 }
106 }
107
108 // Add the new one
109 el.classList.add(`aspect-ratio-${ratio}`);
110}
111Here's an example fiddle.
QUESTION
How to connect Django Rest API to a html CSS JS frontend
Asked 2022-Feb-12 at 08:36I am new to programming and one thing I am very confused about, my boss has told me to create a rest API about an app which I have completed all the signups, login, and other parts. But now I have to create a frontend but all the tutorials on the internet are about create rest API of Django to react or some other frontend framework, is their any tutorial on YouTube about connecting to a html CSS JavaScript on frontend to Rest API. thanks.
ANSWER
Answered 2022-Feb-12 at 08:36If you don't want a frontend just follow the official django tutorial to learn how to serve html/css/js from django.
From there you can either pass the data you need from your api down through the django context, or you can use fetch or something similar to grab it from javascript.
The latter would look like this.
1# views.py
2def index(request):
3 return render(request, 'index.html')
4
5def apiview(request):
6 return JsonResponse({'title', 'served from api'})
7
81# views.py
2def index(request):
3 return render(request, 'index.html')
4
5def apiview(request):
6 return JsonResponse({'title', 'served from api'})
7
8index.html
9<div class="title" token={{csrf_token}}></div>
10<script>
11function getTitle() {
12 const div = document.querySelector('title')
13 const csrf_token = div.getAttribute('token')
14 fetch('localhost:8000/apiview', {
15 method: 'get',
16 headers: {'X-CSRFToken': token}
17 })
18 .then(data => data.json())
19 .then(data => div.innerHTML = data.title)
20}
21</script>
22QUESTION
Override CORS policy in java springboot
Asked 2022-Jan-30 at 09:32I am trying to have my frontend server pull an http request from my backend server, but am getting the following error in my browser console:
1Access to XMLHttpRequest at 'http://localhost:8080/run' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2I know this is a security protocol, but is there an easy way to override this issue and allow for port 8080 (my backend) to return calls from port (3000)?
edit: I am using java springboot as my backend framework and React as my frontend framework
edit 2: I installed and used the Moesif Origin & CORS Changer extension and it works, I just would like to know if there is a more permanent workaround.
ANSWER
Answered 2021-Nov-05 at 22:27A quick approach is to add @CrossOrigin (import is org.springframework.web.bind.annotation.CrossOrigin) to your Rest Controller(s).
QUESTION
How do I move an image background inside of a container, without moving the container itself?
Asked 2022-Jan-30 at 01:32I have a container being used to hold a registration form. I tried adding position: relative then using top: combined with a negative integer to move the image, but what happens instead is that the entire container is being moved, rather than the background image. I am using bootstrap as a frontend framework.
1.mt {
2 margin-top: 25px;
3 margin-bottom: 25px;
4}
5
6.reg-bg {
7 background-image: url("../img/reg-bg.png");
8 background-repeat: no-repeat;
9 border-radius: 15px;
10}
11
12.reg-btn {
13 background-color: #003049;
14 color: #FCBF49;
15 width: 150px;
16 height: 50px;
17 font-size: 20px;
18}
19
20.reg-btn:hover {
21 background-color: #FCBF49;
22 color: #003049;
23}1.mt {
2 margin-top: 25px;
3 margin-bottom: 25px;
4}
5
6.reg-bg {
7 background-image: url("../img/reg-bg.png");
8 background-repeat: no-repeat;
9 border-radius: 15px;
10}
11
12.reg-btn {
13 background-color: #003049;
14 color: #FCBF49;
15 width: 150px;
16 height: 50px;
17 font-size: 20px;
18}
19
20.reg-btn:hover {
21 background-color: #FCBF49;
22 color: #003049;
23}<!-- Bootstrap-5 -->
24<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
25
26
27<!-- Body -->
28<div class=" mask d-flex align-items-center mt">
29 <div class=" container ">
30 <div class="row d-flex justify-content-center align-items-center">
31 <div class=" col-12 col-md-9 col-lg-7 col-xl-6">
32 <div class="reg-bg card">
33 <div class=" card-body p-5">
34 <h2 class="text-uppercase text-center mb-5">Create an account</h2>
35 <form>
36 <div class="form-outline mb-4">
37 <input type="text" class="form-bg form-control form-control-lg" />
38 <label class="form-label">Your Name</label>
39 </div>
40
41 <div class=" form-outline mb-4">
42 <input type="email" class="form-bg form-control form-control-lg" />
43 <label class="form-label">Your Email</label>
44 </div>
45
46 <div class="form-outline mb-4">
47 <input type="password" class="form-bg form-control form-control-lg" />
48 <label class="form-label">Password</label>
49 </div>
50
51 <div class="form-outline mb-4">
52 <input type="password" class="form-bg form-control form-control-lg" />
53 <label class="form-label">Repeat your password</label>
54 </div>
55
56 <div class="d-flex justify-content-center">
57 <button type="button" class="btn reg-btn">Register</button>
58 </div>
59 <p class="reg-ft text-center mt-5 mb-0">Already have an account with us? <a href="login.php" class="reg-ft-bld">Login here</a></p>
60 <p class="reg-ft text-center">Validation email timed out? <a href="revalidation.php" class="reg-ft-bld">Click here</a></p>
61 </form>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67</div>jsfiddle: https://jsfiddle.net/p4udb7c3/5/
ANSWER
Answered 2022-Jan-30 at 01:32The first point is to try not to use negative position value in your CSS code as much as possible. It's kind of dirty code and may cause some issues in styling later!
Why don't you use background-position to set the position of the image background?
as an example:
1.mt {
2 margin-top: 25px;
3 margin-bottom: 25px;
4}
5
6.reg-bg {
7 background-image: url("../img/reg-bg.png");
8 background-repeat: no-repeat;
9 border-radius: 15px;
10}
11
12.reg-btn {
13 background-color: #003049;
14 color: #FCBF49;
15 width: 150px;
16 height: 50px;
17 font-size: 20px;
18}
19
20.reg-btn:hover {
21 background-color: #FCBF49;
22 color: #003049;
23}<!-- Bootstrap-5 -->
24<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
25
26
27<!-- Body -->
28<div class=" mask d-flex align-items-center mt">
29 <div class=" container ">
30 <div class="row d-flex justify-content-center align-items-center">
31 <div class=" col-12 col-md-9 col-lg-7 col-xl-6">
32 <div class="reg-bg card">
33 <div class=" card-body p-5">
34 <h2 class="text-uppercase text-center mb-5">Create an account</h2>
35 <form>
36 <div class="form-outline mb-4">
37 <input type="text" class="form-bg form-control form-control-lg" />
38 <label class="form-label">Your Name</label>
39 </div>
40
41 <div class=" form-outline mb-4">
42 <input type="email" class="form-bg form-control form-control-lg" />
43 <label class="form-label">Your Email</label>
44 </div>
45
46 <div class="form-outline mb-4">
47 <input type="password" class="form-bg form-control form-control-lg" />
48 <label class="form-label">Password</label>
49 </div>
50
51 <div class="form-outline mb-4">
52 <input type="password" class="form-bg form-control form-control-lg" />
53 <label class="form-label">Repeat your password</label>
54 </div>
55
56 <div class="d-flex justify-content-center">
57 <button type="button" class="btn reg-btn">Register</button>
58 </div>
59 <p class="reg-ft text-center mt-5 mb-0">Already have an account with us? <a href="login.php" class="reg-ft-bld">Login here</a></p>
60 <p class="reg-ft text-center">Validation email timed out? <a href="revalidation.php" class="reg-ft-bld">Click here</a></p>
61 </form>
62 </div>
63 </div>
64 </div>
65 </div>
66 </div>
67</div>.reg-bg {
68 background-position: top center;
69}
70You can find more information here.
QUESTION
How to host a React app in Nodejs without using Express?
Asked 2021-Dec-19 at 20:00I know the standard way is to use Express, but i was wondering how i could achieve this without having to use it. I already know how to serve html files using http/https in a common website (without a frontend framework) through nodejs, but when i tried to do the same with index.html from React app, it wouldn't work. I think it's important to mention that i am using react-router. I searched a lot about this but every tutorial would use Express, so i couldn't find help in google.
Here's how i would do with plain html:
1const server = http.createServer( async (req, res) => {
2
3res.statusCode = 200;
4res.setHeader('Content-Type', 'text/html');
5
6const requestUrl = url.parse(req.url);
7let completePath = requestUrl.pathname;
8let path = completePath.split('/').slice(1)[0];
9
10let fileContent;
11
12if(path == "")
13 path = "index.html";
14
15try{
16 fileContent = fs.readFileSync(path);
17 res.end(fileContent, 'utf-8');
18}
19catch(err){
20 console.log("File not found: " + path);
21 if(path != "favicon.ico"){
22 res.statusCode = 404;
23 fileContent = fs.readFileSync("404.html");
24 res.end(fileContent);
25 }
26}
27
28
29});
30Thanks!
ANSWER
Answered 2021-Dec-19 at 20:00Ok, i eventually got it:
1const server = http.createServer( async (req, res) => {
2
3res.statusCode = 200;
4res.setHeader('Content-Type', 'text/html');
5
6const requestUrl = url.parse(req.url);
7let completePath = requestUrl.pathname;
8let path = completePath.split('/').slice(1)[0];
9
10let fileContent;
11
12if(path == "")
13 path = "index.html";
14
15try{
16 fileContent = fs.readFileSync(path);
17 res.end(fileContent, 'utf-8');
18}
19catch(err){
20 console.log("File not found: " + path);
21 if(path != "favicon.ico"){
22 res.statusCode = 404;
23 fileContent = fs.readFileSync("404.html");
24 res.end(fileContent);
25 }
26}
27
28
29});
30const fs = require('fs');
31const https = require('http');
32
33const hostname = 'localhost';
34const port = 3000;
35
36
37const server = https.createServer( async (req, res) => {
38
39 res.statusCode = 200;
40 let root = "./build";
41
42 let path = root + req.url;
43
44 let fileContent;
45
46 if(path == root + "/")
47 path = path + "index.html";
48
49 try{
50 fileContent = fs.readFileSync(path);
51 res.end(fileContent, 'utf-8');
52 }
53 catch(err){
54 if(req.url != "/favicon.ico"){
55 fileContent = fs.readFileSync(root + "/index.html");
56 res.end(fileContent);
57 }
58 }
59
60});
61
62server.listen(port, hostname, () => {
63 console.log("Server listening on " + port);
64});
65as opposed to Express version:
1const server = http.createServer( async (req, res) => {
2
3res.statusCode = 200;
4res.setHeader('Content-Type', 'text/html');
5
6const requestUrl = url.parse(req.url);
7let completePath = requestUrl.pathname;
8let path = completePath.split('/').slice(1)[0];
9
10let fileContent;
11
12if(path == "")
13 path = "index.html";
14
15try{
16 fileContent = fs.readFileSync(path);
17 res.end(fileContent, 'utf-8');
18}
19catch(err){
20 console.log("File not found: " + path);
21 if(path != "favicon.ico"){
22 res.statusCode = 404;
23 fileContent = fs.readFileSync("404.html");
24 res.end(fileContent);
25 }
26}
27
28
29});
30const fs = require('fs');
31const https = require('http');
32
33const hostname = 'localhost';
34const port = 3000;
35
36
37const server = https.createServer( async (req, res) => {
38
39 res.statusCode = 200;
40 let root = "./build";
41
42 let path = root + req.url;
43
44 let fileContent;
45
46 if(path == root + "/")
47 path = path + "index.html";
48
49 try{
50 fileContent = fs.readFileSync(path);
51 res.end(fileContent, 'utf-8');
52 }
53 catch(err){
54 if(req.url != "/favicon.ico"){
55 fileContent = fs.readFileSync(root + "/index.html");
56 res.end(fileContent);
57 }
58 }
59
60});
61
62server.listen(port, hostname, () => {
63 console.log("Server listening on " + port);
64});
65const express = require("express");
66const app = express();
67
68// this throws everything to the user
69app.use(express.static(__dirname + "/build"));
70
71// this redirects everything to index.html
72app.get('*', (req, res) => {
73 res.sendFile(__dirname + "/build/index.html");
74});
75
76
77app.listen(port, hostname, () => {
78 console.log("Server listening on " + port);
79});
80QUESTION
image tag - how to put on an ICON (not string - NOT URL) in case of url failure?
Asked 2021-Dec-19 at 13:56I am using React.js as Frontend framework,
I have an icon from antd, and I want to put it in the 'alt' prop of an image tag, so in case that the url I pass there will be null - it will go to put the icon there.
I tried using 'alt' but it only accepts string. is it possible to put there an icon? (like one from antd?)
to emphasize - I want to add it as -
<Image alt={<StepBackwardOutlined />}
as in in an actual icon and NOT AS A URL.
ANSWER
Answered 2021-Dec-19 at 12:17Use the onerror attribute.
From the docs:
1<img src="imagefound.gif" onerror="this.onerror=null;this.src='logoIcon.jpg';" />
2Here logoIcon.jpg is the icon path.
QUESTION
Javascript Dynamic Data binding code not working
Asked 2021-Dec-15 at 14:08I am writing code that uses data binding to change the innerHTML of an span to the input of the user, but I can't get it to work. What it should do is show the input on the right side of the input field on both the input fields, but it doesn't. Can someone please help me out.
HTML:
1<html lang="en-US">
2<head>
3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>My Frontend Framework</title>
7 </style>
8</head>
9<body>
10 <div>
11 <label>Name:</label>
12 <input type="text" bit-data="name"/>
13 <span bit-data-binding="name" style="margin-left: 1rem;"></span>
14 </div>
15
16 <div>
17 <label>Lastname:</label>
18 <input type="text" bit-data="LastName"/>
19 <span bit-data-binding="LastName" style="margin-left: 1rem;"></span>
20 </div>
21<script src="frontend-framework.js"></script>
22</body>
23</html>
24Javascript:
1<html lang="en-US">
2<head>
3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>My Frontend Framework</title>
7 </style>
8</head>
9<body>
10 <div>
11 <label>Name:</label>
12 <input type="text" bit-data="name"/>
13 <span bit-data-binding="name" style="margin-left: 1rem;"></span>
14 </div>
15
16 <div>
17 <label>Lastname:</label>
18 <input type="text" bit-data="LastName"/>
19 <span bit-data-binding="LastName" style="margin-left: 1rem;"></span>
20 </div>
21<script src="frontend-framework.js"></script>
22</body>
23</html>
24const createState = (stateObj) => {
25 return new Proxy(stateObj, {
26 set(target, property, value) {
27 target[property] = value;
28 render();
29 return true;
30 }
31 });
32};
33
34const state = createState({
35 name: '',
36 lastName: ''
37});
38
39const listeners = document.querySelectorAll('[bit-data]');
40
41listeners.forEach((element) => {
42 const name = element.dataset.model;
43 element.addEventListener('keyup', (event) => {
44 state[name] = element.value;
45 console.log(state);
46 });
47});
48
49const render = () => {
50 const bindings = Array.from(document.querySelectorAll('[bit-data-binding]')).map(
51 e => e.dataset.binding
52 );
53 bindings.forEach((binding) => {
54 document.querySelector(`[bit-data-binding=${binding}]`).innerHTML = state[binding];
55 document.querySelector(`[bit-data=${binding}]`).value = state[binding];
56 });
57}
58ANSWER
Answered 2021-Dec-15 at 13:37Your main issue is this part:
1<html lang="en-US">
2<head>
3 <meta charset="UTF-8">
4 <meta name="viewport" content="width=device-width, initial-scale=1.0">
5 <meta http-equiv="X-UA-Compatible" content="ie=edge">
6 <title>My Frontend Framework</title>
7 </style>
8</head>
9<body>
10 <div>
11 <label>Name:</label>
12 <input type="text" bit-data="name"/>
13 <span bit-data-binding="name" style="margin-left: 1rem;"></span>
14 </div>
15
16 <div>
17 <label>Lastname:</label>
18 <input type="text" bit-data="LastName"/>
19 <span bit-data-binding="LastName" style="margin-left: 1rem;"></span>
20 </div>
21<script src="frontend-framework.js"></script>
22</body>
23</html>
24const createState = (stateObj) => {
25 return new Proxy(stateObj, {
26 set(target, property, value) {
27 target[property] = value;
28 render();
29 return true;
30 }
31 });
32};
33
34const state = createState({
35 name: '',
36 lastName: ''
37});
38
39const listeners = document.querySelectorAll('[bit-data]');
40
41listeners.forEach((element) => {
42 const name = element.dataset.model;
43 element.addEventListener('keyup', (event) => {
44 state[name] = element.value;
45 console.log(state);
46 });
47});
48
49const render = () => {
50 const bindings = Array.from(document.querySelectorAll('[bit-data-binding]')).map(
51 e => e.dataset.binding
52 );
53 bindings.forEach((binding) => {
54 document.querySelector(`[bit-data-binding=${binding}]`).innerHTML = state[binding];
55 document.querySelector(`[bit-data=${binding}]`).value = state[binding];
56 });
57}
58const bindings = Array.from(document.querySelectorAll('[bit-data-binding]')).map(
59 e => e.dataset.binding
60 );
61or more specifically e.dataset.binding. Your elements do not a have data-binding attribute, which would be the prerequisite for using dataset.binding. You can use e.getAttribute('bit-data-binding') instead.
But your logic is also flawed: As it currently stands, entering text into an input is pointless, as the state is never updated.
Finally, note that you spell LastName with a capital L in your DOM but lowercased in your state object.
QUESTION
Frontend framework change
Asked 2021-Oct-18 at 14:16We are a small company, using emberjs as the main frontend framework for our projects. The frontend architect sticks to it like liquid glue sticks to paper, because he doesn't know any other frameworks. The main reason that is forced is the slogan: 'convention over configuration'. And there are reasons like emberjs is faster in larger scale applications. Anyone can reason pro-contra for emberjs, angular, react etc.. (hopefully someone who knows all of them, at least emberjs, and another)? We are having meeting sessions about this, where junior frontend devs try to convince the architect about the other frameworks. In my opinion this should not be a technical issue, all of the frameworks are capable of developing 'larger scale' applications. The real reason should be the recruiting, we would find react/angular devs more easily. Thanks
ANSWER
Answered 2021-Oct-18 at 14:16I was in the same situation and managed to migrate to react+redux toolkit+nextjs.
The way I started my introduction is by explaining what is react. React is a rendering engine. I compared it to glimmer components and ember components. I then explained that most of our components were ember components wich are deprecated and need to be migrated anyway
I then explained that we could just live with ember data, ember cli and react.
Then I showed why ember cli was old and there was this new cool kid embroider that we will need to migrate in the future. I explained what was embroider and how it compared with nextjs. I pointed out that I had experience with react and nextjs but not with embroider.
Then I pitched that Ember Data along with nextjs and react was a viable solution. I also showed that the standard stack with nextjs and react was to use in place of ember data: redux toolkit (you could choose react-query depending on your needs)
At the end of this meeting, people were excited but still had questions. I then had to do different presentations and discussions about architecture and costs. I produced swot analysis, risk analysis, benchmarks on component libraries (we went with zendesk garden), cost of development per feature..
It's a long process but if you take time to discuss. Remove any passion from the discussions and at the end focus on reducing costs, you'll get your migration.. and yeah the fact we were struggling to recruit ember experts helped with my arguments :D
I should write a blog post about that xD
PS: regarding "convention over configuration", you can find this concept applied by nextjs and redux toolkit
QUESTION
Can ReactJS run without node in Symfony 5.3 using their Webpack Encore Bundle
Asked 2021-Sep-18 at 09:19Right now I'm building an application where I use Symfony 5.3 as a full stack framework. So I use twig for my views and vanilla javascript. At first this wasn't a big problem but I had to build a few multi step forms and it's starting to be really annoying. Although I'm new to frontend frameworks I want to give ReactJS a try. After some searching I found Symfony's Encore bundle. The only problem that I have is that the hosting server does NOT have NodeJS installed.
Is it possible to use React (with Encore) without node running?
ANSWER
Answered 2021-Sep-18 at 09:18reactjs app is a list of static js and css files that don't require nodejs to be run, but nodejs is required to build react application
Community Discussions contain sources that include Stack Exchange Network
Tutorials and Learning Resources in Frontend Framework
Tutorials and Learning Resources are not available at this moment for Frontend Framework
Share this Page
Get latest updates on Frontend Framework