Develop Reference

Using Material Icons in CKEDITOR

This is kind of an academic question because I've all but given up, but maybe we can learn a few things about CKEditor5 by trying to solve it!
I'm using a pretty bare-bones installation of CKEditor from https://ckeditor.com/ckeditor-5/online-builder with just some basic styling features.
My use case is pretty basic but my users need to enter certain special characters and I want to include support for material icons (from Google)
Something along these lines
If you're not familiar with material icons, they use a special font and some CSS wizardry to display icons similar to font awesome. They are here: https://fonts.google.com/icons?icon.set=Material+Icons they come in two varieties, icons and symbols which are very similar but we're concerned with icons in this case.
The syntax for the icons is
<span class="material-icons-outlined">
emoji_emotions
</span>
and it uses some font wizardry to make that turn into something like
You can also use a single entity such as  to accomplish the same behaviour and it's the option I've opted for in my implementation.
My chosen markup is
<material-icon class='material-icons'></material-icon>
A little redundant I know but I wanted to separate them from just spans.
Anyway, out of the box CKEditor doesn't allow pasting unknown elements and strips it down to just the html entity so you need to add a new schema, something like this
export default function schemaCustomization(editor) {
// Extend schema with custom HTML elements.
const dataFilter = editor.plugins.get('DataFilter');
const dataSchema = editor.plugins.get('DataSchema');
// Inline element
dataSchema.registerInlineElement({
view: 'material-icon',
model: 'materialIcon',
modelSchema: {
inheritAllFrom: '$inlineBlock'
},
attributeProperties: {
copyOnEnter: true,
},
});
// // Custom elements need to be registered using direct API instead of config.
dataFilter.allowElement('material-icon');
dataFilter.allowAttributes({ name: 'element-inline', classes: /^.*$/ });
}
This will register the element with the editor and allow it to be accepted into the document.
Then you add it to your options, alongside the previous htmlSupport plugin and you're good to go!
options = {
toolbar: {
items: [],
},
htmlSupport: {
allow: [
{
name: 'material-icon',
classes: /^.*$/,
},
],
disallow: [
/* HTML features to disallow */
],
},
extraPlugins: [schemaCustomization],
removePlugins: []
};
A lot of documentation I used comes from here: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html
However, there's one problem!!
The element remains editable and if someone clicks inside the material-icon tag and starts entering text, it gets messed up.
I need a way to make the material-icon element be somehow self-contained or atomic and only allow a single character inside.
I've been playing around with all kinds of settings but I'm not sure which are the correct ones and where they're even meant to go.
For now I've switched to just using unicode emoji but they really don't look as nice.
I've tried a lot of the settings and options from https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/schema.html and I think there are multiple ways to register these sorts of elements.
I was expecting it to work somehow but the ability to edit within the tags and break the layout is an unintended side effect.
Does anyone have any experience with the latest version of CKEditor and performing these sorts of low-level mechanics? Any help is appreciated!

How to make my website with multiple languages?

I have difficulties on how I could translate the content in all of the pages with clicking one button. I want to have a button on the home page and when the user choose one of the languages that this button contains, all the content in all of the pages to be in this language. For now, I know only how to do that with one page(Create buttons, when you click, you get the text translated in this language, but only at this page). And also, I do not use PHP. Thank you!

I see you are using Jquery, There is a lot of ways to translate a website but they all turns around the same mechanics. You need a translator, and a language file.
The easiest way to do so would be using the jquery plugins translate.js. It's a easy to use plugins which allows you to translate your website.
It is pretty simple, you add class trn to the element your want to add :
<span class="trn">Text to translate</span>
And then you add a data attribute to the key you want to translate to. Ex:
<span class="trn" data-trn-key="Hello world"></span>
Your language files is pretty simple as well, a simple Javascript object with the first Key as your trn-key and then another object with the language your want to translate your key to. Ex :
var lang = {
"helloworld": {
en: "Hello World",
fr: "Bonjour monde"
},
/*...*/
}
The plugins will replace the innerHTML of the span with the selected lang.

Benefits of dynamically creating jQueryUI Dialogs

In the past, I typically added my dialog as HTML as shown on the first example.
I never liked having to maintain both the HTML page and the JavaScript page, and am thinking of using either the second or third example (which one is more jQueryish?).
What are the pros and cons of both solutions? For instance, will the second or third solution cause new DOM to be created, and if so will this cause any issues? Or will they improve performance as more likely the JavaScript will be cached? Or anything else???
$("#click1").click(function() {$("#dialog").dialog("open");});
$("#dialog").dialog({
autoOpen : false,
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
$("#click2").click(function() {$("<div title='mytitle2'>hello2</div>").dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
});
});
$("#click3").click(function() {jQuery('<div/>', {title: 'my title3',text: 'hello3'}).dialog({
modal : true,
buttons : [
{
text : 'CANCEL',
click : function() {$(this).dialog("close");}
}
]
})
});
<p id="click1">Click1</p>
<p id="click2">Click2</p>
<p id="click3">Click3</p>
<div id="dialog" title="my title1">
hello1
</div>

