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.
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!
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.
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
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.
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.
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.
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.
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â
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/
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).
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:
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.
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).
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!
