I am now working on a react ecommerce website and I have encountered an issue that I forgot to give keys to the lists I rendered. So, I was wondering if there is a way to see one file which contains all the code for that web app, like in Sass , we write code in different files but we are able to see the massive file that contains all the code that we wrote across multiple files.Even if we can't change that file, it would be nice to see how many lines of code are there. So ,is there a way to do that?
Related
I'm new to frontend development and thinking about what's a good way to find source code in our code base for a webpage. What I usually do is going to the element tab in chrome dev tool, finding a special class name, and searching that in code base to locate the file. I feel there should be better way for this task. I tried to use source tab in dev tool, but it shows tons of files and folders in navigation column. I also tried to use Components tab since we're using react, but component names are minified to single letters. So want to get suggestions from you folks. How do you usually do this? Thanks!
You have the right idea, the problem is that you are looking at the minified (presumably production) version of the website. In general, while developing a website, you run a development server, in which all of the code (mostly) appears as it is written in your IDE/editor. That way you can find component names and inspect the source code through the chrome dev tools.
You should talk to whoever is currently responsible for the code to help you get a development server running on your machine. Then, you find the component names and then do a "find in files" search through your IDE/editor to see what they are, and where they are used in the code base. There may be many results that you have to sift through. That's par for the course in large code bases until you become more familiar with what goes where. And even afterwards.
I will say; even things that appear simple can be fiendishly complex, so it would be useful for you if the owner of the code could give you a rough outline of how things are organised and why to make navigating the code base easier. But, it will always be a bit hard, and depending on how clean the code is, it might be nearly impenetrable. Good luck.
There are many ways to to find source code or debug Code
①You can use Chrome dev tool
②You can use debbuger in VS
③you can debug your code by puttin debugger in java script code
④browser has good functionality to find
code(For reference please check Image.)
I have had a developer create a website or app in React. This is already on a webserver and does what it should do. Now I want to develop the frontend myself, which would be no problem if I knew how to edit the code.
On the server I have an index.html, some stuff like favicon and a folder. This folder contains the folders "css", "js" & "media" and I don't understand their content. In the folder "css" are for example the files "main.12345.chunk.css" and "main.12345.chunk.css.map" Both look very cryptic.
Now I found out after some research that this is probably a compressed representation. Possibly compressed with Webpack?
But how can I edit these files in a meaningful way and understand what was coded there in the first place? Normally I would just download the file to be changed with Filezilla and edit it with an editor or Visual Studio code, but in this case I have no idea.
Those "cryptic" files are probably minified. Minification is a process where the original code is minified using several approaches, making it much smaller in size and also sometimes better performing. This is done by Webpack with a build process.
Those files are not meant to be develop with (or even read for that matter). Their sole purpose is to be optimized and be run in a production environment. It's very hard or even impossible to understand those, you would basically have to reverse-engineer them to understand what's going on. Many websites actually use minification for this additional bonus of protection of their application logic, because minimization basically obfuscates client side code. For example, the WhatsApp web client written in React is heavily obfuscated, in order to not allow anyone to write a WhatsApp client (there are efforts for this particular example, but it takes lots of time).
TL;DR: You have to get the original source files in order to edit them.
But how can I edit these files in a meaningful way and understand what was coded there in the first place?
They really are not designed for editing.
Edit the original source code to the application, then run its build script and deploy the output from it.
simple problem that I've seen asked in a few places and seems to have no structured answer. Because of this I though I would start a thread here and maybe get something going that will help everybody!
Diving right into it, I have build a react app using create-react-app, compiling this into a prod version using npm run build it does everything that it needs to and completes successfully.
After all of this we can observe the compiled app having multiple chunks.
All good and well until we enter the app and try to navigate to a different page, where we find it is not loading any other chunks besides the chunks responsible for the first page you access when entering the app.
This is the base problem, I realize I'm not giving any snippets or anything but again, this is because the problem seems very general, there are a lot of people with different applications and code looking for a solution to this and haven't found something practical and normal (having messaged some on forums and such).
If anybody needs any specific information to may case please ask and I will happily provide :)
As far as I can tell, this is webpack related or something like that, webpack from what I understand only includes one chunk and then loads the others as needed, is this correct?
If so and if the chunks are created but not loaded when switching to other pages, then it seems like a webpack issue, but what?
When you, then other developers, create a react app and it contains multiple chunks, do they load well?
Any and all information is appreciated, lets try to tackle this issue!
P.S. If you go into the compiled production build and manually add all the chunks, everything works perfectly. I will try to add any and all information to this thread as I find out more.
I've created a web page that's for all intents and purposes, a style guide for other developers working on our application.
I have my .scss files within the _sass directory in my Jekyll project, and it's created all the CSS files beautifully. On my page however I want to display the code from these .scss files in the page within some <pre><code> tags.
Currently I have the code in here repeated in both places. When it was quite small it wasn't such a problem, but now it's got bigger it needs DRY-ing out.
I first went down the path of using Jekyll's {% include [path/to/file] %}, and then realised that only works for stuff in the _includes folder, and I couldn't use the include_relative option either as the _sass folder isn't a child of the location it's used.
Secondly I tried using the angular approach, as I'm already using it in my application. Threw in some <pre><code ng-include="'../_sass/components/_sflButton.scss'"> and expected it to work. Of course, it didn't because the _sass folder isn't generated into the actual site when you run it. And I can't seem to find a way of getting it to include it. Tried changing a few things in _config.yml to no avail.
So, TL;DR, I want to either be able to include the code from my _sass folder onto my page via Jekyll, or find a way of getting the _sass folder to be loaded into the generated site so I can load it in with Angular. Am I trying to do an impossible task here? Willing to listen to any suggestions that mean the code is only written in one place.
The theory behind getting this done is as follows:
_sass is a special directory for Jekyll (similar to _layouts, _includes) that is handled differently in comparison to other directories you create. Its contents are not output to the destination directory.
you can write simple ruby programs and add them to a directory called _plugins and Jekyll will run those custom programs during the build process. (Ignored by GitHub Pages).
Now write a ruby program to "read" the contents of _sass and have the resulting data be formatted as a hash and have this hash fed to existing site_payload
The hash can be additionally passed as a Drop instance to have the data available via the Liquid templates.
I concede this answer doesn't actually solve your problem esp., if you're not familiar with Ruby, and Jekyll codebase. but it'll serve as a starting point..
I am trying to create a .xlsx file with data I retrieve from mysql to a node.js server that serves an angularjs project, but after hours of trying to find something via npm or google I almost gave up!
The two main problems I have are:
My data is in hebrew (i.e. rtl styling + different characters).
The Excel file that I export needs to be styled in a specific way, and it is a pain trying to style an excel file grammatically.
And then I had an idea!
What if I could create a google sheet doc in my google drive as a template including the styling, and then when the user clicks to create a new doc, I would just duplicate this template, and change the values to the new data.
But just trying to understand the google api is a headache on its on, apparently, there are 3! different api's: Drive, Sheets and auth.
So my question is as follows.
Is my idea valid? does anyone think it could work?
Where would I start, is there some guide or npm that would help?
Please don't comment to look in the docs, I am having a hard time to understand where to start from there.
I would suggest creating the template file locally instead of opting to google spreads.
There is a decent module I used sometime back, which does styling pretty well, Its called exceljs.
Though there is always the xlsx module, Which is very powerful but difficult to use
Also if you end up using google spreadsheets, I would suggest giving node-google-spreadsheet module a look