In WebStorm if I type:
.foo {
text-tr
the IDE does not offer to autocomplete the property to text-transform. I have to type the whole property name.
If it type:
.foo {
text-transform: cap
then I do get an offer to complete the value to capitalize.
How can I get WebStorm to offer autocomplete suggestions for the property too?
Version: 2021.1
Related
I am using webpack, babel, typescript, newest React version. Could not see placeholder and could not set value when I am using Input component. This is very simple code.
When I look at Chrome debugger, I don't see placeholder there. Something with my environment but I could not figure out what could be the issue.
I actually created couple new environment and it worked there. I also cut everything out from my current enviroment - all libraries that are not used, all code and all styles. Just left one module with that simple code.
import * as React from "react";
import { Input } from 'semantic-ui-react';
const LotcheckApp = () => {
return (
<>
<Input placeholder='Search...' size='large' />
</>
);
};
export default LotcheckApp;
There is no error messages - just could not see placeholder and could not set value.
I'm building an editor using the excellent Slate editor, but I'm having trouble with a certain task. I've built a drag-and-drop image upload that successfully uploads images (via API, not related to Slate) and inserts them into the editor. However, I want to delete the image from the server if the user deletes it in the editor. Is there a way to trigger functions when a certain node type is removed from the state?
I've just started looking at slate and was looking into the same issue. My solution is to:
create a plugin function for image handling (options) => { /* plugin object */}
In this plugin function, in schema.nodes, return a wrapper around my main Image component that sets an onDelete prop from the options parameter.
//ImagePlugin function
export default function ImagePlugin(options) {
return {
schema: {
nodes: {
image: props => <Image
{...Object.assign({ onDelete: options.onDelete }, props) } />
}
}
}
I am using the Zurb Fonudation framework. When I place a JavaScript framework such as snap.svg in the src/assets/js folder it will automatically get compiled into the app.js file. So far I've had one jQuery plugin that I've tried to use that is broken, and also snap.svg that gets broken. I'm assuming this has something to do with babel. For example with snap.svg I get the following error..
snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined
I've tried placing the path to snap.svg in the config.yml file but that doesn't seem to make any difference other than where snap.svg is located within app.js
I'm assuming I'm just not doing something right. Any ideas?
You can tell babel to not transpile particular pieces of code by passing the 'ignore' flag to it within the build process. E.g.:
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
You can see more about customizing the build process in this forum post: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components
I am trying to show Loading animation using Ionic2 for long service progress report:
this.loading = this.loadingCtrl.create({
content: 'Please wait...',
spinner: 'ripple' // <<------ Is that correct?
});
this.loading.present();
The result is a text box without any spinner.
This is 09/22/2016 Ionic2 using latest beta (11) and I cannot actually find any example like above anywhere. Could this be a future feature documented but not yet implemented?
I am talking about the Ionic2 LoadingController documentations here
Is ripple a custom spinner? Otherwise, you can check the by default available spinners here:
ios
ios-small
bubbles
circles
crescent
dots
The spinner name should be passed in the spinner property, and any
optional HTML can be passed in the content property. If you do not
pass a value to spinner the loading indicator will use the spinner
specified by the mode. To set the spinner name across the app, set the
value of loadingSpinner in your app's config. To hide the spinner, set
loadingSpinner: 'hide' in the app's config or pass spinner: 'hide' in
the loading options
So another option, would be to just use the specified spynner according to the mode like this:
this.loading = this.loadingCtrl.create({
content: 'Please wait...'
});
this.loading.present();
Thing is it might be that the Ionic team just put a way of extending the Loading control using a custom spinner, meaning that you have to put a SVG file name to the property.
It just looks obvious that you can put there one of the built-in spinner names.
Then again, it is reasonable to keep the app's design straight with the same spinner in all loaders. Guess that could be more bolded in the docs...
I'm having the hardest time getting typescript and ember to work together. I got all the definition files in definitely typed and I went through the ToDo walk throughs on Ember guide on the site. I'm trying to convert the js to typescript and see what the best way to go about setting up the project was, but I guess I'm not understanding the typescript definition very well.
If I do:
/// <reference path="typings/ember.d.ts" />
var App = Ember.Application.create();
App is a type of '{}' and I can't access 'Routers' to do the next line of the guide
App.Router.map( ... )
The best thing I found online was this which doesn't work with the current typing.
I've seen the typescript ember-app-kit but it doesn't really help since it barely includes any typescript and their setup is barely like the ember guides. I just need to be pointed in the right direction. Thanks guys.
I'm not familiar with Ember, but from inspecting ember.d.ts, I can see that create() is defined as a static generic function on object:
static create<T extends {}>(arguments?: {}): T;
So then you should be able to get better type information by passing an actual type:
var App = Ember.Application.create<Ember.Application>();
However, I see also that the ember typedef doesn't include a "Router" member in the application class, and even if it did, the Router class does not define map(). I was able to get it to work by creating an extended type definition:
// ./EmberExt.d.ts
/// <reference path="typedef/ember/ember.d.ts" />
declare class RouterExt extends Ember.Router {
map: ItemIndexEnumerableCallbackTarget;
}
declare class ApplicationExt extends Ember.Application {
Router: RouterExt;
}
And then referencing that from my combined router/application file:
/// <reference path="typedef/ember/ember.d.ts" />
/// <reference path="./EmberExt.d.ts" />
var App = Ember.Application.create<ApplicationExt>();
App.Router.map(function () {
this.resource('todos', { path: '/' });
});
After doing this, it compiles and loads without error, though it doesn't actually do anything (which I believe is ok for this phase of the walkthrough)
Full and mostly-accurate type definitions for Ember.js are now available to install from npm at #types/ember, #types/ember-data, and so on, currently all via the Definitely Typed project.
Ember CLI integration is available through the ember-cli-typescript addon. The easieset way to configure a Ember.js project with TypeScript is to run ember install ember-cli-typescript in the root of your Ember.js project. Doing so will automatically generate a tsconfig.json which handles Ember’s conventional project layout correctly (for apps, addons, and in-repo addons). It will also install the type definitions for all the core Ember projects automatically.