CodePen - a modest reflection on web development

1

As I proceed through the FCC advanced challenges, I find that I am finally able to create a web page that has a more-or-less professional look and, more importantly, considerably more functionality, than I could initially. The pages become usable by myself, family, friends and others. The functionality can go far beyond the requirements of the particular challenge, and this development gives me the additional satisfaction that I am learning a great deal and that I am not merely handing in homework.

I develop locally, using text editors, and this proves (for me) a powerful development environment, since I can have many large text pages visible at the same time. The problem is that, when I copy to Code Pen a page that works perfectly locally in Safari and Firefox, something entirely simple, that should work out-of-the-box, suddenly does not work on Code Pen.

The instance which triggered this reflection is that I could not load a pdf (loaded into Code Pen assets) into an <ifile> element, thus completely obliterating the look and usability of the page. (https://codepen.io/sbrawer/pen/ggWwJJ?editors=0010 , line 26 of HTML editor). There have been other problems as well, but you get the idea.

This is a serious problem for those of us who wish to show our pages not just to FCC members but to others as well. It is not JUST seriously embarrassing. It has professional ramifications. (It is also discouraging.) I don’t know what to do about it, but FCC has put a great deal of effort into this training program (greatly very much appreciated!!), and these sort of basic (if not trivial) issues should not arise.

GitHub is not the solution. One thing I can think of for myself is to create a web site on a host and use a URL from there as the reference when submitting the challenge. I would prefer not to do this at this stage in my education. And it costs money.

Perhaps a two-part solution for FCC: Use Code Pen for development, but also host the final product “bare”.

I appreciate that I do not know the ins-and-outs of how FCC is managed, I don’t know how to solve this problem, I am speaking from ignorance, and please don’t take these comments the wrong way. I will continue with the challenges, and will almost certainly continue to benefit greatly from them. But as my pages become more complex (and more useful), maybe Code pen can no longer be my repository.

Thank you.

Steve

2

I’m not sure what you meant here, but I’m submitting my FCC projects through Github-pages links. As an example: https://alchermd.github.io/weather-app

It’s free and easily integrated if you’re using VCS when developing locally. https://pages.github.com

Kindly disregard if I misunderstood your post :smiley:

1 Like
3

You can also host static pages with surge.sh

4

Thanks. I’ll look into it. BTW, I followed the weather link, but the page doesn’t seem to be working.

5

If you mean there are no weather-information displayed, the app should ask for your permission to enable geolocation. So try to reload and then confirm it :slight_smile:

6

I didn’t see any permission, but anyway I never turn on location. I would enter a zip code, city, state.

7

Yes; I’d definitely pursue the pages.github route. You get a live site that you can share with your grandma, who is more impressed by “It shows my weather!” than “Your AJAX call has an error handler!”, and you get to write Big Boy Code on your own machine and practice pushing commits.

As I understand it, the fCC policy of steering people toward CodePen is for simplicity’s sake; they don’t want the hassle of setting up a local editor to get in the way of learning or derail beginners. But it’s also official policy that you don’t have to submit projects via CodePen; github links are fine (though I’d include a link both to the live demo and the code repo).

1 Like
8

I will try github.pages - reading about it now. One question. If I include a link to the live demo, would I put the URL to the code as an anchor (<a href=...>? Or would the “show source” of a browser be sufficient. I suppose the link is better if the page requires multiple files (such as SCCS or different js files).

I’m definitely a beginner to all this. Thank you for your comments.

9

Personally I would recommend that. It is far more convenient for reviewers.

10

I can confirm your site works.

Are you using an older browser? If not check your permission settings, you may have it set to always disabled.

11

Thanks. All my S/W is up-to-date. I had long ago explicitly turned off location on Safari. I rarely turn it on even on mobile devices.

12

just an FYI regarding your “solution” -

[Warning] Unexpected CSS token: : (bootstrap.min.css, line 5)
[Warning] Unexpected CSS token: : (bootstrap.min.css, line 5)
[Warning] Unexpected CSS token: : (bootstrap.min.css, line 5)
[Warning] [blocked] The page at https://alchermd.github.io/weather-app/ was not allowed to display insecure content from http://www.geognos.com/api/en/countries/flag/US.png. (jquery-3.1.1.min.js, line 4)

[Log] broken clouds (main.js, line 121)
[Warning] [blocked] The page at https://alchermd.github.io/weather-app/ was not allowed to display insecure content from http://openweathermap.org/img/w/04d.png. (jquery-3.1.1.min.js, line 4)

[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (main.css.map, line 0)
13

Yeah, I’d say a link to the github repo with the code (e.g. https://github.com/AbdiViklas/firstgradespelling --NB not a working project), as “show source” shows what the browser has compiled into the DOM, not necessarily your html etc. (e.g. if you had the JS insert some code into a certain div instead of you writing it in the html in the first place, the browser shows the end result). Like thus: https://forum.freecodecamp.com/t/lets-discuss-your-javascript-calculator/5984/14?u=abdiviklas

14

For sure I recommend going above and beyond for each project if you can, I always feel more confident after each project. And it allows you to experiment and try new things, actually this is what it is all about gaining both experience and the ability to learn and grow on your own adapting to each project/concept.
You might recognize some of my fcc projects :slight_smile:

15

Thanks, Tommy. Very nice work in your projects.

16

@sabrawer We’ve built a full fledged online code editor at Habemus https://habemus.io/. It is a code editor with live preview and remote debugging, and from the very beginning we give you a public shareable URL (e.g. my-project.habemus.website). It is also integrated with a static website hosting service, so you can publish and connect with your own domain.

We’ve built this tool exactly to address the need you’ve described in this thread. Would you mind giving our tool a try and telling us what you think? Thank you very much

17

Thank you simonfan. If you recall my original post, I said: "I develop locally, using text editors, and this proves (for me) a powerful development environment, since I can have many large text pages visible at the same time. "

So I probably wouldn’t use an online editor for work on a regular basis. Generally, also, I am biased against online editors. Among several reasons, that requires one being online, and since my provider is comcast, the king of network dysfunction,…

That being (un)said, your site may be useful for hosting and for small maintenance changes. I would like to try out your product. I should get some time within the next few days (hopefully). I will let you know.

Thanks again

Steve