Best case is to separate HTML and JS. What is the main reason that you dont like this solution?
What if you must send your templates to a designer team that have to restructure some DIVs? Most likely they have no-, or very little idea of Javascript, and dont know what to do.
Pros example 1:
Structured files. Separating backbone (HTML) and UI functionalities (JS)
More performant, because JS have not to create some DOM objects. They already are given in the HTML file, and JS has just to select it
Designer team can use the html templates whitout knowledge of JS
Contras Example 2&3
It have not the benefits of the explained example 1 pros
Benefits between Examples 2&3
It could be that Example 3 is more performant. Because internally JS must split your written html string, into objects to create the new DOM object. But you should test it in a loop.
Contras example 3
Writing jQuery instead of the alias $ all the time, results you longer code. Why not stay using $?

Twitter Feed API stopped working

Here is the following code I am using
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 3000,
width: 'auto',
height: 281,
theme: {
shell: {
background: '#fff',
color: '#3a589c'
},
tweets: {
background: '#ffffff',
color: '#000000',
links: '#3a589c'
}
},
features: {
scrollbar: false,
loop: true,
live: true,
hashtags: true,
timestamp: true,
avatars: false,
behavior: 'default'
}
}).render().setUser(klatianstayahed).start();
</script>
Where I am getting code error on http://widgets.twimg.com/j/2/widget.js follows.
TWTR=window.TWTR||{};(function(){var A=0;var D;var B=["init","setDimensions","setRpp","setFeatures","setTweetInterval","setBase","setList","setProfileImage","setTitle","setCaption","setFooterText","setTheme","byClass","render","removeEvents","clear","start","stop","pause","resume","destroy"];function C(H){var E=0;var G;var
F=["The Twitter API v1.0 is deprecated, and this widget has ceased functioning.","You can replace it with a new, upgraded widget from ","For more information on alternative Twitter tools, see https://dev.twitter.com/docs/twitter-for-websites"];
if(!window.console){return }for(;G=F[E];E++){if(console.warn){console.warn("TWITTER WIDGET: "+G);continue}console.log(G)}}TWTR.Widget=function(E){switch(E.type){case"search":C("search?query="+escape(E.search));break;case"profile":this._profile=true;break;case"list":case"lists":C("list");break;default:return }};TWTR.Widget.ify={autoLink:function(){return{match:function(){return false}}}};TWTR.Widget.randomNumber=function(){};TWTR.Widget.prototype.isRunning=function(){return false};TWTR.Widget.prototype.setProfile=function(E){C("user?screen_name="+escape(E));return this};TWTR.Widget.prototype.setUser=function(E){if(this._profile){return this.setProfile(E)}C("favorites?screen_name="+escape(E));return this};TWTR.Widget.prototype.setSearch=function(E){C("search?query="+escape(E));return this};for(;D=B[A];A++){TWTR.Widget.prototype[D]=function(){return this}}})();
And I followed instruction from the URL
https://twitter.com/settings/widgets
And
https://dev.twitter.com/docs/embedded-timelines
But I am not getting the old look and many options got turned off like Auto scroll, I cant move Tweet from Header of that widget and put the Pic of the a/c on the twitter(It was on the old script I posted above). And most embarrasing thing is on below it is written Tweet to #klatianstayahed which I dislike the most and want to remove that option. Can any body help me to modify it and modify my old script as that old script will work, not the new one which is not I want. My requirement is to get the updated script of http://widgets.twimg.com/j/2/widget.js as it is obsoulate.

The new twitter API 1.1 uses a Oath plugin. So there is a PHP code which I got from Github and entered the keys i got by registering an application on twitter.
Then I used the JSON generated by the PHP and formatted it using jQuery using another javascript...
This is the solution I got from here
This is the way that you really want to go as this is the only way you can tweak the way the tweets are displayed on your websites. The widget that twitter provides is really basic and besides the basic color and size options, you cannot alter the tweets.
Now the example I have provided is a PHP script which authorizes your website with twitter and gets the tweets for you. There are other libraries available for ASP.net,Java, Python which can be found HERE.
What you dont want to use is a client only side script like javascript as in the new API 1.1 we use the 4 authentication keys and if you use javascript as the Oath tool because you would be exposing these 4 keys

Twitter did a really bad Job on this! You cant get the old look, because Twitter dont want you to. The API V1 is gone and you have to use the new one.
And using the new one, means use it like twitter wish to... dark, light!
I had a time to find out, that you can set the background to transparent, so you have some
page look to it...
Shitstorm here:
https://dev.twitter.com/discussions/10644

Two images showing on the screen, side by side, in a lightbox?

Can anyone suggest a lightbox that will display at least two images side by side when activated?
My idea is to use this instead of a dropdown menu. When "Books" is hovered on my menu, I'd like to have a lightbox open, showing two images....side by side, each with a link that will allow the user to select "Fiction" or "Non-Fiction".
I realize that some people may ask why would I want to do this instead of using a more practical solution like dropdown.

I'm a fan of fancyBox, but really any lightbox that supports HTML content would work. Instead of boxing an img, however, just box a div or some container with two images instead (of course, you'll need some CSS to make it look nice).

I would use a light box that supports Iframes. Build your page, stile it, and off you go.

In addition to the answers provided earlier, I found the following answer useful:
Two-page view with jQuery.fancyBox
The problem is resolved as proposed here, however a concrete code example is given.
$('#start-photo-book').on('click', function() {
var book = [];
$.each( $("#photo-book").children(), function( key, value ) {
book.push({
content : $( value ).clone(),
type : 'html'
})
});
$.fancybox.open( book, {
loop : false,
smallBtn : false
});
});