DEV Community: Przemyslaw Michalak

Happy to give feedback about my project?

Przemyslaw Michalak — Wed, 14 Jul 2021 13:53:03 +0000

We are currently looking for front-end developers interested in testing a new tool created to speed up building reactive web apps.

Our Studio allows you to deliver projects to the end client even 4 times faster in comparison to more conventional ways such as building projects using frameworks with a full set of supporting libraries and tools.

I list couple of important features that we already implemented in our Studio to support our claims:

Studio starts with initial set-up - The Live Preview, meta-framework, code generator, bootstrap, font-awesome and much more are ready to use right at the start of the new project
Implementation Assistant - early version of AI that scans your code and not only notify you about important actions that you need to take, but also generates all necessary files and glue code and placing them inside of your project, exposing only files necessary for developing new features
repository of Widgets - over 80 of them! From simple block presenters, to more advanced data tables and forms, ending on microservices like table reservation API. All the Widgets can be inserted inside of your project within one-click and customized by object JSON file for content or pure CSS for styles
Scoped CSS - that makes naming and styling easier. The Studio generates dedicated CSS files for Widgets and 'Slots' of your web page. You can place 15 elements with the same name of class on your web page and still styles each of them differently.
Global Styles - Exact opposite of scoped CSS. You can globally style the whole app at once to avoid repeating or speed up the work

There are many more features, but I think those should bring your attention already.

So what is the purpose of my post? We are looking for front-end developers that are interested in giving us feedback. We are looking for 2 specific groups of developers:

Curious one - If description of the Studio sounds interesting for you, we are happy to simple hear your feedback after you use our tool

The one in need of a tool like this - If you are freelancer or running a project on the side, we are happy to give you access to the most advanced plan for FREE. In exchange for it we only ask for one thing. You will let us share the URL to your website/project/web app on social media and on our website. Please note, I'm not asking for source code, only for the result of your work. We want to prove our concept and show to our community capabilities of our tool. So we simply want to brag on our channels that your website has been built in our Studio. Plus it is always some advertisement for you as well.

If that's sounds interesting please contact with me:

przemek@glue.codes

https://twitter.com/PrzemyslawMic10

You can also visit website of the project here:

https://www.glue.codes

What is the project that community wants to see?

Przemyslaw Michalak — Sat, 19 Jun 2021 10:24:27 +0000

Hi everyone. I'm a co-creator of the first Studio that is fully dedicated to front-end. Obviously as every creator of anything I strongly believe that my project will be the one that will change the world. To the point. I want to let everyone know about existence of my tool, but in the same time bring something valuable to the community, which I think is fair exchange. So, what project, website or web app you crave to see being developed? I want to make a tutorial out of it on YouTube, explain how it's done and obviously give access to all the code of this app to everyone.

FREE IDE dedicated to creating Bootstrap templates

Przemyslaw Michalak — Wed, 16 Jun 2021 15:55:07 +0000

Today I would like to show you how to create Bootstrap templates in very easy way. I start with pointing the fact that everything I will mention in this blog is FREE. Both, the IDE and the template. Everything is accessible via browser so no downloads, no installations just pure coding.

Why to use dedicated IDE for Bootstrap?

Well, the answer is very easy. It is faster and easier to use something dedicated to specific task.

I start with showing you where is the problem. As an example I used popular template from here. At first - folder with files looks nicely organized and straight forward to use. But obviously because it's a template you want to edit the content and adjust its design for your needs. And this is where problems starts. Index page has over 660 lines of HTML which doesn't seems that bad, but CSS... over 11K. So before you even start, you need to go thru all that code and understand it.

Another repeatable problem is setting up the environment. Creating folders, taking care of hot reload and organize everything.

So lets have a look how much of it we can skip.

Environment

The IDE starts with initial setup done for you. Hot reload, Bootstrap, project architecture and much more is loaded right at the start. After you create a new project you can start writing the code right away.

Split your work to smaller parts

