Questions tagged [frontend]
The user-facing part of an application. In a desktop application, this would include the windowing framework and the forms the user interacts with; in a command line program it would be the available commands and arguments; and in a web app, it would refer to the HTML and JavaScript.
frontend
15,260
questions
90
votes
29
answers
135k
views
Error when deploying react app and it keeps sayings << Plugin "react" was conflicted between "package.json » eslint-config-react-app » >>
I have been having a little bit of issues when deploying my create react app, as it fails to compile and tells me Plugin "react" was conflicted between "package.json » eslint-config-...
87
votes
5
answers
87k
views
Warning: This synthetic event is reused for performance reasons happening with <input type="checkbox" />
I've been working on a simple react-redux todo example for a class and I came across several warning messages that show in the console everytime I check and uncheck a checkbox input.
You can see the ...
85
votes
10
answers
127k
views
How can I bind the html <title> content in vuejs?
I'm trying a demo on vuejs. Now I want the html title to bind a vm field.
The below is what I tried:
index.html
<!DOCTYPE html>
<html id="html">
<head>
<title>{{ hello }}...
85
votes
6
answers
95k
views
What is difference between ng build and ng serve?
What is the difference between ng build and ng serve? What exactly done or changes happen after ng build and ng serve?
75
votes
5
answers
58k
views
ReferenceError: performance is not defined when using performance.now()
I am getting an error ReferenceError: performance is not defined when trying to use performance.now() to measure the execution time of a function call:
export async function find(someId: string, ctx: ...
73
votes
2
answers
52k
views
Using reactjs with requirejs
Recently, I started using reactjs along with a backbonejs router to build an application.
I usually use use requirejs for dependency and code management. But, problem arises when I try to include ...
73
votes
5
answers
79k
views
Front-end developer interview questions [closed]
There are a lot of good interview questions (even "puzzles") for software developers here in Stack Overflow and other places, but I was wondering if anyone had some good questions for a front-end ...
64
votes
5
answers
54k
views
How to remove remote git hooks?
I have pre-push hook implemented with Husky. Now I wanna remove it.
Problem is that after yarn remove husky git hooks are still there inside .git/hooks.
Because of that I get this error every time I ...
61
votes
2
answers
41k
views
Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?
Chrome 65 removed support for the download attribute on anchor elements with cross-origin hrefs:
Block cross-origin <a download>
To avoid what is essentially a user-mediated cross-origin ...
61
votes
1
answer
48k
views
Why fetch return a response with status = 0?
I want to use fetch API to get a whole HTML document from URL.
let config = {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Accept': 'text/html',
'Accept-Language': 'zh-...
60
votes
4
answers
155k
views
React Input Element : Value vs Default Value
When I render an input element within my component if i set the element "value" it become read-only but if i set the value on "defaultValue" it will never update again when i re-...
53
votes
5
answers
166k
views
Export to CSV button in react table
Looking for a way to add an "Export to CSV" button to a react-table which is an npmjs package (https://www.npmjs.com/package/react-table).
I need to add a custom button for exporting the table data ...
53
votes
3
answers
29k
views
Frontend testing: what and how to test, and what tool to use?
I have been writing tests for my Ruby code for a while, but as a frontend developer I am obviously interested in bring this into the code I write for my frontend code. There is quite a few different ...
53
votes
7
answers
38k
views
Is there a giant 'asset page' of all Bootstrap elements that I can re-style? [closed]
http://twitter.github.com/bootstrap/base-css.html
See all the example elements, like h1, h2, h3, inputs, etc?
I'm looking for a simple webpage that has every single Bootstrap inputs/forms/elements/...
52
votes
4
answers
63k
views
How to let react router respond with 404 status code?
I'm using react router as root and all requests under "/" are directed to react router. And when react router found that the url is not matched with any of the defined components, it renders with ...
51
votes
10
answers
93k
views
strip decimal points from variable
I have a series of variables that have a decimal point and a few zeros. How do I strip the variable so it goes from 1.000 to 1?
51
votes
3
answers
69k
views
What's useEffect execution order and its internal clean-up logic when requestAnimationFrame and cancelAnimationFrame are used?
According to react document, useEffect will trigger clean-up logic before it re-runs useEffect part.
If your effect returns a function, React will run it when it is time to clean up...
There is no ...
49
votes
6
answers
30k
views
How to interact with back-end after successful auth with OAuth on front-end?
I want to build small application. There will be some users. I don't want to make my own user system. I want to integrate my application with oauth/oauth2.0.
There is no problem in integration of my ...
48
votes
4
answers
92k
views
What is a good back-end to use with AngularJS [closed]
I want to know your suggestions about a good back-end to use with AngularJS as a front-end.
Why is your suggested back-end good and is it easy to use, or easy to learn?
48
votes
3
answers
54k
views
Where to store a JWT token properly and safely in a web based application?
I'm familiar with Web Storage APIs and cookies but I can't figure what is the most secure way to store an authentication token. I'm wondering if this might break any third-party libraries.
I'd like to ...
47
votes
4
answers
38k
views
Is there a way to include partial using html-webpack-plugin?
I am using Webpack to compile my scripts and HTML (using html-webpack-plugin). The thing is, I have 5 HTML files that contains the same parts and I want to move these parts to separate .html files and ...
44
votes
19
answers
5k
views
Re-learning CSS the right way [closed]
I am a programmer doing web development for over two years now. Even though I’ve been doing front end engineering for the past two years I don’t think I have done it the right way
For instance:
I ...
44
votes
1
answer
42k
views
Python subprocess and user interaction
I'm working on a GUI front end in Python 2.6 and usually it's fairly simple: you use subprocess.call() or subprocess.Popen() to issue the command and wait for it to finish or react to an error. What ...
43
votes
9
answers
50k
views
Next.js: Error: React.Children.only expected to receive a single React element child
I'm having a component called Nav inside components directory and it's code is some thing like below:
import Link from 'next/link';
const Nav = () => {
return(
<div>
...
43
votes
4
answers
3k
views
Chrome autocomplete lock inputs like they are not clickable
I have a problem and very strange behavior with autofill in Chrome. When I login and then logout from app, input fields (email, password) were autocompleted but fields looks like they are frozen and ...
42
votes
1
answer
35k
views
Tricky Button Moving Away when Mouseover in Javascript? [closed]
I remember seeing some website or script on the web about this funny / tricky button: Basically it's a button that is impossible to click. When mouseover, it moves randomly away.
Can someone point me ...
41
votes
5
answers
152k
views
How to resolve "Error: error:0308010C:digital envelope routines::unsupported" Nodejs 18 error [duplicate]
I need help with my NuxtJS application.
I recently had ESLint conflicts in the app after I left it for some time without updating (2 months). So after I started working on it, it presented a challenge ...
41
votes
5
answers
29k
views
connect and withRouter issue
I am using Redux and React for my project. I have some Routes in App.js. I also use the connect function in react-redux in my project. To prevent update blocking issue, I usually wrapped my component ...
40
votes
9
answers
20k
views
React architecture for a huge business application
So we've recently picked up React in our company as the front-end technology to build our huge business web application. By saying recently, I mean we don't have any previous experience with React (we ...
38
votes
5
answers
144k
views
Hide div onclick in Vue.js
What is the Vue.js equivalent of the following jQuery?
$('.btn').click(function(){ $('.hideMe').hide() });
37
votes
1
answer
29k
views
How to organize types definitions in a React Project w/ Typescript
I have been using typescript in my projects for a month and there're some doubts that I'm struggling with.
Is there a pattern/recommended way to organize types in project architecture?
Let's ...
35
votes
7
answers
75k
views
npm test -- --coverage never exits
I am using create-react-app to create a react application. When I executes npm test -- --coverage the test never exists. npm test actually runs react-scripts test. Any Idea?
35
votes
3
answers
58k
views
How do I use "custom filter" prop in data tables in vuetify? or How do I create a custom filter to filter by headers?
As of date of posting, I cannot find any documentation to use the "custom filter" prop in data tables.
I just want to create a custom filter to filter my data table by headers.
I have a dropdown, and ...
35
votes
3
answers
21k
views
Yup vs Joi for frontend validation [closed]
I want to implement frontend validation with either Yup or Joi.
From all the docs and articles that I've found, I've got to a couple of conclusions:
Joi has better performance
Joi is more popular for ...
34
votes
0
answers
38k
views
Can't import the named export 'Children' from non EcmaScript module (only default export is available) [closed]
im having this error when doing a named import from framer-motion module in reactjs.
Obs: im not using webpack.
import { Fragment } from "react";
import classes from "./Hero.module.css&...
33
votes
4
answers
44k
views
Angular Material: Hide Autocomplete Panel when User hits enter Key
I'm currently working on a table where the user is able to tab through editable elements by pressing enter. I also use Angular Material in this.
I have a mat-form-field with several dynamically ...
32
votes
11
answers
52k
views
material UI - How can I change the font size of the label in FormControlLabel
How can I change the font size of the label inside the FormControlLabel?
I am using it with React for Front End JS
<FormGroup row>
<FormControlLabel
control={
<Checkbox ...
32
votes
3
answers
10k
views
django.template.base.TemplateSyntaxError: default requires 2 arguments, 1 provided
I am trying to use django's built in 'default' filter using this code
<title>{{ title|default :"nothing" }}</title>
But it gives me the following exception
django.template.base....
31
votes
4
answers
88k
views
How to divide list in a single ul into 3 columns
I have a ul has list inside it. Is it possible to divide the list into 3 columns.
The structure of my html is like this:
<ul>
<li>Test</li>
<li>Test</li>
...
31
votes
6
answers
84k
views
How to trigger useEffects before render in React?
I have a prop being passed from a parent component to a child component which changes based on the user's input.
I want to trigger a data fetch in the child component when that prop changes before the ...
30
votes
4
answers
14k
views
What is the use of `self.Clients.claim()`
To register a service worker, I can call
navigator.serviceWorker.register('/worker.js')
Every time the page loads it checks for an updated version of worker.js. If an update is found, the new worker ...
30
votes
2
answers
20k
views
Why am I getting ERR_CONNECTION_TIMED_OUT in Vue.js?
After creating a new project with vue cli 3 I get this error:
GET http://192.168.1.13:8080/sockjs-node/info?t=1538257166715 net::ERR_CONNECTION_TIMED_OUT sockjs.js?9be2:1605
Operation system: ...
30
votes
4
answers
22k
views
CSS Scroll Snap Points with navigation (next, previous) buttons
I am building a carousel, very minimalist, using CSS snap points. It is important for me to have CSS only options, but I'm fine with enhancing a bit with javascript (no framework).
I am trying to add ...
30
votes
3
answers
39k
views
Where is "vue.config.js" file?
I've just started to learn Vue but I simply can't set up enviroment for my container.
I use Cloud9 and I have to assign my host for serving Vue app according to this link.
Unfortunately, I can't find ...
30
votes
6
answers
12k
views
Expose javascript globals bundled via webpack
The Problem
I feel like this should be more straightforward than it is. I need to access all my javascript libraries from the frontend and because I'm integrating it into an old system, I cannot call ...
29
votes
8
answers
94k
views
Angular 6 Error "NullInjectorError: No provider for Router!"
I'm currently working on a project where I need the user to fill out an angular form and then send it to a route in my backend to process the data. The backend is in ASP.NET and I already have a ...
28
votes
8
answers
48k
views
Uncaught ReferenceError: regeneratorRuntime is not defined in React
I'm getting an error "Uncaught ReferenceError: regeneratorRuntime is not defined". Please help me to find out the error and how to resolve it.
28
votes
5
answers
51k
views
Utils package in Chart.js
I'm trying reproducing this example from chart.js documentation:
https://www.chartjs.org/docs/latest/samples/line/interpolation.html
But I keep getting this error:
Uncaught ReferenceError: Utils is ...
27
votes
2
answers
20k
views
Preventing line wrapping in CSS layouts
My CSS designer has made a design where there are two ul siblings laid out left to right. The layout is done by specifying the width of the ul tags.
He is using Firefox on Windows where everything ...
27
votes
3
answers
30k
views
Connect a credit card reader to web application?
Is there a way to connect a card reader to my web application (javascript) so that the user don't have to manually type in the credit card information?
This web app is for buying products on a store. ...