Node webkit app debugging in WebStorm 11 - webstorm

I am puzzled by the problem for 2 days. Any tips are appreciated.
A very simple node-webkit app is created: helloworld.
package.json:
{
"main": "index.html",
"name": "helloworld-demo",
"node-main": "hello.js",
"keywords": [ "demo", "node-webkit" ],
"window": {
"title": "node-webkit demo",
"icon": "link.png",
"toolbar": true,
"frame": false,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
}
}
index.html:
<html>
<head>
<title>Hello World! </title>
</head>
<body >
<h1>Hello World!</h1>
We are using node.js
</body>
</html>
WebStorm 11 settings as below:
"run" is ok. The app runs normally.
When starting "debug":, the problem string is:
C:\Users\lizhen\Downloads\nwjs-v0.14.5-win-x64\nw.exe --remote-debugging-port=49368 --url=data:text/html;base64,PCFET0NUWVBFIGh0bWw+PHRpdGxlPkxvYWRpbmcgZmlsZTovLy9DOiU1Q1VzZXJzJTVDbGl6aGVuJTVDRG93bmxvYWRzJTVDbm9kZWpzX3dlYmtpdFByYWN0aWNlJTVDaGVsbG93b3JkL2luZGV4Lmh0bWw8L3RpdGxlPg== C:\Users\lizhen\Downloads\nodejs_webkitPractice\helloword
Process finished with exit code -1
I looked into the JetBrains documentation and can't find what caused the problem.

Debugging doesn't work for NW 0.13+. Please follow WEB-18588 for updates

Related

Tailwind's default colors are not working, only white and custom colors

I am building a web application using the Django framework and installed Tailwind CSS using this tutorial: https://django-tailwind.readthedocs.io/en/latest/installation.html. It worked fine initially, but now when I reload my project after closing VScode, my colors stop working.
For an example,
I'll be creating a new line of HTML and use:
<body>
<div class="bg-blue-400 font-bold p-4 text-4xl">
<h1>Hello</h1>
</div>
</body>
and the background just goes immediately to white. I have tried uninstalling/reinstalling and checking my directories and still have no solution.
I have also found that only my custom colors work when I reload my project.
/** #type {import('tailwindcss').Config} */
module.exports = {
content: [
'../templates/**/*.html',
'../../templates/**/*.html',
'../../**/templates/**/*.html',
],
theme: {
extend: {
colors: {
'jcblue1': '#5CB5FD',
'spook': '#3C4856',
}
},
},
plugins: [],
}
^this is my tailwind.config file.

DJANGO PWA Install to home screen not working

I am trying to follow the instructions on this site (https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Add_to_home_screen) with my DJANGO app to make a PWA "Install to home screen' button.
I have SSL installed on the site, and it seems to me that the service worker is installed properly, I got the "Service Worker Registered" message back. However when I click the button nothing happens, the + sign does not appear in the URL bar as it should.
I have no idea what is causing the error, as there is no clear sign of anything not working properly.
My index.html:
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A2HS demo</title>
<link href="{% static 'css/index.css' %}" rel="stylesheet">
<script src="{% static 'js/index.js' %}" defer></script>
<link rel="manifest" href="{% static 'manifest.json' %}">
</head>
<body>
<button class="add-button">Add to home screen</button>
</body>
</html>
My manifest.json:
{
"short_name": "Test site",
"name": "Test site",
"theme_color": "#062440",
"background_color": "#F7F8F9",
"display": "fullscreen",
"icons": [
{
"src": "assets/logo.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "/index.html"
}
My index.js
// Register service worker to control making site work offline
if ('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/static/js/service-worker.js')
.then(() => { console.log('Service Worker Registered'); });
}
// Code to handle install prompt on desktop
let deferredPrompt;
const addBtn = document.querySelector('.add-button');
addBtn.style.display = 'none';
window.addEventListener('beforeinstallprompt', (e) => {
// Prevent Chrome 67 and earlier from automatically showing the prompt
e.preventDefault();
// Stash the event so it can be triggered later.
deferredPrompt = e;
// Update UI to notify the user they can add to home screen
addBtn.style.display = 'block';
addBtn.addEventListener('click', () => {
// hide our user interface that shows our A2HS button
addBtn.style.display = 'none';
// Show the prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the A2HS prompt');
} else {
console.log('User dismissed the A2HS prompt');
}
deferredPrompt = null;
});
});
});
And my service-worker.js:
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open('fox-store').then((cache) => cache.addAll([
'/index.html',
'/static/css/index.css',
'/static/js/index.js',
])),
);
});
self.addEventListener('fetch', (e) => {
console.log(e.request.url);
e.respondWith(
caches.match(e.request).then((response) => response || fetch(e.request)),
);
});

SummernoteInplaceWidget Not Working Properly - summernote-lite