Now it is the time to show you how the IDE can help you with organizing the code. Firstly lets compress over 660 lines of HTML from the index page to only 24:

Let me explain what is actually happening here. As you can see in the <head> there is no Bootstrap import. The IDE takes care of all necessary and repeatable tasks for you. So you don't need to worry about any links to CDN or UNPKG. That is done for you right at the start. The only think you need to do is importing the fonts you would like to use in your project.

Now lets talk about <body>. As you can see there is plenty of empty <div>'s. Those are 'Reusable Slots'. Simple one liners that can be used anywhere inside of your project to insert reusable elements as navigation bar, footer or cookie consent notice. They will also help to keep your code nicely organized and easy to read. Every Reusable Slot represents a section that modern websites are split into:

So lets have a look how to actually edit the template. Open the project explorer and expand 'Reusable Slots' bar:

Bellow is the code responsible for the <footer>. As you can see it's absolutely standard HTML that uses Bootstrap classes. Splitting the scope of work not only makes everything significantly easier to read and edit, but also allows to style your template much easier since all Reusable Slots have dedicated CSS files.

HTML

<footer class="footer py-4">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4 text-lg-start">Copyright &copy; Your Website 2021</div>
      <div class="col-lg-4 my-3 my-lg-0">
        <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-twitter"></i></a>
        <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-facebook-f"></i></a>
        <a class="btn btn-dark btn-social mx-2" href="#!"><i class="fab fa-linkedin-in"></i></a>
      </div>
      <div class="col-lg-4 text-lg-end">
        <a class="link-dark text-decoration-none mr-3" href="#!">Privacy Policy</a>
        <a class="link-dark text-decoration-none" href="#!">Terms of Use</a>
      </div>
    </div>
  </div>
</footer>

CSS

@import 'bootstrap';
@import 'fa';

.btn {
  border-radius: 50%;
}

