
Gimli – A Visual Studio Code extension for front-end developers - gimliapp
https://gimli.app/
======
dang
This should not have been posted as a Show HN. Show HN is for something that
people can actually try. Fundraisers and teaser pages are ruled out in the
rules:
[https://news.ycombinator.com/showhn.html](https://news.ycombinator.com/showhn.html).

(We've taken Show HN belatedly out of the title above.)

------
sic1
This looks great, and could be a great tool to help some front-end developers.

However, I must say, it's 2019, if you call yourself a front-end developer,
and you do not know flexbox and grid - you are greatly missing out on an
amazing radical change in how you think about and design your layouts. There
really is no excuse for not knowing this stuff, especially with all the great
resources out there to help you learn.

Flexbox Zombies basically changed my life. It taught me the possibilities, and
now I know them by hand. [https://mastery.games/p/flexbox-
zombies](https://mastery.games/p/flexbox-zombies)

The same company has a paid game to learn about the grid
([https://gridcritters.com/](https://gridcritters.com/)), but I came across
the resources below and did not buy it.

Flexbox Froggy and Grid Garden are both free, not gated by an email signup,
and very high quality. You and everyone on your team should do them, even if
you think you know them well. It will help with reinforcement.

\- [https://flexboxfroggy.com/](https://flexboxfroggy.com/) \-
[https://cssgridgarden.com/](https://cssgridgarden.com/)

I think Gimli is an amazing tool, and I might even buy it when it comes out.
But please, do yourself and your team a favor - learn the tools by hand first.
If you wrote a float at all this year, this post goes out to you.

~~~
cjohansson
Flexbox and grid might not be compatible with your customers browsers

~~~
Diti
Polyfills probably are.

~~~
the_duke
Flexbox and grid are very hard to polyfill since they are deeply embedded in
the layout engine.

The only flexbox polyfills are Javascript based and really slow.

AFAIK there is no up to date / usable Grid polyfill.

------
gimliapp
Hi!, creator of Gimli here. i'll be happy to answer any questions you may have

~~~
mig4ng
I recommend that you make the app available for beta testing with some users.
Maybe even releasing a beta version to the public, do not make the mistake of
waiting until you have the perfect product.

Other request/suggestion is to make it open source or at least free for
personal use, it will bring a lot of users that will want to have the same
tooling at their workplaces. Then you can have commercial licenses that you
make corporations pay for.

Keep the great work!

~~~
mft_
Agree - could you release an Alpha version via Kickstarter? I'd pay (say) 50
SEK for alpha access to play with it for a couple of months, and (if wanted)
give feedback on bugs.

You could always end alpha access at a given point (set date or once the beta
release is out) and/or offer upgrades to the full package at a slight
discount.

No downside, apart from a little more complication for you, and you'd maybe
get a bit of money even sooner...

------
juandazapata
We've completed a full circle and rebuilt Macromedia Dreamweaver. Yay!

~~~
sktrdie
The main difference is that now we actually have a proper grid layout system
which enables editors to do their job properly. Things like webflow allow one
to design responsive components without having to code anymore.

~~~
thanatropism
I know responsive design is important in a mobile-first world. But the grid
systems I've seen (mini.css; it's my first web project in 15 years and I've
decided not to use frameworks, just bash rocks together until the browser
talks and listens to an API server) are nooot great.

They're significantly wordier than old school tables, and significantly more
confusing to write by hand too. The one good thing is that they shrink with
window size.

I know I shouldn't be coding up web "apps" by hand and instead learn React or
whatever, but why should the whole making webpages _an active hurdle_ for a
techy person of average intelligence who can e.g. move some of his custom code
from numpy to tensorflow?

Maybe I didn't google the right things, but I expected something that allowed
me to say "div id=topnavbar" or something. As opposed to a lot of width
classes that...

Next thing you know I'm not allowed to repair my TV despite having had a short
protoboard-electronics hobby in my teens. I jest.

~~~
ergothus
> But the grid systems I've seen

They may have been referring to the new(ish) CSS Grid [https://css-
tricks.com/snippets/css/complete-guide-grid/](https://css-
tricks.com/snippets/css/complete-guide-grid/)

I've not used it yet myself, but it looks to work well enough for at least
top-level grids. Your description of other grid systems is accurate, both of
those and frankly of most advanced CSS in my opinion. (Cue someone saying
"It's easy, you just apply these 3, 5, or 20 CSS properties that you knew
applied because of dark magic, and It Just Works!)

> wordier than old school tables, and significantly more confusing to write by
> hand too

The issue with old-school tables was never that they didn't work or even were
hard to write. The issues (beyond the issues of effective obfuscation of data
and accessibility) were that they didn't handle revision well at all. Nor
modularity, for that matter.

> I know I shouldn't be coding up web "apps" by hand and instead learn React
> or whatever

There are bitter haters on all sides, but the practical truth hasn't changed:
template libraries make sense when you start to code solutions to the same
problems they solve, or at least encounter those problems. If you aren't
encountering those issues, they have little to offer.

> Maybe I didn't google the right things, but I expected something that
> allowed me to say "div id=topnavbar"

Unless you use some built in setup (mini-css, bootstrap, foundation, etc) and
accept their limitations, you're left to write that all yourself.

> Next thing you know I'm not allowed to repair my TV despite having had a
> short protoboard-electronics hobby in my teens.

You seem bitter that some downgrade of experience has been forced upon you -
it hasn't. Just because there are new best practices and preferred
alternatives to old best-practices, doesn't mean the old ways stop working.
You have more options today, not fewer. If you don't like those options, keep
at them.

I myself am happier with the newer options over not having them, even if I
think CSS is STILL way too obtuse and makes simple things difficult. Many old
practices are not best practices for reasons. But no one is forcing your hand.

------
robmccoll
You might want to make the Kickstarter campaign more prominent - use color,
make it bigger and part of the main content instead of just part of the top
bar.

Anyway, as a mostly backend and native / non-web person who occasionally has
to do front-end development, this looks like a very useful tool! Something
like this might convince me to start using VSCode for web dev over vim.

~~~
neurotrace
It's not a full replacement but VS Code actually has fantastic vim bindings

~~~
jitl
I started trying to use VSCode’s vim bindings full time yesterday. The
bindings themselves are pretty good, but VS Code is so slow compared to vim!

I’m editing Typescript. Frequently my key presses lag for tenths of a second,
or auto insert some unrelated identifier. I’m going to give it a week before I
go back to nvim and Coc.nvim

~~~
r_singh
What are your system specifications? And how many files does your project
typically consist of?

------
sandGorgon
Is this figma/sketch in vscode ? I would pay for this.

Asian developers are Linux based generally - so it's hard to adopt Mac based
tools (because of cost,etc). This would be a brilliant way.

~~~
webwielder2
Figma/Sketch don't use the box model. They are modeled after illustration
programs. In fact Sketch IS an illustration program that like Photoshop before
it got pressed into UI duty.

~~~
armandososa
I hope not. It's a very lousy and frustrating illustration program. I'd rather
design whole interfaces in Adobe Illustration that draw even the simplest
shape in sketch.

------
t0astbread
Hey, this looks really neat! I have a few questions though.

1\. If I use this tool, can I still collaborate with people that don't have
it? This might be a concern to maintainers of free/open source projects who
would like to use Gimli for themselves but not force others to use proprietary
tools (which, I assume, Gimli falls under) when editing the project's source.

2\. How does this handle components (when using a framework) that aren't
presentational (like container components in React/Redux apps that subscribe
to the store and pass data on)? Will you just be able to "drag them in" like
visual components? Will there be an ergonomic way to add them into the tree
later? (So that the designer can, for example, just focus on the visual
aspect, then pass it on to a developer who adds the containers)

------
scarface74
I don’t do much front end work these days and won’t be for awhile, but this
looks exciting.

Hopefully, you can find a way to monetize it.

If it ends up being usable, even as a beta, I will be donating.

------
tomlagier
Very cool demo. Great idea to build on top of VSCode distribution
channel/platform, but I'm curious on how you plan on enforcing payment?

edit: Also curious how you'll be implementing "find source" \- just doing a
string lookup for id/classname/attibutes? Will you be able to handle generated
identifiers, e.g. css modules classnames?

------
tatersolid
You might want to consider a name change. Gimli has already been used for a
cryptographic algorithm from a pretty famous team of cryptographers[1], so
your SEO might take a hit by using that name.

[1]: [https://gimli.cr.yp.to/](https://gimli.cr.yp.to/)

~~~
die_fault_user
How about WeamDreaver?

~~~
techntoke
PageFront

~~~
gimliapp
How about FlowWeb? is that something I could get away with?

------
bobwaycott
This looks really great. I want to try it out. Working on a couple new things,
and new things are always the easiest to try other new things on. ;)

------
Geee
Looks great, I'd definitely want to use this. Consider releasing this as a
beta with discounted price.

------
lagamemnon
This is pretty cool. Are there any similar tools out there already that don't
produce garbage HTML?

------
jpincheira
I love your landing! Congrats :)

------
pudebe
Do professional developers ever use these wysiwyg editors ?

------
rkido
I backed this. Visual data should be edited visually.

------
vistriter
I very very love this. Help me to create flex box. :)

------
gigatexal
this is extremely cool!

------
kaeland
This looks awesome!

------
sergiotapia
lmao this is dreamweaver lite. we have to go back.

------
Lord_Zero
Plz no more front-end GUIs. Save it for Wix.com.