I have recently discovered Summernote and love it. I have run into a problem where when I am using it in my django installation, the SummernoteWidget is working but the SummernoteInplaceWidget is not. When I use the SummernoteWidget, the data appears in my editor as I would expect, but when I use the SummernoteInplaceWidget, I get a blank screen. Thanks for any thoughts. My code...
I am using Summernote-Lite without bootstrap and I am using the most recent version 0.8.9
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
My Summernote_Config in settings.py
SUMMERNOTE_CONFIG = {
'summernote': {
'toolbar': [
['undo', ['undo',]],
['redo', ['redo',]],
['style', ['bold', 'italic', 'underline',]],
['font', ['strikethrough',]],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
],
'width': 760,
'height': 300,
'focus': True,
'fontSizes': ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
},
}
My CSS...
.editor {
font-size: 18px;
margin-left: 24.4rem;
}
My widget reference in forms.py..
widgets = {
'book': SummernoteInplaceWidget(),
}
The editor renders, but I just get a blank screen...
If I use the SummernoteWidget instead,
widgets = {
'book': SummernoteWidget(),
}
My CSS....
.editor {
font-size: 18px;
margin-left: 24.4rem;
}
I get the data on the screen that I'm expecting, but font size setting is not honored as shown below.
Any ideas on if this is a bug or if I'm doing something incorrectly which is entirely possible? Thanks in advance for any thoughts.

Unable to run Debug version of node-webkit in WebStorm 9

I have node-webkit application that have the following entry poing:
<!-- index.html -->
<!doctype html>
<html>
<head>
<script>
function bodyOnLoad(){
window.location.assign('http://localhost:3000/');
}
</script>
</head>
<body onload="bodyOnLoad()">
<h1>Loading...</h1>
</body>
</html>
My nodejs side listening 3000 port on localhost and have the following strucure:
// start.js
var app = express();
app.get('/', function(req, res) {
res.send(ok);
});
http.createServer(app).listen(3000, function(err){
if (err) throw err;
});
I've created run/debug configuration and tried to run onses. Run configuration starts well but Debug one throws the following error and don't start node-webkit application:
[3736:1128/105652:FATAL:render_process_host_impl.cc(479)] Check failed: !g_exited_main_message_loop.
Process finished with exit code -2147483645
And my package.json file:
{
"name": "nw",
"version": "0.0.0",
"description": "",
"main": "index.html",
"node-main": "start.js",
}
Please help me with my problem.

showing all fields in a Dojo Data Grid with dojo.store.JsonRest

I have a Dojo Data Grid for displaying contact information that is showing values for only two columns: "model" and "pk". The other columns are blank, probably because the JSON response from the server puts the other name/value pairs inside of "fields":
[{"pk": 1, "model": "accounting.contacts", "fields": {"mail_name": "Andy", "city": "Grand Rapids", "zip": "49546", "country": "US", "state": "MI"}}]
What is the best way to get all my fields to show up in the grid?
Here's the relevant view in Django:
def contacts(request):
json_serializer = serializers.get_serializer("json")()
json_contacts = json_serializer.serialize(Contacts.objects.all(), ensure_ascii=False)
return HttpResponse(json_contacts, mimetype="application/json")
And here's my Dojo page:
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js"
data-dojo-config="isDebug: true,parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.store.JsonRest");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ObjectStore");
dojo.ready(function(){
objectStore = new dojo.store.JsonRest({target:"/contacts/"});
//alert(objectStore);
dataStore = new dojo.data.ObjectStore({objectStore: objectStore});
//alert(dataStore);
layoutGridContacts = [{
field: 'mail_name',
name: 'Name',
width: '200px'
},
{
field: 'model',
name: 'DB Table',
width: '100px'
...
}];
gridContacts = new dojox.grid.DataGrid({
query: {
name: '*'
},
store: dataStore,
clientSort: true,
structure: layoutGridContacts
}, dojo.byId("containerGridContacts"));
gridContacts.startup();
});
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" />
<style type="text/css">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css";
.dojoxGrid table {margin: 0; } html, body { width: 100%; height: 100%;
margin: 0;}
</style>
</head>
<body class="claro">
<div id="containerGridContacts" style="width: 100%, height: 100%;">
</div>
</body>
Thanks.
This is really a question of, "How do I interact with a javascript object?" Given the JSON in your question, and assuming you assigned it to the variable obj, you could access mail_name with obj[0]['fields']['mail_name'] or using dot notation, obj[0].fields.mail_name. I haven't used Dojo, but I'd wager you just need to set fields.mail_name as the field in layoutGridContacts.
I was able to get the server to produce a JSON response that does not contain nested objects, so the Dojo Store was able to use it. To do this I changed my view to:
def contacts(request):
all_contacts = list(iter(Contacts.objects.values()))
json_contacts = simplejson.dumps(all_contacts)
return HttpResponse(json_contacts, mimetype="application/json")
Use "fields." in front of your field identifier to access the properties inside fields:
layoutGridContacts = [{
field: 'fields.mail_name',
name: 'Name',
width: '200px'
},
...
You can use formatter method to retrieve the data. For your example it will be something like below
{name:"Name",
field: "fields",
width: "20%",
cellStyles:"background-color:#e3690b;",
formatter: function(field){
if(!field){return;}
return field.mail_name;
}
}