.footer {
  text-align: center;
  font-size: 0.9rem;
  font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.link-dark {
  color: #212529;
}

You can use scoped CSS files to edit specific slots without interfering with the rest of the app. In our template almost every section has <h2> element with class section-heading. By using scoped CSS files you can make color of each <h2> element different. That not only helps with styling the app but also with naming. You can use same class names for hundreds of elements in your website and still style them differently.

Ok, but what in the situation when you actually want every single <h2> to share the same qualities? It would be a pain to copy and paste the same CSS to all of the Reusable Slots. For this purpose you can use Global Styles. It is another CSS file, but in opposite to scoped CSS it can be imported inside of any slot or page. I used it to add the same font and margins to all headers and then edited scoped CSS to adjust colors.

Icons

Our template uses icons taken from fontawesome. So how to use them in the IDE? Nothing easier. Go on their website, choose icon, copy the code from modal, paste it inside of your project. The last step is to tell the IDE where you want to use fontawesome icons by writing @import 'fa'; inside of the scoped CSS files.

Excited?

That's not the end of all the features available in the IDE. There is also 52 FREE to use snippets that you can insert inside of your project within one click. In our template I used one of those snippets as navbar.

All the Widgets are well documented, fully customizable and easy to edit.

After you insert the Widget 2 new files will appear in your project. Object JSON file where you can edit the content and scoped CSS file to edit styles.

Check it yourself

Everything you saw in this blog is available for FREE. Including template, the IDE, and code of the template.

After you open the IDE you can navigate to the tab 'demos' and open project with the template used in this blog. You can feel free to edit it (or not) and export it outside of the IDE.

You can also join freshly created FB group where you can ask any questions related to the IDE:

https://www.facebook.com/groups/gluecodesstudio

And here you can use the IDE for FREE (including everything what I wrote in this blog):

https://www.glue.codes

Looking for CSS wizards to contribute

Przemyslaw Michalak — Wed, 09 Jun 2021 13:30:18 +0000

Hi everyone. I'm co-creator of the project that you might heard of already. In short - it is automated front-end Studio that works in the browser and has it's own repository of fully customizable Widgets, Live Preview, meta-framework and a much more. You can read about it here.

One of the features that comes with the Studio are Widgets. They can be inserted inside of any project within one click. All of them have consistent naming when it comes to their styles which makes them easy to customize by either scoped CSS files or Global Styles.

Right now we are thinking of implementing the library with pre-made Global Styles that can be inserted inside of the project within one click and give initial look to the app created by developer. Unfortunately neither me or Chris are UI designers. But that gives the great opportunity for our community.

The Studio is offered in FREEMIUM model. So anyone can create their own project for FREE, use as many of basic Widgets (52 at the moment) and style them, use advantage of setup free Live Preview, Implementation Assistant (in context notification system that generate files and necessary glue code while triggered by an user) and export code outside of the Studio to clean and well organized JSX powered by SolidJS.

And that's the deal. We are looking for developers who would be interested in creating Global Styles for the Studio. As a return we will offer 6 months of 'freelancer' plan for free. That gives a great opportunity for:

everyone that is looking for alternative fast ways of delivering more competitive products to their customers
learners who would like to add to their CV/portfolio new project

Although you can create projects from simple landing pages to advanced administration panels for absolutely FREE, the 'Freelancer' plan offers a couple of amazing features as automatically generated prerenders that allows to hit over 90% score in well know tools measuring speed of websites (lighthouse for example) or access to repository with more advanced Widgets (34 at the moment).

How it works?

You can clone repository from here and use it's README as a guideline what exactly needs to be styled. Then you can access the Studio boilerplate that I prepared for you. All the Widgets have consistent naming which makes styling of the whole app very fast, smooth and easy. When you finish with everything you can simply copy the CSS or export the project, add it to cloned GitHub repository and commit changes.

What is worth to know?

Before you submit your work you can create your thumbnail and short README file where you can leave your name that will be visible for everyone before inserting your styles to their project. Also remember that you don't need to style every single class that you find in the boilerplate.

If you will need help with anything you can use our group on FB where you can ask any questions related to GlueCodes Studio:

https://www.facebook.com/groups/gluecodesstudio

Just in case you missed it, here is our website:

https://www.glue.codes

And the GitHub repository:

https://github.com/gluecodes/gluecodes-ide/pull/66

52 responsive snippets to create a website for your project

Przemyslaw Michalak — Fri, 04 Jun 2021 10:34:57 +0000

Hi everyone. I made 52 responsive snippets that can help you to build website for your project, portfolio, commercial website or whatever you wish, since they are free. All of them are fully responsive and customizable so I want to quickly show you how to use them.

Edit their content

Each snippet comes with its own object JSON file that provides data to it. So it is pretty straight forward to change their copy. Remember that a lot of snippets have elements as cards that takes content from an array of objects. So to control amount of elements simply copy and paste or delete objects from the array. Have a look at the picture bellow.

export default () => ({
  getTitle: () => 'Nunquam consumere boreas',
  getDescription: () => 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
  getImage: () => ({
    src: 'https://via.placeholder.com/350',
    alt: 'image'
  }),
  getCallToAction: () => ({
    text: 'Sectams prarere!',
    target: '_self',
    href: 'https://www.glue.codes'
  }),
  getCards: () => [
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    },
    {
      title: 'Sectams prarere!',
      description: 'Cur frondator mori? Ire saepe ducunt ad noster rector. Elogium de peritus castor, magicae rumor.',
      link: {
        href: '#',
        target: '_self'
      }
    }
  ]
})

As you can see, we have function getCards that returns array with 3 objects and so snippet displays 3 cards. If you add extra or delete some of those objects you will get respectful amount of cards.

Styling

There is 2 ways to style your snippets.

Scoped CSS

Each snippet has its own dedicated CSS file that can be freely edited without worries of interfering with the rest of them. It is especially useful when you want to use the same snippet more than once on your website. You can make them look absolutely different using scoped CSS files.

Global Styles

