I have recently been working on a personal portfolio website. For this project, I have decided to implement the Three.js library. I have downloaded this library locally on my laptop. Locally, the website runs as intended. I am now at the stage in which I want to deploy the code into github pages. I have tried to add the Three.js library to the repository, however, Github says that there are too many files to add. This causes the HTML and CSS to load properly, however, there is a white screen in place of the Three.js scene.
How do I add the library to the repository, or is this even possible? I have also seen some information regarding using a CDN instead of uploading the library. If this is the optimal solution, how should I go about implementing this?
Related
I'm fairly new on the React scene and just finished a few small react applications. I deployed two of these applications to Github Pages, and they both function perfectly.
However, I noticed that the files in my repository are minified. Not only that, but the language meter shows it as 100% html. It's nitpicky, but I'd like for it to display JavaScript/CSS too. I would greatly prefer my files be visible, just in case anyone wanted to look at how my application was built (mainly recruiters).
Is there some way to make these files visible/UNminified without sacrificing performance?
Is there any reason I wouldn't necessarily need to undertake this? --> (would employers care?)
You're committing your built project, but you should upload the source code!
To expose your github pages you have to build the project inside the docs folder, so you can have source code and build on the same branch!
I am trying to serve a React widget for a Chatbot messenger like Intercom widget. Everything works fine until the SEO team argues with me about the size of the downloaded script.
I'm using:
React 16.13.1
React-scripts 3.4.1
Typescript 3.9.6
Redux 4.0.5
Styled-components 5.1.1
Material-UI 4.11.0
...
It weighs ~570k (gzipped) and that costs around 25 points on Google lighthouse benchmark.
So, just like Intercom did when they face the same issue, I split my code into chunks using dynamic import() feature. Now, when I run the benchmark it gives a good mark (I gain ~15 points) and everything goes green on dev mode.
But, I'm not sure anymore:
how to integrate my widget's chunks on customer's pages? (of course not as they are in dev mode: 5 separate script tags)
Which chunk/script from the generated ones should I use, and which one come dynamically?
do chunks really call each other only when needed? (because they don't look so!)
Do orders make a difference? (JS so I think it does)
I used to integrate similar script before modification:
<script
src="cdn.myhost.com/script.min.js"
data-lang="en"
data-license="XXX-XXX"
data-options='{"tags":["test"]}'
/>
Any suggestions will be helpful!
I am trying to get more experience by implementing various web visual effects that I've seen online. The one I'm working on is to create a 'cursor trail' effect where the cursor trail is used to reveal a background image. For more context, you can find the inspiration for this effect here.
The CodePen that I have linked above contains an HTML file, a CSS file, and a JS file. For starters, I am trying to transfer this functionality into a simple React app. To do this, I first initialized a basic/vanilla react app:
npx create-react-app cursor_trails_effect
I'm having trouble incorporating this cursor trails effect into my React app. From the CodePen, I'm easily able to integrate the HTML and CSS parts into my React app, but am unsure how to connect to and execute the JS script that is part. Yet it makes me wonder, in general, how someone should go about integrating such a JS script into the React framework of web development?
Prior to posting this question, I conducted considerable research to understand how to execute scripts from external (.js) files, or use the <script> tag in React, and have tried to use a number of packages that claim to accomplish this (such as 'react-load-script', 'react-render-html', 'react-script-tag', 'dangerously-set-inner-html', 'react-helmet') but to no success.
I found reveal.js but I couldn't find a simple working example.
I found this but they are either too complex or cannot find the source.
Does anyone have a simple example?
The reveal.js repository on GitHub is in itself a demo for a simple presentation.
You can simply fork the project on GitHub, clone the fork to your local file system and edit the index.html file in the root directory to get started with your presentation.
I myself have created several presentations this way, most recently this one: https://github.com/pahund/devugees-prez-oct2017
If you create your presentation on a special Git branch named gh-pages, you can even view it online without having to deploy it to a server, for example: https://pahund.github.io/devugees-prez-oct2017/
If you don't want to install all the components (around npm) needed to use reveal.js, you can still use a docker image like agiled-de/reveal.js-docker
This images makes it easy to use reveal.js with docker. It supports the use of the following plugins:
MathJax Enables you to write LaTeX formulas in your presentations
reveal.js-menu Adds a menu to test themes, transitions and jump to slides
Chalkbord Write on your slides or on a chalkboard
Reveal.js-Title-Footer Adds a footer that will stay on every slide
Charts To create charts within your presentation
vis.js To create graphs in your presentation
And it has a demo_presentation/index.md included.
Thought I would open this question to the javascript community. Does anyone know if its possible to combine CKEditor into 1 file? I want to try and integrate it in one of my desktop applications which uses a web viewer - I can execute one flat file in my web viewer internally in my application otherwise I'll have to reference to the CDN which I'm hoping to avoid. I want to develop an app that does not require external web service.
Performance should not be an issue as the file would be in my application running locally - I would include all the licenses/readme etc etc.
Is there a tool out there that can help me to achieve this, and has anyone done it or is not possible due to the architecture - the way CKEditor has been written?
Thanks
CKEditor loads some JS files on demand (i.e. dialog definitions). There are also several skin CSS files, sprites with icons and separate langfiles. I hardly think there's any reasonable way to combine all these resources into a working JS bundle without architectural changes.