Hide files in developer tools? - node.js

So, I want to apologize ahead of time but I've been googling and stack overflowing for an answer to this question and I just can't find a satisfactory one.
I know that Facebook uses React and, although I don't know what software architecture they use (MVC, Client-Server etc.), I can't see any react files or react components in the dev tools sources tab on any browser.
I'll show you an example in my own react app using create-react-app that shows all my files:
Create-react-apps dev tools sources:
However, when I go to Facebook's page, I don't see anything like that. I see this:
Facebook's dev tools sources:
This isn't only true of react apps, but just node apps I've made as well. Now, I want to know where all of this information is on facebook's page.... Where are the components? Why can't I see them? Where are all the post and get requests being run? How can I put breakpoints in the code for debugging? I mean, I don't even see an HTML page besides the elements tab! And, most importantly, how do I do the same thing to hide my files?
It seems like it adds an extra layer of security that I would think is preferable on all public websites. Once again, thanks in advance and, as far as I know, the answer to this is nowhere near obvious.

I admit, this one little bit confusing when you are quite new on the web development.
You can see your files (source code) via devtool because you also upload your .map files which help map your bundled/minified code into the the original readable one.
However, this is super helpful on development environment, but quite dangerous on production. What you need to do just remove the .map files, as comment suggested.

Related

Which technology was used for?

Sorry for stupid question. I'm learning frontend and backend technology. I'd like to do apps like this easy, but i don't undertand how that was made.
https://thelucky777.site/
It's look very simple only few blocks, but index.css have more then 10 000 lines of code. It has a lot selectors name wb_layoutgrid54, wb_layoutgrid16 etc.
I know react a little and django.
My question is how can i do apps like this without headache? How that app was made?
Having a look at the site, I would be fairly certain this can be achieved using plain HTML, CSS and some Javascript/jQuery to help with the animations.
When it comes to development, my personal opinion is take for example a site, it can be developed many ways using different tools to achieve the same outcome. To make this less of a headache I would develop a wireframe and break things down step by step what you need to do without thinking what tool(s) was used and once you get an outline start to slowly build and research how to do certain sections using your skillset.
Overall I will still state that it can be done using basic tools such as HTML, CSS and some Javascript.
I hope this helps :)

2 people working on 1 HTML file simultaneously

My freind and I want to setup a collaborative project where we both work on a HTML file (and do PHP) at the same time (bit like Google Docs share feature). I want to be able to work with him to teach him certain things in PHP and HTML while I also code at the same time. Any suggestions? I have a VPS I thought we could use for it so nothings really going to get in our way. Maybe something like GIT or something?
Sounds like what you need is a real-time collaborative text editor. Here's an extensive list from wikipedia.
I use Google Docs personally but Microsoft has added this type of functionality into Office and there are a slew of desktop and online tools on that link. I had looked into Etherpad before but i don't remember enough to suggest one or the other. All of the links are on the wikipedia article so I won't repeat here.

NodeJS Skinning

Is there a module or similar things that support skinning in NodeJS? I want to build a NodeJS website, and want to be able to re-skin the website as I like without much efforts, like in Wordpress.
Is skinning supported in NodeJS?
If you're interested in building a website in Node.js and don't need a wordpress-style cms behind it, there are few projects that can help you out.
Have you looked into Bootstrap? It's built with less which you can easily plug in to your Express setup (see the guide here, using the command line executable to set up a new project you can specify less like this: express --css less myapp and it will do all the work for you)
In the bootstrap less file are several variables you can use to change the colours, fonts, sizes, etc, and it's also got a lot of helpers for grid layouts and responsive designs.
It even includes a few useful javascript plugins too which make the ui nicer with less work.
There are also a lot of sites with themes and theme generators around which then work on top of bootstrap, and may achieve what you want.
Plugging in this sort of solution (whether bootstrap or other) is about as close as you can come to getting skinning for node; As otherwise suggested if you're looking for a CMS out of the box as well, probably best to look for another platform like Wordpress.
Node.js is not a content management system. It is a platform on top of which you could built a web server with a content management system. To answer your question you need to be looking for node.js based content management systems that support themes.
The only node.js CMS that I am aware of is Calipso. It's still pretty alpha-stage. It may have some theming support, but it is nowhere near as polished as Wordpress.
Also is there a reason why you want to use node.js? I mean there is nothing wrong in using Wordpress for creating a themeable website - it is just awesome for that.
If you just want another OnlineShop, or maybe a blog, i think nodejs is maybe not your right choose as Jed Watson told.
If your requirements are more complicated, and you want a quick and easy implementation of a nice web interface, and you have html, javascript, and css knowledge... I strongly recommend you just trying to work with MEAN.js
It puts together MongoDB Expressjs, AngularJs, and NodeJs.
Use this, for example with a yeoman fullstack constructor and you will have a powerful webapp, with user autentication, and much more in a few minutes.
After that, the use of jade, less, scss, and similar languages of modelling the front, and the easy way you can also model collections in the back, is for me the best combination you´ll find for creating a website today.
Hope it´ll help you
King Regards

Building a web site with photo uploading possibilities with node.js

I'm new into Node.js and my intention is to build a web site similar (but way less complex) than Imgur, where uploading images is possible by dragging photos from desktop to the browser.
For this I want to use Node.js and MongoDB.
I have been looking around everywhere and found a lots of tutorials (many of them out dated) for setting up a database, but none for file uploading. Node.js and all it's modules is like a jungle, and it really isn't easy to know which modules to use in which type of context.
So, what I really could use here is some help with suggestions of tutorials and/or modules that may fit for this purpose. What is the easiest and best way to get started with this?
This is a school project that I need to do (I selected Node.js for server side myself, not knowing how complex it really is and now it's to late to change), so I would really appreciate your help here.
Thanks in advance!
You can get away without using most of the node.js modules aside from the mongodb driver. Express is a popular framework for web applications, but it might even be overkill here. Really, you just need to serve some HTML with the drag and drop code, and then be able to receive and serve images. It's probably less than 50 lines of code in actual node.js, plus whatever frontend code you have.
Check out this tutorial for the image upload portion on the node.js side using express:
https://github.com/visionmedia/express/blob/master/examples/multipart/app.js
Here's a tutorial for the frontend drag and drop functionality:
http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/
Update You might also consider http://mongoosejs.com/, which makes mongodb interaction a bit easier--but the native driver isn't too bad to use by itself.

Getting started with Gmail Plugin development

I would like to get into Plugin development using the Gmail API and as such I would like to ask those who already have experience in it a few questions.
What language / languages should I be familiar with? I'm not familiar with Python, PHP, or JavaScript. Will I need to pick up on these?
What level of control do I have on what my plugin can do? Can I for example change the interface or add shortcuts or RSS feeds as a sidebar?
I know a lot of the examples mentioned already exist but I would like to try my own hand at it.
Peter posted a solid list of the official Gmail APIs.
On the other hand, most of the major plugins that you may have heard about are browser plugins that just modify the page source directly, even though there's no official API for it. There used to be a GreaseMonkey API that was a good starting point, but that wasn't supported and no longer works. Best place to start is with a copy of Chrome, creating a content-injection plugin that works on the Gmail page.
Happy to provide some further details if you can clarify what you're going for since I went through this myself a few months back.

Resources