Each widget is also connected to the global styles file that can edit all of the snippets at once to speed up your work when it comes to consistent design of your project. And that is possible thanks to...

Consistent naming

All snippets have consistent naming when it comes to their CSS classes or object JSON file. That significantly helps with changing their design and make it easy to learn how to change their content.

FREE to use

As I said right at the beginning, you can use them for free for what ever project you build. Even commercial. To get access to them visit my website.

Let's extract some juice - getting 90+ in Google Insights tool

Przemyslaw Michalak — Thu, 03 Jun 2021 18:22:28 +0000

Hi everyone. This article is an addition to the one I wrote previously, which can be found here. To make it short, I developed the first front-end Studio that uses HTML, CSS, and plain JS to create reactive web apps and allows to export code to JSX powered by SolidJS. Today, I want to show you how exported code looks, works and performs outside of the Studio. You can watch the video showcasing everything from this blog just here:

Example code

I used our website as an example code exported from the Studio. The reason is simple. You can always confirm everything you will see on YouTube or read in this blog.

HTML to JSX

As I mentioned before in order to develop reactive web apps in GlueCodes Studio all you need to know is HTML, CSS and plain JS. The tool will take care of the rest by generating code to JSX. We are constantly improving the exported code to make it easier to read and scale outside of the Studio if necessary. So you can still deliver web apps to your clients who want to scale project later on without our tool.

How fast is the end product?

Short answer - extremely. Obviously, still, a lot depends on the developer that is using the Studio exactly the same way as it would while using React or Angular. But Studio makes creating fast web apps significantly easier in a shorter amount of time. The exported code is not only well organised and can be minified, but you can also generate prerenders that will be displayed on the end user screen before JavaScript will be downloaded and injected to the browser. Our website, for example, scores around 80% on mobile in Google Insights and the tool points images (their size and format) as the main problem. We score over 95% on desktop devices. So I think that is a pretty 'decent' score for a tool that is still in Beta.

You can try out the Studio for free here:
https://www.glue.codes

And subscribe to our channel on YT:
https://www.youtube.com/channel/UCDtO8rCRAYyzM6pRXy39__A

Front-end Studio powered by SolidJS

Przemyslaw Michalak — Fri, 21 May 2021 17:12:50 +0000

I would like to showcase my project I've been working on for a last year. It's a Studio that has built in IDE, repository of Widgets, it's own meta-framework, it is powered by SolidJS and export code to clean JSX. That's only a small part of all features that we managed to implement so you can read more below or go straight to the video I uploaded on YouTube

SolidJS

First and most important - it runs SolidJS. When we started building first prototype a year ago we were using virtual-dom. Since the library seems to be abandoned and it's performance is not the greatest we decided to swap it with Solid just at the beginning of the year. That not only gave us huge performance boost in both - Studio and exported code, but also let us to implement more features for developers like UI Signals.

All you need is browser...

...and everything happens locally. The Studio not only stores your project on your hard drive to keep it safe but also transpile the code right on your PC which makes it fast since is not send to any cloud service before is displayed in...

The Live Preview

Setup-free and ready to go right at the start. Simply open the new tab with the Live Preview, drag it on a different screen and enjoy looking at all your changes while you type.

Implementation Assistant

Now let's deep down how the Studio actually makes developing web apps fast. Implementation Assistant scans your code while you type, and gives you in-context notifications about what needs to be done inside your project. When Implementation Assistant is triggered by developer, it's creating all necessary folders, files, glue code and places everything inside the project structure exposing only the file where you type your code to add new functionalities to your web app.

Widgets

Please, don't expect here simple dropdowns, buttons, inputs or god knows what other simple elements you can think of. Widgets are isolated UI pieces that lets you prototype simple landing pages or advanced administration panels in minutes. At the moment we developed over 70 of them, starting from simple block presenter going to advanced data tables and forms. All of it is installable inside your project within one click. You can edit their content by using simple object JSON and style them with scoped CSS or Global Styles (we also planning on opening the repository with pre-made global styles created by community). Of course they are fully responsive and their documentation can be found inside the Studio right before installation.

