I want to add a like button, for every post on the homepage of my jekyll blog
I didn't find any plugin. I don't want any facebook's like button that connects to company's/product page likes.
I want a like button which is independent from any social platforms and only relates to post.
Something like this
Short answer: you can't.
Long answer: your button will have store the "likes" somewhere (usually a database), which is by definition a dynamic process. Jekyll can only generates static data.
You can bind your button to an external service, e.g. LikeBtn which provides such functionality (the free offer miss advanced features like statistics).
Whatever the service you choose, it will usually work by adding a javascript snippet, as with google analytics. You can see how to use google analytics with jekyll to help you (e.g. here).
Yes it is possible to add a like button and track number of likes by writing your custom JavaScript code and a database to your Jekyll generated static sites.
So coming to the database as it is a static page and doesn't involve any server, it is not possible to interact with database directly but there is a way.
In my case I am making use of firebase. Firebase by Google provides us many capabilities like storage, database , hosting and also access to serverless architecture using functions.
So coming to the point, all you need to do is register with http://firebase.google.com
Then create an app and then in your JavaScript add following code in head tag
<script src="https://www.gstatic.com/firebasejs/5.9.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
var timestamp = new Date().valueOf();
var obj = {};
obj[timestamp] = "1";
firebase.database().ref('/').update(obj)
</script>
For more details,
You can visit my blog on this topic
https://xyzcoder.github.io/firebase/2019/03/17/firebase-real-time-database.html
Note: we can also implement security restrictions on who can read and write data to our json store
Thanks,
Pavan
Related
I am new to web development and need your help to figure out how to use the form in HTML and use the data to populate the said field in a word document. Any advice on how to approach this problem is highly appreciated. It would really help if you could post a live example for the below. Please,do let me know if any further explanation is required.
As a new developer, I want to advise you that you are getting into some challenging territory here and many of the solutions might require some heavy experience with programming and MS Word. In this forum, there are many options you can try, but from what I gather you will need to learn about macros.
The second option you could try are some services that will do this for you for a fee. Here are two options. Check out Formstack or Jotform
If you use this type of service, you would create a form action within your html code that will merge the data from the form into the Microsoft Word Document using merge tags.
The third option you can try is using Javascript within the form to populate the Word Document. The code would look more like this:
function Export2Word(element, filename = ''){
var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>";
var postHtml = "</body></html>";
var html = preHtml+document.getElementById(element).innerHTML+postHtml;
var blob = new Blob(['\ufeff', html], {
type: 'application/msword'
});
// Specify link url
var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);
// Specify file name
filename = filename?filename+'.doc':'document.doc';
// Create download link element
var downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob ){
navigator.msSaveOrOpenBlob(blob, filename);
}else{
// Create a link to the file
downloadLink.href = url;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
document.body.removeChild(downloadLink);
}
Export HTML Table Data to Excel using JavaScript
HTML Content:
Wrap the HTML content in a container you want to export to MS Word document (.doc).
<div id="exportContent">
<!-- Your content here -->
</div>
Last option would be using PHP, and I recommend watching this video by CodexWorld and reviewing the post that goes along with it here. This is a challenging concept, so I would encourage you to take your time.
Hopefully this will help and best of luck.
Well, I don't know how to exactly do that, I am also a beginner like you. What seems to help you might be connecting your form with Google Sheets. The Google Spread Sheet will store all data submitted via your form. You can then use this data wherever you want.
There is an open source project for this task, you can do that by following the steps stated here: https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
You can see it in action here: https://nisootech.vercel.app/#contact-me
There are two parts in your application
Enabling user to input the values in frontend. Which you can build using any frontend technology stack eg: HTML and Plain Javascript(Required for calling the Services), React JS, Angular etc.
Backend Service which will basically does the heavy work
Receiving the input from user.
Creating Word file using any libraries such as
Generate word files using Apache POI ,
Using Node.js to generate dynamic word document using Database value
Downloading the file after its completely generated using the values supplied by user.
download a file from Spring boot rest service
how to download file in react js
For the Backend service you can use technologies like Java and Springboot, Python, Node Js etc.
Building Restful webservices using spring
Use Technology in which you are more comfortable and start building. These Links and documentation you can use to start from basic.
Suggest you to breakdown your problems focus on each specific areas and do the development as per your smaller problems and integrate them later.
I have a personal website that's all static html.
It works perfectly for my needs, except for one tiny thing.
I want to dynamically change a single word on a single page: the name of the current map for a game server I'm running.
I can easily run a cron job to dump the name of the map into a file in the site's html directory, call it mapname.txt. This file contains a single line of text, the name of the map.
How would I update, say, game.html to include this map name?
I would very strongly prefer to not pull in some massive framework, or something like php or javascript to accomplish this.
I want the lightest weight solution possible. Using sed is an option, although definitely a hacky one. What's the tiniest step up from static html?
If you say "dynamically", do you mean:
If the information changes ...
A) the user should see it after they have re-loaded the page?
B) the page should update without the need to reload?
For A, you can use PHP (or any other language your server supports) to read the data from the file and print it into the web page. This will happen on server side.
For B, you can use JS that queries the file and updates the HTML. This will happen on client side.
To change text there are a few way though only two appropriate methods.
First is using textContent:
document.getElementById('example').textContent = 'some example text';
Secondly is the older nodeValue however it's a bit more tricky since you have to specify the exact textNode (e.g. .firstChild):
document.getElementById('example').firstChild.nodevalue = 'some example text';
You're 100% on the mark about not using frameworks or libraries, almost everything exists without the suck.
I'm not going to test this though this is a very stripped down version of my ajax function from my web platform. Some people might scream about the Fetch API however the syntax is an absolute mess. I recommend figuring out how to standardize this function so you can use it for everything instead of making copies of the code for every instance. Mine supports both GET and POST requests.
function ajax(method, url, param_id_container_pos, id_container)
{
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.timeout = 8000;
xhr.open(method,url,true);
xhr.send(null);
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4)
{
if (xhr.getResponseHeader('content-type'))
{
var type = xhr.getResponseHeader('content-type').split('/')[1];
if (type.indexOf(';') >- 1) {type = type.split(';')[0];}
}
else {var type = 'xml';}//Best guess for now.
console.log(type,xhr);
console.log(xhr.responseText);
//console.log(type,xhr.responseXML);
//document.getElementById('example').textContent = xhr.responseText;
}
}
}
You're also going to have to ensure that the url is set to an absolute path. I use path variable in my platform (see my profile for the link, wildly clean and organized code).
There are plenty of ways to make this function reusable and I highly recommend doing that. For now use the last non-curley-bracket line to update your line of text.
Let's imagine this:
I have to download an XML document from an URL;
I have to elaborate this document and persist its information in the database, creating or updating a lot of entites.
I think the best way is to use queues. Or maybe I can also use cronjobs.
My problem is this: if I use the same app to do the heavy tasks and also to show to the end user the results of those heavy tasks, it may happen that the heavy tasks slow down the main website.
Take a more concrete example from real life: Google Search Console (or whatever other app that does heavy tasks and shows results to the end user).
Google Search Console gets the XML map, then starts downloading each webpage, on each webpage performs a lot of analysis, then saves the results to a database and so the end user can see the errors of his website and other useful information.
So, put as hypothesis I want to build again Google Search Console as a Symfony app, which are the possible approaches?
I think that for sure I have to use queues, but the app that downloads the webpages and the app that processes these webpages and the public frontend that shows the result of these operations are the same app or are two or three separate apps?
That is, have I to create a unique application that does all these things, or I create an app to download webpages, one other to process these webpages and one other to show to the user the results?
I'm thinking a lot at this, and I'm not able to find a good design to follow.
Because my istinct is to create multiple apps for each of those tasks to make the workings but it seems that create multiple Symfony apps isn't a good choice: Symfony 2 multiple apps?
So I really don't know which path to follow: multiple apps or one big app? And if I use one big app, should have I to use cronjobs or I have anyway use queues?
I will first detail the architecture :
You can do an Service like this :
namespace SomeBundle\Utils;
use SomeBundle\Entity\MyEntity;
use SomeBundle\myException;
class SomeService
{
private $var;
public function __construct()
{
}
public function doStuff()
{
// Do stuff
}
}
To debug you service, you can call it from a testController or basic Controller.
You can make Command like this :
namespace SomeBundle\Command;
use Symfony\Bundle\FrameworkBundle\Command\ContainerAwareCommand;
use Symfony\Component\Console\Input\InputInterface;
use Symfony\Component\Console\Output\OutputInterface;
use SomeBundle\Utils\SomeService;
class SomeCommand extends ContainerAwareCommand
{
protected function configure()
{
$this->setName('some:command')
->setDescription('My awesome command');
}
protected function execute(InputInterface $input, OutputInterface $output)
{
$container = $this->getContainer();
$sevice = new SomeService($container);
$results = $service->doStuff();
}
}
You can do an Command Application like this :
require __DIR__.'/vendor/autoload.php';
require_once __DIR__.'/app/AppKernel.php';
$kernel = new AppKernel('dev', true);
use SomeBundle\Command\SomeCommand;
use Symfony\Bundle\FrameworkBundle\Console\Application;
$application = new Application($kernel);
$application->add(new SomeCommand());
$application->run();
Hope this helps !
I am working on a fairly simple Heat Map application where the longitude and latitude of the points will be stored in a SQL Server database. I have been looking at an example that uses an array of objects as follows (eliminated a lot of data for brevity):
/* Sample data to demonstrate Bing Maps Heatmap */
/* http://alastair.wordpress.com */
var CrimeData = [
new Microsoft.Maps.Location(52.67280, 0.94392),
new Microsoft.Maps.Location(52.62423, 1.29493),
new Microsoft.Maps.Location(52.62187, 1.29080),
new Microsoft.Maps.Location(52.58962, 1.72228),
new Microsoft.Maps.Location(52.69915, 0.24332),
new Microsoft.Maps.Location(52.51161, 0.99350),
new Microsoft.Maps.Location(52.59573, 1.17067),
new Microsoft.Maps.Location(52.94351, 0.49153),
new Microsoft.Maps.Location(52.64585, 1.73145),
new Microsoft.Maps.Location(52.75424, 1.30079),
new Microsoft.Maps.Location(52.63566, 1.27176),
new Microsoft.Maps.Location(52.63882, 1.23121)
];
What I want to do is present the user with a list of some sort that displays all the data sets that exist in the database (they each have a name associated with them) and then allow the user to check all or only a select few. I will then need to generate an array like the above to create the heat map. Any ideas on a good approach to this?
What you trying to achieve is more related to a web developement rather than only related to Bing Maps.
To summarize, you have multiple ways to do this but it really depends on what you are capable to do and what you need in the interface.
What process/technology?
First, you need to determine what process you want to follow to display the data and it will set the technology that you will use. The questions that you need to ask yourself are:
Do you want to be able to change the data sets dynamically without refreshing the whole page?
If yes, it means that you will have to use asynchronous data loading through a dedicated web service in order to avoid loading all the information at the initial load of the page.
Do you have lots of data to load?
If so, it might comfort you with asynchronous loading to avoid loading all data.
If not loading every elements in multiple arrays might be the simplest solution.
Implementation
So now, you want to create a web service to load the data asynchronously, you can take a look at the following websites :
http://www.asp.net/get-started
http://www.stefanprodan.com/2011/04/async-operations-with-jquery-ajax-and-asp-net-mvc/
There might be interesting other website, you will be able to find them. If needed, add comment and I'm sure the community will help you.
If you want to generate the data directly in the script, it could be simple as you can compose the JavaScript directly in your dynamically created HTML page (in your ASP.Net markup code or whatever technology you're using).
I am working on project where I want to give notification like facebook. i.e. when someone comments on others profile or like any link on others profile. I want to use nodejs for real time push notification.
These data of comments, likes are stored in the mysql database in "Notification table" via ajax request or by posting the form to php.I found many tutorials of nodejs on net for the real time push notifications but unfortunately they talk about keeping watch on file and emits the notification when file is updated.
does anybody knows how to keep watch on the mysql table, so whenever, any data is inserted in the table, it emits the notification. I am not getting any way what kind of code I should write in nodejs.
Please let me know if more explanation is needed.
Thanks in advance.
You can use node.js with a mysql library to poll your database for new notifications, which I think is what you're trying to do. I've never done that specific task personally, but I know it's achievable.
In terms of what kind of code you need to write, try looking up "Node Middleware Tutorials" with perhaps some variations that include MySQL in the search query and you'll find at least an idea of what you should be looking for.
If I can I will update this answer with more specific code samples to get you moving in the right direction.
You can use nowjs and add on the after save (if you are using an mysql active record) to notify the client with this package.
On the server
var httpServer = require('http').createServer(function(req, response){ /* Serve your static files */ })
httpServer.listen(8080);
var nowjs = require("now");
var everyone = nowjs.initialize(httpServer);
everyone.now.logStuff = function(msg){
console.log(msg);
}
On the client
<script type="text/javascript" src="http://localhost:8080/nowjs/now.js"></script>
<script type="text/javascript">
now.ready(function(){
// "Hello World!" will print on server
now.logStuff("Hello World!");
});
</script>
For more information take a look at the examples