I just started Front-End-Developing and wanted to use Frameworks to make it more simple. So, I discovered Tailwindcss. However, tailwindcss requires my server to have node.js and npm in order to install it and i cant really install these packages on my server. Thats why I wanted to ask if you can use Frameworks, like Tailwindcss or React, without installation. I then later discovered a website called "skypack", where all those packages can be used without installation. Now, in my HTML-File, where I wanted to install Tailwindcss, I have the following written:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="module">
import tailwindcss from 'https://cdn.skypack.dev/pin/tailwindcss#v3.1.8-diwqGRTxzuOsx0Oh1GvI/mode=imports/optimized/tailwindcss.js';
</script>
<div class="bg-sky-400 aspect-square"><p>test paragraph</p></div>
</body>
</html>
Unfortunately, the css isn't applied on the paragraph. Did I import it wrong? Does skypack work at all? And are there other ways to implement Frameworks without npm?
Thanks!
You can use tailwind CDN
Add these following lines to the <head></head> tag of your HTML page
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
</head>
For development and/or testing purposes you could use tailwindcss's "Play CDN" option. You can find instructions for that at:
https://tailwindcss.com/docs/installation/play-cdn
For production use you'll really want to follow their instructions here:
https://tailwindcss.com/docs/installation
You'd do that on your desktop/laptop computer or wherever you're developing locally, not on your server. Then run the CLI build process. That process will generate the CSS files you actually include in your HTML.
You don't need to install Node.js and npm on your server. You just need it on your development machine, then you upload the generated files to your server (or however you deploy your code when it's ready for production).
Disclaimer: I'm not an expert with using tailwindcss or even Node.js, I'm just getting into it after having written CSS/JS/HTML by hand for many, many years.
Related
I am using Tailwind CSS Play CDN for local development, and would like to use PostCSS to build a production version
Basically every time I need to manually replace the following line in index.html
<script src="https://cdn.tailwindcss.com"></script>
with
<link href="/dist/main.css" rel="stylesheet">
before pushing to production site
What is the best way to do that automatically each time I publish the website?
Quotes from tailwind docs
Use the Play CDN to try Tailwind right in the browser without any build step. The Play CDN is designed for development purposes only, and is not the best choice for production.
So you need to use build tools like webpack, Rollup, Vite, and Parcel
Tailwind CSS with Parcel
Using Postcss
I'm working on this app that needs to be as simple as possible plain vanillaJS, not npm packages if possible. I have been working with firebase and the way I have been working with it is by using the cnds as follows:
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-messaging.js"></script>
All good until here..but when I tried to use the admin cdn and got a 404 errors since it wasn't found.
<script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-admin.js"></script>
https://firebase.google.com/docs/web/setup
I didn't find the cdn on the docs, is it different? does it even exist?
Thanks!
What you're trying to do is not supported. The Firebase Admin SDK is not meant for use in web browsers. It's for backend/desktop code running nodejs.
You can see the instructions to get started with Firebase Admin here. You're expected to be using nodejs and npm to install the libraries.
When using Bower Components, I tend to link directly to the files located in the bower_components directory. For example when I work with Foundation, here is how I link my JavaScript file:
<script type='text/javascript' src='../bower_components/foundation/js/foundation.min.js'></script>
However, I've noticed a lot of people copy the Bower components to a library directory (using Gulp or Grunt) and then use the components from there. Is there a benefit to doing things that way?
I believe developers choose to pipe their components through gulp or grunt to control the dependencies through source control and to have a safer way of using their dependencies in case one just stops working. This article might be able to help you understand.
I have an ASP .NET MVC 5 project. The template came with bootstrap, and I have generally left it alone. I now want to use the Bootstrap source as well as Bootswatch variables files for styles. Previously, I have put all the resources needed to build the libraries in to a separate project and written a custom build script, but there must be an easier way. I have found a few related packages, but none provide anything comprehensive.
Are there premade NuGet packages that will set up the two libraries? If not, what do I need to do to get it up-and-running (including automatic build in VS)?
Depending on the setup of your project, it may be better to get your Bootstrap-specific CSS from a CDN, even if using MVC.
Check Bootstrap CDN as well as their Bootswatch resources for quick easy usage:
<!-- Default Theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<!-- if you wanted Amelia, use this instead: -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/amelia/bootstrap.min.css" />
I just came across Gumby Framework and I've downloaded the zip file from their website. When I looked up some 'tutorials' online, I've found that they were talking about tools like Bower, etc. I couldn't really understand all that so I kept it aside for the time being.
I went thru the zip folder. I've found various css, img, js, etc folders. I found a few webpages which listed the UI components, etc. Now what I did is, I made a webpage of my own and I used its navigation bar, div elements, etc. I edit the CSS file in between to suit my paragraphs, etc.
But when I look for some help on Gumby Framwork, I almost always find a mention of this Bower tool.
Is there something I'm doing wrong? Should I continue using Gumby the like how I'm doing now or should I actually look into this tool?
I did a bunch of these tutorials: http://webdesign.tutsplus.com/series/getting-to-know-gumby--webdesign-16738
You don't have to use Bower if you don't want to. Whatever Works™
But it might help if you understood a bit more what Bower is and what it's doing exactly.
From the first sentence on their website, Bower is just a package manager for the web. If you've used npm install for Node, sudo apt-get install, Ruby Gems, etc. then you should be familiar with the general premise of package managers.
Bower links to repos that have a bower.json file in them and that have been published to Bower. Here's a search tool for them: http://bower.io/search/
Basically, when you do bower install foo it will find the foo package and clone the repo to a folder in your project called bower_components.
Why would we want to do this? Free updates! Easy versioning!
Say you want jQuery. You could go to jquery.com, click on the download link, right click the file, save as, go to your index.html file, add the script tag for it; or just link to a CDN (this is actually kinda preferable but let's pretend it's a bad idea this time, let's pretend we have a boss that really wants a local copy).
Okay... we can do it that way... or we cd ~/path/to/project then bower install jquery
Test it out with this code. Notice the bower_components/package_name/exact_file path that you should be using.
<html>
<head>
<title>foo</title>
</head>
<body>
<button>Click me</button>
<script src="bower_components/jquery/jquery.min.js"></script>
<script>
$(function() {
$('button').click(function() {
alert('It works!');
});
});
</script>
</body>
</html>
Now check it out. Your boss just came in and wants you to switch to an old version of jQuery instead so you can support IE or something. Type bower info jquery to see what versions are available. Cool. 1.10.0 is what we want. Now type bower install jquery#1.10.0. Bam, you're using the right version.
The downside to using Bower is that it pulls in a lottttt of stuff you might not need/want. For instance, we're just using one file for the jQuery import, but now we have something like 10 extra files just sitting around.
The upsides are great though. It only takes a minute to learn how to use and then you'll be versioning/updating like a pro.
So, to answer your question, you can either keep using a web gui to download .zips and all that crap. Or you can up your game drastically in 10 minutes. I suggest the latter. =)