Reusable Slots

Navigations, footers, cookie consent notice, pop-up's - everything that you think should be reused on multiple pages can be developed in the reusable slot (also Widgets can be installed there) and reused by pasting single line of HTML:

<div gc-as="slot" gc-name="footer"></div>

HTML directives

Loops, conditionals, error presenters and more can be done using simple gc directives. That's definitely to wide subject to write more about it here, so I definitely make separate blog about it in close feature, but if you are curious - have a look at our docs

Styling

For all the Widgets, Slots or Reusable Slots the Studio creates separate CSS files that you can use to style parts of your web app without interfering with the rest of it. On the other hand you can use Global Styles to edit the whole app at once which help you to keep consistent design. Since scoped files have always priority over Global Styles you can create 10 header on your page, set their size, margins and paddings globally and change just color for each of them using scoped CSS.

Bootstrap and Font Awesome

Since those 2 libraries are very popular we decided to implement them inside the Studio. So you can use them right at the start without looking for their dependencies etc. If you are not a big fan of them, or you just working on a project that won't make a use out of them, no problem. You can easily delete them from the dependencies.

Exported code

The code is exported to clean and well organized JSX powered by SolidJS. It also comes with docker and webpack setup. You can deploy it straight to your hosting service or build it using terminal and keep developing outside the Studio

Yeah. That's just a small part of everything that we developed in the Studio, but I don't want to keep it too long. We'll definitely keep making new videos and blogs showing more details about specific features, but it is important for us to adjust to community. So any suggestions will be appreciated.

I'm leaving small video with presentation of the GlueCodes Studio to show you how everything described here works in practice.

GlueCodes Studio Presentation

You can also try out the Studio here:

www.glue.codes

Backend developers deserve better tools for frontend

Przemyslaw Michalak — Tue, 22 Dec 2020 11:11:04 +0000

I know there is plenty of backend developers who are either not passionate about creating frontend or don't have time to learn additional languages. But Web is constantly expanding and the demand for good developers is growing disproportionate to number of them. So sometimes all of us have to step up, go out of our comfort zone, and help the team deliver code in stack that we don't feel comfortable with. I asked on dev.to Facebook and Twitter what are your main issues when it comes to creating the frontend. And those are the main issues addressed by you:

1. Responsiveness
2. Browser compatibility
3. The need to learning extra programming languages
4. JavaScript itself
5. The overwhelming amount of libraries often not well documented or even abandoned
6. The App state management

Knowing that all of us are mostly facing the same problems over and over there had to be someone trying to solve at least some of them. And I personally think this is how we got to the age of 'drag and drop' tools. Sounds great. You start with some visual template, adding the necessary elements like buttons or paragraphs, resizing, filling some form responsible for its look and Voilà. We got our prototype. Yeah... if only that would be the case... Unfortunately it works great as long as you play by the rules of the tool that you are using. The first problem appears when you try to do something that the creators of the tool didn't expected you to do. We all know how crazy UI designers can be, right? So you are dragging and dropping new elements trying to implement everything that you see in the mock up and starting loosing control over the responsiveness or finding that its close to impossible to add certain functionalities. The other problem I personally have with platforms like that is the fact that I actually have to use a visual tool. I think that, we, developers who are spending dozen of hours on learning code deserve something better than Paint on steroids, letting us drag and drop boxes around the page and filling plenty of forms to make it come to life...

So a friend of mine, after months of developing the idea in his head, came up with something. Something that could potentially solve all these issues when it comes to making a frontend and make it a pleasure. This is how we started developing our own IDE. Principals were 'simple'. Make the tool that generates all the necessary glue code leaving the developers only with files that are important for displaying the content; lower down the need of using any code (HTML CSS JavaScript) to the minimum but in the same time leaving the full access to it. Also to get rid of necessity of styling the app or at least make it significantly easier for those who doesn't want to became a CSS Wizards. And allowing to save the clean code generated by the IDE leaving them with full access to it.

