Any Angular2 Meteor Material working example? - meteor

Back in the day I successfully created an app with meteor and blaze, and applied material design to it.
Needless to say, I was very excited meteor and angular were getting paired up, so a few weeks ago I finally got around to giving it a try.
But, no matter what I try, I simply cannot get Material UI to work with angular2-meteor.
I cloned and tried https://github.com/Urigo/meteor-angular2.0-socially just this morning, can't get it to work - no matter how many errors I fix, it still finds new ones. Now it claims it cannot find the scss and html files, which are right there, even the EDA finds it with ctrl+click.....
I cloned and tried https://github.com/0mkara/meteor-ng-material-baby - same thing, endless errors, can't get it to work...
To make the long story short, is there any tutorial or clonable package which works with meteor angular2 material?

Related

Does MUI require all pages to be CSR when using the new app directory in NextJS 13

I just started my first NextJS app and followed this guide to add MUI. The only difference I can see is that I'm using the experimental app directory of NextJS 13.
When following the guide, I get a server error of Uncaught TypeError: React.createContext is not a function which is basically rather clear, as the context API is only available to client components and can therefore rather easily be "solved" by placing the 'use client'; directory on top of the erroneous component.
Unfortunately it seems like this is required for every component which uses any part of MUI. E.g. I'd also have to 'use client;' in my root layout.tsx if I'd like to wrap my whole app with the ThemeProvider etc.
My questions are the following:
Do I really have to 'use client;' everywhere I'd like to use MUI or is there some other way around?
If 1 is true: Doesn't this make MUI completely useless in combination with NextJS as it prevents the usage of all the SSR, SSG, ISR goodness etc or do I have some kind of misunderstanding here (I'm very new to NextJS in general...)?
If 1 & 2 are true: Are there other recommendable UI frameworks or libraries which bring a good set of "ready to use" (and out of the box good looking) controls, components etc. that work better with NextJS without those limitations?
FYI, I have the following versions installed ATM:
next#13.0.6
#mui/material#5.10.17
Update
I should have read the NextJS beta docs more careful before posting the question:
It seams like there's no way around this ATM as stated here in the docs and again here in the a ticket.
So this answers question 1, as there doesn't seem to be a way around 'use client'; for now.
However, I'd still really appreciate answers and opinions on questions 2 & 3.

Slow app loading using NextJs and styled components

I am working on a 2-year-old project that uses TS, Nextjs and styled components. We have around 120 components, most of them using dynamic styling using interpolation functions, and made sure we followed all the instructions outlined both in the NextJS and styled-components documentation in order to support SSR, such as this one (creating a custom document file, and declaring styled components outside the class/functional component itself).
However, we've been having a poor development experience, especially after compiling the project and loading the app onto the browser for the first time. Almost every page takes in average more than 30s to load (the amount of time is really inconsistent though, after many reloads the least I could get was roughly 15s).
After running the profiler many times, I noticed there was a really high number of calls to the insertRule and insertBefore functions from the styled components library. (green and bisque color at the bottom of the image). Sometimes adding up to a staggering 40+s of scripting time.
I am not quite sure if this is expected in dev mode, and we can put up with this for now since this happens only when we reload the page directly. However we have the feeling that this is probably an error in our implementation or configuration. So far, I have not found anything similar to this situation except for github issues closed 2 years ago and performance issues on styled-components already addressed as well.
Is there a way to improve this loading time?
NOTE I am not posting code snippets just yet since I am not sure what files could be relevant. If you need to take a look at specific files let me know and I will be more than happy to share them with you.
EDIT I left the project around 1 month ago and I can no longer provide code snippets nor give further updates on this issue. I am leaving this question here anyway in case someone else finds it useful or comes up with a good solution (for the workaround we took, please see comments below).

How to add Nametags to a Multi-user WebVR in A-frame

