# web dev

**URL:** https://forum.kirupa.com/c/programming/web-dev/42.md?page=36

[Latest](https://forum.kirupa.com/latest.md) · [Categories](https://forum.kirupa.com/categories.md)

**Page:** 37

---

## [React - Responsive cards](https://forum.kirupa.com/t/react-responsive-cards/639358)

<div class="topic-metadata">

**Author:** [@Ambily\_Cheriyan](https://forum.kirupa.com/u/Ambily_Cheriyan)\
**Replies:** 2\
**Last updated:** [February 1, 2019, 8:37am UTC](https://forum.kirupa.com/t/react-responsive-cards/639358 "2019-02-01T08:37:00Z")

</div>

I have material-ui cards on which I have some info and actions. I am trying to make these cards responsive using react-grid-layout. However resize and drag options do not work on these cards. there is no console error th…

---

## [ES2019 Features](https://forum.kirupa.com/t/es2019-features/639346)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 1\
**Last updated:** [January 30, 2019, 8:50pm UTC](https://forum.kirupa.com/t/es2019-features/639346 "2019-01-30T20:50:24Z")

</div>

Looks like the ES2019 feature set is complete. It includes: Proposal Author Champion(s) TC39 meeting notes Expected Publication Year Optional catch binding Michael Ficarra Michael Ficarra May 2018 2019 JSON…

---

## [React Hooks](https://forum.kirupa.com/t/react-hooks/638854)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 8\
**Last updated:** [January 30, 2019, 3:55pm UTC](https://forum.kirupa.com/t/react-hooks/638854 "2019-01-30T15:55:24Z")

</div>

Something new for React 16.7: Hooks Quick and dirty intro example is adding state to a functional component using the useState hook: import { useState } from 'react'; function Example() { // Declare a new state v…

---

## [question about canvas + JS](https://forum.kirupa.com/t/question-about-canvas-js/639326)

<div class="topic-metadata">

**Author:** [@Pauljc](https://forum.kirupa.com/u/Pauljc)\
**Replies:** 5\
**Last updated:** [January 29, 2019, 10:48pm UTC](https://forum.kirupa.com/t/question-about-canvas-js/639326 "2019-01-29T22:48:16Z")

</div>

Hi everybody, I’m learning js and struggling with some very basic things; the forum seemed welcoming, as well as the excellent tutorials and books from Kirupa, reason why I decided to join the forum and ask my first que…

---

## [video and image overlay using CSS and HTML](https://forum.kirupa.com/t/video-and-image-overlay-using-css-and-html/639323)

<div class="topic-metadata">

**Author:** [@glassbeads](https://forum.kirupa.com/u/glassbeads)\
**Replies:** 4\
**Last updated:** [January 26, 2019, 4:56am UTC](https://forum.kirupa.com/t/video-and-image-overlay-using-css-and-html/639323 "2019-01-26T04:56:32Z")

</div>

is it possible using CSS and HTML to embed a video, then blur the video, and then overlay an (transparent) image over the video. so in other words, restating this — you would have a sort of transparent image that you co…

---

## [How to connect css html and js ?](https://forum.kirupa.com/t/how-to-connect-css-html-and-js/639307)

<div class="topic-metadata">

**Author:** [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Replies:** 6\
**Last updated:** [January 25, 2019, 6:56pm UTC](https://forum.kirupa.com/t/how-to-connect-css-html-and-js/639307 "2019-01-25T18:56:24Z")

</div>

Hello & Thanks , I have been away from coding a while: I’m having trouble connecting css html and js . Problem areas are: p, ah { font-size: 2em; color: #ffdddd; } p, tgh { font-size: 1em; col…

---

## [Rendering the correct UI elements](https://forum.kirupa.com/t/rendering-the-correct-ui-elements/639317)

<div class="topic-metadata">

**Author:** [@treeeest](https://forum.kirupa.com/u/treeeest)\
**Replies:** 1\
**Last updated:** [January 24, 2019, 11:00pm UTC](https://forum.kirupa.com/t/rendering-the-correct-ui-elements/639317 "2019-01-24T23:00:50Z")

</div>

I am brand new to CSS/HTML/JavaScript and I am having some trouble figuring out how everything connects and works. Right now I have a situation where my selector styles within one page view are being overlooked and my ge…

---

## [React and SEO](https://forum.kirupa.com/t/react-and-seo/639244)

<div class="topic-metadata">

**Author:** [@jamesallan626](https://forum.kirupa.com/u/jamesallan626)\
**Replies:** 4\
**Last updated:** [January 11, 2019, 2:25am UTC](https://forum.kirupa.com/t/react-and-seo/639244 "2019-01-11T02:25:14Z")

</div>

I was just wondering about SEO. Google spiders look for html, and well formed html, but react apps are mostly js with not much html. Look at my demo for React Routing from “Learning React” (https://jamesallan626.gitlab.i…

---

## [Learning React - Sliding Menu (Chrome issue)](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232)

<div class="topic-metadata">

**Author:** [@jamesallan626](https://forum.kirupa.com/u/jamesallan626)\
**Replies:** 4\
**Last updated:** [January 9, 2019, 10:29pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232 "2019-01-09T22:29:28Z")

</div>

I just coded the FlyOut/Sliding menu from “Learning React” which you can see here: https://jamesallan626.gitlab.io/slidingmenu/ . . Works fine, but I noticed if you reduce the width of the page to smartphone width or som…

---

## [Sliding Letters Animation!](https://forum.kirupa.com/t/sliding-letters-animation/639197)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 5\
**Last updated:** [January 9, 2019, 1:48pm UTC](https://forum.kirupa.com/t/sliding-letters-animation/639197 "2019-01-09T13:48:26Z")

</div>

A little something I was fiddling with earlier today: It isn’t overly complex, and the bulk of the code is in shifting the letters back every iteration to give the illusion of an infinite scroll. Here is the code: \<!…

---

## [React app wrapped In a Web Component](https://forum.kirupa.com/t/react-app-wrapped-in-a-web-component/639231)

<div class="topic-metadata">

**Author:** [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Replies:** 0\
**Last updated:** [January 7, 2019, 4:38pm UTC](https://forum.kirupa.com/t/react-app-wrapped-in-a-web-component/639231 "2019-01-07T16:38:45Z")

</div>

I want to bring in a discussion about Web Components and how important they are this year. Will therefor start by asking the following question: I would like to be able to wrap a React App into a web component / Module…

---

## [Calling png OR PNG file type](https://forum.kirupa.com/t/calling-png-or-png-file-type/639119)

<div class="topic-metadata">

**Author:** [@madamx](https://forum.kirupa.com/u/madamx)\
**Replies:** 1\
**Last updated:** [December 13, 2018, 5:46pm UTC](https://forum.kirupa.com/t/calling-png-or-png-file-type/639119 "2018-12-13T17:46:10Z")

</div>

Hi All My line is: mc.uiloader.load(new URLRequest(“templates/\_images/” + text + “.png”)); I’d like to call also PNG files (suffix with BIG characters). How can i do it ? Thanks

---

## [My First react project after finishing the course](https://forum.kirupa.com/t/my-first-react-project-after-finishing-the-course/639099)

<div class="topic-metadata">

**Author:** [@Douara](https://forum.kirupa.com/u/Douara)\
**Replies:** 2\
**Last updated:** [December 10, 2018, 4:28pm UTC](https://forum.kirupa.com/t/my-first-react-project-after-finishing-the-course/639099 "2018-12-10T16:28:16Z")

</div>

Hi, After I finished the first part of Kirupa React course, I applied what I learned in this simple react project ( Shopping Cart ): I don’t know if I am doing it right and if my code looks clean or not, I hope I ge…

---

## [Breaking into letters with the spread operator!](https://forum.kirupa.com/t/breaking-into-letters-with-the-spread-operator/639100)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 1\
**Last updated:** [December 10, 2018, 1:39pm UTC](https://forum.kirupa.com/t/breaking-into-letters-with-the-spread-operator/639100 "2018-12-10T13:39:11Z")

</div>

I was messing around with the spread operator, and I wanted to share this little trick: var word = "dinosaurs"; // old-school var letters = word.split(''); console.log(letters); // new-school with the spread operator …

---

## [Best practice for implementing preloader for a website](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044)

<div class="topic-metadata">

**Author:** [@withoutwax](https://forum.kirupa.com/u/withoutwax)\
**Replies:** 4\
**Last updated:** [December 3, 2018, 5:07pm UTC](https://forum.kirupa.com/t/best-practice-for-implementing-preloader-for-a-website/639044 "2018-12-03T17:07:37Z")

</div>

Hey everyone! I was wondering what is the best practice for implementing preloader when the website freshly loads for the first time! I realized that there are many different types of method in doing this, but I was ju…

---

## [Seeking Tech Advice for Medical Reference Application](https://forum.kirupa.com/t/seeking-tech-advice-for-medical-reference-application/639042)

<div class="topic-metadata">

**Author:** [@PIxelDroid](https://forum.kirupa.com/u/PIxelDroid)\
**Replies:** 3\
**Last updated:** [December 2, 2018, 6:20pm UTC](https://forum.kirupa.com/t/seeking-tech-advice-for-medical-reference-application/639042 "2018-12-02T18:20:26Z")

</div>

Hi all: I appreciate Kirupa’s lengthy answer to my question here … you should build both a PWA and a React Native solution and architect your app in a way to re-use as much logic between the PWA, React Native-Android,…

---

## [Hard to Swallow Pill...](https://forum.kirupa.com/t/hard-to-swallow-pill/638982)

<div class="topic-metadata">

**Author:** [@VaiFanatic](https://forum.kirupa.com/u/VaiFanatic)\
**Replies:** 5\
**Last updated:** [November 28, 2018, 2:02pm UTC](https://forum.kirupa.com/t/hard-to-swallow-pill/638982 "2018-11-28T14:02:42Z")

</div>

So the more I’ve gotten back into the Web Development side of things, the more I’m seeing how CMS services such as WordPress and Wix have outclassed the speed and capabilities of most freelance web developers who are use…

---

## [Testing in Edge/IE while on a Mac!](https://forum.kirupa.com/t/testing-in-edge-ie-while-on-a-mac/638992)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 1\
**Last updated:** [November 24, 2018, 3:59am UTC](https://forum.kirupa.com/t/testing-in-edge-ie-while-on-a-mac/638992 "2018-11-24T03:59:43Z")

</div>

If you primarily develop on a Mac, testing on Windows-only browsers like IE and Edge can be a hassle. To make this easier, the popular BrowserStack service provides free cloud-based Windows VMs that you can use from insi…

---

## [How to do video conference?](https://forum.kirupa.com/t/how-to-do-video-conference/638970)

<div class="topic-metadata">

**Author:** [@MrBusty](https://forum.kirupa.com/u/MrBusty)\
**Replies:** 1\
**Last updated:** [November 17, 2018, 7:20pm UTC](https://forum.kirupa.com/t/how-to-do-video-conference/638970 "2018-11-17T19:20:10Z")

</div>

Hi, I did find following tutorial: Creating and showing the stream locally is indeed pretty easy, but how can I exchange the stream between two computers? Is it better to go for a p2p or a server based solution? Can …

---

## [Ultralite CMS?](https://forum.kirupa.com/t/ultralite-cms/638691)

<div class="topic-metadata">

**Author:** [@travis](https://forum.kirupa.com/u/travis)\
**Replies:** 3\
**Last updated:** [September 13, 2018, 6:00am UTC](https://forum.kirupa.com/t/ultralite-cms/638691 "2018-09-13T06:00:28Z")

</div>

Recently I was doing some work for a client, very simple stuff that essentially equated to a landing page. So using WordPress (what I generally work with) was overkill. Does anyone have recommendations for a lite CMS t…

---

## [When I click on a button, an svg animation needs to start?](https://forum.kirupa.com/t/when-i-click-on-a-button-an-svg-animation-needs-to-start/638902)

<div class="topic-metadata">

**Author:** [@11134](https://forum.kirupa.com/u/11134)\
**Replies:** 1\
**Last updated:** [November 4, 2018, 5:50pm UTC](https://forum.kirupa.com/t/when-i-click-on-a-button-an-svg-animation-needs-to-start/638902 "2018-11-04T17:50:20Z")

</div>

Hello,from Bulgaria,i have a problem which bugs me really hard,i have a img tag with an svg in it and,i tried with a pseudo class active in css, to show that svg animation after i click on a button but it doesnt work,i d…

---

## [getComputedStyle, custom CSS property values, and leading spaces!](https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 1\
**Last updated:** [November 3, 2018, 5:32pm UTC](https://forum.kirupa.com/t/getcomputedstyle-custom-css-property-values-and-leading-spaces/638899 "2018-11-03T17:32:11Z")

</div>

One thing I’ve noticed is that the custom CSS variable/property style values you can access using getComputedStyle are very precise in that the space between the property name and the value is annoyingly accounted for. L…

---

## [New Web components book](https://forum.kirupa.com/t/new-web-components-book/638839)

<div class="topic-metadata">

**Author:** [@Wayne](https://forum.kirupa.com/u/Wayne)\
**Replies:** 2\
**Last updated:** [October 23, 2018, 8:12pm UTC](https://forum.kirupa.com/t/new-web-components-book/638839 "2018-10-23T20:12:26Z")

</div>

I want to start using web components and found this book: https://www.manning.com/books/web-components-in-action What do you guys think?

---

## [ReferenceError: cardStyle is not defined](https://forum.kirupa.com/t/referenceerror-cardstyle-is-not-defined/638805)

<div class="topic-metadata">

**Author:** [@paulgoulart](https://forum.kirupa.com/u/paulgoulart)\
**Replies:** 1\
**Last updated:** [October 15, 2018, 3:38pm UTC](https://forum.kirupa.com/t/referenceerror-cardstyle-is-not-defined/638805 "2018-10-15T15:38:04Z")

</div>

With this code I get this error. I’ve looked and looked but can’t seem to find the problem. Any suggestions? \<!DOCTYPE html\> \<html\> \<head\> \<meta charset="utf-8"\> \<title\>More Components\</title\> \<script sr…

---

## [Learning React, Creating Complex Component - not rendering properly](https://forum.kirupa.com/t/learning-react-creating-complex-component-not-rendering-properly/638803)

<div class="topic-metadata">

**Author:** [@Mark\_Pastor](https://forum.kirupa.com/u/Mark_Pastor)\
**Replies:** 3\
**Last updated:** [October 15, 2018, 3:24pm UTC](https://forum.kirupa.com/t/learning-react-creating-complex-component-not-rendering-properly/638803 "2018-10-15T15:24:08Z")

</div>

I have created a file: simpleTest.html with the code from the static example in chapter 5 of the book. The web page keeps coming up blank. Is there an obvious answer to why I am not seeing the code render?

---

## [\<React.Format\> error while studying Learning React Book](https://forum.kirupa.com/t/react-format-error-while-studying-learning-react-book/638777)

<div class="topic-metadata">

**Author:** [@PIxelDroid](https://forum.kirupa.com/u/PIxelDroid)\
**Replies:** 12\
**Last updated:** [October 7, 2018, 8:27pm UTC](https://forum.kirupa.com/t/react-format-error-while-studying-learning-react-book/638777 "2018-10-07T20:27:01Z")

</div>

Hi All: I have run into an error while studying the Kirupa React Book. In 'JSX Quirks" on p.83 there is a discussion about using \<\>\</\> as a shortcut for \<React.Fragment\>. I get a Babel error when I use this syntax. Cod…

---

## [i want to hover image on another image ?](https://forum.kirupa.com/t/i-want-to-hover-image-on-another-image/638776)

<div class="topic-metadata">

**Author:** [@ponsukeen](https://forum.kirupa.com/u/ponsukeen)\
**Replies:** 2\
**Last updated:** [October 7, 2018, 4:36am UTC](https://forum.kirupa.com/t/i-want-to-hover-image-on-another-image/638776 "2018-10-07T04:36:36Z")

</div>

i want to hover image on another image ? like i have black facebook icon when i want to hover on it i want to switch the color to blue how i can do this ? note( facebook icon is circle) dich vu giup viec nha uy tín g…

---

## [Create React App 2](https://forum.kirupa.com/t/create-react-app-2/638748)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 1\
**Last updated:** [October 5, 2018, 3:28am UTC](https://forum.kirupa.com/t/create-react-app-2/638748 "2018-10-05T03:28:55Z")

</div>

Create React App 2 was just released. It includes SASS support which I’m excited about. I don’t generally use create-react-app, but I did the other day for something quick and was surprised that sass or something simila…

---

## [Drawing on canvas using array from json](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717)

<div class="topic-metadata">

**Author:** [@gwgwpl](https://forum.kirupa.com/u/gwgwpl)\
**Replies:** 2\
**Last updated:** [September 24, 2018, 5:21pm UTC](https://forum.kirupa.com/t/drawing-on-canvas-using-array-from-json/638717 "2018-09-24T17:21:48Z")

</div>

Hi, i’m trying to draw on canvas with pure js, using arrays from json file. First, i’m using MidiConvert from: https://tonejs.github.io/MidiConvert/ To convert midi files to json format, here is example of conversio…

---

## [Drawing on canvas with keyboard events](https://forum.kirupa.com/t/drawing-on-canvas-with-keyboard-events/638688)

<div class="topic-metadata">

**Author:** [@gwgwpl](https://forum.kirupa.com/u/gwgwpl)\
**Replies:** 10\
**Last updated:** [September 19, 2018, 12:38pm UTC](https://forum.kirupa.com/t/drawing-on-canvas-with-keyboard-events/638688 "2018-09-19T12:38:51Z")

</div>

Hello,first,sorry for my English,i’m not native, nice to meet you all :slight\_smile: I’m working locally (linux/xampp ) on a project where i need to draw many elements on canvas on multiply keyboard events. Simple exa…

[Previous page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=35)

[Next page](https://forum.kirupa.com/c/programming/web-dev/42.md?page=37)