And here we go. A year later, we got everything that we wanted packed in fully automated IDE. Let me go a bit deeper in what we achieved and briefly explain our approach to each solution.

1. Responsiveness

We created a data base of widgets - ready to go UI pieces that are fully responsive from the start and using loaded from template CSS to match the whole web app styles. The widgets are using simple JSON object files to input their content or edit their models in case of forms and more advanced Widgets. They also come with all necessary pre made functions to provide things as validation etc. but as mentioned before - they are always accessible to you in case you will have to edit it.

2. Browser compatibility

We use Babel to transpile modern JavaScript to its older iteration to automatically help with cross browsers/devices compatibility

3. The need of learning extra programming languages

In a perfect scenario all you will have to know is how to use JSON files. But we all know that's almost never the case. You will still need to use some CSS, HTML and JavaScript to make custom adjustments here and there. But we made it as simple as possible. The whole web app is split on slots with installed Widgets. That lets the IDE to split the layout of the web app in single UI pieces without interfering with the whole app design. It also makes naming much easier since you can use the same names for classes between different slots or variables in functions. All the necessary JavaScript that comes with each widget is well named and organised. So if you want to change the way of the validating form, you have to find a premade function and simply editing its regEx.

Here is a video showing how the IDE splits the CSS between multiple Widgets and how easy it is to edit JavaScript.

https://www.youtube.com/watch?v=DSWFKj3STJY&t=327s

4. JavaScript itself

Yes. JavaScript can easily give a headache. That's why we took care of all necessary functions making Widgets and web app fully functional. That lowers down the need of using it or at least significantly lowers the cases where you will have to do it. The IDE works for you in the background generating all the files, organising its structure, generating the glue code and gluing everything together. All that is left to do are simple providers and commands; the functions responsible for providing data to the app or making operations to the data.

5. The overwhelming amount of libraries often not well documented or even abandoned

The app state management, templates, Widgets, Bootstrap, Font Awesome and much more are already built in. Although we wanted to leave our tool as flexible as possible and for you to have the possibility to use outside libraries there is really no need for it. We are constantly adding features and keep them as simple as we can so that the IDE will be the full solution to create the whole web app.

6. The App state management

We took care of it. The IDE splits JavaScript in simple commands and providers and built in framework takes care of it. You won't have to worry about how it works - it just will. That's the job of the IDE, to sort everything out for you. All you need to do is provide the data. The IDE and its code generator will know how to make it work.

It sounds like a great solution, but there are more things that wouldn't let us call our project complete. Other things that we already implemented are:

Live preview
Implementation Assistant - 'AI' that notifies you about any changes you need to do in order to make the app functional
full access to the code - you can save all the code at any time and open it in your own favourite code editor. You will get access to all of it and make any changes you want to
Docker - The downloaded code is set up and ready to run in the docker container. You also have access to all the setting files so you can create your own configuration if you want to
flat file structure - as mentioned before. The IDE takes care of the whole file structure and glue codes, leaving you with the simple file pipe line instead of a nested tree

There are much more functionalities but I don't want to keep you longer than necessary because you can try and test all of that yourself.

Getting to the point, did we create the perfect solution for all developers problems? Well. No. The IDE is still in the alpha stage. It's developed only by 2 people and it took us a year to get to this point. This is why I'm making this blog. We need the community to help us. We need people to verify the idea and help us improve it as much as possible. So if you like the idea just follow us on the most convenient social media channel for you. Also feel free to test the IDE yourself and give us your feedback.

Here is how to access the IDE. In order to use it we only ask about a GitHub login. No bank card registrations, no email verifications:

https://ide.glue.codes

Our website:

https://www.glue.codes

YouTube with some tutorials (yeah, its not many of them, but we are working on it):

https://www.youtube.com/channel/UCDtO8rCRAYyzM6pRXy39__A?view_as=subscriber

You can also find as on LinkedIn and Facebook and my personal account on Twitter.

