Develop Reference

Links to element IDs not working in Safari + React

I am developing a simple single-page website with React.
On top of the page I have a menu bar, with links to certain parts of the page:
<li>About us</li>
<li>Services</li>
<li>Team</li>
The parts of my page (not necessarily components) have the corresponding ID attribute, eg:
...
<div id="about" className="rn-about-area ptb--120 bg_color--5">
... <CONTENT>
</div>
When a link in the menu bar gets clicked, the page should jump to the corresponding part of the page. The problem: The links are working in Chrome and Firefox, but not in Safari.
What I tried so far based on similar StackOverflow questions (that are over ten years old):
Omitting the / before the #anchor:
<li>About us</li>
Defining the absolute URL path to each anchor:
<li>About us</li>
Implementing methods like scrollTo() or scrollIntoView()
Wrapping the anchor-elements in React components
Checking for redirects that may cause problems using https://www.redirect-checker.org/index.php
but nothing works.
Is there any other way I could try? If not, my only idea is to destructure the page into seperate pages, so I can link them without using anchors.
EDIT: There might be an issue with React and the way the website is set up, because I checked a similar page, created without React, and there the first mentioned approach works, also in Safari.

It was in fact a React problem:
Using this package it finally works now!

How do I build the "composition" of components in the app?

The app has 2 levels of users, a regular user and an admin. You need to make a header component in which some information is the same for everyone, and some - only for admins.
There is a basic header component :
<div class="user-header>
<img src="logo">
<div class="user-header__links>"
...
</div>
</div>
'user-header__links' contains links, some of which should only be shown to admins. Also, the header must still have dropdown, that is available only to admins.
I see 3 possible solutions:
Make 2 different components, i.e. I have UserHeader for the user, and copy this code to a new component, edit as necessary and get AdminHeader, adding the necessary elements and links
in UserHeader, make props / slots for throwing additional content into it, and then adminHeader will look something like this :
<UserHeader links={some additional links for admins}>
<AdminDropdown/>
</UserHeader/>
Leave only AppHeader component and put elements in it for both users and admins, and just check the "admin" elements and show them if the user is also an admin.
I understand that in principle all the options are working, but to come to an understanding of which option is more convenient and practical somehow does not work. Also, if there are any articles regarding these points, I will be grateful for the links.

I'd say that the option 1 is just lots of unnecessary boilerplate, but only you can choose between 2 and 3, as it all depends on your proj structure, implementations and so on...
As with everything, app architecture is a lot about taste... I, personally, very much like the idea of "minimalism" here.

I think Conditional Rendering would help you solve this problem - here's React's doc page for it: https://reactjs.org/docs/conditional-rendering.html

Bootstrap tab is working but the tab content is not showing

I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/

You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.

In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.

Ionic basics - which elements to use for a basic app?

The ionic documentation is very frustrating. First of all I can't install it via the method described on the site, on my Mac or PC I get a "Your version of Cordova is too old. Please reinstall." error and despite following instructions I can't fix it.
Tbh I'm not a huge fan of installing things on the command line if I can just download the files (a la jQuery mobile) and get on with it. So I got the latest Ionic beta and I've been trying to build some tests with it. The todo app on the Ionic site pretty much works (though the project list text is white when you Phonegap Build it).
Anyway, my question is this: Which elements am I supposed to use for building - the CSS ones or the JavaScript ones?
I'm hoping I'm missing something really obvious but I've used the docs here: http://ionicframework.com/docs/components/ and here: http://ionicframework.com/docs/api/
Let's take headers. The CSS page says you can build them like this:
<div class="bar bar-header bar-light">
<h1 class="title">bar-light</h1>
</div>
and the JavaScript page says like this:
<ion-header-bar class="bar-light">
<h1 class="title">bar-light</h1>
</ion-header-bar>
Both work for me, locally at least. So which is it? The CSS elements aren't all mirrored in the Javascript page. I'm just baffled by this and I don't want to use the slower, less efficient or less flexible method.

Essentially, Ionic is both a css framework and a javascript framework.
You could theoretically use just the css class and build an app that way.
But since Ionic is built on top of angular, it allows us to create simple elements that already have those classes applied to them. So let's look at an example.
Classes
<ul class="list>
<li class="item" ng-repeat="item in items">
{{item.name}}
</li>
<ul>
Directive
<ion-list>
<ion-item ng-repeat="item in items">
{{item.name}}
</ion-item>
<ion-list>
Both of these two blocks will render the exact same thing. A element with a class of list and some items inside that with a class of item.
The difference is, if you wanted to add some functionality with the lists (reorder the items, swipe option buttons) you would want to use the directives. Because we're using directives, we can use the pre-defined functionality and not have to have a user wire that logic up themselves (like you would for a jQuery plugin).
Now this example is quite tame, but you can imagine this in the context of our Sidemenu component. While you could technically build out the sidemenu using classes, you would have to wire up the logic yourself, which is not ideal.
Hopefully this explains things a bit better.

You can have pretty good examples from website codepen.io/ionic/
Always try to use the latest versions of library (as of now it is 0.9 beta), latest version are more faster and efficient.
I have used Phonegap build, and referred only ionic library and css files, it was cool.

You can use either the JS or the CSS method. I personally prefer the CSS method.
You do not need to use the CLI to install Ionic. Simply download all of the files here on Ionic's GitHub to your project and use the references here from Ionic's guide in your index.html. Your app will be able to use all of Ionic and Angular.js!

AngularJS: Correct place for global menu provider, service or rootScope?

I'm new to AngularJS, and - since it is quite complex and the approach is new for me, I'm a bit confused.
I'm from "classic" background (server-side template languages [like Yii, django, Smarty] + some jQuery to make things a bit dynamic).
Let's say I have a menu bar (Bootstrap NavBar, or anything else) - an element which lives outside of the main page content, like this:
<body>
<div id="menubar">
... <!-- menu content -->
</div>
<div class="container">
<div ng-view></div>
</div>
</body>
Now I'd like to make the menu a bit dynamic, i.e add or remove some menu items inside of the controller.
Using the server side frameworks & their templating systems, for example Yii - I'd simply have a BaseController class with $menuItems variable, and render it each time in the menuBar, while all the controllers would inherit from BaseController so they could modify items.
Also, I need a function which handles the searchForm located inside menu bar. Where should it live?
What is Angular way for something like this? So far I've been thinking of creating custom service or extending $rootScope.

UPDATE: I would encourage you to take a look at John Papa's ng-demoes and style-guide as say second step in adopting angular.js.
Check out examples angular.js team posted recently, to show full application.
github.com/IgorMinar/foodme
github.com/GoogleChrome/wReader-app
github.com/CaryLandholt/AngularFun
Pay attention to the following features angular gives you
ngView, ngInclude directives
templateUrl property of directive
'=', '&','#' scope bindings in directives
I belive it is going be a good approach to have combination of a service and a directive for rendering menu the way you described it.