JavaScript

Heroku: No default language could be detected for this app.

Posted on

I was uploading a vanilla JavaScript application to heroku.

Looks like I will need a buildpack for it to deploy. This is so Heroku can understand what type of app it has.

Solution1: Just deploy it as a github page. 

Since its a static site, there is nothing “serving” index.html, and heroku is a cloud platform, hosting apps, not a “webhost” in the web 2.0 sense.

Since I want to keep everything on heroku for now, lets see what else we can do.

Attempted Solution: rename index.html to index.php

The least effort solution is to rename your default file to index.php and redeploy. Heroku will detect it as a PHP site and use that buildpack. – John Beynon

Very curious! Would this work? Why not try it out.

hmm appears to work! I was going to deploy a sinatra app or ry the heroku static bundle and I will probably do that anyway but this quick solution can be a real timesaver!

Advertisements

Fix to : Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

Posted on

Getting warning:

Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

While its only a warning in the browser window, I still wanted to see if there was a way to fix it.

BEFORE:

<a href=”#” onClick={this.handleClick} >Link to something</a>

FIX

<a tabIndex=”0″onClick={this.handleClick}>Link to something</a>

Using # , while a HTML staple, is considered broken in React.

Found thanks to afercia at this comment

event.target vs event.currentTarget

Posted on

 A good explanation of target vs currentTarget

  • target is whatever you actually clicked on. It can vary, as this can be within an element that the event was bound to.
  • currentTarget is the element you actually bound the event to. This will never change.

If you are clicking a component and the onClick is on the parent but are getting back the child,  try currentTarget

explanation from here

TypeError: Cannot read property ‘search’ of undefined

Posted on Updated on

In a react componenet, I was having a problem calling a function from another function. I kept getting the error


TypeError: Cannot read property 'search' of undefined

by binding “this” to the first function, it was then able to call the second function.

This example by Rafi Ud Daula Refat on Stackoverflow helped me figure this out.

Here is a little example using some code I made for my project

import React, { Component } from 'react';
class Header extends Component {
search() {
console.log("Enter Button Pressed");
}
handleKeyPress(target) {
if(target.charCode==13){
this.search();
}
}
render(){
return(
 input  onKeyPress={this.handleKeyPress.bind(this)} placeholder="Enter search term" 
)
}

*note input not in <> because wordpress doesnt render it correct, keeps making actual inputs or removes the text

Print something x number of times in JSX / ReactJS

Posted on

If you are using ReactJS you might be asking how to print something x number of times.

plain characters there are many ways to do this such as


let stars = "*".repeat(this.props.review.rating) //where rating is 5

this doesn’t work in when you start using elements as the subject of repetition

for the code:

let newstars = .repeat(this.props.review.rating)

this is the error

TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement(…).repeat is not a function

The fix is to add items the following way:


let newstars = []
for(let i=0;i<this.props.review.rating;i++){
stars.push()
}

//now display the JSX as such in your return
{newstars}

Uncaught (in promise) SyntaxError: Unexpected end of JSON input

Posted on

getting this error when using fetch to connect to my rails api

fetch(`/products/${dataid}/description`)
.then(res=>res.json())
.then(json=>console.log(json))

 

in the browser I was able to get to the page

http://127.0.0.1:3000/products/11/description

 

answer

 

rails action was rendering basic text not json, so I had to change fetch

***Rails

def description
product=Product.find(params[:id])
if product
if product.description
render plain: product.description
else
render plain: “No description”
end end end

***JS

fetch(`/products/${dataid}/description`)
.then(res=>res.text()) //<————————————-
.then(json=>console.log(json))

Could not find an executable [“phantomjs”] on your path.

Posted on

ERROR:

Got this error when running rspec.

1.2) Failure/Error:

            raise Dependency::NotFound.new(

              Could not find an executable #{@executables} on your path.)

          Cliver::Dependency::NotFound:

            Could not find an executable [“phantomjs”] on your path.

 

FIX:

gem 'phantomjs', :require => 'phantomjs/poltergeist'

I added this to my gem file, under group :development, :test do and ran bundle install

After that this error didnt come up

answer found on https://github.com/learn-co-curriculum/your-own-js-and-css-in-rails/issues/7