What makes frontend so miserable for backend developers?

Przemyslaw Michalak — Thu, 17 Dec 2020 11:27:36 +0000

Hi to all backend developers. As in the title, I would like to ask you what makes frontend so unpleasant to some backend developers? I will appreciate any honest answers no matter how harsh they are.

Side project which became a mind-blowing automated IDE

Przemyslaw Michalak — Sat, 29 Aug 2020 14:05:25 +0000

Hello!

I would love to showcase my project that I have spent the last 6 months of work on. I hope my hard work will not only help beginners to start coding fully reactive web apps, but also more advanced developers/freelancers deliver projects faster to clients.

I would like to point out that using my project is FREE and it does not need any registration or payments after the trial period.
The whole idea is pretty complex and i could talk about it for hours but long story short - it is IDE packed with automation tools and built in Framework connected with Widgets repository (over 60 widgets at the moment).

My aim is 'simple', lower the tech barrier for beginners and significantly speed up the work of more advanced web developers.

So how does it work?

The IDE is connected with the Widget repository that you can install within a couple of clicks inside your project. It builds prototypes of your web app in a matter of minutes. The Code editor is splitting HTML on smaller parts (slots) and generating isolated CSS files allowing you to edit specific parts of your app without interfering with the rest of it. It's not only helping you find what you need faster in larger projects, but it also makes your code clean and easy to edit. Another plus of this solution is that it eliminates the problem of naming classes. As long as you follow the guidelines of The Framework you can name all 'headers' in the same way, and you will still be able to edit just the one that you would like to. The IDE also generates all the necessary glue code while you create new pages or JavaScript files leaving you with a flat file structure. Another feature is the Reusable Slot', no more repetition. You can implement nav bars, footers, cookie consent notices etc. with just one line of code.

These are just a couple of the features but I don't want to stop you any longer. Just go and test it yourself.
Here is the project website:

https://www.glue.codes

Here is a repository with a framework that is built in the IDE. Feel free to leave any comments and suggestions at:

https://github.com/gluecodes/gluecodes-framework

New IDE and JS framework. Demo time!

Przemyslaw Michalak — Mon, 01 Jun 2020 08:53:15 +0000

For those who missed the introduction.

Hi guys. Today I would like to show you why we are so excited about GC IDE. We decide to make every day small showcases of functionalities on live demo. Just follow code comments to discover what we prepared.

So here it is - the "Implementation Assistant". Just add an attribute directive to HTML element or reference "actions" variable to see how IDE will auto-generate all necessary glue code and help you to keep track on changes that needs to be made.

Let me know if this form of small "tutorials" is interesting for you to discover more about the IDE, or can you think of something else?

Chekout today's demo

and our Github

New IDE compatible with new JS framework. Gimme feedback :D

Przemyslaw Michalak — Sat, 30 May 2020 09:55:50 +0000

Hey guys. We finally released a demo of our IDE. What is amazing about it is the ecosystem that IDE works in. It's been created with a framework in mind that has been created with an IDE in mind. Such a inception 😁

IDE like this can automate all repeatable processes.

No more copy and paste of the same glue code to put everything together. Now You have a tool that will do everything for you.
No more problems with organising your project. Now all of it is done by the IDE.
No more looking for missing functionalities. Whenever you add new HTML attribute 'implementation assistant' will point what is missing.
No more problems with naming data. Framework and IDE will help you do it.

There is much much more to it, but I want to keep this post short. We don't want to overwhelm you with too much information, but if you are very curious you will find out more on our website.

We really believe this is the next step for frontend developers. One aid including all the necessary tools. But that's our opinion. What matters more right now is that it's yours! Please let me know what you think about the whole idea?

Please keep in mind that is only a demo. It's not fully functional just yet. So if you like the idea follow us on Github and social media to stay up to date with all changes we make.

Here it is, a demo of IDE:
Demo

Here is our framework repository: Framework

Our website if you want to find out more:
Our website