First 6 web pages. Please comment

First 6 web pages. Please comment
0

#1

Below are links to my basic front end and intermediate front end projects. I would like comments.

Unfortunately, half of these do not work in code pen. I have indicated on the top of the web page that there is a problem. All of them work fine on my Safari browser, so to look at the problem pages, please copy the HTML code to a normal browser.

I have decided not to tear my hair out. Code pen for me has been very bad, and has wasted a great deal of my time. I would like a comment here from the powers that be, whether these problems are affecting my reviews. If so, I would not like to waste anyone else’s time and I will go elsewhere for my education.

personal portfolio

random image retrieval

wiki viewer
The “back” arrow of the browser does not work, so you
may get stuck.

weather

tribute

twitch tv


#2

Your webpages appear to be functional which is good. The main critique I can give you is work on design with your websites. Maybe it is just my browser, or Codepen being dumb, but these all appear to be missing any sort of complex styling aside from background colors. Also, again could be Codepen, but maybe try separating your CSS and Javascript code from your HTML pages. It will make your code much nicer and easier to manage.

Aside from design and a few other minor things they seem to function like they are suppose to, so good job!


#3

Thank you. I suspect your browser is fine. My designs are purposely simple (minimal??). I have been focusing on the technical aspects of javascript and HTML. I am now more comfortable, so I will focus more on design for the next set of projects.


#4

