We Keep Coding

Uploading Font as JSON on Server to call for WebApp: Specific Example for Dissolving font

How can I change the font of "FUTURE IS NOW" to Helvetica on this link:
https://codepen.io/sanprieto/pen/XWNjBdb
For reference, the current lines of code are in the js window in line 8-10:
const loader = new THREE.FontLoader( manager ); const font = loader.load('https://res.cloudinary.com/dydre7amr/raw/upload/v1612950355/font_zsd4dr.json', function ( font ) { typo = font; });
Ideally, I'd like to center the text since it is a little bit off. I can't find a way to upload e. g. Helvetica with an url that goes like https://example.com/fonts/helvetica.json
I tried to search for some way on google fonts, but couldnt really figure it out.
I'm not even sure that if I found another link, it woul work nicely with the particle part and the .png file right beneath it...

Prevent white edges during orientation change

I reproduce this issue with the most minimal React-Native app:
render() {
return View({style: {
flex: 1,
backgroundColor: 'black'
}})
}
When I rotate my phone, one side of the screen has a white section during the orientation transition. How can I color that area the same as the rest of the background?

In the RootView of your app, the default background color is white. You can change this to another color by using the following steps:
In this example we'll set the background color to black on iOS.
Open AppDelegate.m located in PROJECT_DIR/ios/Appname/ for editing.
Locate snippet that looks similar to the following:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"Appname"
initialProperties:nil
launchOptions:launchOptions];
Add the following line of code immediately after the previous snippet:
rootView.backgroundColor = [UIColor blackColor];
The resulting code block should look like the following:
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:#"Appname"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [UIColor blackColor];
BAM! RootView background color is set on iOS!
This information and more is available from this blog post: Changing the React Native RootView Background Color (iOS and Android) by Jay Garcia. (I believe the Android information in this post may be out of date, which is why I didn't include steps for Android).
Hope this helps!

I created a library, it allows you to do it from the level of JavaScript, and also allows you to do dynamic changes.
https://github.com/johniak/react-native-root-view-background
import { setRootViewBackgroundColor } from 'react-native-root-view-background';
export default class Main extends Component {
componentDidMount(){
setRootViewBackgroundColor('#ccc');
}
}

I am not sure what you are referring to here. But what ever is containing that view needs to have its background set also perhaps?

Create grid of image

Here I have to implement a webpage
which has a grid that display images. It will be easy if all the images have the ideal width and height, so I can arrange these images to fit the grid. However, with images of various sizes, I hasn't found solution yet. So, anyone has any idea or know some library/tool that can
flexibly create the image grid like that ?
Thankyou !

I reckon this is what you are looking for: http://masonry.desandro.com/ . JS library that allows to do exactly what you want.

If you're using jQuery I would recommend using Masonry, it's also built into core wordpress if you're using that too.
Here's an example of using it.
function masonry_shiz(){
$('#gal1').masonry({
singleMode: true,
"gutter": 0,
isFitWidth: true,
isAnimated: true
}).imagesLoaded(function() {
$('#gal1').masonry('reloadItems');
});
$(window).load(function() {
$(".masonry-brick").each(function(i) {
$(this).delay((i + 1) * 50).fadeIn();
});
});
}masonry_shiz
Here's a link to the plugin

Try using jQuery plugin called Freewall. It is available at http://vnjs.net/www/project/freewall/
Check this demo for the same plugin (same as your requirement):
http://vnjs.net/www/project/freewall/example/image-layout.html

check out these links:
stackoverflow-question
jquery-plugin
another-alternative
and this article here.Hope it helps

If your design is not supposed to change, you can use a CSS framework to build such a page.
A famous one is Bootstrap, which allows you to order <div> tags in a grid, using rows and columns. This is responsive as well, meaning the result is auto-adapted to large screens as well as phones and tablets.
You can use other frameworks such as elasticss, Knacss, Blueprint.

Angular.js data-bind background images using media queries

I have an Angular.js application with dynamically background images (should have data-binding for their URL). I also want to use css media queries in order to detect orientation/pixel density etc.
The only solution I found is using javascript to add URL to the background image, something like this:
myDiv.css({'background' : 'url('+ scope.objectData.poster +') no-repeat', 'background-size':'auto 100%'});
This way I have to pass all media queries logic to javascript, something like this. (My intention is to be able to serve different background image for each screen resolution / pixel density / orientation)
I am looking for a cleaner solution to use css media queries and still be able to data-bind my image sources.
tnx!
Yaniv

This is just a starting point solving your problem.
You may use matchMedia: https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
if (window.matchMedia("(min-width: 400px)").matches) {
$scope.poster = 'small.png';
} else {
$scope.poster = 'big.png';
}
now you can use it in the html file:
<div class="moments-preview-image"
ng-style="{'background-image': 'url('+poster+ ')'}"> ... </div>
If your browser doesn't support this new API you may have a look on some interesting workarounds:
http://wicky.nillia.ms/enquire.js/
http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Hide Hashtags from the user's address bar

Does anyone know an easy way to hide hashtags in the user's address bar? I am using a image gallery plugin and the only way to control the start position is to use a hash tag.
The problem is the hash tag gives away the relative path of the images folder and it looks bad.
Without the hash tag it only loads thumbs and not start image so really it's unavoidable.
Thanks!

Read your plugin's documentation. Adding the hashtag is often something they facilitate explicitly to allow for bookmarking and such--and it can sometimes be turned off within the plugin. Something like .pluginName({'hash': false});.
For instance, in Galleria, it's:
$('ul.whatever').galleria({history : false});
Hacky solution
Since you're using Galleria, you could maybe do the following:
In your CSS file, declare a background for the Galleria generated div:
.galleria_wrapper {
background-image: url(thing.png);
background-repeat:no-repeat;
width:200px;
height:100px; /*whatever else you need*/
}
In Galleria's onImage function, get rid of it:
$('ul.whatever').galleria({
history : false,
onImage : function() {
//undo stuff in here
$(".galleria_wrapper").css({"background-image": "none", "height": "auto", "width": "auto"});
}
});
That should make it so your original image shows and is removed if the user calls up an image.