# web dev

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

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

**Page:** 38

---

## [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…

---

## [controlling bootstrap modal position](https://forum.kirupa.com/t/controlling-bootstrap-modal-position/638697)

<div class="topic-metadata">

**Author:** [@pcla56](https://forum.kirupa.com/u/pcla56)\
**Replies:** 1\
**Last updated:** [September 13, 2018, 5:57pm UTC](https://forum.kirupa.com/t/controlling-bootstrap-modal-position/638697 "2018-09-13T17:57:27Z")

</div>

I have tried to read up about this and have tried endless solutions without success. I want to display a modal without the background scrolling to the top. Almost everyone suggests some variant of overfow control but it …

---

## [CSS Variables + JavaScript = Win!](https://forum.kirupa.com/t/css-variables-javascript-win/638333)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 5\
**Last updated:** [September 4, 2018, 3:18am UTC](https://forum.kirupa.com/t/css-variables-javascript-win/638333 "2018-09-04T03:18:33Z")

</div>

by kirupa | 5 June 2018 When setting CSS property values via JavaScript, especially the really complex ones, you will often find yourself wrestling with strings: This is a companion discussion topic for the origi…

---

## [Catch Decorators? How about this??](https://forum.kirupa.com/t/catch-decorators-how-about-this/638658)

<div class="topic-metadata">

**Author:** [@senocular](https://forum.kirupa.com/u/senocular)\
**Replies:** 2\
**Last updated:** [August 31, 2018, 7:22pm UTC](https://forum.kirupa.com/t/catch-decorators-how-about-this/638658 "2018-08-31T19:22:04Z")

</div>

So this guy is all like… And I’m all like, why not… Right?!? I guess I was the only one that thought it was funny :pensive:

---

## [Smoke Effect](https://forum.kirupa.com/t/smoke-effect/638615)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 1\
**Last updated:** [August 19, 2018, 1:06am UTC](https://forum.kirupa.com/t/smoke-effect/638615 "2018-08-19T01:06:21Z")

</div>

While playing around on the canvas, I created a smoke-like effect: https://www.youtube.com/watch?v=iShiJxTiWRc&width=600&height=400 This is done by animating a lot of barely visible gray circles. The code is below: \<!…

---

## [Refactoring mystery, or is it?](https://forum.kirupa.com/t/refactoring-mystery-or-is-it/638606)

<div class="topic-metadata">

**Author:** [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Replies:** 4\
**Last updated:** [August 14, 2018, 2:45pm UTC](https://forum.kirupa.com/t/refactoring-mystery-or-is-it/638606 "2018-08-14T14:45:16Z")

</div>

I am working in a Gatsby Reactjs project and I’ve recently come across something that has me confused. I solved the issue but I don’t understand why it works the way it does. Maybe someone can help me understand. In a c…

---

## [Understanding Degrees on the Web](https://forum.kirupa.com/t/understanding-degrees-on-the-web/638602)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 4\
**Last updated:** [August 13, 2018, 9:33pm UTC](https://forum.kirupa.com/t/understanding-degrees-on-the-web/638602 "2018-08-13T21:33:05Z")

</div>

When it comes to degrees, you probably know a whole lot about them already from just being alive...taking geometry classes in school, doing basic woodworking, going into outer space, and/or having ever rotated an element…

---

## [Webpack dev-server doesn't show the image](https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578)

<div class="topic-metadata">

**Author:** [@kayut](https://forum.kirupa.com/u/kayut)\
**Replies:** 1\
**Last updated:** [August 4, 2018, 11:49pm UTC](https://forum.kirupa.com/t/webpack-dev-server-doesnt-show-the-image/638578 "2018-08-04T23:49:41Z")

</div>

Hi, I’m trying to understand how webpack is working. For this I created a very simple example: webpack.config.js const path = require('path'); module.exports = { entry: \['./src/index.js'\], output: { path: p…

---

## [Creating the iOS Icon Jiggle / Wobble Effect in CSS](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 3\
**Last updated:** [August 3, 2018, 11:14pm UTC](https://forum.kirupa.com/t/creating-the-ios-icon-jiggle-wobble-effect-in-css/331950 "2018-08-03T23:14:22Z")

</div>

If you’ve ever wanted to re-create the iOS wiggle or wobble effect, this tutorial will help you out. If you have any questions, this thread is your…indifferent friend :deranged: Cheers, Kirupa

---

## [JavaScript and keyboard shortcuts](https://forum.kirupa.com/t/javascript-and-keyboard-shortcuts/638550)

<div class="topic-metadata">

**Author:** [@travis](https://forum.kirupa.com/u/travis)\
**Replies:** 3\
**Last updated:** [July 30, 2018, 1:44pm UTC](https://forum.kirupa.com/t/javascript-and-keyboard-shortcuts/638550 "2018-07-30T13:44:07Z")

</div>

I’ve been scouring the internet all day trying to find an answer, and I believe it’s no but I turn to the trusty old Kirupa forms for the definitive answer. Is it possible to create a function that is triggered when a u…

---

## [Integrating REST APIs into React](https://forum.kirupa.com/t/integrating-rest-apis-into-react/638532)

<div class="topic-metadata">

**Author:** [@Joshua\_Fogg](https://forum.kirupa.com/u/Joshua_Fogg)\
**Replies:** 2\
**Last updated:** [July 24, 2018, 6:43pm UTC](https://forum.kirupa.com/t/integrating-rest-apis-into-react/638532 "2018-07-24T18:43:29Z")

</div>

I went through the tutorial about creating a SPA in React. The next thing I want to look at is integrating a set of REST APIs into it. Could you point me in the direct of a good tutorial to follow?

---

## [prototype vs \_\_proto\_\_: Which statement is correct?](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528)

<div class="topic-metadata">

**Author:** [@kayut](https://forum.kirupa.com/u/kayut)\
**Replies:** 3\
**Last updated:** [July 23, 2018, 6:41pm UTC](https://forum.kirupa.com/t/prototype-vs-proto-which-statement-is-correct/638528 "2018-07-23T18:41:12Z")

</div>

Hi, I’m trying to understand a couple of different things. I read a lot and googled for hours. Now, I need to connect all those infos and hope that you can help me by answering this question. Looking at this code: …

---

## [Animating Stripes in CSS](https://forum.kirupa.com/t/animating-stripes-in-css/638502)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 2\
**Last updated:** [July 20, 2018, 8:19pm UTC](https://forum.kirupa.com/t/animating-stripes-in-css/638502 "2018-07-20T20:19:08Z")

</div>

For the past few weeks, I’ve been playing on and off with animating stripes in CSS: They way these stripes are created is by relying on CSS gradients. Animating them is fairly straightforward-ish. The first four rely e…

---

## [Cycle through different sized images on scroll](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461)

<div class="topic-metadata">

**Author:** [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Replies:** 2\
**Last updated:** [July 6, 2018, 8:59am UTC](https://forum.kirupa.com/t/cycle-through-different-sized-images-on-scroll/638461 "2018-07-06T08:59:11Z")

</div>

Hi all, I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like: to be able to have images of different heights and widt…

---

## [Handlebars.js - Show data only if {{ image\_url }} doesn't contain "questionmark"](https://forum.kirupa.com/t/handlebars-js-show-data-only-if-image-url-doesnt-contain-questionmark/638465)

<div class="topic-metadata">

**Author:** [@kayut](https://forum.kirupa.com/u/kayut)\
**Replies:** 2\
**Last updated:** [July 5, 2018, 6:59pm UTC](https://forum.kirupa.com/t/handlebars-js-show-data-only-if-image-url-doesnt-contain-questionmark/638465 "2018-07-05T18:59:45Z")

</div>

Hi, As you can see in this example, which I created on Codepen, some of the data don’t have an image and whenever there’s no image, a place holder image is shown: Handlebars.js Example Is there any way in Handlebars.j…

---

## [How to manage a remote team?](https://forum.kirupa.com/t/how-to-manage-a-remote-team/638457)

<div class="topic-metadata">

**Author:** [@SacredPlace](https://forum.kirupa.com/u/SacredPlace)\
**Replies:** 1\
**Last updated:** [July 5, 2018, 3:19am UTC](https://forum.kirupa.com/t/how-to-manage-a-remote-team/638457 "2018-07-05T03:19:59Z")

</div>

I am going to start working with a remote software development team. And to tell the truth I am a bit nervous. (about my money, my project, timelines)What are the best practices do you know that can help me manage my rem…

---

## [Linkify (plain url to link) based on windowSize](https://forum.kirupa.com/t/linkify-plain-url-to-link-based-on-windowsize/638435)

<div class="topic-metadata">

**Author:** [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Replies:** 2\
**Last updated:** [July 3, 2018, 2:37pm UTC](https://forum.kirupa.com/t/linkify-plain-url-to-link-based-on-windowsize/638435 "2018-07-03T14:37:41Z")

</div>

Hi all, this is what i would like to do when window size is \< 1000, change any plain text url to a clickable one when window size is \> 1000, change any plain text url to a clickable one, replaced by the word “Link”. I…

---

## [Parsing JSON table: hiding a row, changing color of word.Parsing JSON table: hiding a row, changing color of word.](https://forum.kirupa.com/t/parsing-json-table-hiding-a-row-changing-color-of-word-parsing-json-table-hiding-a-row-changing-color-of-word/638425)

<div class="topic-metadata">

**Author:** [@4a0g1kfa54](https://forum.kirupa.com/u/4a0g1kfa54)\
**Replies:** 1\
**Last updated:** [July 1, 2018, 2:21pm UTC](https://forum.kirupa.com/t/parsing-json-table-hiding-a-row-changing-color-of-word-parsing-json-table-hiding-a-row-changing-color-of-word/638425 "2018-07-01T14:21:13Z")

</div>

Hi all, I am using jquery to convert a google spreadsheet to JSON that produces a HTML table. I would like to: hide one of the rows that has the phrase “E9” in it. change the color of the phrase “C12” to red. I have…

---

## [Zooming Radial Stripes](https://forum.kirupa.com/t/zooming-radial-stripes/638426)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 0\
**Last updated:** [July 1, 2018, 6:04am UTC](https://forum.kirupa.com/t/zooming-radial-stripes/638426 "2018-07-01T06:04:35Z")

</div>

I was kicking the tires with creating one of those effects where radial stripes keep zooming in at you. You can see the video of this working at the following link: https://twitter.com/kirupa/status/1013302895385575426 I…

---

## [say script video](https://forum.kirupa.com/t/say-script-video/638424)

<div class="topic-metadata">

**Author:** [@chrisamanda](https://forum.kirupa.com/u/chrisamanda)\
**Replies:** 0\
**Last updated:** [June 30, 2018, 11:57am UTC](https://forum.kirupa.com/t/say-script-video/638424 "2018-06-30T11:57:15Z")

</div>

how do I get to video script

---

## [React Router: change component based on current page](https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394)

<div class="topic-metadata">

**Author:** [@danielcolinjames](https://forum.kirupa.com/u/danielcolinjames)\
**Replies:** 1\
**Last updated:** [June 24, 2018, 8:47pm UTC](https://forum.kirupa.com/t/react-router-change-component-based-on-current-page/638394 "2018-06-24T20:47:56Z")

</div>

I’ve been looking at this tutorial: https://www.kirupa.com/react/creating\_single\_page\_app\_react\_using\_react\_router.htm and my current setup is pretty similar to that example. The structure of my app right now is basica…

---

## [Button counter save](https://forum.kirupa.com/t/button-counter-save/638401)

<div class="topic-metadata">

**Author:** [@cedrusvn](https://forum.kirupa.com/u/cedrusvn)\
**Replies:** 1\
**Last updated:** [June 24, 2018, 5:24am UTC](https://forum.kirupa.com/t/button-counter-save/638401 "2018-06-24T05:24:41Z")

</div>

ello, so i have this button that counts every time you tap it, but whenever you refresh or closes the tab it resests. I’ve been trying for so long to find a way for it to save your progress, but nothing seems to work. C…

---

## [How to hide a menu button on the login page](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265)

<div class="topic-metadata">

**Author:** [@123411](https://forum.kirupa.com/u/123411)\
**Replies:** 5\
**Last updated:** [May 24, 2018, 1:34pm UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265 "2018-05-24T13:34:10Z")

</div>

Hello members, I would like to know how i can hide a menu button on the login page using reactjs so that the user can not be able to view and access the menu button until he/she login successfully. your suggestion is we…

---

## [react keys](https://forum.kirupa.com/t/react-keys/638349)

<div class="topic-metadata">

**Author:** [@ollie-w](https://forum.kirupa.com/u/ollie-w)\
**Replies:** 1\
**Last updated:** [June 10, 2018, 6:42pm UTC](https://forum.kirupa.com/t/react-keys/638349 "2018-06-10T18:42:32Z")

</div>

I am getting the error Warning: Todo:keyis not a prop. Trying to access it will result inundefinedbeing returned. If you need to access the same value within the child component, you should pass it as a different prop. F…

---

## [Closures - Local vs Private ?](https://forum.kirupa.com/t/closures-local-vs-private/638335)

<div class="topic-metadata">

**Author:** [@kayut](https://forum.kirupa.com/u/kayut)\
**Replies:** 1\
**Last updated:** [June 6, 2018, 1:52pm UTC](https://forum.kirupa.com/t/closures-local-vs-private/638335 "2018-06-06T13:52:02Z")

</div>

Hey, When I read about Closures, it’s often said that we are using Closures to create private variable, that cannot be accessed outside the function. But isn’t it that this is true for all local variables inside a func…

---

## [Object Moves On Mouse Hover](https://forum.kirupa.com/t/object-moves-on-mouse-hover/638253)

<div class="topic-metadata">

**Author:** [@Amalzak](https://forum.kirupa.com/u/Amalzak)\
**Replies:** 3\
**Last updated:** [May 23, 2018, 9:56am UTC](https://forum.kirupa.com/t/object-moves-on-mouse-hover/638253 "2018-05-23T09:56:09Z")

</div>

I am a beginner web designer and developer, and i want to design a banner made up of small squares. When the mouse hovers on one of those squares, they all scatter and move out of the screen. How can i do this using htm…

---

## [Best way to implement screen recording in web app](https://forum.kirupa.com/t/best-way-to-implement-screen-recording-in-web-app/638290)

<div class="topic-metadata">

**Author:** [@Jithin](https://forum.kirupa.com/u/Jithin)\
**Replies:** 0\
**Last updated:** [May 28, 2018, 4:31pm UTC](https://forum.kirupa.com/t/best-way-to-implement-screen-recording-in-web-app/638290 "2018-05-28T16:31:49Z")

</div>

I’m doing a project which is about creating an environment where online teachers can make use of interactive simulations to teach. Here is the prototype test.anybodycanlearn.org I’m thinking implementing the facility …

---

## [I want to display slide an image infinite time without hover](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281)

<div class="topic-metadata">

**Author:** [@Umair\_Riaz\_Ahmed](https://forum.kirupa.com/u/Umair_Riaz_Ahmed)\
**Replies:** 4\
**Last updated:** [May 28, 2018, 1:59am UTC](https://forum.kirupa.com/t/i-want-to-display-slide-an-image-infinite-time-without-hover/638281 "2018-05-28T01:59:03Z")

</div>

Reference to your video title 'Slide an Image on Hover Using a CSS Transition’ i have a query that is it possible to slide an image infinite time without hover I am working on my project i need to bring this effect on …

---

## [Update the state when the user successfully login](https://forum.kirupa.com/t/update-the-state-when-the-user-successfully-login/638279)

<div class="topic-metadata">

**Author:** [@123411](https://forum.kirupa.com/u/123411)\
**Replies:** 0\
**Last updated:** [May 27, 2018, 3:19am UTC](https://forum.kirupa.com/t/update-the-state-when-the-user-successfully-login/638279 "2018-05-27T03:19:59Z")

</div>

Hello; i want to update the state when the login has been success and i was thinking to add a boolean flag and I then give the menu a class hide/show depending on if the user has successfully logged in The code that is…

---

## [FizzBuzz](https://forum.kirupa.com/t/fizzbuzz/638235)

<div class="topic-metadata">

**Author:** [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Replies:** 6\
**Last updated:** [May 21, 2018, 2:17am UTC](https://forum.kirupa.com/t/fizzbuzz/638235 "2018-05-21T02:17:49Z")

</div>

The thread for this: https://www.kirupa.com/html5/fizzbuzz.htm

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

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