Portfolio page:

  • You should never put styles in your html. It may not seem that big a deal for small projects, but it cripples your scalability, makes your code much more annoying to manage (ex: Having to scroll up and down repeatedly to find what class you’re working with, and will become continually harder to manage the bigger your html and css becomes.
  • You don’t need to use head or body tags when working in codepen. The body tag is implied, and you can add head tags like link in the setting’s menu under “Stuff for head”
  • It’s generally recommended to avoid using ID tags in your html, even if there is only one instance of that particular element. In reality, ID’s are meant for elements that are unique, and will always remain unique. Plus the more ID’s you have to more CSS selectors you have to specify :confused:
  • Consider reading up on the HTML Document Outline. It specify’s a lot of best practices for efficient yet readable HTML that is easy to understand by search engines and screen readers (never forget accessiblity)

Random beetle images:

  • Consider adding some space to your Javascript, (i.e. “var test = value;” vs “var test=value”), Remember, code is read more than it is written. The goal is to write code that is readable and maintainable, not optimized af.
  • At the beggining of your JS you have a bunch of global variables, you can just use commas instead of writing var like 12 times.

Wikipedia Viewer:

  • Use ‘target="_blank"’ in you a tags. target=_black will open a link in a new tab, which will avoid the wikipedia article from opening in the codepen editor (This is actually recommended by both Codepen and Freecodecamp to avoid bugs or accidently crashing Codepen)

Last thing, mabye it’s just me, but for all the AJAX calls I would just use jQuery and make it easier on yourself. If your completely fluent with just using the XMLHttp object then by all means, but in an environment like codepen where you dont have to worry about load times or file size all that much, I would just go with the simpler syntax of jQuery.

If your looking for design inspiration/ideas, I recommend dribbble or behance.

I can’t exactly pinpoint why your JS isn’t working on codepen, but i suspect it’s due to Codepen’s cross-domain policy enforcement. It may seem stupid, but it’s vital for cybersecurity to prevent someone from looking at your pen and AJAX calling malware or something. Look up JSONp, it’s a bit of a hack to get around it. You don’t need jQuery to do it, but it makes the process MUCH easier.


#5

Thank you. This is useful.

Just a question about the “ban” on ids. I use ids in a <div> element when I want to create child elements on the fly. I do this in the twitch tv and the wiki viewer. So I use document.getElementById(“someId”); How would you do it?

I would like my applications to work outside code pen and I don’t want to maintain two separate pieces of code. I develop off line, and copy the code into code pen, usually a number of times during the development. Is the use of head, body tags a bug, or will they cause a problem, or is this a style issue?

The use of "var a,b,c,… " vs "var a; var b;… "is I think a style issue, but can become a little more. I am particularly averse to it if the variables are completely unrelated. So “var width, height, depth;” is fine, but “var house, infant, russia” is confusing to me and probably to some people reading the code. Also, if I want to document my global variables, it is useful to have the explanation right next to the variable.

I would certainly like to understand why code pen doesn’t like me.

Otherwise, I will follow your suggestions. Thanks.


#6

You’re on the right track, but it looks like you’re trying to hurry through the projects a little too fast. Codepen has been working great for me so far.

Here are a few hints:
Codepen has a CORS requirement. Something like this will work: $.getJSON(weatherAPIurl, function(weatherObj) { … });

Openweathermap charges for https access. (And if you tell somebody not to push a button 10 times in a row, they will.)

Make sure isNaN has the right capitalization.

It’s ok to leave the eye candy until you get the functionality going.


#7

Also, using CodePen is by no means a requirement. I often recommend people to just start in general with developing locally because CodePen abstracts a lot out and people never really learn how to set up a development environment. CodePen also comes with some fun bugs that people sometimes get tripped up over (hello, collapsed nav bars on mobile not working…) that aren’t actually issues once you’re in a normal browser.


#8

In regards to the ID’s, you could use jQuery selectors $(".className"), $(“elmentName”), and $("#idName"), or if jQuery isn’t you cup of tea you could use vanilla .getElementsByClassname() or .getElementsByTagName(). The goal is that you want to keep you HTML as readable and scalable as possible, so that when you start making larger project you don’t have to find yourself converting tons of elements with ID’s to classes. Classes are just safer.
All Codepen really does is provide a provide a prettier shell for your front-end projects. It takes care of header files, cross browser support, external libraries, and compiling all at the click of a button. It doesn’t really change your code in any way, so much as give it context. Most likely if something isn’t working in Codepen it isn’t just Codepen. Cross-browser support sucks but is nonetheless important to consider. Safari may do things one way, and Chrome/Firefox/Codepen/JsFiddle may do things another.

Oh P.S. ran Firefox’s debugger over your code. Your issue is that your AJAX requests are requesting http addresses, while Codepen is an https site. This creates a mixed-content error, and the data wont load due to security reasons. This error wouldn’t occur if you loaded the code locally, because your computer is requesting the actual files, not Codepen. To fix this, all you should need to do is add “https” to all the url’s you’re requesting, instead of just “http” :slight_smile:


#9

Being a newbie to web development I’m not able to offer much critical insight but one suggestion is to use Cloudinary to host images/assets online - http://cloudinary.com/


#10

Thanks megaboy101. That’s very helpful. I will edit my projects to try what you say. If that works, that will save me a lot of grief.

Re id, one other quick question. What about

<a href="#someid">...</a> 

for inter-page jump. Doesn’t this have to use an id?

BTW can you recommend a useful, reliable html/javascript/etc editor?


#11

Thanks, bethqiang. When learning, I like to stay close to the metal, so initially stay pure with HTML, CSS and javascript. It’s a little long-winded, but at least I don’t have to contend with a library that might not be fully documented and possibly has some tricks of its own (or might not).


#12

Thanks, Ireyni. I have been moving pretty fast, but first, I am an experienced developer of technical applications, and also, I found that when learning, quality is less important than quantity. See this very interesting article:

https://blog.codinghorror.com/quantity-always-trumps-quality/

As far as weathermap charges, they don’t have my credit card, so who would they be charging?


#13

Thank you so much. This was really helpful !! :heart_eyes:


#14

Anchor tags only link to ID’s, and rightfully so. The reason you cant link to classes is that you should only ever link to 1 HTML element. It’s not like you should never use ID’s, it’s just that they aren’t used as much as you would think. The only reason you would use an ID would be if you needed to ENFORCE the unique-ness of an element. Anchor tags are a good example, because you want to enforce that it links to one path and one path only.

In short think of it like this, if an element simply cannot be replicated somewhere else in your code without causing some sort of layout/function error; use an ID. In just about every other case, use a class. That way in the event you want to copy some code someplace else, like having the same button style for multiple buttons, its as simple as adding the class name.

As far as text-editors go, I have personal experience with 4. If you want an online/cloud editor, cloud9 is your best bet. It’s free, recommended by FreeCodeCamp, and gives you infinite workspaces. A good alternative is Codeanywhere. You only get one workspace free, but it doesnt require your credit card info, and it gets past my schools firewall, unlike cloud9 ;).
For offline editors I’ve used Atom and WebStorm. Atom is my personal editor, and 1 its free/open-source, 2 its made by Github, 3 its built on Electron so all the code for the editor is written in JS, and 4 I love how easy it is to add plugins like linters/file-icons/emmet. It’s my recommendation, especially if you’re a beginner it’s very friendly. Webstorm on the other hand is for the more heavy duty/professional developer. It’s developed by JetBrains, who also design editors for Java, C++, Python, and Ruby. It’s $90, but free to college/high school students for education purposes. Webstorm has a built-in terminal, database manager, refactoring engine, and is basically specifically built to handle anything a web developer can throw at it. There is a steeper learning curve, and you probubly won’t use half it’s functionality unless your a professional.


#15

Thanks again, megaboy101. Now I understand your logic, and these are great points. Thanks also for the editors.

Steve


#16

Gotchu dude :point_right: :sunglasses: :point_right:


#17

I meant that you probably got a ‘connection refused’ error because the free account at openweathermap only allows http.


#18

Oh, that’s very interesting, Irenyi. That means for this application code pen cannot work no matter what I do (unless I pay, which I will not).


#19

No worries. I found this one works best with Code Pen. Other good ones to know are lorempixel.com, placekitten.com and placehold.it. My choice of code editor is Sublime Text (if your on a Mac then CodeRunner is handy to have too).


#20

Sorry, but what’s the point of submitting CodePen projects that do not even work? Do you expect us to copy-paste the code?

You might want to use GitHub Pages (free) to host your projects if they do not work on CodePen. You can provide a link to the source on the page itself.

Other than that, based on the examples that did work for me: nice work so far!