I'm building a multi-user experience in A-frame, I'm very new to coding and A-frame, so I started the project remixing the networked audio (https://glitch.com/~networked-aframe-audio) and using it as base to build the environment. I wanted to add nametags to each user as well, so seeing that this (https://glitch.com/~naf-nametags) has most of the same code than the audio project, I tried taking the avatar template and script parts missing and pasting it in my code. It doesn't work, but even if I remix the naf-nametags project and add a simple cube to the scene, it stops working. I tried for a couple days to understand why, by I don't seem to find the answer.
Sorry if it's the stupidest question ever, any help is greatly appreciated!

No content shows up after struggling with post Meteor 0.9.0.1 update Bootstrap 3 with Less

I thought I could just install Bootstrap 3 with Less into my Meteor app real quick and move on but it's been really problematic. I'm still just learning Meteor.
I added it with
meteor add less
meteor add simison:bootstrap3-less
Then I made a file imports.less in my {app home}/client/styles/ directory. In this file I put:
#import "/packages/bootstrap3-less/bootstrap.import.less";
#import "/packages/bootstrap3-less/lib/less/theme.import.less";
But apparently that no longer works since they updated Meteor's package manager. So I followed the directions on the github issues thread(https://github.com/simison/bootstrap3-less/issues/30). And that didn't really work how they said either. I just kept getting that the compiler couldn't find the two files. Finally Meteor stopped erroring when I changed it to this:
#import "../css/0-bootstrap3-less/lib/less/bootstrap.import.less";
#import "../css/0-bootstrap3-less/lib/less/theme.import.less";
Only now when the page loads in the browser it's just a blank white screen. I didn't change the html at all. Before I started doing this I had a form and h1 line there working(but plain and ugly). I made my form using aldeed's quickform which uses bootstrap3 by default. I've used bootstrap before but never with less. I thought it would be a good time to learn a bit about it.
Anyone have any clue why not even a line of text will show up now?
Note:
In defense of me asking a question since anytime I do I get clobbered by everyone and end up having my question closed within about 5 seconds. Yes there are very similar questions around on SO but I think only ones Sept 2014 or later would be valid.
It seems like this is the only relevant one from after the update: https://stackoverflow.com/questions/25655746/meteor-0-9-0-1-w-bootstrap3-less-not-finding-less-files Since I'm not getting the compiler errors anymore, which I think means it's finding the files now, I'm not sure if I'm still having the same problem as this question or if it's different. I don't have enough rep to comment on that question but it seems like the github issue thread they linked to never really comes to a resolution.
At this point I'm not even sure if it's an issue with me not understanding Meteor or an issue with me not understanding how to use Bootstrap with Less.
As far as i understood you are using simison:bootstrap3-less with Meteor 0.9.x. The README on github tells you:
NOTE: This package was good for Meteor 0.6.x-0.8.x and with changes in
Meteor 0.9.x the method this package uses isn't working anymore.
Notice that the README has been changed since this question was asked.
For Meteor 0.9.x you should use Meteor 0.9.x nemo64:bootstrap less

XCode 4 breakpoints not breaking at correct line

My breakpoints have stopped working properly in the latest XCode 4 release. With no change to the project settings, the breakpoints no longer break at the line they are set.
For instance, in one function I can set a breakpoint anywhere within it's body, but the code will always break at the last line of the function.
In another instance, I can set a breakpoint anywhere in one function and the code will break at a line in the middle of a different function in the same file! Tracing through after the break shows that it did break in the wrong place and it's not just a file / debugger sync issue.
I have no idea why this has started. It did however seem to start on new breakpoints while old ones worked. Any new breakpoints I add break in the wrong place. And recently, some files now don't even break at all! I can only assume the breakpoint is so wrong it's moved into code that's not called. I have done numerous internet searches and forum searches for this problem, and although I have found people with similar issues, there was either no solution or the solution listed (rebooting device, swapping debug output, turning off optimization etc.) haven't worked for me.
It is worth mentioninig I'm mostly coding in C++ using .mm files. For the past year of development in XCode 3, and for the last few months in XCode 4 things have been fine! I have debug set up correctly. No optimization on a debug run, no dead code stripping and I'm using the LLVM compiler 2.0 with DWARD with dSYM debug file. However, changing these values makes no difference.
Please help, it's driving me mad!!
An update to this. It's started happening again on a brand new machine with a fresh Lion and xcode install. The whole editor is out of whack. Example below of the errors appearing on the wrong lines.
From what I've read all around, Xcode tend to get confused with breakpoints and the way to get rid of the out-of-sync problem is to clean the "Derived Data"; two ways of cleaning it so far I've found (instructions are valid for Xcode 4.x) :
a) go in the organiser, under the Projects, choose your project and hit that delete on the Derived Data
or
b) go in the Product menu, hold the ALT button on the keyboard and observe that the menu are changing... so the clean transform to "Clean Build Folder..."
With-in "Build Settings" under the project target change the "Optimization Level" for "Debug" to "None".
I found that this fixed the issue for me.
I have fixed this, although I haven't found the root cause.
I removed the references from the project for the files that were not working with breakpoints. I then did a full clean and went into the folders and deleted any build and temporary data. I then opened the project bundle and deleted all data except for the project file itself. I then compiled so it threw up errors due to the missing files. I then put the files back in the project.
Now, the exact same files work fine with breakpoints!
No idea why but happy it's fixed.
Have you cleaned your targets? Shift-Cmd-K.
This started happening to me after I upgraded to XCode 4. I just deleted all breakpoints, did a clean, then re-added my breakpoints. Seems to work OK now.
I have figured out why this happens now. As mentioned in one of the replies you can fix it by deleting the derived data. This will always fix the problem. The editor for some reason loses it's relationship between the source code and the markup of the code it uses to cross reference breakpoints and errors etc. Deleting the derived data forces it to recreate this.
I believe that this only happens with files using C or C++ code. Apple seem to ignore C++ developers on iOS. I know a lot of professional game developers and every single one uses C++ to write games. Apple's lack of support is annoying.

Resources